/*
 * Holeedays — système de design (maquette Claude Design « Dashboard v3 », Bento).
 *
 * Règles :
 *  - couleurs : EXACTEMENT celles de la maquette v3, via les variables ci-dessous ;
 *  - pas de style en ligne dans les vues (CSP stricte) : une classe par usage ;
 *  - composants Blade correspondants dans resources/views/components.
 */

/* ---------- Police (auto-hébergée, licence OFL : fonts/GEIST-LICENSE.txt) ---------- */
@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ---------- Jetons : valeurs IDENTIQUES à la maquette v3 (variations/bento-v3.jsx) ----------
 * Ne pas « ajuster » une teinte : toute couleur vient de la maquette.
 * Thème clair par défaut (comme la v3) ; sombre uniquement si l'utilisateur le choisit.
 */
:root {
  color-scheme: light;
  --font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* Variables de la v3, thème clair */
  --bg: #FBFAF5; --surface: #ffffff; --surface-2: #FBFAF5; --surface-3: #F2EFE6;
  --border: #ECEAE3; --border-card: #ECECE6; --hair: #F2F0EB;
  --text: #1A1A1F; --soft: #4A4A45; --muted: #74746C;
  --rail-bg: #FFFFFF; --row-hover: #F7F5EE; --accent-soft: #EFEBFF; --revborder: #1A1A1F;
  --lav-bg: #E8E3FF; --lav-bd: #DDD3FF; --lav-tx: #3A2F9F; --lav-num: #241C63; --lav-accent: #5C4FE8; --lav-track: rgba(255,255,255,.6);
  --peach-bg: #FFE3D2; --peach-bd: #FBD2BB; --peach-tx: #9A4218; --peach-num: #6E2E12;
  --mint-bg: #D9F2E2; --mint-bd: #C5E9D2; --mint-tx: #0F5B2C; --mint-num: #0C4A24;
  --cream-bg: #F5EFDD; --cream-bd: #EAE2C8; --cream-tx: #3A3527; --cream-tx2: #7C7259; --cream-tx3: #7C7259; --cream-inner: #ffffff; --cream-inner-bd: #ECECE6;
  --chip-bg: #ffffff; --ghost-bg: #ffffff; --ghost-bd: #DDD3FF; --ghost-tx: #1A1A1F;

  /* Couleurs écrites en dur dans la v3 (identiques dans les deux thèmes) */
  --accent: #5B4FE5;          /* liens, barre de progression, anneau, badge « en cours » */
  --accent-strong: #3A2F9F;   /* liens au survol */
  --ink: #1A1A1F;             /* bouton principal, carte « Revenu », infobulles, menu actif */
  --ink-label: #A6A6B0; --ink-dim: #7C7C75; --ink-bar: #3A3A40; --ink-line: #2A2A2F; --ink-off: #9B9B92;
  --lilac: #C7BFFF;           /* barre survolée, période active, bord au survol */
  --lilac-2: #B8AEFF; --lilac-3: #E4E0F9;
  --in-bg: #EFEBFF; --in-tx: #4B3DD9;      /* arrivées */
  --out-bg: #FFE9DC; --out-tx: #C25A2C;    /* départs */
  --out-dot: #FFB89A;
  --ok-bg: #DFF5E6; --ok-tx: #0F5B2C; --ok-dot: #1F7A3D;
  --vip-bg: #F5EFDD; --vip-tx: #7C6A1E;
  --alarm: #E4573D;           /* pastilles de notification */

  /* États (fond / bord / texte), pour que chaque couleur ait sa version sombre */
  --accent-text: #4B3DD9;
  --danger-bg: #FDE8E6; --danger-bd: #F9CFCA; --danger-tx: #B42318;
  --warn-bg: #FDF3D7; --warn-bd: #F0E3B8; --warn-tx: #8A6100; --warn-line: #D9B64E;
  --sky-bg: #E3F0FA; --sky-bg-2: #D9EBF8; --sky-bd: #C5DFF1; --sky-tx: #1D5A8A; --sky-num: #123E61; --sky-accent: #2F7FBF;
  --due-bg: #FFF1E8; --note-bg: #FFFBEF; --today-col: #F4F2FF; --mint-dot: #8ED8AB;
  --glass: rgba(255,255,255,.72);     /* pastille claire posée sur une couleur */
  /* Boutons d’action importants (nouvelle réservation, continuer, valider, encaisser…) */
  --primary: #5B4FE5; --primary-hover: #4A3ED3; --on-primary: #fff;
  --go: #1F8A4C; --go-hover: #187440; --sky-solid: #2F7FBF; --sky-solid-hover: #276CA3;
  --todo-dot: #E8794A;

  --r-card: 26px; --r-ctl: 13px; --r-row: 12px;
  --shadow-hover: 0 12px 32px rgba(26,26,31,.07);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Thème sombre : graphite neutre (sans teinte violette), contrastes doux pour une journée
 * entière d'écran, couleurs d'état désaturées. Toutes les couleurs de l'interface passent
 * par ces variables : aucune règle ne doit écrire une couleur en dur. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111215; --surface: #18191D; --surface-2: #1C1D22; --surface-3: #24252B;
  --border: #2C2E35; --border-card: #25262C; --hair: #212228;
  --text: #ECECF0; --soft: #B9BAC2; --muted: #8B8D96;
  --rail-bg: #141518; --row-hover: #1F2025; --accent-soft: #26263A; --revborder: #383A43;
  --lav-bg: #28283D; --lav-bd: #36345F; --lav-tx: #B9B3FF; --lav-num: #DCD8FF; --lav-accent: #A49DFF; --lav-track: rgba(255,255,255,.10);
  --peach-bg: #322724; --peach-bd: #48342A; --peach-tx: #F0A884; --peach-num: #F7C2A6;
  --mint-bg: #1E2D28; --mint-bd: #233D31; --mint-tx: #7FD3A0; --mint-num: #A3E3BC;
  --cream-bg: #2B2926; --cream-bd: #3E3A2F; --cream-tx: #E6DCBE; --cream-tx2: #BDB08A; --cream-tx3: #958A6C; --cream-inner: #1C1D22; --cream-inner-bd: #2C2E35;
  --chip-bg: rgba(255,255,255,.07); --ghost-bg: rgba(255,255,255,.04); --ghost-bd: #34363E; --ghost-tx: #ECECF0;

  --accent: #8A82FF; --accent-strong: #B5AFFF; --accent-text: #ABA4FF;
  --ink: #2E3038; --ink-label: #9A9CA6; --ink-dim: #8B8D96; --ink-bar: #3E4049; --ink-line: #383A43; --ink-off: #7E808A;
  --lilac: #4E478F; --lilac-2: #6A62C4; --lilac-3: #2A2850;
  --in-bg: #26263A; --in-tx: #B5AFFF;
  --out-bg: #322724; --out-tx: #F2A580; --out-dot: #C9785A;
  --ok-bg: #1E2D28; --ok-tx: #7FD3A0; --ok-dot: #4FB97C;
  --vip-bg: #2B2926; --vip-tx: #E2CF8F;
  --alarm: #F0705C;
  --danger-bg: #342022; --danger-bd: #542828; --danger-tx: #FF8F85;
  --warn-bg: #312C21; --warn-bd: #4B4025; --warn-tx: #E9C46A; --warn-line: #B8933A;
  --sky-bg: #1F2B3B; --sky-bg-2: #212F40; --sky-bd: #273C51; --sky-tx: #8EC3EC; --sky-num: #BFDDF5; --sky-accent: #5AA6E0;
  --due-bg: #2D2522; --note-bg: #262420; --today-col: #1F1F2C; --mint-dot: #4FB97C;
  --glass: rgba(255,255,255,.10);
  --primary: #6C63EE; --primary-hover: #7B73F4; --on-primary: #fff;
  --go: #2F9E62; --go-hover: #36AD6C; --sky-solid: #3D88C7; --sky-solid-hover: #4895D4;
  --todo-dot: #D9774E;
  --shadow-hover: 0 12px 32px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; transition: background-color .35s, color .35s; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { flex-shrink: 0; display: block; }

/* ---------- Coque : menu latéral + contenu ---------- */
.shell { display: flex; min-height: 100vh; }

.rail { position: sticky; top: 0; height: 100vh; width: 76px; flex-shrink: 0; display: flex; flex-direction: column; padding: 18px 16px; border-right: 1px solid var(--border); background: var(--rail-bg); z-index: 5; transition: width .28s var(--ease), background-color .35s, border-color .35s; }
.rail[data-open] { width: 248px; }
.rail-label { white-space: nowrap; overflow: hidden; opacity: 0; max-width: 0; transition: opacity .18s, max-width .28s; }
.rail[data-open] .rail-label { opacity: 1; max-width: 180px; }
.rail-head { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 10px; color: var(--text); }
.rail-head .rail-label { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.logo { width: 44px; height: 44px; border-radius: 16px; flex-shrink: 0; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800; letter-spacing: -0.04em; box-shadow: 0 4px 14px rgba(91,79,229,.18); }
.logo.lg { width: 52px; height: 52px; border-radius: 18px; font-size: 21px; }

.rail-toggle { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 13px; margin-bottom: 14px; border-radius: 11px; border: 1px dashed var(--border); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 13.5px; position: relative; transition: background .15s, color .15s, border-color .15s; }
.rail-toggle:hover { background: var(--surface-3); color: var(--text); border-color: transparent; }
.rail:not([data-open]) .rail-toggle { gap: 0; }
.rail-toggle .when-open { display: none; }
.rail[data-open] .rail-toggle .when-open { display: block; }
.rail[data-open] .rail-toggle .when-closed { display: none; }

.rail-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail-nav::-webkit-scrollbar { display: none; }
.rail-group { display: flex; flex-direction: column; gap: 3px; }
.rail-group + .rail-group { margin-top: 14px; }
.rail-section { height: 22px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; position: relative; }
.rail:not([data-open]) .rail-section::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--border); }

.nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 14px; border: 0; background: transparent; color: var(--soft); cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500; position: relative; text-align: left; width: 100%; transition: background .15s, color .15s, transform .15s; }
.rail:not([data-open]) .nav-item { gap: 0; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item:active { transform: scale(.97); }
.nav-item[aria-current="page"] { background: var(--text); color: var(--bg); }
:root[data-theme="dark"] .nav-item[aria-current="page"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="dark"] .nav-item[aria-current="page"] svg { color: var(--accent); }
.nav-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--alarm); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.rail:not([data-open]) .nav-count { position: absolute; top: 4px; right: 3px; min-width: 15px; height: 15px; font-size: 10.5px; border: 2px solid var(--rail-bg); }

.tip { position: absolute; left: 56px; top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 20; }
.rail[data-open] .tip { display: none; }
.nav-item:hover .tip, .nav-item:focus-visible .tip, .rail-toggle:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.theme-switch { display: flex; gap: 3px; padding: 3px; margin: 12px 0 10px; border-radius: 13px; background: var(--surface-3); }
.rail:not([data-open]) .theme-switch { flex-direction: column; }
.theme-switch button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; transition: background .2s, color .2s; }
.rail:not([data-open]) .theme-switch button { gap: 0; }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.profile { display: flex; align-items: center; gap: 10px; padding: 3px; border-radius: 14px; color: var(--text); position: relative; }
.profile:hover { background: var(--surface-3); color: var(--text); }
.profile-text { display: flex; flex-direction: column; line-height: 1.2; }
.profile-text strong { font-size: 14px; font-weight: 500; }
.profile-text span { font-size: 12px; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; flex-shrink: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; container-name: main; }

/* ---------- Barre du haut ---------- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 22px 32px 16px; }
.topbar-title { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.eyebrow { font-size: 13px; color: var(--muted); letter-spacing: .08em; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.topbar h1 { margin-top: 4px; font-size: 30px; letter-spacing: -0.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.site-switch { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; transition: background-color .35s, border-color .35s; }
.site-switch:hover { color: var(--text); border-color: var(--lilac); }
.site-switch-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.content { padding: 0 32px 32px; }
.content-narrow { max-width: 880px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid transparent; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(91,79,229,.28); }
.btn-ghost { background: var(--ghost-bg); color: var(--ghost-tx); border-color: var(--ghost-bd); }
.btn-ghost:hover { color: var(--ghost-tx); background: var(--surface-3); }
.btn-danger { background: var(--alarm); color: #fff; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.btn-link { background: transparent; border: 0; padding: 10px; height: auto; color: var(--accent); border-radius: 12px; }
.btn-link:hover { background: var(--accent-soft); }
.btn-plain { background: none; border: 0; padding: 0; height: auto; color: inherit; font: inherit; cursor: pointer; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--soft); cursor: pointer; transition: transform .15s, background .15s, border-color .35s; }
.icon-btn:hover { background: var(--surface-3); transform: translateY(-1px); }

/* ---------- Cartes ---------- */
.card { padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border-card); display: flex; flex-direction: column; min-width: 0; transition: transform .2s var(--ease), box-shadow .2s, background-color .35s, border-color .35s; }
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card + .card { margin-top: 14px; }
.bento .card + .card { margin-top: 0; }
.card-lg { padding: 26px; }
.card.tone-lavender { background: var(--lav-bg); border-color: var(--lav-bd); color: var(--lav-tx); }
.card.tone-peach { background: var(--peach-bg); border-color: var(--peach-bd); color: var(--peach-tx); }
.card.tone-mint { background: var(--mint-bg); border-color: var(--mint-bd); color: var(--mint-tx); }
.card.tone-cream { background: var(--cream-bg); border-color: var(--cream-bd); color: var(--cream-tx); }
.card.tone-ink { background: var(--ink); border-color: var(--revborder); color: #fff; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.card-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; min-width: 0; white-space: nowrap; }
.card:not([class*="tone-"]) .card-title { color: var(--text); font-size: 16px; font-weight: 600; }
.card-body { margin-top: 18px; }
.card-foot { margin-top: auto; padding-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.card h2 { font-size: 18px; letter-spacing: -0.02em; }
.card-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Pastilles, badges ---------- */
.chip { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 99px; font-weight: 500; background: var(--chip-bg); color: inherit; }
.card:not([class*="tone-"]) .chip { background: var(--surface-3); color: var(--soft); }
.chip.ok { background: var(--ok-bg); color: var(--ok-tx); }
.chip.danger { background: var(--out-bg); color: var(--out-tx); }
.chip.accent { background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; letter-spacing: .04em; text-transform: uppercase; }
.chip.vip { background: var(--vip-bg); color: var(--vip-tx); font-size: 11px; font-weight: 600; padding: 2px 7px; letter-spacing: .04em; }
.pulse { width: 6px; height: 6px; border-radius: 99px; background: var(--ok-dot); display: inline-block; animation: pulse 2s infinite; }

/* ---------- Grands chiffres ---------- */
.stat { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.stat-value { font-weight: 600; letter-spacing: -0.05em; line-height: .95; }
.stat-xl .stat-value { font-size: 92px; letter-spacing: -0.06em; }
.stat-lg .stat-value { font-size: 60px; }
.stat-md .stat-value { font-size: 36px; letter-spacing: -0.035em; }
.stat-unit { font-size: 24px; font-weight: 500; }
.stat-md .stat-unit { font-size: 18px; }
.tone-lavender .stat-value { color: var(--lav-num); } .tone-lavender .stat-unit { color: var(--lav-accent); }
.tone-peach .stat-value { color: var(--peach-num); }
.tone-mint .stat-value { color: var(--mint-num); }
.tone-ink .stat-unit { color: var(--ink-dim); }
.stat-caption { margin-top: 10px; font-size: 15px; }

/* ---------- Barre de progression (SVG : largeur en attribut, compatible CSP) ---------- */
.progress-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.progress { display: block; width: 100%; height: 8px; border-radius: 99px; overflow: hidden; }
.progress .track { fill: var(--lav-track); }
.card:not(.tone-lavender) .progress .track { fill: var(--surface-3); }
.progress .bar { fill: var(--accent); }

/* ---------- Listes (lignes) ---------- */
.rows { display: flex; flex-direction: column; margin-top: 14px; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; margin: 0 -10px; border-radius: var(--r-row); color: var(--text); transition: background .15s; }
a.row:hover, button.row:hover { background: var(--row-hover); color: var(--text); }
.row[aria-current="true"] { background: var(--accent-soft); }
.row-time { font-family: var(--mono); font-size: 13px; color: var(--soft); }
.row-main { min-width: 0; display: flex; flex-direction: column; }
.row-main strong { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main span { font-size: 13px; color: var(--muted); }
.row-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--soft); }
.row-ic.lavender { background: var(--in-bg); color: var(--in-tx); }
.row-ic.peach { background: var(--out-bg); color: var(--out-tx); }
.row-ic.mint { background: var(--ok-bg); color: var(--ok-tx); }
button.row { width: calc(100% + 20px); border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field label, .field-label { font-size: 13.5px; font-weight: 500; color: var(--soft); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .error { font-size: 12.5px; color: var(--out-tx); }
.input { width: 100%; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 11px 14px; transition: border-color .15s, box-shadow .15s, background-color .35s; }
.input::placeholder { color: var(--muted); }
.input:hover { border-color: var(--lilac); }
.input:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.25); }
.input[aria-invalid="true"] { border-color: var(--alarm); }
.input-code { font-family: var(--mono); letter-spacing: .3em; font-size: 18px; text-align: center; max-width: 220px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Alertes ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; font-size: 14px; margin-bottom: 14px; }
.alert-ok { background: var(--ok-bg); color: var(--ok-tx); }
.alert-danger { background: var(--out-bg); color: var(--out-tx); }
.alert-warn { background: var(--vip-bg); color: var(--vip-tx); }
.alert-info { background: var(--in-bg); color: var(--in-tx); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; margin: 14px -22px -22px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 10px 22px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.table td { padding: 12px 22px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--row-hover); }
.diff { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.diff .old { color: var(--muted); text-decoration: line-through; }

/* ---------- États vides, divers ---------- */
.empty { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 14px; }
.empty .icon { margin: 0 auto 10px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline .input { width: auto; flex: 1 1 220px; max-width: 360px; }
.spacer { flex: 1; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.qr { background: #fff; padding: 14px; display: inline-block; border-radius: 18px; border: 1px solid var(--border); }
.qr svg { display: block; }
.codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; font-family: var(--mono); font-size: 14px; padding: 14px 18px; border-radius: 14px; background: var(--surface-3); width: max-content; }
.steps { margin: 0; padding-left: 20px; color: var(--soft); }
.steps li + li { margin-top: 4px; }

/* ---------- Grille Bento (12 colonnes, repli par container query) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-content: start; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }
@container main (max-width: 1080px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span-3, .span-4 { grid-column: span 3; }
  .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 6; }
  .row-2 { grid-row: auto; }
}
@container main (max-width: 760px) {
  .span-3, .span-4 { grid-column: span 6; }
  .topbar { padding: 18px 18px 12px; flex-wrap: wrap; }
  .topbar h1 { font-size: 24px; }
  .content { padding: 0 18px 24px; }
  .site-switch-name { max-width: 120px; }
  .btn-label-collapse { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-xl .stat-value { font-size: 68px; }
}

/* ---------- Pages invité (connexion…) ---------- */
.guest { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.guest-card { width: 100%; max-width: 440px; }
.guest-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--text); }
.guest-brand strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.guest-card h1 { font-size: 26px; letter-spacing: -0.035em; }
.guest-card .lead { margin: 6px 0 22px; color: var(--muted); }
.guest-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Liste d'établissements ---------- */
.tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.tenant-card { width: 100%; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.tenant-card .card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.pager-links { display: flex; gap: 6px; }

/* ---------- Animations (désactivées si l'utilisateur le demande) ---------- */
.reveal { animation: reveal .5s var(--ease) both; }
.bento > .reveal:nth-child(2) { animation-delay: 60ms; } .bento > .reveal:nth-child(3) { animation-delay: 120ms; }
.bento > .reveal:nth-child(4) { animation-delay: 180ms; } .bento > .reveal:nth-child(5) { animation-delay: 240ms; }
.bento > .reveal:nth-child(6) { animation-delay: 300ms; } .bento > .reveal:nth-child(n+7) { animation-delay: 360ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,122,61,.45); } 50% { box-shadow: 0 0 0 5px rgba(31,122,61,0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Compléments : cartes sombres, graphiques (attributs SVG, compatibles CSP) ---------- */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 16px; }
.tone-ink .eyebrow, .tone-ink .card-sub { color: var(--ink-label); }
.tone-ink .btn-ghost { background: transparent; color: var(--ink-off); border-color: var(--ink-line); }
.tone-ink .btn-ghost:hover { background: transparent; color: #fff; }
.tone-ink .chip { background: transparent; color: var(--ink-off); border: 1px solid var(--ink-line); }
.tone-ink .chip.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bg); }
.tone-ink .chip.danger { background: var(--out-bg); color: var(--out-tx); border-color: var(--out-bg); }
.tone-ink .chip.active { background: var(--lilac); color: var(--ink); border-color: var(--lilac); }
.bars { display: block; width: 100%; height: 120px; margin-top: 18px; }
.bars rect { fill: var(--ink-bar); transition: fill .12s; }
.bars rect:hover, .bars rect.is-peak { fill: var(--lilac); }
.donut { display: block; width: 132px; height: 132px; margin: 6px auto 0; }
.donut .track { stroke: var(--hair); }
.donut .value { stroke: var(--accent); }
.donut text { fill: var(--text); font-family: var(--font); }
.legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13.5px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; background: var(--accent); }
.legend i.l2 { background: var(--lilac-2); } .legend i.l3 { background: var(--lilac-3); }
.timeline .row { grid-template-columns: 58px 28px 1fr auto; }
.timeline .row.is-done { opacity: .45; }
.timeline .row.is-done strong { text-decoration: line-through; }
.tag-in { color: var(--in-tx); font-size: 12.5px; font-weight: 500; }
.tag-out { color: var(--out-tx); font-size: 12.5px; font-weight: 500; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.swatch { border-radius: 16px; padding: 14px; border: 1px solid var(--border-card); font-size: 13px; }
.swatch.lavender { background: var(--lav-bg); color: var(--lav-tx); }
.swatch.peach { background: var(--peach-bg); color: var(--peach-tx); }
.swatch.mint { background: var(--mint-bg); color: var(--mint-tx); }
.swatch.cream { background: var(--cream-bg); color: var(--cream-tx); }
.swatch.ink { background: var(--ink); color: #fff; border-color: var(--revborder); }
.swatch.surface { background: var(--surface); }
.card-title.eyebrow, .card:not([class*="tone-"]) .card-title.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.tone-ink .card-title.eyebrow { color: var(--ink-label); }
.ranges { display: flex; gap: 6px; }
.donut-wrap { position: relative; width: 118px; height: 118px; margin: 12px auto 0; }
.donut-wrap .donut { width: 118px; height: 118px; margin: 0; }
.donut-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut-label strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.donut-label span { font-size: 12.5px; color: var(--muted); }

/* Logo officiel (public/images/logo.png) : l'image remplace le « H » de la maquette. */
.logo.logo-img { background: none; box-shadow: none; object-fit: contain; }
/* Pastilles colorées : prioritaires sur la pastille neutre des cartes blanches. */
.card .chip.ok { background: var(--ok-bg); color: var(--ok-tx); }
.card .chip.danger { background: var(--out-bg); color: var(--out-tx); }
.card .chip.accent { background: var(--accent); color: #fff; }
.card .chip.vip { background: var(--vip-bg); color: var(--vip-tx); }
.rows-wrap .row-main strong { white-space: normal; overflow: visible; }

/* ---------- Lot 3 : hébergements, clients ---------- */
/* Ton « ciel » : défini dans la maquette v3 (.v2-sky), mêmes valeurs dans les deux thèmes. */
.card.tone-sky { background: var(--sky-bg-2); border-color: var(--sky-bd); color: var(--ink); }
.swatch.sky { background: var(--sky-bg-2); color: var(--ink); }

/* Onglets en pastilles (même forme que les périodes 12J / 30J / 90J de la v3). */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 14px; font-weight: 500; }
.tab:hover { color: var(--text); border-color: var(--lilac); }
.tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab .count { font-size: 12px; padding: 0 7px; border-radius: 99px; background: var(--surface-3); color: var(--soft); }
.tab[aria-current="page"] .count { background: rgba(255,255,255,.16); color: #fff; }

/* Grille des types d'hébergement. */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.type-card { color: inherit; min-height: 168px; }
.type-card:hover { color: inherit; }
.type-card .type-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--chip-bg); }
.type-card h2 { margin-top: 16px; font-size: 19px; }
.type-meta { margin-top: auto; padding-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Choix de couleur et d'icône (boutons radio dessinés). */
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--soft); }
.choice input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--text); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice .dot { width: 16px; height: 16px; border-radius: 6px; border: 1px solid var(--border-card); }
.dot.lavender { background: var(--lav-bg); } .dot.peach { background: var(--peach-bg); } .dot.mint { background: var(--mint-bg); }
.dot.sky { background: var(--sky-bg-2); } .dot.cream { background: var(--cream-bg); }

/* Interrupteur. */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--soft); }
.switch input { appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .15s; }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }

/* Formulaires en ligne (ajout rapide, options). */
.form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { margin-bottom: 0; flex: 1 1 160px; }
.form-row .field.narrow { flex: 0 1 130px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.input-sm { padding: 8px 11px; font-size: 14px; }
.cell-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.check-col { width: 36px; }
.table input[type="checkbox"], .check-all { width: 18px; height: 18px; accent-color: var(--accent); }
.table .input { min-width: 0; }
.diffs { display: flex; gap: 4px; flex-wrap: wrap; }
.bulk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0 0; }
.bulk-bar select { width: auto; }
.danger-zone { border-color: var(--out-bg); }
.inline-form { display: inline; }

/* Sections repliables (facturation, pièce d'identité). */
details.section { border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 6px; }
details.section > summary { cursor: pointer; font-weight: 500; color: var(--text); list-style: none; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: '+'; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font-size: 14px; }
details.section[open] > summary::before { content: '−'; }
.photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 18px; border: 1px solid var(--border-card); }

@container main (max-width: 760px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

/* Tarification : grille des prix (une ligne par emplacement, une colonne par nuit). */
.rate-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rate-grid th, .rate-grid td { padding: 7px 9px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate-grid thead th { font-size: 11px; color: var(--muted); font-weight: 500; line-height: 1.25; }
.rate-grid th:first-child, .rate-grid td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding-left: 22px; }
.rate-grid .weekend { background: var(--surface-2); }
.rate-grid td.missing { color: var(--muted); }
.weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.month-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.month-nav strong { min-width: 130px; text-align: center; text-transform: capitalize; }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--hair); font-size: 18px; font-weight: 600; }
.unit-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 6px 14px; max-height: 260px; overflow-y: auto; }

/* Réservations : planning (une ligne par emplacement, un séjour = une barre sur ses nuits). */
/* Largeur réelle (150 px + 42 jours × 46 px) : le tableau déborde et la carte défile horizontalement. */
.legend-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.price-lines td.num { white-space: nowrap; }
.status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.st-option, .card .chip.st-option { background: var(--cream-bg); color: var(--cream-tx); }
.chip.st-confirmed, .card .chip.st-confirmed { background: var(--ok-bg); color: var(--ok-tx); }
.chip.st-checked_in, .card .chip.st-checked_in { background: var(--in-bg); color: var(--in-tx); }
.card .chip.st-checked_out, .card .chip.st-cancelled, .card .chip.st-no_show { background: var(--hair); color: var(--muted); }

/* Documents imprimables (facture, devis, avoir) : sobres, lisibles en noir et blanc. */
.doc-body { background: var(--bg); padding: 24px 16px; }
.doc-toolbar { max-width: 820px; margin: 0 auto 14px; display: flex; justify-content: space-between; gap: 10px; }
.doc { max-width: 820px; margin: 0 auto; background: #fff; color: var(--ink); padding: 44px 48px; border-radius: 18px; border: 1px solid var(--border-card); font-size: 14px; line-height: 1.5; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.doc-seller { font-size: 17px; }
.doc-title { text-align: right; }
.doc-title h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 20px; }
.doc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.doc-lines, .doc-totals { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--ink); padding: 8px 6px; }
.doc-lines td { border-bottom: 1px solid var(--border); padding: 8px 6px; vertical-align: top; }
.doc-lines .num, .doc-totals .num { text-align: right; white-space: nowrap; }
.doc-totals { width: 46%; margin: 18px 0 0 auto; }
.doc-totals td { padding: 5px 6px; }
.doc-grand td { border-top: 1px solid var(--ink); font-weight: 600; font-size: 16px; padding-top: 9px; }
.doc-note { margin: 16px 0 0; padding: 10px 12px; background: var(--surface-3); border-radius: 10px; }
.doc-foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: #4A4A45; }
.doc-foot p { margin: 0 0 6px; }
.doc-actions { margin-top: 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media print {
  .no-print { display: none !important; }
  .doc-body { background: #fff; padding: 0; }
  .doc { border: 0; border-radius: 0; padding: 0; max-width: none; }
}

/* Contrôle fiscal */
.row-between { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-card); }
.row-between:last-child { border-bottom: 0; }
code.hash { display: block; font-size: 12px; overflow-wrap: anywhere; color: var(--muted); margin-bottom: 8px; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-card); }
.check-list li:last-child { border-bottom: 0; }

/* Réglages → Site internet */
.media-preview { display: block; max-width: 100%; max-height: 140px; border-radius: 12px; border: 1px solid var(--border-card); margin-bottom: 8px; object-fit: cover; }
.media-preview-logo { max-height: 72px; }
.color-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.color-preset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-card); border-radius: 999px; font-size: 13px; cursor: pointer; }
.color-preset input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.color-preset:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.color-preset input[type="color"] { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.preset-2f6f4f { background: #2f6f4f; } .preset-0f766e { background: #0f766e; } .preset-2563eb { background: #2563eb; }
.preset-0e7490 { background: #0e7490; } .preset-7c3aed { background: #7c3aed; } .preset-be123c { background: #be123c; }
.preset-c2410c { background: #c2410c; } .preset-a16207 { background: #a16207; } .preset-1c1917 { background: #1c1917; }
textarea.input.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.tabs-sub { margin-top: -6px; }
.row-between .input.input-sm { width: 76px; }

/* Caisse (points de vente) */
.pos-outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.pos-outlet-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; color: #fff; text-decoration: none; min-height: 140px; justify-content: flex-end; }
.pos-outlet-tile strong { font-size: 18px; }
.pos-outlet-tile span { font-size: 13px; opacity: .9; }
.pos-outlet-tile:hover { filter: brightness(1.06); }
.pos-tone-e76f51 { background: #e76f51; } .pos-tone-2a9d8f { background: #2a9d8f; } .pos-tone-e9c46a { background: #e9c46a; color: var(--ink); }
.pos-tone-264653 { background: #264653; } .pos-tone-f4a261 { background: #f4a261; color: var(--ink); } .pos-tone-8ab17d { background: #8ab17d; color: var(--ink); }
.pos-tone-b5838d { background: #b5838d; } .pos-tone-6d597a { background: #6d597a; } .pos-tone-457b9d { background: #457b9d; } .pos-tone-bc6c25 { background: #bc6c25; }
.preset-e76f51 { background: #e76f51; } .preset-2a9d8f { background: #2a9d8f; } .preset-e9c46a { background: #e9c46a; } .preset-264653 { background: #264653; }
.preset-f4a261 { background: #f4a261; } .preset-8ab17d { background: #8ab17d; } .preset-b5838d { background: #b5838d; } .preset-6d597a { background: #6d597a; }
.preset-457b9d { background: #457b9d; } .preset-bc6c25 { background: #bc6c25; }
.pos-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pos-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pos-cats .chip { cursor: pointer; border: 1px solid var(--border-card); }
.pos-cats .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.pos-product { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 14px; min-height: 92px; border-radius: 16px; border: 1px solid var(--border-card); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.pos-product:hover:not(:disabled) { border-color: var(--text); }
.pos-product:disabled { opacity: .5; cursor: not-allowed; }
.pos-product[hidden] { display: none; }
.pos-out { color: var(--out-tx); font-weight: 600; }
.pos-cart { position: sticky; top: 16px; }
.pos-lines { list-style: none; padding: 0; margin: 0 0 12px; max-height: 40vh; overflow-y: auto; }
.pos-lines li { padding: 6px 0; border-bottom: 1px solid var(--border-card); }
.pos-total { font-size: 20px; padding: 8px 0; border-top: 1px solid var(--border-card); }
[data-for][hidden], [data-discount-hint][hidden] { display: none; }
@media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } .pos-cart { position: static; } }

/* Barre de période (comptabilité, statistiques) */
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.period-bar .period-label { min-width: 160px; text-align: center; }
.period-bar .input-sm { width: auto; }
.period-bar [hidden] { display: none; }
.kpi-delta { font-size: 13px; }
.kpi-delta.up { color: var(--ok-tx); }
.kpi-delta.down { color: var(--out-tx); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }

/* Planning : emplacement loué à l'année (aplat, pas de réservation possible) */

/* Fiche de police (impression : une page par adulte) */
.police-sheet + .police-sheet { margin-top: 40px; padding-top: 40px; border-top: 1px dashed #D8D8D0; }
.police-grid th { text-align: left; width: 22%; font-weight: 600; color: #4A4A44; }
.police-grid th, .police-grid td { padding: 8px 6px; border-bottom: 1px solid #E8E8E0; vertical-align: top; }
.police-sign { margin-top: 36px; }
@media print { .police-sheet { break-after: page; } .police-sheet + .police-sheet { margin-top: 0; padding-top: 0; border-top: 0; } }

/* Notes du jour */
.note-row { padding: 10px 0; border-bottom: 1px solid var(--border-card); }
.note-row.is-important { border-left: 3px solid var(--out-tx); padding-left: 10px; }
.note-content { margin: 6px 0 0; white-space: pre-line; }

/* Abonnement Holeedays */
.subscription-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--lav-bg); color: var(--lav-tx); }
.subscription-banner.is-urgent { background: var(--peach-bg); color: var(--peach-tx); }
.billing-quote + .billing-quote { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-card); }

/* Inscription */
.guest-card.guest-wide { max-width: 640px; }
.signup-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.signup-steps li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-card); }
.signup-steps li.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[data-step-panel] { border: 0; padding: 0; margin: 0; min-width: 0; }
[data-step-panel][hidden], [data-legal][hidden], [data-signup] [hidden] { display: none; }

/* Console de migration : planification d'une bascule */
.cutover-plan { margin-top: 8px; }
.cutover-plan summary { cursor: pointer; font-size: 13px; color: var(--soft); }
.cutover-plan form { margin-top: 8px; display: grid; gap: 8px; min-width: 240px; }

/* Planning : glisser-déposer, remise sur la fiche du séjour */
.discount-form { margin-top: 12px; }
.discount-form summary { cursor: pointer; font-size: 13px; color: var(--soft); }
.discount-form form { margin-top: 10px; display: grid; gap: 8px; }

/* Recherche globale de l'en-tête */
/* Maquette v3 (.v2-search) */
.topbar-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 42px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.topbar-search:hover, .topbar-search:focus-within { border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.25); }
.topbar-search input { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; width: 260px; outline: none; }
@media (max-width: 760px) { .topbar-search input { width: 110px; } }

/* Nouvelle réservation : assistant en étapes (v1 reservations_new_phone) */
.wizard { display: flex; flex-direction: column; gap: 14px; }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-card); color: var(--muted); font-weight: 500; text-decoration: none; }
.stepper-dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--surface-3); color: var(--soft); }
.stepper-item.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper-item.is-active .stepper-dot { background: var(--bg); color: var(--text); }
.stepper-item.is-done { color: var(--text); }
.stepper-item.is-done .stepper-dot { background: var(--mint-bg); color: var(--ok-tx); }
a.stepper-item:hover { border-color: var(--lilac); color: var(--text); }
.stay-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.stay-pills .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; color: var(--soft); }
.stay-pills .pill-strong { background: var(--mint-bg); border-color: var(--mint-bd); color: var(--ok-tx); font-weight: 600; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.unit-group + .unit-group { margin-top: 14px; }
.unit-group-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 12px 0 8px; }
.unit-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.unit-tile { position: relative; cursor: pointer; }
.unit-tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.unit-tile span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 500; transition: background .15s, border-color .15s; }
.unit-tile input:checked + span { background: var(--lav-bg); border-color: var(--accent); color: var(--lav-num); }
.unit-tile input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choices .choice.is-on { background: var(--ink); color: #fff; }
.client-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); margin-top: 8px; cursor: pointer; }
.client-pick:has(input:checked) { border-color: var(--accent); background: var(--lav-bg); color: var(--lav-num); }
.recap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.recap-grid > div { display: flex; flex-direction: column; gap: 3px; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; }
.input-sm { height: 32px; padding: 0 10px; font-size: 13px; }
@media (max-width: 900px) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid-4, .recap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); text-decoration: none; }
.type-tile > span { display: flex; flex-direction: column; gap: 2px; }
.type-tile > span > span { font-size: 13px; color: var(--muted); }
.type-tile strong { color: var(--text); font-size: 15px; }
.type-tile.is-on { border-color: var(--accent); background: var(--lav-bg); }
.type-tile.is-on strong, .type-tile.is-on > span > span { color: var(--lav-num); }
a.type-tile:hover { border-color: var(--lilac); }

/* ===================== Tableau de bord — maquette v3 « bento » (variations/bento-v3.jsx) ===================== */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-content: start; container-type: inline-size; container-name: dash; }
.dash-card { padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border-card); display: flex; flex-direction: column; min-width: 0; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background-color .35s, border-color .35s; }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,26,31,.07); }
@keyframes dashin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dash-in { animation: dashin .5s cubic-bezier(.2,.7,.2,1) both; }
.dash-grid > :nth-child(2) { animation-delay: 60ms; } .dash-grid > :nth-child(3) { animation-delay: 120ms; } .dash-grid > :nth-child(4) { animation-delay: 180ms; }
.dash-grid > :nth-child(5) { animation-delay: 240ms; } .dash-grid > :nth-child(6) { animation-delay: 300ms; } .dash-grid > :nth-child(7) { animation-delay: 360ms; }
.dash-grid > :nth-child(8) { animation-delay: 420ms; } .dash-grid > :nth-child(9) { animation-delay: 480ms; } .dash-grid > :nth-child(10) { animation-delay: 540ms; }
.dash-lavender { background: var(--lav-bg); border-color: var(--lav-bd); }
.dash-peach { background: var(--peach-bg); border-color: var(--peach-bd); }
.dash-mint { background: var(--mint-bg); border-color: var(--mint-bd); }
.dash-cream { background: var(--cream-bg); border-color: var(--cream-bd); }
.dash-ink { background: var(--ink); color: #fff; border-color: var(--revborder); }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.dash-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; min-width: 0; }
.dash-lavender .dash-title { color: var(--lav-tx); } .dash-peach .dash-title { color: var(--peach-tx); } .dash-mint .dash-title { color: var(--mint-tx); }
.dash-strong { font-size: 16px; font-weight: 600; color: var(--text); }
.dash-cream .dash-strong { color: var(--cream-tx); }
.dash-chip { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 99px; font-weight: 500; background: var(--chip-bg); }
.dash-lavender .dash-chip { color: var(--lav-tx); } .dash-peach .dash-chip { color: var(--peach-tx); } .dash-mint .dash-chip { color: var(--mint-tx); }
.dash-chip.chip-ok { background: var(--ok-bg); color: var(--ok-tx); } .dash-chip.chip-todo { background: var(--out-bg); color: var(--out-tx); }
.dash-eyebrow { font-size: 13px; color: var(--muted); letter-spacing: .08em; font-weight: 500; }
.dash-link { margin-top: auto; align-self: flex-start; padding: 10px; border-radius: 12px; color: var(--accent); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .15s; }
.dash-link:hover { background: var(--accent-soft); }
.dash-arrow { color: var(--soft); display: grid; place-items: center; }

/* Blocs : emplacements de la maquette */
.b-hero { grid-column: span 4; grid-row: span 2; padding: 26px; } .b-cli, .b-pos { grid-column: span 4; } .b-rev { grid-column: span 5; } .b-occ { grid-column: span 3; }
.b-wx { grid-column: span 5; } .b-tl { grid-column: span 7; } .b-ch { grid-column: span 4; } .b-act { grid-column: span 3; } .b-note { grid-column: span 5; }
.b-wx-wide, .b-act-wide, .b-note-wide { grid-column: span 4; }
@container dash (max-width: 1080px) {
  .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-hero { grid-column: span 6; grid-row: auto; } .b-cli, .b-pos { grid-column: span 3; } .b-rev { grid-column: span 6; } .b-occ { grid-column: span 2; }
  .b-wx { grid-column: span 4; } .b-tl { grid-column: span 6; } .b-ch, .b-act { grid-column: span 3; } .b-note { grid-column: span 6; }
  .b-wx-wide, .b-act-wide, .b-note-wide { grid-column: span 6; }
}
@container dash (max-width: 760px) { .b-cli, .b-pos, .b-occ, .b-wx, .b-ch, .b-act { grid-column: span 6; } }

/* Réservations (lavande) */
.hero-main { margin-top: 30px; }
.hero-number { display: flex; align-items: baseline; gap: 10px; }
.hero-big { font-size: 92px; font-weight: 600; letter-spacing: -0.06em; line-height: .92; font-variant-numeric: tabular-nums; color: var(--lav-num); }
.hero-unit { font-size: 24px; font-weight: 500; color: var(--lav-accent); }
.hero-sub { margin-top: 10px; font-size: 16px; color: var(--lav-tx); }
.hero-progress { margin-top: 24px; }
.hero-progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--lav-tx); margin-bottom: 6px; }
.hero-progress-row .strong { font-weight: 600; }
.hero-track { height: 8px; border-radius: 99px; background: var(--lav-track); overflow: hidden; }
.hero-bar { height: 100%; border-radius: 99px; background: var(--accent); animation: dashgrow 1s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes dashgrow { from { width: 0; } }
.hero-warn { margin: 14px 0 0; font-size: 13px; color: var(--lav-tx); }
.hero-actions { margin-top: auto; padding-top: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.dash-quick { display: flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; transition: transform .15s, box-shadow .15s; }
.dash-quick:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,26,31,.2); color: #fff; }
.dash-quick-ghost { background: var(--ghost-bg); color: var(--ghost-tx); border: 1px solid var(--ghost-bd); }
.dash-quick-ghost:hover { color: var(--ghost-tx); box-shadow: none; }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; }
.w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }

/* Clients présents (pêche) */
.cli-body { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.cli-big { font-size: 60px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--peach-num); }
.cli-sub { margin-top: 6px; font-size: 14px; color: var(--peach-tx); }
.cli-dots { display: flex; }
.cli-dots span { width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--peach-bg); margin-left: -8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.cli-dots span:first-child { margin-left: 0; }
.cli-dots .d1 { background: var(--out-dot); } .cli-dots .d2 { background: #F58E63; } .cli-dots .d3 { background: #E47045; } .cli-dots .d4 { background: var(--out-tx); }
.cli-dots .d5 { background: var(--surface); color: var(--peach-tx); width: auto; min-width: 28px; padding: 0 5px; }

/* Caisse (menthe) */
.pos-body { margin-top: 18px; }
.pos-number { display: flex; align-items: baseline; gap: 4px; }
.pos-big { font-size: 54px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mint-num); }
.pos-dec { font-size: 30px; font-weight: 500; color: var(--mint-tx); }
.pos-spark { width: 100%; height: 30px; margin-top: 10px; display: block; }
.spark-line { fill: none; stroke: var(--ok-dot); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--ok-dot); opacity: .1; }

/* Revenu (encre) */
.rev-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.rev-label { font-size: 13px; color: var(--ink-label); letter-spacing: .08em; white-space: nowrap; }
.rev-total { white-space: nowrap; font-size: 36px; font-weight: 600; letter-spacing: -0.035em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rev-dec { color: var(--ink-dim); }
.rev-ranges { display: flex; gap: 6px; }
.rev-range { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; color: var(--ink-off); border: 1px solid var(--ink-line); font-weight: 500; text-decoration: none; transition: color .15s; }
.rev-range:hover { color: #fff; }
.rev-range[data-active] { background: var(--lilac); color: var(--ink); border-color: var(--lilac); }
.rev-bars { display: grid; gap: 6px; align-items: end; height: 96px; margin-top: 18px; }
.rev-bars-12 { grid-template-columns: repeat(12, 1fr); } .rev-bars-30 { grid-template-columns: repeat(30, 1fr); gap: 3px; } .rev-bars-90 { grid-template-columns: repeat(90, 1fr); gap: 1px; }
.rev-bar { width: 100%; min-height: 4px; border-radius: 5px; background: var(--ink-bar); cursor: pointer; transition: background .12s; }
.rev-bars-90 .rev-bar { border-radius: 2px; }
.rev-bar.is-peak, .rev-bar:hover { background: var(--lilac); }
.rev-bars:hover .rev-bar.is-peak:not(:hover) { background: var(--ink-bar); }
.h-0 { height: 4px; } .h-5 { height: 5%; } .h-10 { height: 10%; } .h-15 { height: 15%; } .h-20 { height: 20%; } .h-25 { height: 25%; } .h-30 { height: 30%; } .h-35 { height: 35%; } .h-40 { height: 40%; } .h-45 { height: 45%; }
.h-50 { height: 50%; } .h-55 { height: 55%; } .h-60 { height: 60%; } .h-65 { height: 65%; } .h-70 { height: 70%; } .h-75 { height: 75%; } .h-80 { height: 80%; } .h-85 { height: 85%; } .h-90 { height: 90%; } .h-95 { height: 95%; } .h-100 { height: 100%; }

/* Occupation (anneau) */
.occ-ring { position: relative; width: 118px; height: 118px; margin: 12px auto 0; }
.ring-track { fill: none; stroke: var(--hair); stroke-width: 3.4; }
.ring-value { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; animation: dashdonut 1s cubic-bezier(.2,.7,.2,1) .4s both; }
@keyframes dashdonut { from { stroke-dasharray: 0 100; } }
.occ-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.occ-pct { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.occ-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.occ-types { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; font-size: 13px; }
.occ-type { display: flex; align-items: center; gap: 8px; min-width: 0; }
.occ-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.occ-dot.c0 { background: var(--accent); } .occ-dot.c1 { background: var(--lilac-2); } .occ-dot.c2 { background: var(--lilac-3); } .occ-dot.c3 { background: var(--out-dot); }
.occ-label { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* Météo : aplat par condition (sans dégradé), photo de la maquette par beau temps */
.wx-card { position: relative; overflow: hidden; border: none; min-height: 260px; color: #fff; background: #3F8FD6; }
.wx-card.wx-sun { background: #3F8FD6 url('../images/meteo/sun.png') center / cover no-repeat; }
.wx-card.wx-cloud { background: #7D8CA3; } .wx-card.wx-rain { background: #3B4A5E; } .wx-card.wx-storm { background: #1E2233; } .wx-card.wx-snow { background: #9FB4CC; } .wx-card.wx-night { background: #0B1330; }
.wx-card::before { content: ''; position: absolute; inset: 0; background: rgba(10, 20, 40, .28); pointer-events: none; }
.wx-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.wx-card .dash-title { color: #fff; }
.wx-now { display: flex; align-items: flex-end; gap: 14px; margin-top: 14px; }
.wx-temp { font-size: 64px; font-weight: 600; letter-spacing: -0.05em; line-height: .9; }
.wx-desc { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; font-size: 13.5px; }
.wx-label { font-size: 17px; font-weight: 600; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: auto; padding-top: 16px; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wx-day-name { font-size: 12px; opacity: .85; } .wx-day-temp { font-size: 14.5px; font-weight: 600; }
.wx-off { margin-top: auto; opacity: .9; }

/* Mouvements du jour */
.tl-legend { font-size: 12.5px; color: var(--soft); display: flex; gap: 12px; }
.tl-legend span { display: flex; align-items: center; gap: 6px; }
.tl-legend i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }
.dot-in { background: var(--accent); } .dot-out { background: var(--out-dot); }
.tl-list { display: flex; flex-direction: column; margin-top: 12px; }
.tl-row { display: grid; grid-template-columns: 58px 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.tl-row:hover { background: var(--row-hover); color: inherit; }
.tl-row.is-done { opacity: .45; }
.tl-row.is-done .tl-name { text-decoration: line-through; }
.tl-row.is-now { background: var(--accent-soft); }
.tl-time { font-family: var(--mono); font-size: 13px; color: var(--soft); }
.tl-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; }
.tl-ic.in { background: var(--accent-soft); color: var(--accent-text); } .tl-ic.out { background: var(--out-bg); color: var(--out-tx); }
.tl-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tl-name { font-size: 14px; font-weight: 500; color: var(--text); }
.tl-unit { font-size: 12.5px; color: var(--muted); }
.tl-now { align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: #fff; letter-spacing: .04em; }
.tl-state { font-size: 12.5px; font-weight: 500; } .tl-state.in { color: var(--accent-text); } .tl-state.out { color: var(--out-tx); }

/* Ménage (emplacement du Channel Manager de la maquette) */
.ch-list { margin: 12px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.ch-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14.5px; font-weight: 500; color: var(--text); }
.ch-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--surface); display: grid; place-items: center; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.ch-val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Activité */
.act-list { margin-top: 10px; display: flex; flex-direction: column; }
.act-row { display: flex; gap: 10px; padding: 8px 0; }
.act-row + .act-row { border-top: 1px solid var(--hair); }
.act-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.act-dot.act-payment, .act-dot.act-pos, .act-dot.act-invoice { background: var(--ok-dot); } .act-dot.act-booking { background: var(--accent-text); } .act-dot.act-customer { background: var(--out-tx); }
.act-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.act-title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.act-meta { font-size: 12px; color: var(--muted); }

/* Passation d'équipe (crème) */
.note-nav { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cream-tx2); }
.note-nav a { color: var(--cream-tx2); display: grid; place-items: center; }
.note-list { margin: 12px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.note-card { padding: 14px; border-radius: 16px; background: var(--cream-inner); border: 1px solid var(--cream-inner-bd); }
.note-card.is-important { border-color: var(--alarm); }
.note-top { display: flex; align-items: center; gap: 8px; }
.note-avatar { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; }
.note-who { font-size: 13.5px; font-weight: 500; color: var(--cream-tx); }
.note-time { margin-left: auto; font-size: 12px; color: var(--cream-tx3); }
.note-text { margin: 8px 0 0; font-size: 14px; color: var(--cream-tx2); line-height: 1.4; white-space: pre-line; }
.note-edit summary { cursor: pointer; font-size: 12px; color: var(--cream-tx3); margin-top: 6px; }
.note-add { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--cream-inner); border: 1px dashed var(--cream-inner-bd); color: var(--cream-tx3); transition: border-color .15s; }
.note-add:focus-within { border-color: var(--accent); }
.note-add textarea { flex: 1; border: 0; background: transparent; resize: none; font: inherit; font-size: 13.5px; color: var(--cream-tx); outline: none; min-height: 22px; }
.note-add select { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--cream-tx2); max-width: 110px; }
.note-imp { font-size: 12px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.note-add button { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--cream-bg); border: 1px solid var(--cream-inner-bd); color: var(--cream-tx); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dash-in, .hero-bar, .ring-value { animation: none; } }

/* ===================== Aujourd'hui : indicateurs, arrivées / départs avec paiement, présents ===================== */
.day-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); min-width: 0; }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.kpi-value { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi-money { font-size: 26px; letter-spacing: -0.03em; white-space: nowrap; }
.kpi-sub { font-size: 12.5px; color: var(--muted); }
.kpi-lavender { background: var(--lav-bg); border-color: var(--lav-bd); } .kpi-lavender .kpi-label, .kpi-lavender .kpi-sub { color: var(--lav-tx); } .kpi-lavender .kpi-value { color: var(--lav-num); }
.kpi-peach { background: var(--peach-bg); border-color: var(--peach-bd); } .kpi-peach .kpi-label, .kpi-peach .kpi-sub { color: var(--peach-tx); } .kpi-peach .kpi-value { color: var(--peach-num); }
.kpi-mint { background: var(--mint-bg); border-color: var(--mint-bd); } .kpi-mint .kpi-label, .kpi-mint .kpi-sub { color: var(--mint-tx); } .kpi-mint .kpi-value { color: var(--mint-num); }
.kpi-ink { background: var(--ink); border-color: var(--ink); } .kpi-ink .kpi-label, .kpi-ink .kpi-sub { color: var(--ink-label); } .kpi-ink .kpi-value { color: #fff; }
@media (max-width: 1280px) { .day-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .day-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.day-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { .day-columns { grid-template-columns: 1fr; } }
.day-card { padding: 18px 20px 12px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); min-width: 0; }
.day-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.day-card-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.day-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.day-ic.in { background: var(--accent-soft); color: var(--accent-text); } .day-ic.out { background: var(--out-bg); color: var(--out-tx); } .day-ic.stay { background: var(--ok-bg); color: var(--ok-tx); }
.day-count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.day-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 10px; margin: 0 -10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .15s; }
.day-row + .day-row { border-top: 1px solid var(--hair); }
.day-row:hover { background: var(--row-hover); color: inherit; }
.day-row.is-done { opacity: .55; }
.day-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.day-avatar.in { background: var(--accent-soft); color: var(--accent-text); } .day-avatar.out { background: var(--out-bg); color: var(--out-tx); }
.day-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-name { font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-pay { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 5px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.day-pay-amount { font-weight: 500; font-size: 11.5px; opacity: .85; }
.pay-paid { background: var(--ok-bg); color: var(--ok-tx); }
.pay-partial { background: var(--cream-bg); color: var(--vip-tx); }
.pay-unpaid { background: var(--peach-bg); color: var(--peach-tx); }
.day-action { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 11px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s; }
.day-action.in { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--lav-bd); }
.day-action.out { background: var(--due-bg); color: var(--out-tx); border: 1px solid var(--peach-bd); }
.day-row:hover .day-action.in { background: var(--lav-bg); border-color: var(--lilac); }
.day-row:hover .day-action.out { background: var(--peach-bg); }
.day-action.is-done { color: var(--muted); padding: 0 6px; }
.day-empty { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }

.day-stale { margin: 2px 0 12px; border-radius: 14px; background: var(--cream-bg); border: 1px solid var(--cream-bd); color: var(--vip-tx); font-size: 13px; }
.day-stale summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 500; list-style: none; }
.day-stale summary::-webkit-details-marker { display: none; }
.day-stale-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.day-stale-list a { padding: 4px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--cream-bd); color: var(--cream-tx); text-decoration: none; font-size: 12.5px; }
.day-stale-list a span { color: var(--cream-tx2); }
.day-present { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; padding-bottom: 8px; }
.present-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.present-tile:hover { border-color: var(--lilac); transform: translateY(-1px); color: inherit; }
.present-unit { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.present-name { font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.present-meta { font-size: 12.5px; color: var(--muted); }
.present-pay { align-self: flex-start; flex-direction: row; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 99px; }

/* Aujourd'hui — v2 : choix du jour, progression, heure, ménage, filtres */
.day-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.day-switch { display: flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--surface-3); }
.day-switch-btn { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.day-switch-btn:hover { color: var(--text); }
.day-switch-btn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.day-date .input-sm { height: 38px; border-radius: 12px; }
.day-bar-label { margin-left: auto; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.kpi-of { font-size: 20px; font-weight: 500; color: inherit; opacity: .55; margin-left: 2px; letter-spacing: -0.02em; }
.kpi-track { height: 6px; border-radius: 99px; background: var(--glass); overflow: hidden; margin: 4px 0 2px; }
.kpi-fill { display: block; height: 100%; border-radius: 99px; }
.kpi-lavender .kpi-fill { background: var(--accent); } .kpi-peach .kpi-fill { background: #E47045; }
.day-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.day-filter { height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.day-filter:hover { border-color: var(--lilac); }
.day-filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.day-row { grid-template-columns: 44px 38px minmax(0, 1fr) auto auto; }
.day-row[hidden] { display: none; }
.day-time { font-family: var(--mono); font-size: 13px; color: var(--soft); }
.day-name { display: flex; align-items: center; gap: 6px; }
.day-flag { font-size: 14px; line-height: 1; }
.day-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; letter-spacing: .02em; }
.tag-option { background: var(--cream-bg); color: var(--vip-tx); } .tag-note { background: var(--surface-3); color: var(--soft); }
.day-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.day-hk { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
.hk-ready { background: var(--ok-bg); color: var(--ok-tx); } .hk-todo { background: var(--peach-bg); color: var(--peach-tx); } .hk-doing { background: var(--accent-soft); color: var(--accent-text); }
.day-filtered[hidden] { display: none; }
.present-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.present-left { font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .day-row { grid-template-columns: 38px minmax(0, 1fr) auto; } .day-time, .day-row .day-action { display: none; } }
.tag-country { background: var(--sky-bg-2); color: var(--sky-tx); }

/* Aujourd'hui — couleurs par rôle : arrivée = lavande, départ = bleu ciel (neutre, maquette .v2-sky),
   paiement = vert (payé) / ambre (acompte) / rouge (non payé : seul rouge de la page). */
.kpi-sky { background: var(--sky-bg-2); border-color: var(--sky-bd); }
.kpi-sky .kpi-label, .kpi-sky .kpi-sub { color: var(--sky-tx); } .kpi-sky .kpi-value { color: var(--sky-num); } .kpi-sky .kpi-fill { background: var(--sky-accent); }
.day-ic.out, .day-avatar.out { background: var(--sky-bg); color: var(--sky-tx); }
.day-action.out { background: var(--sky-bg); color: var(--sky-tx); border: 1px solid var(--sky-bd); }
.day-row:hover .day-action.out { background: var(--sky-bg-2); border-color: var(--sky-bd); }
.pay-partial { background: var(--warn-bg); color: var(--warn-tx); }
.pay-unpaid { background: var(--danger-bg); color: var(--danger-tx); }
.hk-todo { background: var(--warn-bg); color: var(--warn-tx); }

/* Tableau de bord — bloc « Réservations » : arrivées et départs à égalité, prochains mouvements */
.hero-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.hero-stat { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); min-width: 0; }
.hero-stat-label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--lav-tx); }
.hero-stat .hero-big { font-size: 84px; line-height: .9; }
.hero-stat .hero-track { background: rgba(91,79,229,.14); }
.hero-bar.is-out { background: var(--sky-accent); }
.hero-stat-sub { font-size: 13px; color: var(--lav-tx); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: 14px; color: var(--lav-tx); }
.hero-facts b { color: var(--lav-num); font-weight: 600; }
.hero-facts .is-alert, .hero-facts .is-alert b { color: var(--danger-tx); }
.dash-quick svg { flex-shrink: 0; }
@container dash (max-width: 1080px) { .hero-stat .hero-big { font-size: 72px; } }
[data-theme='dark'] .hero-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
/* Bloc « Réservations » épuré : deux grands chiffres sur le fond lavande, séparés par un trait */
.b-hero .hero-duo { flex: 1; gap: 0; margin-top: 18px; align-items: center; }
.b-hero .hero-stat { background: transparent; border: 0; padding: 6px 22px 6px 0; gap: 10px; justify-content: center; }
.b-hero .hero-stat + .hero-stat { padding: 6px 0 6px 22px; border-left: 1px solid var(--lav-bd); }
.b-hero .hero-stat .hero-big { font-size: 112px; line-height: .86; }
.b-hero .hero-stat-label { font-size: 15px; }
.b-hero .hero-stat .hero-track { height: 8px; background: var(--lav-track); }
.b-hero .hero-stat-sub { font-size: 13.5px; }
.b-hero .hero-facts { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--lav-bd); }
.b-hero .hero-actions { padding-top: 18px; }
@container dash (max-width: 1080px) { .b-hero .hero-stat .hero-big { font-size: 88px; } }
[data-theme='dark'] .b-hero .hero-stat { background: transparent; }
/* Tableau de bord — ajustements : caisse cliquable, revenu pleine hauteur, anneau centré, mouvements défilants */
.dash-clickable { color: inherit; text-decoration: none; }
a.dash-clickable { cursor: pointer; }
a.dash-clickable:hover { color: inherit; border-color: var(--mint-bd); }
.b-rev .rev-bars { flex: 1; min-height: 96px; height: auto; }
.b-occ .occ-ring { margin: auto; width: 132px; height: 132px; }
.b-occ .occ-ring svg { width: 132px; height: 132px; display: block; }
.b-occ .occ-types { margin-top: 0; }
/* La ligne Météo / Mouvements garde la hauteur de la météo : la liste défile dans sa carte. */
.b-tl { height: 0; min-height: 100%; }
.b-tl .tl-list { flex: 1; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; scrollbar-width: thin; }
@container dash (max-width: 1080px) { .b-tl { height: auto; max-height: 360px; } }
/* Occupation : les deux lignes groupées au centre de l'anneau. */
.occ-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.occ-center .occ-sub { margin-top: 0; }
/* Ligne Météo / Mouvements : 50 % plus haute (260 → 390 px). */
.dash-grid .wx-card { min-height: 390px; }
/* Mouvements : la liste défile sans couper la marge des lignes. */
.b-tl .tl-list { margin: 12px -6px 0; padding: 0 6px; }
.b-tl .tl-row { margin: 0; padding: 9px 12px; }
/* Aujourd'hui — tableau des présences (appel d'urgence, contrôle) */
.presence-actions { display: flex; gap: 8px; }
.presence-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.presence-btn:hover { border-color: var(--lilac); color: var(--text); }
.presence-btn.is-primary { background: var(--ok-bg); border-color: var(--mint-bd); color: var(--ok-tx); }
.presence-btn.is-primary:hover { background: var(--mint-bg); border-color: var(--mint-bd); color: var(--mint-num); }
.presence-print-title { display: none; }
@media print {
  body.print-presence .rail, body.print-presence .topbar, body.print-presence .day-bar, body.print-presence .day-kpis, body.print-presence .day-filters,
  body.print-presence .day-columns, body.print-presence .presence-actions, body.print-presence .day-stale, body.print-presence .flash, body.print-presence .alert { display: none !important; }
  body.print-presence, body.print-presence .main, body.print-presence .content { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body.print-presence .presence-card { border: 0; padding: 0; }
  body.print-presence .presence-print-title { display: block; font-size: 12px; margin: 0 0 8px; color: #000; }
}
/* Aujourd'hui — présences en cartes (appel d'urgence, contrôle) */
.presence-card { padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); }
.presence-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); }
.presence-hero-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.presence-hero-figures { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.presence-hero-big { font-size: 56px; font-weight: 600; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--text); }
.presence-hero-unit { font-size: 20px; font-weight: 500; color: var(--soft); }
.presence-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.presence-hero-chips span { font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 99px; background: var(--surface-3); color: var(--soft); }
.presence-actions { display: flex; gap: 8px; }
.presence-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.presence-btn:hover { border-color: var(--lilac); color: var(--text); transform: translateY(-1px); }
.presence-btn.is-primary { background: var(--ok-bg); border-color: var(--mint-bd); color: var(--ok-tx); }
.presence-btn.is-primary:hover { background: var(--mint-bg); border-color: var(--mint-bd); color: var(--mint-num); }
.presence-print-title { display: none; }
.guest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.guest-tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); color: inherit; text-decoration: none; overflow: hidden; transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s; }
.guest-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ok-dot); }
.guest-tile.tone-in::before { background: var(--accent); } .guest-tile.tone-out::before { background: var(--sky-accent); }
.guest-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,26,31,.07); border-color: var(--border-card); color: inherit; }
.guest-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guest-unit { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-state { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: var(--ok-bg); color: var(--ok-tx); }
.tone-in .guest-state { background: var(--accent-soft); color: var(--accent-text); } .tone-out .guest-state { background: var(--sky-bg); color: var(--sky-tx); }
.guest-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guest-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guest-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-people { font-size: 13px; color: var(--soft); }
.guest-count { flex-shrink: 0; width: 54px; height: 54px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.guest-count-n { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
.guest-count-l { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.guest-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--soft); }
.guest-dates, .guest-phone { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.guest-phone { font-variant-numeric: tabular-nums; }
@media print {
  body.print-presence .rail, body.print-presence .topbar, body.print-presence .day-bar, body.print-presence .day-kpis, body.print-presence .day-filters,
  body.print-presence .day-columns, body.print-presence .presence-actions, body.print-presence .day-stale, body.print-presence .presence-hero, body.print-presence .flash, body.print-presence .alert { display: none !important; }
  body.print-presence, body.print-presence .main, body.print-presence .content { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body.print-presence .presence-card { border: 0; padding: 0; }
  body.print-presence .presence-print-title { display: block; font-size: 12px; margin: 0 0 10px; color: #000; }
  body.print-presence .guest-grid { display: block; }
  body.print-presence .guest-tile { flex-direction: row; align-items: center; gap: 14px; padding: 6px 0; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: none; break-inside: avoid; }
  body.print-presence .guest-tile::before { display: none; }
  body.print-presence .guest-top { order: 0; width: 160px; flex-direction: column; align-items: flex-start; gap: 2px; }
  body.print-presence .guest-body { flex: 1; }
  body.print-presence .guest-count { width: auto; height: auto; border: 0; flex-direction: row; gap: 3px; background: none; }
  body.print-presence .guest-tile-foot { border: 0; padding: 0; gap: 16px; }
  body.print-presence .guest-state, body.print-presence .day-tag { background: none !important; padding: 0; color: #000 !important; }
  body.print-presence * { color: #000 !important; }
}
.guest-top { flex-wrap: wrap; row-gap: 6px; } .guest-unit { overflow: visible; white-space: normal; }

/* ===================== Planning (réservations) ===================== */
.pl-card { padding: 18px 0 0; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); overflow: hidden; }
.pl-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 20px 16px; }
.pl-filter .input-sm { height: 38px; min-width: 200px; border-radius: 12px; }
.pl-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.pl-key::before { content: ''; width: 10px; height: 10px; border-radius: 4px; }
.pl-key + .pl-key { margin-left: 8px; }
.pl-key.st-option::before { background: var(--warn-bd); } .pl-key.st-confirmed::before { background: var(--lilac); } .pl-key.st-checked_in::before { background: var(--mint-dot); } .pl-key.st-checked_out::before { background: var(--border); }
.pl-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pl-nav-btn { display: grid; place-items: center; min-width: 36px; height: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
.pl-nav-btn:hover { border-color: var(--lilac); color: var(--text); }
.pl-nav-btn.is-today { padding: 0 14px; color: var(--text); }
.pl-date { height: 38px; border-radius: 12px; margin-left: 6px; }



/* Colonne des unités (reste visible au défilement) */


@media (max-width: 900px) { .pl-nav { margin-left: 0; } }
.pl-card { padding-bottom: 0; }
.pl-nav-btn { white-space: nowrap; flex-shrink: 0; } .pl-toolbar { padding-top: 0; } .pl-filter, .pl-legend { flex-shrink: 0; }

/* ===================== Planning dessiné en JS : défilement infini, dates et unités figées ===================== */
.pl-nav-btn { font: inherit; font-size: 14px; cursor: pointer; }
.pl-viewport { position: relative; overflow: auto; max-height: calc(100vh - 230px); min-height: 360px; border-top: 1px solid var(--border); overscroll-behavior: contain; scrollbar-width: thin; }
.pl-loading { margin: 0; padding: 40px 20px; color: var(--muted); text-align: center; }
.pl-canvas { position: relative; }

/* En-tête : figé en haut ; coin « Unité » figé en haut et à gauche */
.pl-head { position: sticky; top: 0; z-index: 6; display: flex; background: var(--surface); border-bottom: 1px solid var(--border); }
.pl-corner { position: sticky; left: 0; z-index: 7; flex: 0 0 220px; width: 220px; display: flex; align-items: flex-end; gap: 6px; padding: 0 20px 12px; background: var(--surface); border-right: 1px solid var(--border);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-count { padding: 2px 7px; border-radius: 99px; background: var(--surface-3); font-size: 11px; letter-spacing: 0; }
.pl-days { display: flex; }
.pl-day { flex: 0 0 48px; width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8px 0 10px; border-left: 1px solid var(--hair); }
.pl-day span { display: block; line-height: 1.15; }
.pl-month { height: 14px; font-size: 11px; font-weight: 600; color: var(--lav-accent); white-space: nowrap; }
.pl-wd { font-size: 11px; color: var(--muted); }
.pl-dn { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--text); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 99px; }
.pl-day.is-weekend { background: var(--surface-2); }
.pl-day.is-weekend .pl-dn { color: var(--muted); }
.pl-day.is-today .pl-dn { background: var(--accent); color: #fff; }
.pl-day.is-today .pl-wd { color: var(--accent); font-weight: 600; }

/* Corps : colonnes de fond (week-ends, aujourd'hui) sous les lignes */
.pl-body { position: relative; }
.pl-cols { position: absolute; top: 0; bottom: 0; left: 220px; pointer-events: none; }
.pl-stripe { position: absolute; top: 0; bottom: 0; width: 48px; background: var(--surface-2); }
.pl-stripe.is-today { background: var(--today-col); box-shadow: inset 1px 0 0 var(--lilac), inset -1px 0 0 var(--lilac); }
.pl-group { position: relative; display: flex; height: 30px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pl-group-label { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 0 20px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.pl-group-label span { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pl-row { position: relative; display: flex; height: 44px; border-bottom: 1px solid var(--hair); }
.pl-row:hover .pl-unit { background: var(--row-hover); }
.pl-unit { position: sticky; left: 0; z-index: 4; flex: 0 0 220px; width: 220px; display: flex; align-items: center; padding: 0 20px; background: var(--surface); border-right: 1px solid var(--border);
  font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-unit.is-off { color: var(--muted); text-decoration: line-through; }
/* Lignes verticales de la grille : une bordure par jour, sans dégradé */
.pl-track { position: relative; flex: 0 0 auto; height: 44px; cursor: copy;
  background-image: repeating-linear-gradient(to right, transparent 0 47px, var(--hair) 47px 48px); }
.pl-track:hover { background-color: rgba(239,235,255,.35); }
.pl-closed { position: absolute; top: 4px; bottom: 4px; width: 48px; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, transparent 4px 8px); pointer-events: none; }

/* Barres de séjour */
.pl-bar { position: absolute; top: 5px; height: 34px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; border-left: 3px solid transparent;
  text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow .12s, transform .12s, opacity .12s; }
.pl-bar:hover { box-shadow: 0 4px 12px rgba(26,26,31,.10); transform: translateY(-1px); }
.pl-bar.is-movable { cursor: grab; }
.pl-bar-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.pl-bar-meta { margin-left: auto; flex-shrink: 0; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.pl-bar.st-option { background: var(--warn-bg); border-left-color: var(--warn-line); color: var(--warn-tx); }
.pl-bar.st-confirmed { background: var(--lav-bg); border-left-color: var(--accent); color: var(--lav-num); }
.pl-bar.st-checked_in { background: var(--mint-bg); border-left-color: var(--ok-dot); color: var(--mint-num); }
.pl-bar.st-checked_out { background: var(--surface-3); border-left-color: var(--muted); color: var(--muted); }
.pl-bar.is-resident, .pl-bar.is-lease { background: var(--lav-bg); border-left-color: var(--lav-accent); color: var(--lav-num); }
.pl-bar.is-lease { opacity: .8; }
.pl-bar.is-cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.pl-bar.is-cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-bar.is-dragging { opacity: .3; }

/* Glisser-déposer : la barre suit la souris, un contour montre l'arrivée */
.pl-ghost { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; transform-origin: 0 0; box-shadow: 0 16px 36px rgba(26,26,31,.22); opacity: .96; }
.pl-drop { position: absolute; top: 5px; height: 34px; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 2px dashed var(--accent); background: rgba(239,235,255,.6);
  font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; pointer-events: none; }
body.pl-dragging, body.pl-dragging * { cursor: grabbing !important; user-select: none; }
[data-theme='dark'] .pl-stripe.is-today { background: var(--today-col); }
/* Planning : ligne des dates compacte, numéros centrés */
.pl-corner { padding: 0 20px; align-items: center; }
.pl-day { padding: 5px 0 6px; justify-content: center; align-items: center; gap: 2px; }
.pl-day .pl-wd { display: block; height: auto; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--muted); }
.pl-day .pl-wd.is-month { color: var(--lav-accent); font-weight: 600; }
.pl-day .pl-dn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; line-height: 1; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; border-radius: 99px; }
.pl-day.is-today .pl-dn { background: var(--accent); color: #fff; }
/* Planning : zoom horizontal (largeur d'un jour = --day) */
.pl-viewport { --day: 48px; }
.pl-day { flex: 0 0 var(--day); width: var(--day); }
.pl-stripe, .pl-closed { width: var(--day); }
.pl-track { background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--day) - 1px), var(--hair) calc(var(--day) - 1px) var(--day)); }
.pl-zoom { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pl-zoom + .pl-nav { margin-left: 8px; }
.pl-zoom-label { font-size: 12.5px; color: var(--muted); padding: 0 4px; }
.pl-nav-btn:disabled { opacity: .4; cursor: default; }
.pl-viewport.is-compact .pl-wd:not(.is-month) { visibility: hidden; }
.pl-viewport.is-compact .pl-day .pl-dn { width: 20px; height: 20px; font-size: 11.5px; }
.pl-viewport.is-compact .pl-bar { padding: 0 6px; }
.pl-viewport.is-compact .pl-bar-name { font-size: 12px; }
/* Planning : origine de la réservation (pastille avant le nom) */
.pl-bar { gap: 6px; }
.pl-src { flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--glass); color: currentColor; font-size: 10.5px; font-weight: 700; line-height: 1; }
.pl-src.src-booking { background: #003580; color: #fff; }
.pl-src.src-airbnb { background: #FF5A5F; color: #fff; }
.pl-viewport.is-compact .pl-src { width: 15px; height: 15px; font-size: 9.5px; }
/* Planning : barre d'outils (pastilles et groupes de boutons) */
.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 20px 12px; }
.pl-select { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 36px 0 14px; border-radius: 13px; background: var(--surface-3); color: var(--soft); transition: background .15s, box-shadow .15s; }
.pl-select:hover, .pl-select:focus-within { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 3px rgba(199,191,255,.3); }
.pl-select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; outline: none; padding: 0; min-width: 150px; }
.pl-select-caret { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.pl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: var(--surface-3); }
.pl-seg-btn { min-width: 34px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.pl-seg-btn:hover:not(:disabled) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pl-seg-btn:disabled { opacity: .35; cursor: default; }
.pl-seg-btn.is-today { padding: 0 14px; font-size: 13.5px; font-weight: 600; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pl-seg-btn.is-today:hover { background: var(--accent); color: #fff; }
.pl-seg-label { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pl-datepick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 13px; background: var(--surface-3); color: var(--soft); cursor: pointer; transition: background .15s; }
.pl-datepick:hover, .pl-datepick:focus-within { background: var(--accent-soft); color: var(--accent-text); }
.pl-datepick input { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); outline: none; cursor: pointer; }
.pl-legends { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--hair); background: var(--surface); }
.pl-legends .pl-legend { gap: 0; }
.pl-key { font-size: 12px; }

/* ===================== Fiche de réservation (architecture v1, design v3) ===================== */
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rs-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-pay { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.rs-pay.pay-paid { background: var(--ok-bg); color: var(--ok-tx); } .rs-pay.pay-partial { background: var(--warn-bg); color: var(--warn-tx); } .rs-pay.pay-unpaid { background: var(--danger-bg); color: var(--danger-tx); }
.rs-title { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.rs-title a { color: var(--text); text-decoration: none; } .rs-title a:hover { color: var(--accent); }
.rs-meta { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.rs-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rs-actions form { margin: 0; }
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft);
  font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s, transform .15s; list-style: none; }
.rs-btn::-webkit-details-marker { display: none; }
.rs-btn:hover { border-color: var(--lilac); color: var(--text); transform: translateY(-1px); }
.rs-btn.is-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .rs-btn.is-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); box-shadow: 0 6px 16px rgba(91,79,229,.28); }
.rs-btn.is-in { background: var(--go); border-color: var(--go); color: #fff; } .rs-btn.is-in:hover { background: var(--go-hover); border-color: var(--go-hover); color: #fff; box-shadow: 0 6px 16px rgba(31,138,76,.25); }
.rs-btn.is-out { background: var(--sky-solid); border-color: var(--sky-solid); color: #fff; } .rs-btn.is-out:hover { background: var(--sky-solid-hover); border-color: var(--sky-solid-hover); color: #fff; box-shadow: 0 6px 16px rgba(47,127,191,.25); }
.rs-btn.is-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.rs-btn.is-danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); } .rs-btn.is-danger:hover { background: var(--danger-bd); color: var(--danger-tx); }
.rs-btn.is-ghost { border-style: dashed; }
.rs-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.rs-btn-block { width: 100%; margin-top: 8px; }

.rs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rs-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); min-width: 0; }
.rs-kpi-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rs-kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.rs-kpi-text { font-size: 22px; }
.rs-kpi-sub { font-size: 12.5px; color: var(--muted); }
.rs-kpi.is-paid { background: var(--mint-bg); border-color: var(--mint-bd); } .rs-kpi.is-paid .rs-kpi-label { color: var(--mint-tx); } .rs-kpi.is-paid .rs-kpi-value { color: var(--mint-num); }
.rs-kpi.is-due { background: var(--due-bg); border-color: var(--peach-bd); } .rs-kpi.is-due .rs-kpi-label, .rs-kpi.is-due .rs-kpi-sub { color: var(--peach-tx); } .rs-kpi.is-due .rs-kpi-value { color: var(--peach-num); }
.rs-kpi.is-clear .rs-kpi-value { color: var(--muted); }
.rs-track { height: 6px; border-radius: 99px; background: var(--glass); overflow: hidden; margin-top: 6px; }
.rs-fill { display: block; height: 100%; border-radius: 99px; background: var(--ok-dot); }

.rs-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.rs-main, .rs-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rs-card { padding: 20px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); }
.rs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rs-card-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.rs-card-head .rs-card-title { margin: 0; }
.rs-subtitle { margin: 16px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rs-empty { margin: 0; color: var(--muted); font-size: 14px; }
.rs-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

.rs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .rs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-fact strong.rs-fact-big { font-size: 26px; line-height: 1.05; letter-spacing: -.02em; }
.rs-fact { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.rs-fact > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-fact-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.rs-fact-label { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rs-fact strong { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.rs-fact-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rs-units { display: flex; flex-direction: column; gap: 8px; }
.rs-unit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rs-unit-code { font-weight: 500; }
.rs-unit-actions { display: flex; gap: 6px; }
.rs-unit-actions form, .rs-inline { margin: 0; display: inline; }
.rs-mini { height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rs-mini:hover { border-color: var(--lilac); color: var(--text); }

.rs-lines { display: flex; flex-direction: column; }
.rs-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--text); }
.rs-line .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-line.is-sub { font-size: 13px; color: var(--muted); padding-left: 14px; }
.rs-line.is-discount .num { color: var(--ok-dot); }
.rs-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 15px; font-weight: 600; }
.rs-total span:last-child { font-size: 28px; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }

.rs-pay-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-pop { position: relative; }
.rs-pop > summary { list-style: none; }
.rs-pop-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(420px, 90vw); padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: 0 18px 40px rgba(26,26,31,.14); }
.rs-pop-block .rs-pop-body { position: static; width: auto; margin-top: 8px; box-shadow: none; }
.rs-ledger { display: flex; flex-direction: column; gap: 6px; }
.rs-ledger-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rs-ledger-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--soft); }
.rs-ledger-ic.is-in { background: var(--ok-bg); color: var(--ok-tx); } .rs-ledger-ic.is-out { background: var(--danger-bg); color: var(--danger-tx); }
.rs-ledger-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-ledger-main strong { font-size: 14px; font-weight: 500; }
.rs-ledger-main span { font-size: 12.5px; color: var(--muted); }
.rs-ledger-amount { display: flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-ledger-amount.is-neg { color: var(--danger-tx); }
.rs-inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }
.rs-inline-form form { margin: 0; }
.rs-deposit { margin-top: 16px; padding: 14px; border-radius: 16px; border: 1px dashed var(--border); }
.rs-deposit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.rs-deposit-head .muted { font-size: 12.5px; }
.rs-deposit-row { margin: 6px 0; font-size: 14px; }
.rs-refund { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--danger-bg); border: 1px solid var(--danger-bd); }
.rs-refund summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--danger-tx); list-style: none; }
.rs-refund form { margin-top: 12px; }

.rs-client { border-top: 4px solid var(--accent); }
.rs-client-top { display: flex; align-items: center; gap: 14px; }
.rs-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 18px; font-weight: 600; }
.rs-client-name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.rs-client-place { font-size: 13px; color: var(--accent); margin-top: 2px; }
.rs-contact { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; font-size: 14px; }
.rs-contact a, .rs-contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); text-decoration: none; word-break: break-all; }
.rs-contact a:hover { color: var(--accent); }
.rs-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; font-style: italic; color: var(--soft); }
.rs-docs { display: flex; flex-direction: column; gap: 8px; }
.rs-doc { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color .15s; }
.rs-doc:hover { border-color: var(--lilac); color: inherit; }
.rs-doc > svg { color: var(--accent); flex-shrink: 0; }
.rs-doc > span { display: flex; flex-direction: column; gap: 1px; }
.rs-doc strong { font-size: 14px; font-weight: 500; } .rs-doc span span { font-size: 12.5px; color: var(--muted); }
.rs-doc.is-credit > svg { color: var(--danger-tx); }
@media (max-width: 1100px) { .rs-layout { grid-template-columns: 1fr; } .rs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rs-facts { grid-template-columns: 1fr; } .rs-actions { width: 100%; } .rs-actions .rs-btn, .rs-actions form { flex: 1; } .rs-unit { grid-template-columns: 1fr; } }
/* Fiche de réservation : encaissement avec monnaie à rendre */
.rs-cash { display: flex; flex-direction: column; gap: 12px; }
.rs-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr)); gap: 6px; }
.rs-method { position: relative; cursor: pointer; }
.rs-method input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rs-method span { display: grid; place-items: center; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; font-weight: 500; color: var(--soft); transition: background .15s, border-color .15s, color .15s; }
.rs-method input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.rs-method input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-cash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rs-cash-input { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; height: 46px; }
.rs-cash-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-change { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.rs-change span { font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rs-change strong { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rs-change.is-ok { background: var(--ok-bg); border-color: var(--mint-bd); } .rs-change.is-ok strong, .rs-change.is-ok span { color: var(--ok-tx); }
.rs-change.is-short { background: var(--danger-bg); border-color: var(--danger-bd); } .rs-change.is-short strong, .rs-change.is-short span { color: var(--danger-tx); }
.rs-cash [hidden] { display: none !important; }
.rs-pay-actions .rs-pop-body { width: min(460px, 92vw); }
/* Fiche de réservation : fenêtres centrées (encaisser, lien, remise, prolonger) */
dialog.rs-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(26,26,31,.28); overflow: auto; }
dialog.rs-dialog-sm { width: min(400px, calc(100vw - 32px)); }
dialog.rs-dialog::backdrop { background: rgba(20,20,25,.45); backdrop-filter: blur(3px); }
dialog.rs-dialog[open] { animation: rsdlg .18s cubic-bezier(.2,.7,.2,1); }
@keyframes rsdlg { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.rs-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--hair); font-size: 16px; }
.rs-dialog-close { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--surface-3); color: var(--soft); font-size: 18px; cursor: pointer; }
.rs-dialog-close:hover { color: var(--text); }
.rs-dialog-body { padding: 18px 20px 20px; }
.rs-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 10px 0 6px; }
.rs-step { width: 50px; height: 50px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 24px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.rs-step:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--lilac); color: var(--accent-text); }
.rs-step:disabled { opacity: .35; cursor: default; }
.rs-step-value { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.rs-step-value strong { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.rs-step-value span { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rs-extend-summary { text-align: center; margin: 12px 0 4px; font-size: 14.5px; }
.rs-extend .muted { text-align: center; font-size: 12.5px; }
.rs-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Fiche de réservation : origine et notes */
.rs-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px 4px 6px; border-radius: 99px; background: var(--surface-3); color: var(--soft); }
.rs-source svg, .rs-source .src-letter { width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--surface); padding: 2px; }
.src-letter { font-size: 11px; font-weight: 700; font-style: normal; }
.rs-source.src-booking { background: #E5ECF7; color: #003580; } .rs-source.src-booking .src-letter { background: #003580; color: #fff; }
.rs-source.src-airbnb { background: #FFE8E9; color: #C4383D; } .rs-source.src-airbnb .src-letter { background: #FF5A5F; color: #fff; }
.rs-source.src-website { background: var(--sky-bg); color: var(--sky-tx); } .rs-source.src-phone { background: var(--accent-soft); color: var(--accent-text); }
.rs-fact-ic.src-booking { background: #003580; color: #fff; } .rs-fact-ic.src-airbnb { background: #FF5A5F; color: #fff; }
.rs-fact-ic .src-letter { font-size: 18px; }
.rs-note-stay { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-tx); font-size: 13.5px; }
.rs-note-stay span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rs-note-stay p { margin: 4px 0 0; white-space: pre-line; }
.rs-notes { display: flex; flex-direction: column; gap: 10px; }
.rs-note-field { display: flex; flex-direction: column; gap: 6px; }
.rs-note-field > span { font-size: 12.5px; font-weight: 600; color: var(--soft); }
.rs-note-field em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.rs-note-field textarea { width: 100%; resize: vertical; min-height: 72px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--text); }
.rs-note-field textarea:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.3); background: var(--surface); }
.rs-note-field.is-internal textarea { background: var(--note-bg); border-color: var(--warn-bd); }
.rs-notes .rs-btn-block { margin-top: 0; }
.field-end { justify-content: flex-end; align-self: end; }
/* Planning : filtre origines / statuts */
.pl-src svg { display: block; }
.pl-filter-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-filter-btn:hover { color: var(--text); border-color: var(--lilac); }
.pl-filter-btn.is-active { background: var(--accent-soft); border-color: var(--lilac); color: var(--accent-text); }
.pl-filter-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11.5px; display: inline-grid; place-items: center; }
.pl-filter-count[hidden] { display: none; }
dialog.pl-filter-dialog { width: min(520px, calc(100vw - 32px)); }
.pl-filter-body { display: flex; flex-direction: column; gap: 18px; }
.pl-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pl-filter-group legend { padding: 0; margin-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-link { border: 0; background: none; padding: 0; font: inherit; text-transform: none; letter-spacing: 0; color: var(--accent); cursor: pointer; margin-left: 6px; }
.pl-filter-search { margin-bottom: 10px; width: 100%; }
.pl-filter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-filter-list.is-sources { max-height: 260px; overflow: auto; }
.pl-check { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); font-size: 13.5px; cursor: pointer; }
.pl-check[hidden] { display: none; }
.pl-check:has(input:checked) { border-color: var(--lilac); background: var(--surface); }
.pl-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.pl-check .pl-src { background: var(--surface-3); color: var(--soft); }
.pl-check .pl-src.src-booking { background: #003580; color: #fff; } .pl-check .pl-src.src-airbnb { background: #FF5A5F; color: #fff; }
.pl-filter-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; }
@media (max-width: 520px) { .pl-filter-list { grid-template-columns: 1fr; } }

/* ---------- Clients : liste ---------- */
.tone-lavender { background: var(--lav-bg); color: var(--lav-tx); }
.tone-peach { background: var(--peach-bg); color: var(--peach-tx); }
.tone-mint { background: var(--mint-bg); color: var(--mint-tx); }
.tone-sky { background: var(--sky-bg); color: var(--sky-tx); }
.cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cl-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); color: var(--text); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
a.cl-kpi:hover { color: var(--text); border-color: var(--lilac); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.cl-kpi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cl-kpi-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; }
.cl-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl-kpi-label { font-size: 12.5px; color: var(--muted); }
.cl-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); overflow: hidden; }
.cl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 18px 12px; }
.cl-search { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); transition: border-color .2s, box-shadow .2s; }
.cl-search:focus-within { border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.3); background: var(--surface); }
.cl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); }
.cl-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--hair); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cl-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.cl-tab span { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
.cl-tab:hover { color: var(--text); }
.cl-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.cl-tab.is-active span { background: var(--accent-soft); color: var(--accent); }
.cl-list { display: flex; flex-direction: column; }
.cl-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hair); color: var(--text); transition: background .15s; }
a.cl-row:hover { background: var(--row-hover); color: var(--text); }
a.cl-row:hover .cl-chev { color: var(--accent); transform: translateX(2px); }
.cl-row:last-child { border-bottom: 0; }
.cl-row-head { padding-top: 10px; padding-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.cl-row-head .num { text-align: right; }
.cl-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-avatar, .cs-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.av-0 { background: var(--lav-bg); color: var(--lav-tx); } .av-1 { background: var(--peach-bg); color: var(--peach-tx); } .av-2 { background: var(--mint-bg); color: var(--mint-tx); }
.av-3 { background: var(--sky-bg); color: var(--sky-tx); } .av-4 { background: var(--cream-bg); color: var(--cream-tx); }
.cl-who-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-name { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.cl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 11.5px; font-weight: 500; }
.cl-place { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-contact { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--soft); }
.cl-contact > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-contact svg { flex-shrink: 0; color: var(--muted); }
.cl-stays { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cl-pill { padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cl-stays-text { font-size: 13px; color: var(--muted); }
.cl-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.cl-money strong { font-size: 14.5px; font-weight: 600; }
.cl-due { font-size: 12px; font-weight: 600; color: var(--danger-tx); white-space: nowrap; }
.cl-chev { color: var(--muted); display: grid; place-items: center; transition: transform .2s var(--ease), color .2s; }
.cl-foot { padding: 12px 18px; border-top: 1px solid var(--hair); }
.cl-foot:empty { display: none; }
.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 20px; text-align: center; color: var(--soft); }
.cl-empty.is-small { padding: 24px 12px; }
.cl-empty-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 1100px) { .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 20px; } .cl-row > .cl-contact, .cl-row-head > span:nth-child(2) { display: none; } }
@media (max-width: 680px) { .cl-row { grid-template-columns: minmax(0, 1fr) auto; } .cl-row > .cl-stays, .cl-row > .cl-chev { display: none; } .cl-row-head { display: none; } }

/* ---------- Clients : fiche ---------- */
.cs-head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cs-avatar { width: 68px; height: 68px; border-radius: 22px; font-size: 22px; }
.cs-current { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; margin-bottom: 16px; padding: 18px 20px; border-radius: 24px; background: var(--lav-bg); border: 1px solid var(--lav-bd); color: var(--lav-num); transition: box-shadow .2s, transform .2s var(--ease); }
.cs-current:hover { color: var(--lav-num); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.cs-current.is-here { background: var(--mint-bg); border-color: var(--mint-bd); color: var(--mint-num); }
.cs-current-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); color: var(--lav-accent); }
.cs-current.is-here .cs-current-ic { color: var(--mint-tx); }
.cs-current-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-current-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.cs-current-text strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cs-current-text > span:last-child { font-size: 13px; opacity: .85; }
.cs-current-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cs-ok { font-size: 12px; font-weight: 600; color: var(--mint-tx); }
.cs-stays { display: flex; flex-direction: column; gap: 8px; }
.cs-stay { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 110px; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--text); transition: border-color .2s, background .2s; }
.cs-stay:hover { color: var(--text); border-color: var(--lilac); background: var(--surface); }
.cs-stay.is-dropped { opacity: .62; }
.cs-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); }
.cs-date-day { font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.cs-date-month { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.cs-stay-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-stay-main strong { font-size: 14.5px; font-weight: 600; }
.cs-stay-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-stay-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cs-stay-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.cs-stay-money strong { font-size: 14.5px; font-weight: 600; }
.cs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cs-card-head .rs-card-title { margin: 0; }
.rs-mini-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.cs-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 24px; }
.cs-prop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; align-items: baseline; }
.cs-prop > span { font-size: 12.5px; color: var(--muted); }
.cs-prop strong { font-weight: 500; word-break: break-word; }
.cs-prop small { font-size: 12px; color: var(--muted); font-weight: 400; }
.cs-prop em { font-style: normal; color: var(--muted); opacity: .75; }
.cs-prop a { word-break: break-all; }
.cs-habits { display: flex; flex-direction: column; gap: 10px; }
.cs-habit { display: flex; align-items: center; gap: 12px; }
.cs-habit .rs-fact-ic { width: 36px; height: 36px; border-radius: 12px; }
.cs-habit > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cs-habit > span:last-child > span { font-size: 12px; color: var(--muted); }
.cs-habit strong { font-size: 14.5px; font-weight: 600; }
.cs-habit small { font-size: 12px; color: var(--muted); }
.cs-none { margin: 0; font-size: 13.5px; }
.cs-danger p { margin: 0 0 4px; font-size: 13px; }
.cs-erase p { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
.cs-erase-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 1100px) { .cs-props { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cs-stay { grid-template-columns: 54px minmax(0, 1fr) auto; } .cs-stay-tags { display: none; } .cs-current { grid-template-columns: auto minmax(0, 1fr); } .cs-current-side, .cs-current > svg { display: none; } }

/* ---------- Clients : formulaire ---------- */
.cf-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.cf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.cf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cf-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cf-type { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s; }
.cf-type input { position: absolute; opacity: 0; pointer-events: none; }
.cf-type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cf-type:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(199,191,255,.5); }
.cf-type .rs-fact-ic { width: 38px; height: 38px; border-radius: 12px; }
.cf-type strong { display: block; font-size: 14.5px; font-weight: 600; }
.cf-type small { font-size: 12px; color: var(--muted); }
[data-cf-business][hidden] { display: none; }
.cf-more { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 6px; }
.cf-more summary { cursor: pointer; padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--accent); list-style: none; display: flex; align-items: center; gap: 8px; }
.cf-more summary::-webkit-details-marker { display: none; }
.cf-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: var(--accent-soft); font-weight: 600; }
.cf-more[open] summary::before { content: "−"; }
.cf-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px 12px 20px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 16px 40px rgba(26,26,31,.25); }
.cf-bar > span { font-size: 13.5px; color: var(--ink-label); }
.cf-bar-actions { display: flex; gap: 8px; }
.cf-bar .rs-btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .cf-bar .rs-btn:hover { background: var(--primary-hover); color: var(--on-primary); }
.cf-bar .rs-btn.is-ghost { background: transparent; border-color: var(--ink-bar); color: #fff; }
.cf-v1 { font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }
@media (max-width: 1100px) { .cf-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cf-grid, .cf-grid-2, .cf-types { grid-template-columns: 1fr; } .cl-kpis { grid-template-columns: 1fr 1fr; } .cs-head-main { align-items: flex-start; } .cf-bar > span { display: none; } }
.wz-for { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border-card); font-size: 13.5px; color: var(--soft); }
.wz-for .cl-avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }

/* ---------- Assistant « Nouvelle réservation » ---------- */
.tone-cream { background: var(--cream-bg); color: var(--cream-tx2); }
.wz { display: flex; flex-direction: column; gap: 16px; }
.wz-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 8px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.wz-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; color: var(--muted); }
.wz-step + .wz-step::before { content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 2px; background: var(--hair); }
.wz-step.is-done + .wz-step::before { background: var(--mint-bd); }
.wz-step-dot { flex-shrink: 0; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--surface-3); color: var(--soft); transition: background .2s, color .2s; }
.wz-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wz-step-num { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.wz-step-label { font-size: 14.5px; font-weight: 600; color: var(--soft); }
.wz-step.is-active { background: var(--ink); color: var(--ink-label); }
.wz-step.is-active .wz-step-dot { background: #fff; color: var(--ink); }
.wz-step.is-active .wz-step-label { color: #fff; }
.wz-step.is-done .wz-step-dot { background: var(--mint-bg); color: var(--mint-tx); }
.wz-step.is-done .wz-step-label { color: var(--text); }
a.wz-step:hover { background: var(--row-hover); color: var(--muted); }
.wz-step.is-todo { opacity: .6; }

.wz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.wz-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wz-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.wz-card { padding: 20px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); }
.wz-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wz-card-head .wz-title { margin: 0; }
.wz-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.wz-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.wz-title .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.wz-muted, .wz-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.wz-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 500; cursor: pointer; }
.wz-sub { margin: 18px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wz-sub:first-of-type { margin-top: 0; }

/* Type de réservation */
.wz-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-kind-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); color: var(--soft); transition: border-color .2s; }
.wz-kind-item > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wz-kind-item strong { font-size: 14.5px; color: var(--text); }
.wz-kind-item small { font-size: 12.5px; color: var(--muted); }
.wz-kind-item.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-kind-check { color: var(--accent); }
a.wz-kind-item:hover { border-color: var(--lilac); color: var(--soft); }

/* Dates */
.wz-range { position: relative; }
.wz-range-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.wz-date { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; outline: none; }
.wz-date:hover { border-color: var(--lilac); }
.wz-date.is-focus, .wz-date:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.wz-date-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wz-date strong { font-size: 16px; font-weight: 600; }
.wz-date input[type="date"] { border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); padding: 0; }
.wz-range:not(.is-enhanced) .wz-date strong { display: none; }
.wz-range-nights { min-width: 70px; padding: 6px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.wz-range-nights:empty { background: transparent; }
.wz-range-nights:empty::before { content: "→"; color: var(--muted); font-weight: 400; }
.wz-range.is-loading { opacity: .6; pointer-events: none; }
.wz-cal { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-width: 680px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: 0 24px 60px rgba(26,26,31,.18); animation: rsdlg .16s var(--ease); }
.wz-cal[hidden] { display: none; }
.wz-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wz-cal-hint { font-size: 13px; font-weight: 600; color: var(--accent); }
.wz-cal-nav { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 20px; line-height: 1; cursor: pointer; }
.wz-cal-nav:hover { border-color: var(--lilac); color: var(--text); }
.wz-cal-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wz-cal-title { margin-bottom: 8px; text-align: center; font-size: 14.5px; font-weight: 600; text-transform: capitalize; }
.wz-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; }
.wz-cal-dow { padding: 4px 0; text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wz-cal-day { position: relative; height: 38px; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer; border-radius: 12px; }
.wz-cal-day:hover { background: var(--accent-soft); color: var(--accent); }
.wz-cal-day.is-past { color: var(--muted); opacity: .55; }
.wz-cal-day.is-today { font-weight: 700; color: var(--accent); }
.wz-cal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 99px; background: currentColor; }
.wz-cal-day.is-between { border-radius: 0; background: var(--accent-soft); color: var(--lav-num); }
.wz-cal-day.is-start, .wz-cal-day.is-end { background: var(--accent); color: #fff; font-weight: 600; opacity: 1; }
.wz-cal-day.is-start.has-range { border-radius: 12px 0 0 12px; }
.wz-cal-day.is-end { border-radius: 0 12px 12px 0; }
.wz-cal-day.is-start.is-end { border-radius: 12px; }
.wz-cal-day.is-start::after, .wz-cal-day.is-end::after { background: #fff; }
.wz-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.wz-cal-count { font-size: 13.5px; font-weight: 600; color: var(--text); }
.wz-cal-quick { display: flex; gap: 6px; }
.wz-cal-chip { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.wz-cal-chip:hover { border-color: var(--lilac); color: var(--text); }
.wz-cal-chip.is-clear { color: var(--muted); }

/* Compteurs − / + */
.wz-qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.wz-qty button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(26,26,31,.08); transition: background .15s, color .15s, transform .1s; }
.wz-qty button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.wz-qty button:active:not(:disabled) { transform: scale(.94); }
.wz-qty button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.wz-qty input { width: 40px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.wz-qty input::-webkit-outer-spin-button, .wz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wz-qty input:focus { outline: none; }

/* Voyageurs */
.wz-guests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-guest { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; border: 1px solid var(--hair); background: var(--surface-2); }
.wz-guest-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wz-guest-text strong { font-size: 14.5px; }
.wz-guest-text small { font-size: 12px; color: var(--muted); }

/* Hébergements libres */
.wz-filter { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.wz-filter:focus-within { border-color: var(--lilac); background: var(--surface); }
.wz-filter input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); min-width: 0; width: 200px; }
.wz-group + .wz-group { margin-top: 16px; }
.wz-group[hidden] { display: none; }
.wz-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.wz-group-head .wz-ic { width: 28px; height: 28px; border-radius: 9px; }
.wz-group-head .muted { font-size: 12.5px; }
.wz-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.wz-unit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.wz-unit[hidden] { display: none; }
.wz-unit:hover { border-color: var(--lilac); }
.wz-unit.is-on { border-color: var(--accent); background: var(--accent-soft); }
.wz-unit-text { display: flex; flex-direction: column; min-width: 0; }
.wz-unit-text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-unit-text small { font-size: 12px; color: var(--muted); }
.wz-switch { -webkit-appearance: none; appearance: none; flex-shrink: 0; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 99px; background: var(--border); cursor: pointer; transition: background .2s; }
.wz-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(26,26,31,.25); transition: transform .2s var(--ease); }
.wz-switch:checked { background: var(--accent); }
.wz-switch:checked::after { transform: translateX(16px); }
.wz-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wz-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface-2); color: var(--soft); font-size: 14px; }
.wz-none { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Options */
.wz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.wz-opt { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface-2); transition: border-color .2s, background .2s; }
.wz-opt.is-on { border-color: var(--lilac); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wz-opt-text strong { font-size: 14px; font-weight: 600; }
.wz-opt-text small { font-size: 12px; color: var(--muted); }
.wz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.wz-tiles.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-tile { position: relative; display: flex; padding: 12px 14px 12px 40px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.wz-tile input { position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.wz-tile > span { display: flex; flex-direction: column; min-width: 0; }
.wz-tile strong { font-size: 14px; font-weight: 600; }
.wz-tile small { font-size: 12px; color: var(--muted); }
.wz-tile:hover { border-color: var(--lilac); }
.wz-tile:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wz-promo { display: flex; gap: 8px; }
.wz-promo .wz-filter { flex: 1; height: 40px; }
.wz-promo .wz-filter input { width: 100%; text-transform: uppercase; }
.wz-promo-error { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--danger-bg); color: var(--danger-tx); font-size: 12.5px; }

/* Client */
.wz-seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 14px; background: var(--surface-3); }
.wz-seg-item { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 11px; color: var(--soft); font-size: 14px; font-weight: 500; cursor: pointer; }
.wz-seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.wz-seg-item.is-on, .wz-seg-item:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(26,26,31,.1); }
.wz-pane[hidden] { display: none; }
.wz-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.wz-search:focus-within { border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.3); background: var(--surface); }
.wz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--text); }
.wz-clients { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wz-clients:empty { display: none; }
.wz-client { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.wz-client input { position: absolute; opacity: 0; pointer-events: none; }
.wz-client:hover { border-color: var(--lilac); }
.wz-client.is-on, .wz-client:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wz-client .cl-avatar { width: 38px; height: 38px; border-radius: 12px; }
.wz-client-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wz-client-text strong { font-size: 14.5px; font-weight: 600; }
.wz-client-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-client-stays { padding: 2px 9px; border-radius: 99px; background: var(--lav-bg); color: var(--lav-tx); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wz-client-check { color: var(--accent); opacity: 0; }
.wz-client.is-on .wz-client-check, .wz-client:has(input:checked) .wz-client-check { opacity: 1; }
.wz-newgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-field { display: flex; flex-direction: column; gap: 6px; }
.wz-field > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--soft); }
.wz-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.wz-field input { height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font: inherit; font-size: 15px; color: var(--text); }
.wz-field input:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(199,191,255,.3); background: var(--surface); }

/* Validation */
.wz-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.wz-source { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.wz-source input { position: absolute; opacity: 0; pointer-events: none; }
.wz-source .pl-src { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; background: var(--surface-3); color: var(--soft); }
.wz-source .pl-src.src-booking { background: #003580; color: #fff; } .wz-source .pl-src.src-airbnb { background: #FF5A5F; color: #fff; }
.wz-source:hover { border-color: var(--lilac); }
.wz-source:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wz-source:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(199,191,255,.5); }
.wz-toggle { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); cursor: pointer; }
.wz-toggle > span { display: flex; flex-direction: column; }
.wz-toggle strong { font-size: 14px; }
.wz-toggle small { font-size: 12.5px; color: var(--muted); }

/* Colonne de droite */
.wz-summary-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.wz-sum-client { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.wz-sum-client .cl-avatar { width: 36px; height: 36px; border-radius: 11px; }
.wz-sum-client > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wz-sum-client strong { font-size: 14.5px; }
.wz-sum-client small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-sum { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.wz-sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.wz-sum dt { display: flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.wz-sum dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }
.wz-price { transition: opacity .2s; }
[data-wz-price].is-loading .wz-price { opacity: .55; }
.wz-price-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wz-price-head .wz-summary-title { margin: 0; }
.wz-price-unit { padding: 8px 0; border-bottom: 1px dashed var(--hair); }
.wz-price-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 1px 0; }
.wz-price-row.is-unit { font-size: 14px; font-weight: 600; color: var(--text); padding-bottom: 3px; }
.wz-price-row.is-good { color: var(--mint-tx); }
.wz-price-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.wz-price-total span { font-size: 14px; font-weight: 600; }
.wz-price-total strong { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wz-price-vat { margin-top: 2px; text-align: right; font-size: 12px; color: var(--muted); }
.wz-actions { display: flex; gap: 8px; }
.wz-next { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: 0; border-radius: 16px; background: var(--primary); color: var(--on-primary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; }
.wz-next:hover { background: var(--primary-hover); box-shadow: 0 10px 24px rgba(91,79,229,.28); transform: translateY(-1px); }
.wz-next.is-final { background: var(--go); } .wz-next.is-final:hover { background: var(--go-hover); box-shadow: 0 10px 24px rgba(31,138,76,.28); }
.wz-back { display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 14px; font-weight: 500; }
.wz-back:hover { color: var(--text); border-color: var(--lilac); }

@media (max-width: 1100px) {
  .wz-layout { grid-template-columns: 1fr; }
  .wz-aside { position: static; }
  .wz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wz-step-num { display: none; }
}
@media (max-width: 760px) {
  .wz-steps { padding: 6px; }
  .wz-step { justify-content: center; padding: 8px; }
  .wz-step-text { display: none; }
  .wz-step.is-active .wz-step-text { display: flex; }
  .wz-kind, .wz-guests, .wz-newgrid, .wz-tiles.is-2 { grid-template-columns: 1fr; }
  .wz-cal-months { grid-template-columns: 1fr; }
  .wz-cal-months > :nth-child(2) { display: none; }
  .wz-range-fields { grid-template-columns: 1fr 1fr; }
  .wz-range-nights { display: none; }
}
/* Planning : case libre survolée / plage sélectionnée */
.pl-track { cursor: pointer; }
.pl-track:hover { background-color: transparent; }
.pl-hover { position: absolute; top: 5px; bottom: 5px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 10px; border: 1.5px dashed var(--accent); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; pointer-events: none; animation: plhover .12s ease-out; }
.pl-hover-plus { flex-shrink: 0; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 15px; line-height: 1; }
.pl-hover.is-selecting { border-style: solid; background: var(--lav-bg); box-shadow: 0 6px 16px rgba(91,79,229,.18); }
.pl-hover.is-going { opacity: .6; }
.pl-viewport.is-compact .pl-hover { padding: 0 2px; } .pl-viewport.is-compact .pl-hover-plus { width: 16px; height: 16px; font-size: 13px; }
@keyframes plhover { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.pl-day.is-hover { background: var(--accent-soft); }
.pl-day.is-hover .pl-dn { color: var(--accent); font-weight: 700; }
.pl-day.is-hover .pl-wd { color: var(--accent); }
.pl-day.is-today.is-hover .pl-dn { color: #fff; }
body.pl-selecting, body.pl-selecting * { cursor: ew-resize !important; user-select: none; }


/* ---------- Ménage ---------- */
.hk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hk-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.hk-kpi { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 14px; font-size: 13.5px; color: inherit; transition: transform .15s var(--ease); }
a.hk-kpi:hover { transform: translateY(-1px); color: inherit; }
.hk-kpi strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hk-kpi.is-alert { background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd); }
.hk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hk-search { height: 40px; }
.hk-search input { width: 150px; }
.hk-mode { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-card); font-size: 13px; color: var(--muted); }
.hk-mode-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--muted); }
.hk-mode.is-on { color: var(--ok-tx); }
.hk-mode.is-on .hk-mode-dot { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-bg); }

.hk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hk-board.no-check { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-col { display: flex; flex-direction: column; min-width: 0; padding: 12px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border-card); }
.hk-col-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.hk-col-head .wz-ic { width: 30px; height: 30px; border-radius: 10px; }
.hk-col-head strong { flex: 1; font-size: 15px; }
.hk-count { min-width: 26px; padding: 2px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.hk-cards { display: flex; flex-direction: column; gap: 8px; }
.hk-col.is-ready .hk-cards { gap: 6px; }
.hk-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: 13px; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; }

.hk-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: 0 1px 2px rgba(26,26,31,.04); }
.hk-card[hidden], .hk-ready[hidden] { display: none; }
.hk-card.is-urgent { border-color: var(--danger-bd); box-shadow: inset 3px 0 0 var(--danger-tx); }
.hk-card-top { display: flex; align-items: center; gap: 10px; }
.hk-card-top .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.hk-card-title { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.hk-card-title strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-card-title small { font-size: 12px; color: var(--muted); }
.hk-since { flex-shrink: 0; font-size: 11.5px; color: var(--muted); }
.hk-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.hk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.hk-tag.is-dirty { background: var(--danger-bg); color: var(--danger-tx); }
.hk-tag.is-cleaning_pending { background: var(--peach-bg); color: var(--peach-tx); }
.hk-tag.is-cleaning_progress { background: var(--lav-bg); color: var(--lav-tx); }
.hk-tag.is-inspection_pending { background: var(--sky-bg); color: var(--sky-tx); }
.hk-tag.is-do_not_disturb, .hk-tag.is-dnd { background: var(--warn-bg); color: var(--warn-tx); }
.hk-tag.is-arrival { background: var(--danger-bg); color: var(--danger-tx); font-weight: 600; }
.hk-tag.is-high { background: var(--peach-bg); color: var(--peach-tx); }
.hk-tag.is-off { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.hk-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--note-bg); border: 1px solid var(--warn-bd); font-size: 12.5px; color: var(--soft); }
.hk-actions { display: flex; align-items: center; gap: 6px; }
.hk-actions form { margin: 0; display: flex; flex: 1; }
.hk-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; }
.hk-btn:hover { border-color: var(--lilac); color: var(--text); }
.hk-btn:active { transform: scale(.98); }
.hk-btn.is-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.hk-btn.is-primary:hover { background: var(--primary-hover); }
.hk-btn.is-go { background: var(--go); border-color: var(--go); color: #fff; }
.hk-btn.is-go:hover { background: var(--go-hover); }

.hk-more { position: relative; flex-shrink: 0; }
.hk-more summary { list-style: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.hk-more summary::-webkit-details-marker { display: none; }
.hk-more[open] summary, .hk-more summary:hover { color: var(--text); border-color: var(--lilac); }
.hk-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: 0 18px 40px rgba(26,26,31,.16); animation: uipop .14s var(--ease); }
.hk-menu form { margin: 0; display: block; }
.hk-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.hk-menu button:hover { background: var(--row-hover); }
.hk-menu svg { color: var(--muted); }

.hk-ready { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-card); }
.hk-ready-code { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-ready .hk-more summary { width: 30px; height: 30px; border-radius: 9px; border-color: transparent; }

.hk-others { margin-top: 16px; }
.hk-task-list { display: flex; flex-direction: column; gap: 8px; }
.hk-task { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); }
.hk-task-main { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.hk-task-main strong { font-size: 14px; }
.hk-task-main small { font-size: 12.5px; color: var(--muted); }
.hk-task .hk-actions { flex: 0 0 auto; }
.hk-task .hk-btn { flex: 0 0 auto; }

.hk-new { display: flex; flex-direction: column; gap: 10px; }
.hk-new .wz-sub { margin: 6px 0 0; }
.hk-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-prio { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-3); align-self: flex-start; }

/* Réglages → Ménage */
.hk-settings { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.hk-opt { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer; }
.hk-opt + .hk-opt { margin-top: 10px; }
.hk-opt:hover { border-color: var(--lilac); }
.hk-opt-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hk-opt-text strong { font-size: 15px; }
.hk-opt-text span { font-size: 13.5px; color: var(--soft); }
.hk-opt-text em { font-style: normal; font-weight: 600; color: var(--text); }
.hk-opt-text small { font-size: 12.5px; color: var(--muted); }
.hk-flow { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.hk-flow li { position: relative; flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; padding: 0 12px 0 0; }
.hk-flow li + li::before { content: ""; position: absolute; left: -2px; top: 6px; width: 18px; height: 2px; background: var(--border); transform: translateX(-100%); }
.hk-flow strong { font-size: 14px; }
.hk-flow small { font-size: 12.5px; color: var(--muted); }
.hk-dot { width: 14px; height: 14px; border-radius: 99px; margin-bottom: 6px; }
.hk-dot.is-todo { background: var(--peach-tx); } .hk-dot.is-doing { background: var(--accent); } .hk-dot.is-check { background: var(--sky-accent); } .hk-dot.is-ready { background: var(--ok-dot); }
.hk-settings-actions { display: flex; justify-content: space-between; gap: 8px; }

@media (max-width: 1200px) { .hk-board, .hk-board.no-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .hk-board, .hk-board.no-check { grid-template-columns: 1fr; } .hk-types { grid-template-columns: 1fr; } .hk-head { align-items: stretch; } }
.hk-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-board.no-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-col.is-ready { margin-top: 14px; }
.hk-col.is-ready .hk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 6px; }
.hk-ready { flex-wrap: wrap; row-gap: 4px; }
.hk-ready-code { flex: 1 0 auto; }
@media (max-width: 1100px) { .hk-board, .hk-board.no-check { grid-template-columns: 1fr; } }

/* ---------- Ménage : plan des emplacements ---------- */
.hr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hr-filters { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-card); flex-wrap: wrap; }
.hr-filter { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.hr-filter strong { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-filter:hover { color: var(--text); background: var(--row-hover); }
.hr-filter.is-on { background: var(--ink); color: #fff; }
.hr-filter.is-on strong { background: rgba(255,255,255,.16); color: #fff; }
.hr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hr-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 99px; background: var(--muted); }
.hr-dot.is-todo { background: var(--todo-dot); } .hr-dot.is-doing { background: var(--accent); } .hr-dot.is-check { background: var(--sky-accent); }
.hr-dot.is-ready { background: var(--ok-dot); } .hr-dot.is-dnd { background: var(--warn-line); } .hr-dot.is-off { background: var(--muted); }
.hr-dot.is-doing { box-shadow: 0 0 0 0 rgba(91,79,229,.5); animation: hrpulse 1.8s ease-out infinite; }
@keyframes hrpulse { 0% { box-shadow: 0 0 0 0 rgba(91,79,229,.45); } 70% { box-shadow: 0 0 0 7px rgba(91,79,229,0); } 100% { box-shadow: 0 0 0 0 rgba(91,79,229,0); } }

.hr-urgent { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border-radius: 20px; background: var(--danger-bg); border: 1px solid var(--danger-bd); }
.hr-urgent-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); color: var(--danger-tx); }
.hr-urgent-text { display: flex; flex-direction: column; flex: 1; min-width: 220px; }
.hr-urgent-text strong { font-size: 14.5px; color: var(--danger-tx); }
.hr-urgent-text span { font-size: 12.5px; color: var(--soft); }
.hr-urgent-list { display: flex; gap: 6px; flex-wrap: wrap; }
.hr-urgent-chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--danger-bd); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.hr-urgent-chip small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.hr-urgent-chip:hover { border-color: var(--danger-tx); }

.hr-group { margin-bottom: 18px; }
.hr-group[hidden] { display: none; }
.hr-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hr-group-head .wz-ic { width: 30px; height: 30px; border-radius: 10px; }
.hr-group-head strong { font-size: 15.5px; }
.hr-group-count { padding: 1px 8px; border-radius: 99px; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--soft); }
.hr-group-sum { display: flex; gap: 12px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
.hr-group-sum > span { display: inline-flex; align-items: center; gap: 6px; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(156px, 100%), 1fr)); gap: 8px; }

.hr-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 92px; padding: 11px 12px 10px; border-radius: 16px; border: 1px solid var(--border-card); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, border-color .2s; overflow: hidden; }
.hr-tile[hidden] { display: none; }
.hr-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.hr-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--lilac); }
.hr-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hr-tile.is-todo { background: var(--peach-bg); border-color: var(--peach-bd); } .hr-tile.is-todo::before { background: var(--todo-dot); }
.hr-tile.is-doing { background: var(--lav-bg); border-color: var(--lav-bd); } .hr-tile.is-doing::before { background: var(--accent); }
.hr-tile.is-check { background: var(--sky-bg); border-color: var(--sky-bd); } .hr-tile.is-check::before { background: var(--sky-accent); }
.hr-tile.is-dnd { background: var(--warn-bg); border-color: var(--warn-bd); } .hr-tile.is-dnd::before { background: var(--warn-line); }
.hr-tile.is-off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface-3) 8px 16px); color: var(--muted); }
.hr-tile.is-urgent { box-shadow: 0 0 0 2px var(--danger-tx); }
.hr-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.hr-code { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-since { flex-shrink: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hr-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.hr-tile.is-ready .hr-state { color: var(--muted); }
.hr-icons { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.hr-flag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 7px; background: var(--glass); color: var(--soft); font-size: 11px; font-weight: 600; }
.hr-tile.is-ready .hr-flag { background: var(--surface-3); }
.hr-flag.is-arrival { background: var(--danger-tx); color: #fff; }
.hr-none { margin: 30px 0; text-align: center; color: var(--muted); }

/* Fenêtre d'un emplacement */
dialog.hr-dialog { width: min(420px, calc(100vw - 32px)); }
.hr-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hair); }
.hr-dialog-head > div { display: flex; flex-direction: column; }
.hr-d-type { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hr-dialog-head strong { font-size: 22px; letter-spacing: -0.02em; }
.hr-dialog.is-todo .hr-dialog-head { background: var(--peach-bg); } .hr-dialog.is-doing .hr-dialog-head { background: var(--lav-bg); }
.hr-dialog.is-check .hr-dialog-head { background: var(--sky-bg); } .hr-dialog.is-ready .hr-dialog-head { background: var(--mint-bg); }
.hr-dialog.is-dnd .hr-dialog-head { background: var(--warn-bg); }
.hr-d-state { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.hr-d-state span:last-child { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.hr-d-facts { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hr-d-facts[hidden] { display: none; }
.hr-d-facts li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.hr-d-facts li.is-alert { background: var(--danger-bg); color: var(--danger-tx); font-weight: 600; }
.hr-d-facts li.is-warn { background: var(--peach-bg); color: var(--peach-tx); }
.hr-dialog .hk-note { margin-top: 10px; }
.hr-dialog .hk-note[hidden] { display: none; }
.hr-d-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.hr-act { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .2s, transform .1s; }
.hr-act[hidden] { display: none; }
.hr-act:hover { border-color: var(--lilac); }
.hr-act:active { transform: scale(.99); }
.hr-act.is-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.hr-act.is-primary:hover { background: var(--primary-hover); box-shadow: 0 8px 20px rgba(91,79,229,.25); }
.hr-act.is-go { background: var(--go); border-color: var(--go); color: #fff; }
.hr-act.is-go:hover { background: var(--go-hover); }
.hr-d-actions [data-hr-d-reason][hidden] { display: none; }
.hr-d-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-top: 6px; border-top: 1px solid var(--hair); margin-top: 4px; }
.hr-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--soft); cursor: pointer; }
.hr-link[hidden] { display: none; }
.hr-link:hover { color: var(--accent); }
@media (max-width: 680px) { .hr-grid { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); } .hr-group-sum { margin-left: 0; width: 100%; } }
/* Fiche réservation : check-in bloqué tant que le ménage n'est pas fini */
.rs-btn.is-blocked { background: var(--surface-3); border-style: dashed; color: var(--muted); }
.rs-btn.is-blocked:hover { color: var(--text); }
.rs-blocked { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; background: var(--peach-bg); border: 1px solid var(--peach-bd); }
.rs-blocked-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); color: var(--peach-tx); }
.rs-blocked-text { display: flex; flex-direction: column; flex: 1; min-width: 220px; }
.rs-blocked-text strong { font-size: 14.5px; color: var(--peach-num); }
.rs-blocked-text span { font-size: 13px; color: var(--soft); }
/* Ménage : la journée + action en un geste sur la tuile */
.hr-day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.hr-day-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); min-width: 0; }
.hr-day-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hr-day-value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hr-day-value small { margin-left: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.hr-day-sub { font-size: 12.5px; color: var(--muted); }
.hr-day-card .kpi-track { background: var(--surface-3); margin: 2px 0; }
.hr-day-card.is-alert { background: var(--danger-bg); border-color: var(--danger-bd); }
.hr-day-card.is-alert .hr-day-label, .hr-day-card.is-alert .hr-day-sub { color: var(--danger-tx); }
.hr-day-card.is-alert .kpi-fill { background: var(--danger-tx); }
.hr-day-card.is-ok .kpi-fill { background: var(--ok-dot); }
.hr-tile { user-select: none; }
.hr-quick { margin: 4px 0 0; }
.hr-quick-btn { width: 100%; height: 32px; border-radius: 10px; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; }
.hr-quick-btn:active { transform: scale(.98); }
.hr-quick-btn.is-primary { background: var(--primary); color: var(--on-primary); }
.hr-quick-btn.is-primary:hover { background: var(--primary-hover); }
.hr-quick-btn.is-go { background: var(--go); color: #fff; }
.hr-quick-btn.is-go:hover { background: var(--go-hover); }
.hr-flag.is-tomorrow { background: var(--warn-bg); color: var(--warn-tx); }
.hr-tile.is-ready .hr-flag.is-tomorrow { background: var(--warn-bg); }
@media (max-width: 1100px) { .hr-day { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ménage : 6 colonnes, noms sans gras, emplacements occupés en rouge */
.hr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hr-code { font-weight: 500; }
.hr-dot.is-occupied { background: var(--sky-accent); }
.hr-flag.is-occupied, .hr-tile.is-ready .hr-flag.is-occupied { background: var(--sky-bg-2); color: var(--sky-tx); }
@media (max-width: 1000px) { .hr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ménage : message après une action (sans rechargement) */
.hr-toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px rgba(26,26,31,.25); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.hr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hr-toast.is-error { background: var(--danger-tx); }
form.is-sending { opacity: .6; pointer-events: none; }

/* ---------- Résidents ---------- */
.cl-kpi.is-alert { background: var(--danger-bg); border-color: var(--danger-bd); }
.cl-kpi.is-alert .cl-kpi-label { color: var(--danger-tx); }
.rz-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) 20px; }
.rz-unit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rz-unit strong { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-unit small { font-size: 12.5px; color: var(--muted); }
.rz-unit-ic { width: 22px; height: 22px; border-radius: 7px; }
.rz-pay { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rz-pay small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rz-fill { display: block; height: 100%; border-radius: 99px; background: var(--ok-dot); }
.rz-st-active { background: var(--ok-bg); color: var(--ok-tx); }
.rz-st-draft { background: var(--warn-bg); color: var(--warn-tx); }
.rz-st-ended { background: var(--surface-3); color: var(--muted); }
.rz-st-cancelled { background: var(--danger-bg); color: var(--danger-tx); }
.rz-late { background: var(--danger-bg); color: var(--danger-tx); font-weight: 600; }
.rs-kpi.is-late { background: var(--danger-bg); border-color: var(--danger-bd); }
.rs-kpi.is-late .rs-kpi-label, .rs-kpi.is-late .rs-kpi-sub { color: var(--danger-tx); }

/* Nouveau contrat */
.rz-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); border: 1px solid var(--lav-bd); }
.rz-picked .cl-avatar { width: 40px; height: 40px; }
.rz-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rz-dates .field { margin-bottom: 0; }
.rz-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.rz-length { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.rz-length:empty { display: none; }
.rz-free-hint { margin: 0 0 12px; }
.rz-unit-pick { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.rz-unit-pick[hidden] { display: none; }
.rz-unit-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rz-unit-pick:hover { border-color: var(--lilac); }
.rz-unit-pick.is-on, .rz-unit-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rz-unit-pick.is-on .wz-client-check, .rz-unit-pick:has(input:checked) .wz-client-check { opacity: 1; }
.rz-unit-pick.is-taken { cursor: not-allowed; opacity: .5; background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface-3) 8px 16px); }
.rz-unit-pick.is-taken:hover { border-color: var(--hair); }
.rz-units .wz-group + .wz-group { margin-top: 14px; }
.rz-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: end; }
.rz-price .wz-field input { font-size: 18px; font-weight: 600; }
.rz-schedule { margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--soft); }
.rz-schedule:empty { display: none; }
.mt-2 { margin-top: 12px; }

/* Fiche contrat */
.rz-sched { display: flex; flex-direction: column; gap: 6px; }
.rz-inst { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 96px; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface-2); }
.rz-inst.is-paid { opacity: .72; }
.rz-inst.is-late { background: var(--danger-bg); border-color: var(--danger-bd); }
.rz-inst.is-late .rz-inst-main small { color: var(--danger-tx); font-weight: 600; }
.rz-inst.is-partial { border-color: var(--warn-bd); }
.rz-inst-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rz-inst-main strong { font-size: 14px; }
.rz-inst-main small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-inst-money { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.rz-inst-money strong { font-size: 14.5px; }
.rz-inst-money small { font-size: 12px; color: var(--danger-tx); }
.rz-inst-act { display: flex; justify-content: flex-end; }
.rz-ok { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok-tx); }
.rz-rates { padding: 0; }
.rz-rates > :not(summary) { margin-left: 22px; margin-right: 22px; }
.rz-rates > form { padding-bottom: 20px; }
.rz-rates-sum { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; }
.rz-rates-sum::-webkit-details-marker { display: none; }
.rz-rates-sum .rs-card-title { margin: 0; flex: 1; }
.rz-rates-sum svg { color: var(--muted); transition: transform .2s; }
.rz-rates[open] .rz-rates-sum svg { transform: rotate(180deg); }
.rz-rate-list { display: flex; flex-direction: column; gap: 6px; }
.rz-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); }
.rz-rate.is-off { opacity: .55; }
.rz-rate .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.rz-rate-main { display: flex; flex-direction: column; flex: 1; min-width: 160px; }
.rz-rate-main strong { font-size: 14px; }
.rz-rate-main small { font-size: 12px; color: var(--muted); }
.rz-rate-now { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
.rz-rate-now small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.rz-rate-edit { display: flex; align-items: center; gap: 6px; }
.rz-rate-edit .input-sm { width: 86px; }
.rz-exclude { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.rz-collect { display: flex; flex-direction: column; gap: 12px; }
.rz-collect .wz-sub { margin: 0; }
.rz-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.rz-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 6px; }
.rz-methods .wz-source { justify-content: center; padding: 10px; }
.rz-current { margin: 0; }

/* Présence */
.rz-stay-head { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-card); }
.rz-stay-head > span:last-child { display: flex; flex-direction: column; }
.rz-stay-head strong { font-size: 15px; }
.rz-stay-head small { font-size: 12.5px; color: var(--muted); }
.rz-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px; }
.rz-line .wz-switch { margin-left: 4px; }
.rz-qty-free { height: 40px; width: 130px; }
.rz-qty-free input { width: 60px; text-align: right; }
.rz-qty-free span { font-size: 12.5px; color: var(--muted); }
.rz-pline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--hair); font-size: 13.5px; }
.rz-pline > span { display: flex; flex-direction: column; min-width: 0; }
.rz-pline small { font-size: 12px; color: var(--muted); }
.rz-amount { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.rz-amount:focus-within { border-color: var(--lilac); background: var(--surface); }
.rz-amount input { width: 70px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.rz-amount span { font-size: 12.5px; color: var(--muted); }
[data-rz-preview] { transition: opacity .2s; }
[data-rz-preview].is-loading { opacity: .55; }
@media (max-width: 1100px) { .rz-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 20px; } .rz-row > .rz-pay, .rz-row.cl-row-head > span:nth-child(3) { display: none; } }
@media (max-width: 680px) { .rz-row { grid-template-columns: minmax(0, 1fr) auto; } .rz-row > .rz-unit, .rz-row > .cl-chev { display: none; } .rz-dates, .rz-price { grid-template-columns: 1fr; } .rz-inst { grid-template-columns: 54px minmax(0, 1fr) auto; } .rz-inst-act { grid-column: 1 / -1; } .rz-lines { grid-template-columns: 1fr; } }
/* Réglages → Résidents */
.rz-type-tabs { padding: 0; margin-bottom: 12px; }
.rz-type-tabs .cl-tab { gap: 8px; }
.rz-unit-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13.5px; }
.rz-catalog { display: flex; flex-direction: column; gap: 6px; }
.rz-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.rz-cat:hover { border-color: var(--lilac); }
.rz-cat.is-off { opacity: .55; }
.rz-cat .wz-ic { width: 30px; height: 30px; border-radius: 10px; }
.rz-cat-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rz-cat-main strong { font-size: 14px; }
.rz-cat-main small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-cat-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rz-cat-price small { font-size: 11px; font-weight: 500; color: var(--accent-text); }
.rz-item-form { display: flex; flex-direction: column; gap: 12px; }
.rz-item-form .field { margin-bottom: 0; }
.rz-item-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rz-item-prices [hidden] { display: none; }
.rz-item-form .wz-toggle { margin-top: 0; }
.rz-remove { margin-top: 10px; text-align: center; }
/* Housekeeping : occupation (libre / occupé) + état du ménage sur chaque tuile */
.hr-occ { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.hr-occ.is-occ { background: var(--sky-solid); color: #fff; }
.hr-occ.is-free { background: var(--surface-3); color: var(--muted); font-weight: 500; }
.hr-tile.is-clean-occ { background: var(--sky-bg); border-color: var(--sky-bd); }
.hr-tile.is-clean-occ::before { background: var(--sky-solid); }
.hr-dot.is-clean-occ { background: var(--ok-dot); }
.hr-dialog.is-clean-occ .hr-dialog-head { background: var(--sky-bg); }

/* Caisse : choix du point de vente */
.pc-intro { margin: 0 0 16px; color: var(--muted); }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.pc-card { display: flex; flex-direction: column; gap: 8px; min-height: 220px; padding: 20px; border-radius: 26px; border: 1px solid var(--border-card); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .15s var(--ease), box-shadow .2s, border-color .2s; }
.pc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--lilac); color: var(--text); }
.pc-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; }
.pc-card.tone-0 .pc-ic { background: var(--lav-bg); color: var(--lav-tx); } .pc-card.tone-1 .pc-ic { background: var(--peach-bg); color: var(--peach-tx); }
.pc-card.tone-2 .pc-ic { background: var(--mint-bg); color: var(--mint-tx); } .pc-card.tone-3 .pc-ic { background: var(--sky-bg); color: var(--sky-tx); }
.pc-card.tone-4 .pc-ic { background: var(--cream-bg); color: var(--cream-tx2); }
.pc-name { margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pc-state { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pc-state.is-open { background: var(--ok-bg); color: var(--ok-tx); }
.pc-today { font-size: 13.5px; color: var(--muted); }
.pc-today strong { color: var(--text); font-size: 16px; }
.pc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 10px 16px; border-radius: 13px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 14.5px; }

/* Réservation : consommations de caisse en attente (reportées au check-out) */
.rs-pos { border-color: var(--warn-bd); }
.rs-pos .rs-card-title svg { color: var(--warn-tx); vertical-align: -2px; }
.rs-pos-intro { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.rs-pos-list { display: grid; gap: 8px; }
.rs-pos-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); }
.rs-pos-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rs-pos-lines { font-size: 13px; color: var(--soft); }
.rs-pos-error { font-size: 13px; color: var(--danger-tx); }
.rs-pos-total { font-weight: 700; font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) { .rs-pos-item { flex-wrap: wrap; } }

/* Détail du prix : justificatif d'un ticket de caisse reporté sur le séjour */
.rs-ticket-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: 1px; }
.rs-ticket-btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.rs-ticket { width: min(560px, calc(100vw - 32px)); }
.rs-ticket-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 16px; }
.rs-ticket-facts dt { font-size: 12px; color: var(--muted); }
.rs-ticket-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--text); }
.rs-ticket-items { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13.5px; }
.rs-ticket-items th { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); }
.rs-ticket-items td { padding: 7px 4px; border-bottom: 1px solid var(--border-card); color: var(--text); }
.rs-ticket-items .num { text-align: right; white-space: nowrap; }
.rs-ticket-items small { color: var(--muted); }
.rs-ticket-seal { display: flex; align-items: center; gap: 6px; margin: 12px 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .rs-ticket-facts { grid-template-columns: 1fr; } }

/* ---------- Tarification : calendrier des prix (tous les types, jours en colonnes) ---------- */
.rg-card { --rg-col: 56px; --rg-side: 240px; position: relative; }
.rg-tools-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-search { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 13px; background: var(--surface-3); color: var(--muted); }
.rg-search input { width: 200px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.rg-ghost { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rg-ghost:hover { background: var(--surface-2); }
.rg-ghost svg { transition: transform .15s; }
.rg-ghost.is-open svg { transform: rotate(180deg); }

.rg-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 20px 12px; font-size: 12.5px; color: var(--muted); }
.rg-key { display: inline-flex; align-items: center; gap: 6px; }
.rg-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }
.rg-swatch.is-set { box-shadow: inset 0 -3px 0 var(--accent-soft); }
.rg-swatch.is-mixed { background: var(--sky-bg); border-color: var(--sky-bd); }
.rg-swatch.is-missing { background: var(--warn-bg); border-color: var(--warn-bd); }
.rg-legend .rg-dot { position: static; }
.rg-hint { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }

.rg-board { overflow: auto; border-top: 1px solid var(--border-card); overscroll-behavior: contain; }
.rg-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; user-select: none; -webkit-user-select: none; }
.rg-table th, .rg-table td { padding: 0; }
.rg-corner, .rg-side { position: sticky; left: 0; z-index: 2; width: var(--rg-side); min-width: var(--rg-side); max-width: var(--rg-side); background: var(--surface); border-right: 1px solid var(--border-card); text-align: left; }
.rg-corner { top: 0; z-index: 4; padding: 0 16px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border-card); }
.rg-day { position: sticky; top: 0; z-index: 3; width: var(--rg-col); min-width: var(--rg-col); height: 58px; padding: 16px 0 6px; background: var(--surface); border-bottom: 1px solid var(--border-card); text-align: center; vertical-align: bottom; }
.rg-day.is-weekend { background: var(--surface-2); }
.rg-day.is-month { box-shadow: inset 1px 0 0 var(--border); }
.rg-month { position: absolute; top: 4px; left: 6px; font-size: 11px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.rg-wd { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.rg-dn { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.rg-day.is-today .rg-dn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--primary); color: var(--on-primary); }

.rg-row .rg-side { height: 48px; padding: 0 12px; border-bottom: 1px solid var(--border-card); }
.rg-row.is-type .rg-side { display: flex; align-items: center; gap: 10px; height: 56px; }
.rg-row.is-type .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.rg-name { display: grid; min-width: 0; line-height: 1.25; }
.rg-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.rg-count { font-size: 12px; color: var(--muted); }
.rg-toggle { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.rg-toggle:hover { background: var(--surface-3); color: var(--text); }
.rg-toggle svg { transition: transform .15s; }
.rg-toggle.is-open svg { transform: rotate(90deg); }
.rg-row.is-unit .rg-side { display: flex; align-items: center; gap: 8px; height: 44px; padding-left: 50px; }
.rg-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--soft); }
.rg-off { flex-shrink: 0; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 11px; }

.rg-cell { position: relative; height: 56px; border-bottom: 1px solid var(--border-card); border-right: 1px solid var(--border-card); background: var(--surface); text-align: center; cursor: cell; transition: background .08s; }
.rg-row.is-unit .rg-cell { height: 44px; }
.rg-cell.is-weekend { background: var(--surface-2); }
.rg-cell.is-today { box-shadow: inset 2px 0 0 var(--primary); }
.rg-cell.is-past .rg-p { opacity: .55; }
.rg-p { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.rg-row.is-unit .rg-p { font-weight: 500; color: var(--soft); }
.rg-cell.is-mixed { background: var(--sky-bg); }
.rg-cell.is-mixed .rg-p { font-size: 11.5px; color: var(--sky-tx); }
.rg-cell.is-missing { background: var(--warn-bg); }
.rg-cell.is-missing .rg-p { color: var(--warn-tx); font-weight: 500; }
.rg-cell.is-closed { background: var(--surface-3); }
.rg-cell.is-closed .rg-p { text-decoration: line-through; color: var(--muted); }
.rg-cell.is-empty { cursor: default; }
.rg-cell:hover { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.rg-cell.is-sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.rg-cell.is-sel .rg-p { color: var(--accent-text); }
.rg-warn { position: absolute; top: 4px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--warn-line); color: var(--on-primary); font-size: 10px; font-weight: 700; line-height: 14px; }
.rg-occ { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rg-occ i { display: block; height: 100%; border-radius: 3px; background: var(--ok-dot); }
.rg-occ.is-full i { background: var(--todo-dot); }
.rg-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: inline-block; }
.rg-none { padding: 30px; text-align: center; color: var(--muted); }
.rg-loading { margin: 0; padding: 10px 20px; color: var(--muted); font-size: 13px; }
.rg-loading[hidden] { display: none; }

/* Barre d'action de la sélection */
.rg-panel { position: fixed; left: 50%; bottom: 20px; z-index: 30; width: min(760px, calc(100vw - 32px)); transform: translateX(-50%); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }
.rg-panel[hidden] { display: none; }
.rg-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--border-card); }
.rg-panel-head strong { display: block; font-size: 15px; color: var(--text); }
.rg-panel-head .muted { font-size: 13px; }
.rg-panel-body { display: grid; gap: 12px; padding: 14px 18px 16px; }
.rg-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-3); justify-self: start; flex-wrap: wrap; }
.rg-mode { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rg-mode.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.rg-mode-pane { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rg-mode-pane[hidden] { display: none; }
.rg-price { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.rg-price:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rg-price input { width: 110px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.rg-price span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.rg-price.is-small { height: 42px; }
.rg-price.is-small input { width: 90px; font-size: 18px; }
.rg-pane-hint { font-size: 13px; color: var(--muted); }
.rg-pane-hint.is-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--warn-tx); }
.rg-adjust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-adjust .pl-seg-btn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.rg-quick { display: flex; gap: 6px; }
.rg-chip { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rg-chip:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
.rg-weekdays { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-weekdays-label { margin-right: 4px; font-size: 13px; color: var(--muted); }
.rg-wd { position: relative; }
.rg-wd input { position: absolute; opacity: 0; pointer-events: none; }
.rg-wd span { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.rg-wd input:checked + span { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
.rg-wd input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rg-error { margin-right: auto; color: var(--danger-tx); font-size: 13px; }
.rg-error[hidden] { display: none; }

/* Fenêtre « Modifier des prix » */
.rg-bulk { width: min(680px, calc(100vw - 32px)); }
.rg-bulk-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.rg-bulk-units { display: grid; gap: 10px; max-height: 46vh; overflow: auto; margin-bottom: 14px; }
.rg-bulk-type { margin: 0; padding: 10px 12px; border: 1px solid var(--border-card); border-radius: 14px; }
.rg-bulk-type legend { padding: 0 4px; }
.rg-bulk-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.rg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--soft); cursor: pointer; }
.rg-check input { accent-color: var(--primary); }

.rg-toast { position: fixed; left: 50%; bottom: 28px; z-index: 40; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--surface); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; }
.rg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.rg-toast[hidden] { display: none; }

@media (max-width: 760px) {
  .rg-card { --rg-side: 150px; }
  .rg-row.is-unit .rg-side { padding-left: 14px; }
  .rg-hint { margin-left: 0; }
  .rg-search input { width: 140px; }
  .rg-bulk-dates { grid-template-columns: 1fr; }
  .rg-panel { bottom: 10px; }
}
.rg-p.is-range { display: grid; line-height: 1.15; }
.rg-p.is-range b { font-size: 12px; font-weight: 600; }
.rg-p.is-range small { font-size: 10.5px; font-weight: 500; opacity: .85; }
.rg-row.is-unit .rg-side { font-weight: 400; }
.rg-row.is-type .rg-side { font-weight: 400; }
.rg-loading { position: absolute; top: 14px; right: 20px; z-index: 6; padding: 6px 12px; border-radius: 99px; background: var(--surface-3); font-size: 12.5px; }
.rg-card.has-sel .rg-board { padding-bottom: 240px; }
.rg-bulk-type legend { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; }
.rg-bulk-type legend .wz-ic { width: 26px; height: 26px; border-radius: 8px; }
.rg-bulk-type legend strong { font-size: 14px; color: var(--text); }
.rg-all { margin-left: auto; }
.rg-all.is-partial span { background: var(--surface-3); color: var(--accent-text); }
.rg-bulk-list { gap: 6px; margin-top: 10px; }
.rg-bulk-list .rg-wd span { min-width: 0; height: 30px; font-weight: 500; }

/* Fenêtre « Modifier des prix » : une ligne par type, emplacements repliés */
.rg-bulk { width: min(620px, calc(100vw - 32px)); }
.rg-bulk-step { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.rg-bulk-step span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; }
.rg-bulk-dates { margin-bottom: 20px; }
.rg-bulk-types { display: grid; gap: 8px; max-height: 44vh; overflow: auto; margin-bottom: 4px; padding: 2px; }
.rg-bt { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color .15s, background .15s; }
.rg-bt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.rg-bt-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.rg-bt-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rg-bt-main input { position: absolute; opacity: 0; pointer-events: none; }
.rg-bt-box { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 7px; background: var(--surface); color: transparent; transition: background .15s, border-color .15s; }
.rg-bt-main input:checked + .rg-bt-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.rg-bt.is-partial .rg-bt-box { background: var(--primary); border-color: var(--primary); }
.rg-bt.is-partial .rg-bt-box svg { display: none; }
.rg-bt.is-partial .rg-bt-box::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--on-primary); }
.rg-bt-main input:focus-visible + .rg-bt-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg-bt-main .wz-ic { width: 34px; height: 34px; border-radius: 11px; }
.rg-bt-name { display: grid; min-width: 0; line-height: 1.3; }
.rg-bt-name strong { font-size: 14.5px; color: var(--text); }
.rg-bt-name small { font-size: 12.5px; color: var(--muted); }
.rg-bt.is-on .rg-bt-name small { color: var(--accent-text); }
.rg-bt-more { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rg-bt-more:hover { color: var(--text); background: var(--surface-2); }
.rg-bt-more svg { transition: transform .15s; }
.rg-bt.is-open .rg-bt-more svg { transform: rotate(180deg); }
.rg-bt-detail { padding: 0 12px 12px 46px; }
.rg-bt-detail[hidden] { display: none; }
.rg-bt-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rg-search.is-small { height: 34px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.rg-search.is-small input { width: 150px; font-size: 13px; }
.rg-bt-detail .rg-bulk-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow: auto; margin: 0; }
.rg-bt-detail .rg-wd[hidden] { display: none; }
.rg-bulk-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-card); }
.rg-bulk-summary { margin-right: auto; font-size: 13px; color: var(--muted); }
.rg-bulk-summary.is-on { color: var(--accent-text); font-weight: 600; }
@media (max-width: 760px) { .rg-bt-detail { padding-left: 12px; } }
.rg-bt-tools .pl-link { white-space: nowrap; }
.rg-bt-detail { margin: 0 10px 10px; padding: 12px; border-radius: 12px; background: var(--surface); }
.rg-bt-detail .rg-wd input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.rg-bulk-summary { min-width: 0; }
.rg-bulk-types { overflow-x: hidden; }
.rg-bt-tools { flex-wrap: wrap; gap: 8px 14px; }
.rg-bt-tools .rg-search.is-small { flex: 1 1 160px; }
.rg-bt-tools .rg-search.is-small input { width: 100%; }

/* ---------- Réglages : cadre (menu des sections + contenu pleine largeur) ---------- */
.st-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.st-nav { position: sticky; top: 16px; display: grid; gap: 18px; padding: 14px 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.st-nav-group { display: grid; gap: 2px; }
.st-nav-title { padding: 0 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.st-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: var(--soft); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; }
.st-nav-item:hover { background: var(--surface-2); color: var(--text); }
.st-nav-item.is-on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.st-nav-ic { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.st-main { min-width: 0; display: grid; gap: 18px; }

/* En-tête d'une page de réglages */
.st-head { display: flex; align-items: flex-start; gap: 14px; }
.st-head-ic { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.st-head h2 { margin: 0; font-size: 20px; font-weight: 650; color: var(--text); }
.st-head p { margin: 3px 0 0; max-width: 70ch; color: var(--muted); font-size: 14px; }
.st-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Section (carte) */
.st-section { padding: 6px 22px 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.st-section-head { display: flex; align-items: center; gap: 12px; padding: 16px 0 10px; }
.st-section-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--text); }
.st-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.st-section-head .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.st-section-head-actions { margin-left: auto; display: flex; gap: 8px; }

/* Ligne de réglage à la Notion : libellé | valeur lisible, modifiable au clic */
.sp-row { display: grid; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); gap: 4px 20px; align-items: start; padding: 6px 0; border-top: 1px solid var(--border-card); }
.st-section-head + .sp-row, .sp-row:first-child { border-top: 0; }
.sp-label { display: grid; gap: 2px; padding-top: 9px; }
.sp-label label { font-size: 13.5px; font-weight: 500; color: var(--soft); }
.sp-hint { font-size: 12px; line-height: 1.4; color: var(--muted); }
.sp-value { min-width: 0; display: grid; gap: 4px; }
.sp-field { display: flex; align-items: center; gap: 6px; }
.sp-input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; transition: background .12s, border-color .12s, box-shadow .12s; }
.sp-input::placeholder { color: var(--muted); opacity: .7; }
.sp-input:hover { background: var(--surface-2); cursor: text; }
.sp-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); cursor: text; }
textarea.sp-input { resize: none; overflow: hidden; }
.sp-suffix { flex-shrink: 0; color: var(--muted); font-size: 13px; }
.sp-row.is-switch { align-items: center; }
.sp-row.is-switch .sp-label { padding: 6px 0; }
.sp-row.is-switch .sp-value { justify-items: end; padding: 6px 0; }
.sp-value .ui-select.is-bare { min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; font-weight: 400; font-size: 14px; }
.sp-value .ui-select.is-bare:hover { background: var(--surface-2); }
.sp-value .ui-select.is-bare.is-open { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sp-value .ui-qty { justify-self: start; }
.sp-row.has-error .sp-input { border-color: var(--alarm); background: var(--danger-bg); }
.sp-error { padding: 0 10px; font-size: 12.5px; color: var(--danger-tx); }
.sp-error[hidden] { display: none; }
.sp-readonly { padding: 9px 10px; font-size: 14px; color: var(--text); }
.sp-readonly code { font-size: 12.5px; }

/* Bloc libre dans une section (texte long, aperçu, code) */
.sp-block { padding: 12px 0; border-top: 1px solid var(--border-card); }
.sp-block > label, .sp-block-title { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--soft); }

/* Statut d'enregistrement automatique */
.st-saved { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--text); color: var(--surface); font-size: 13.5px; font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.st-saved[hidden] { display: none; }
.st-saved.is-ok::before { content: "✓"; font-weight: 700; color: var(--mint-dot); }
.st-saved.is-error { background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd); }

/* Fenêtres de configuration (moyens de paiement…) */
.st-dialog { width: min(600px, calc(100vw - 32px)); }
.st-dialog .sp-row { grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); }
.st-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }

@media (max-width: 960px) {
  .st-shell { grid-template-columns: 1fr; gap: 16px; }
  .st-nav { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 6px; border-radius: 16px; }
  .st-nav-group { display: flex; gap: 4px; }
  .st-nav-title { display: none; }
  .st-nav-item { white-space: nowrap; }
  .sp-row { grid-template-columns: 1fr; gap: 0; }
  .sp-label { padding-top: 8px; }
  .sp-row.is-switch { grid-template-columns: 1fr auto; }
}

/* Réglages → Paiements : liste des moyens de paiement */
.pm-list { display: grid; gap: 8px; padding-top: 4px; border-top: 0; }
.pm-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-card); border-radius: 16px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.pm-item.is-config { cursor: pointer; }
.pm-item.is-config:hover { border-color: var(--border); background: var(--surface-2); }
.pm-item.is-config:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm-item .wz-ic { width: 40px; height: 40px; border-radius: 12px; }
.pm-item:not(.is-on) .wz-ic { filter: grayscale(1); opacity: .55; }
.pm-item:not(.is-on) .pm-text strong { color: var(--muted); }
.pm-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pm-text strong { font-size: 14.5px; color: var(--text); }
.pm-text small { font-size: 12.5px; color: var(--muted); }
.pm-state { justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: var(--ok-bg); color: var(--ok-tx); font-size: 12px; font-weight: 600; }
.pm-state.is-warn { background: var(--warn-bg); color: var(--warn-tx); }
.pm-config { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.pm-switch { flex-shrink: 0; display: grid; place-items: center; padding: 6px; margin: -6px; cursor: pointer; }
.pm-note { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.pm-copy { display: flex; gap: 8px; align-items: center; }
.pm-copy .sp-input { background: var(--surface-2); font-family: var(--mono); font-size: 12.5px; }
.pm-test-result { margin-right: auto; font-size: 13px; color: var(--muted); }
.pm-test-result.is-ok { color: var(--ok-tx); }
.pm-test-result.is-error { color: var(--danger-tx); }
@media (max-width: 640px) { .pm-config { display: none; } .pm-item { gap: 10px; } }

/* Réglages → Site internet */
.ws-media { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; border-top: 0; }
.ws-upload { display: grid; gap: 6px; align-content: start; }
.ws-drop { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; border: 1.5px dashed var(--border); border-radius: 16px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.ws-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.ws-drop img { width: 100%; height: 100%; object-fit: cover; }
.ws-upload.is-logo .ws-drop img { object-fit: contain; padding: 14px; background: var(--surface); }
.ws-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ws-empty { display: grid; justify-items: center; gap: 4px; padding: 10px; text-align: center; color: var(--muted); font-size: 13px; }
.ws-empty svg { color: var(--accent-text); }
.ws-empty small { font-size: 11.5px; }
.ws-change { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); pointer-events: none; }
.ws-remove { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 12.5px; color: var(--danger-tx); cursor: pointer; }
.ws-remove input { accent-color: var(--alarm); }
.ws-colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.ws-color { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 13px; color: var(--soft); cursor: pointer; }
.ws-color input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ws-color:has(input[type="radio"]:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); color: var(--text); font-weight: 600; }
.ws-swatch { width: 20px; height: 20px; border-radius: 50%; }
.ws-color input[type="color"] { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ws-seg { display: inline-flex; gap: 2px; justify-self: start; margin-top: 6px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.ws-seg label { cursor: pointer; }
.ws-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ws-seg span { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ws-seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sp-value [hidden] { display: none; }
.ws-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 0 12px; }
.ws-way { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--border-card); border-radius: 18px; background: var(--surface); }
.ws-way.is-wide { grid-column: 1 / -1; }
.ws-way h4 { margin: 0; font-size: 14.5px; color: var(--text); }
.ws-way p { margin: 0; font-size: 13px; color: var(--muted); }
.ws-way .rs-btn { justify-self: start; }
.ws-way .sp-row { grid-template-columns: minmax(140px, 28%) minmax(0, 1fr); }
.ws-code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); }
@media (max-width: 760px) { .ws-media, .ws-ways { grid-template-columns: 1fr; } }

/* Réglages → Hébergements : une ligne par type, toutes de même hauteur */
.ac-list { display: grid; gap: 8px; padding: 12px; }
.ac-item { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border: 1px solid var(--border-card); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .12s; }
.ac-item:hover { border-color: var(--border); background: var(--surface-2); }
.ac-item .wz-ic { width: 44px; height: 44px; border-radius: 13px; }
.ac-item.is-off { opacity: .6; }
.ac-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ac-name strong { font-size: 15px; color: var(--text); }
.ac-name small { font-size: 12.5px; color: var(--muted); }
.ac-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ac-stat { font-size: 13px; color: var(--soft); white-space: nowrap; }
.ac-stat b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.ac-pill { padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ac-pill.is-warn { background: var(--warn-bg); color: var(--warn-tx); }
.ac-go { flex-shrink: 0; color: var(--muted); }
.ac-residents { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px dashed var(--border); border-radius: 18px; color: inherit; text-decoration: none; }
.ac-residents:hover { background: var(--surface); border-style: solid; }
.ac-residents > span:nth-child(2) { flex: 1; display: grid; gap: 1px; }
.ac-residents strong { font-size: 14px; color: var(--text); }
.ac-residents small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .ac-stats { display: none; } }

/* Fiches de réglage : retour, onglets, choix de couleur et d'icône */
.st-back { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 2px; color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.st-back:hover { color: var(--accent-text); }
.st-tabs { display: inline-flex; gap: 4px; justify-self: start; padding: 4px; border-radius: 14px; background: var(--surface-3); }
.st-tab { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 11px; color: var(--soft); font-size: 14px; font-weight: 600; text-decoration: none; }
.st-tab:hover { color: var(--text); }
.st-tab.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.st-count { padding: 0 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.ac-tones { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.ac-tone { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 13px; color: var(--soft); cursor: pointer; }
.ac-tone input, .ac-icon input { position: absolute; opacity: 0; pointer-events: none; }
.ac-tone .wz-ic { width: 24px; height: 24px; border-radius: 50%; }
.ac-tone:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); color: var(--text); font-weight: 600; }
.ac-icons { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.ac-icon span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--soft); cursor: pointer; transition: background .12s, border-color .12s; }
.ac-icon span:hover { background: var(--surface-2); }
.ac-icon input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.ac-icon input:focus-visible + span, .ac-tone input:focus-visible ~ span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-danger { padding-bottom: 6px; }
.ac-danger form { display: inline; }
.st-section { min-width: 0; }
.st-section .inline { flex-wrap: wrap; }
.st-section .table-wrap { max-width: 100%; overflow-x: auto; }
.st-section .bulk-bar { flex-wrap: wrap; }
.st-main > .bento { gap: 18px; }
/* Blocs existants dans les Réglages : même cadre que les sections, sans fond pastel */
.st-shell .card { border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); box-shadow: none; }
.st-shell .card[class*="tone-"] { background: var(--surface); color: var(--text); }
.st-shell .card .card-title { font-size: 15.5px; font-weight: 650; }
.st-shell .card .card-title svg { width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); box-sizing: border-box; }
.st-shell .bento { gap: 18px; }
.st-shell .hk-settings { display: grid; gap: 18px; }

/* Aujourd'hui : départs en retard (client encore « arrivé » après la date de départ) */
.guest-tile.tone-late { border-color: var(--danger-bd); background: var(--danger-bg); }
.guest-tile.tone-late::before { background: var(--alarm); }
.tone-late .guest-state { display: inline-flex; align-items: center; gap: 4px; background: var(--alarm); color: var(--on-primary); }
.late-alert { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--danger-bd); border-radius: 18px; background: var(--danger-bg); }
.late-alert-head { display: flex; gap: 12px; align-items: flex-start; }
.late-alert-ic { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--alarm); color: var(--on-primary); }
.late-alert-head strong { display: block; font-size: 15px; color: var(--danger-tx); }
.late-alert-head p { margin: 2px 0 0; font-size: 13px; color: var(--soft); max-width: 80ch; }
.late-list { display: grid; gap: 8px; margin-top: 12px; }
.late-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.late-item form { margin: 0; }
.late-who { flex: 1; min-width: 220px; display: grid; gap: 1px; color: inherit; text-decoration: none; }
.late-who strong { font-size: 14px; color: var(--text); }
.late-who span { font-size: 12.5px; color: var(--muted); }
.late-who b { color: var(--danger-tx); }
.late-list { max-height: 300px; overflow-y: auto; padding-right: 2px; }
/* Fiche séjour : départ dépassé */
.rs-late { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger-tx); font-size: 12.5px; font-weight: 600; }
.rs-btn.is-big { height: 42px; padding: 0 18px; font-size: 14.5px; }

/* ---------- Écrans d'analyse (statistiques, comptabilité, fiscal, journal) ---------- */
/* Barre de période */
.pb2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb2-nav { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-card); }
.pb2-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--soft); }
.pb2-arrow:hover { background: var(--surface-2); color: var(--text); }
.pb2-label { display: inline-flex; align-items: center; gap: 7px; min-width: 150px; justify-content: center; padding: 0 10px; font-size: 14.5px; font-weight: 650; color: var(--text); }
.pb2-label svg { color: var(--accent-text); }
.pb2-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-3); flex-wrap: wrap; }
.pb2-seg-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pb2-seg-btn:hover { color: var(--text); }
.pb2-seg-btn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pb2-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb2-range[hidden] { display: none; }
.pb2-to { color: var(--muted); font-size: 13px; }

.an-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.an-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Chiffres clés */
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.an-kpi { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.an-kpi-head { display: flex; align-items: center; gap: 10px; }
.an-kpi-head .wz-ic { width: 32px; height: 32px; border-radius: 10px; }
.an-kpi-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--soft); }
.an-kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }
.an-kpi-sub { font-size: 12.5px; color: var(--muted); }
.an-kpi-prev { font-size: 12px; color: var(--muted); padding-top: 6px; border-top: 1px dashed var(--border-card); }
.an-delta { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-delta.is-up { background: var(--ok-bg); color: var(--ok-tx); }
.an-delta.is-up::before { content: "↗"; margin-right: 3px; }
.an-delta.is-down { background: var(--danger-bg); color: var(--danger-tx); }
.an-delta.is-down::before { content: "↘"; margin-right: 3px; }
.an-delta.is-flat, .an-delta.is-none { background: var(--surface-3); color: var(--muted); }
.an-delta.is-small { padding: 2px 7px; font-size: 11.5px; }
.an-gauge { width: 100%; height: 6px; display: block; }
.an-gauge-bg { fill: var(--surface-3); }
.an-gauge-fill { fill: var(--primary); }
.an-gauge-fill.is-soft { fill: var(--accent); opacity: .75; }

/* Cartes et grille */
.an-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.an-card { min-width: 0; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.an-card.is-full { grid-column: 1 / -1; }
.an-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.an-card-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--text); }
.an-card-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.an-export { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--soft); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.an-export:hover { background: var(--surface-2); color: var(--text); }
.an-note { margin: 14px 2px 0; font-size: 12.5px; color: var(--muted); }

/* Graphique en barres */
.an-chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.an-axis { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font-size: 11px; color: var(--muted); text-align: right; }
.an-bars { width: 100%; height: 220px; display: block; overflow: visible; }
.an-grid-line { stroke: var(--border-card); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.an-weekend { fill: var(--surface-2); }
.an-bar { fill: var(--accent); opacity: .85; transition: opacity .12s; pointer-events: none; }
.an-bar.is-full { fill: var(--primary); opacity: 1; }
.an-bar.is-today { fill: var(--go); opacity: 1; }
.an-bar-hit { fill: transparent; cursor: crosshair; }
.an-bar-hit:hover { fill: var(--accent-soft); }
.an-chart-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 0 48px; font-size: 12px; color: var(--muted); }
.an-legend { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.an-legend i.is-bar { background: var(--accent); }
.an-legend i.is-weekend { background: var(--surface-3); }
.an-legend i.is-full { background: var(--primary); }
.an-tip { position: fixed; z-index: 90; padding: 7px 11px; border-radius: 10px; background: var(--text); color: var(--surface); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.an-tip[hidden] { display: none; }

/* Faits (liste icône · libellé · valeur) */
.an-facts { display: grid; gap: 2px; }
.an-fact { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-card); }
.an-fact:first-child { border-top: 0; }
.an-fact-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--soft); }
.an-fact-label { font-size: 13.5px; color: var(--soft); }
.an-fact strong { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Types d'hébergement */
.an-types { display: grid; gap: 2px; }
.an-type { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(120px, 1.2fr) minmax(100px, .8fr) minmax(100px, .8fr); align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-card); }
.an-type:first-child { border-top: 0; }
.an-type-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.an-type-name small { font-weight: 500; color: var(--muted); }
.an-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.an-type-occ { display: flex; align-items: center; gap: 10px; }
.an-type-occ svg { flex: 1; height: 8px; }
.an-type-occ b, .an-type-num b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-type-num { display: grid; text-align: right; }
.an-type-num small { font-size: 11.5px; color: var(--muted); }

/* Pays */
.an-country { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.an-flag { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); font-size: 18px; }
.an-country-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.an-country-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--text); }
.an-country-top b { font-variant-numeric: tabular-nums; }
.an-country svg { width: 100%; height: 6px; }
.an-country small { font-size: 11.5px; color: var(--muted); }

@media (max-width: 1100px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .an-kpis { grid-template-columns: 1fr; } .an-type { grid-template-columns: 1fr 1fr; } }
.an-dot.tone-lavender { background: var(--lav-accent); } .an-dot.tone-peach { background: var(--todo-dot); } .an-dot.tone-mint { background: var(--ok-dot); } .an-dot.tone-sky { background: var(--sky-solid); } .an-dot.tone-cream { background: var(--cream-tx2); }

/* Onglets des écrans d'analyse */
.an-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; padding: 4px; border-radius: 16px; background: var(--surface-3); width: fit-content; max-width: 100%; }
.an-tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 12px; color: var(--soft); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.an-tab svg { color: var(--muted); }
.an-tab:hover { color: var(--text); }
.an-tab.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.an-tab.is-on svg { color: var(--accent-text); }

/* Barre empilée, jauges, classements */
.an-stack { width: 100%; height: 14px; display: block; border-radius: 7px; overflow: hidden; }
.an-seg.tone-lavender { fill: var(--lav-accent); } .an-seg.tone-peach { fill: var(--todo-dot); } .an-seg.tone-mint { fill: var(--ok-dot); }
.an-seg.tone-sky { fill: var(--sky-solid); } .an-seg.tone-cream { fill: var(--cream-tx2); }
.an-fact.is-plain { grid-template-columns: 12px 1fr auto 44px; }
.an-share { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.an-hint { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.an-meter { display: grid; gap: 6px; padding: 8px 0; }
.an-meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--text); }
.an-meter-top > span { display: inline-flex; align-items: center; gap: 8px; }
.an-meter-top b { font-variant-numeric: tabular-nums; }
.an-meter svg { width: 100%; height: 6px; }
.an-rank { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-card); }
.an-rank:first-of-type { border-top: 0; }
.an-rank-n { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); color: var(--soft); font-size: 12.5px; font-weight: 700; }
.an-rank:nth-of-type(1) .an-rank-n { background: var(--accent-soft); color: var(--accent-text); }
.an-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.an-rank b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.an-outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.an-outlet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.an-outlet > span:nth-child(2) { flex: 1; display: grid; }
.an-outlet b { font-size: 14px; color: var(--text); }
.an-outlet small { font-size: 12px; color: var(--muted); }
.an-outlet strong { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); }

/* Tableaux des écrans d'analyse */
.an-table-wrap { overflow-x: auto; margin: 0 -4px; }
.an-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.an-table th { position: sticky; top: 0; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.an-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-card); color: var(--text); vertical-align: middle; }
.an-table tbody tr:hover td { background: var(--surface-2); }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table tfoot th, .an-table tfoot td { padding: 12px; border-top: 2px solid var(--border); border-bottom: 0; font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface-2); }
.an-table .is-neg { color: var(--danger-tx); }
.an-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.an-chip.is-ok { background: var(--ok-bg); color: var(--ok-tx); }
.an-chip.is-warn { background: var(--warn-bg); color: var(--warn-tx); }
.an-chip.is-danger { background: var(--danger-bg); color: var(--danger-tx); }
.an-chip.is-accent { background: var(--accent-soft); color: var(--accent-text); }

.an-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-table-wrap.is-tall { max-height: calc(100vh - 320px); overflow: auto; }
.an-exports { display: grid; gap: 8px; }
.an-export-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-card); border-radius: 16px; }
.an-export-row:hover { background: var(--surface-2); }
.an-export-row .wz-ic { width: 36px; height: 36px; border-radius: 11px; }
.an-export-name { flex: 1; display: grid; }
.an-export-name b { font-size: 14px; color: var(--text); }
.an-export-name small { font-size: 12px; color: var(--muted); }
.an-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.an-timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.an-timeline li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border-card); }
.an-timeline li:last-child::before { display: none; }
.an-timeline-dot { flex-shrink: 0; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.an-timeline-body { display: grid; gap: 1px; }
.an-timeline-body b { font-size: 13.5px; color: var(--text); }
.an-timeline-body small { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .an-kpis.is-3 { grid-template-columns: 1fr; } }
.an-chart.is-money { grid-template-columns: 76px minmax(0, 1fr); }
.an-chart.is-money + .an-chart-foot { margin-left: 84px; }
.an-axis span { white-space: nowrap; }
.an-taxes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Contrôle fiscal */
.fx-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--border-card); background: var(--surface); }
.fx-hero-ic { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface-3); color: var(--soft); }
.fx-hero.is-ok { border-color: var(--mint-bd); background: var(--ok-bg); }
.fx-hero.is-ok .fx-hero-ic { background: var(--ok-dot); color: var(--on-primary); }
.fx-hero.is-wait { border-color: var(--warn-bd); background: var(--warn-bg); }
.fx-hero.is-wait .fx-hero-ic { background: var(--warn-line); color: var(--on-primary); }
.fx-hero.is-bad { border-color: var(--danger-bd); background: var(--danger-bg); }
.fx-hero.is-bad .fx-hero-ic { background: var(--alarm); color: var(--on-primary); }
.fx-hero.is-idle .fx-hero-ic { background: var(--accent-soft); color: var(--accent-text); }
.fx-hero-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fx-hero-text strong { font-size: 16px; color: var(--text); }
.fx-hero-text p { margin: 0; font-size: 13px; color: var(--soft); max-width: 90ch; }
.fx-pending { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fx-period { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; color: var(--text); text-decoration: none; }
.fx-period:hover b { color: var(--accent-text); }
.fx-form { display: grid; gap: 12px; }
.fx-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 14px; }
.fx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fx-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border-card); }
.fx-checks li:first-child { border-top: 0; }
.fx-checks li > span:last-child { display: grid; gap: 2px; }
.fx-checks b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fx-checks small { font-size: 12px; color: var(--muted); }
.fx-check-ic { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-tx); }
.fx-checks li.is-bad .fx-check-ic { background: var(--alarm); color: var(--on-primary); }
.fx-checks li.is-bad b { color: var(--danger-tx); }
.fx-hashes { display: grid; gap: 10px; }
.fx-hashes > div { display: grid; gap: 4px; }
.fx-hashes span { font-size: 12.5px; color: var(--muted); }
.fx-hashes code, .fx-hash { display: block; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-family: var(--mono); font-size: 12px; color: var(--text); word-break: break-all; }
.fx-hash { display: inline-block; padding: 3px 8px; border-radius: 8px; }
.fx-kinds { display: grid; gap: 8px; }
.fx-kind { position: relative; cursor: pointer; }
.fx-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fx-kind > span { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.fx-kind b { font-size: 14px; color: var(--text); }
.fx-kind small { font-size: 12.5px; color: var(--muted); }
.fx-kind input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.fx-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-plan { display: grid; gap: 2px; }
.fx-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 12px; padding: 4px 0; border-top: 1px solid var(--border-card); font-size: 13.5px; color: var(--soft); }
.fx-plan-row:first-child { border-top: 0; }
.fx-code { font-family: var(--mono); text-align: right; }
.fx-plan > .rs-btn { justify-self: start; }

/* Journal d'audit : frise par jour */
.au-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.au-families { display: flex; gap: 6px; flex-wrap: wrap; }
.au-family { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.au-family:hover { color: var(--text); background: var(--surface-2); }
.au-family.is-on { border-color: var(--text); background: var(--text); color: var(--surface); }
.au-family-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.au-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-form .input-sm { min-width: 130px; }
.au-reset { font-size: 13px; color: var(--muted); }
.au-day { margin-bottom: 18px; }
.au-day-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px 4px; font-size: 14px; font-weight: 650; color: var(--text); }
.au-day-title span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.au-list { overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); }
.au-item { border-top: 1px solid var(--border-card); }
.au-item:first-child { border-top: 0; }
.au-item > summary { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(120px, auto) 48px 18px; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; list-style: none; }
.au-item > summary::-webkit-details-marker { display: none; }
.au-item[data-empty] > summary { cursor: default; }
.au-item > summary:hover { background: var(--surface-2); }
.au-item[open] > summary { background: var(--surface-2); }
.au-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; }
.au-item.is-danger .au-ic { background: var(--danger-bg); color: var(--danger-tx); }
.au-main { min-width: 0; display: grid; gap: 1px; }
.au-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); }
.au-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.au-main code { font-size: 11.5px; }
.au-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-avatar { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.au-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.au-caret { color: var(--muted); transition: transform .15s; }
.au-item[open] .au-caret { transform: rotate(180deg); }
.au-detail { display: grid; gap: 10px; padding: 4px 16px 14px 64px; background: var(--surface-2); }
.au-diff { width: 100%; border-collapse: collapse; font-size: 13px; border-radius: 12px; overflow: hidden; background: var(--surface); }
.au-diff th { padding: 7px 10px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border-card); }
.au-diff td { padding: 7px 10px; border-top: 1px solid var(--border-card); color: var(--text); word-break: break-word; }
.au-diff td:first-child { color: var(--soft); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.au-diff .is-old { color: var(--danger-tx); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger-tx) 40%, transparent); }
.au-diff .is-new { color: var(--ok-tx); font-weight: 600; }
.au-data { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.au-data > div { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface); font-size: 12.5px; }
.au-data dt { color: var(--muted); }
.au-data dd { margin: 0; color: var(--text); font-weight: 600; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-meta { margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .au-item > summary { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .au-who, .au-caret { display: none; }
  .au-detail { padding-left: 16px; }
}
.au-form .ui-date.input, .au-form .ui-select.input { display: inline-flex; width: 170px; }
.au-form > * { flex: 0 0 auto; }

/* Facturation Holeedays */
.bl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin-bottom: 16px; padding: 22px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); }
.bl-hero.is-ok { border-color: var(--mint-bd); }
.bl-hero.is-bad { border-color: var(--danger-bd); background: var(--danger-bg); }
.bl-hero.is-idle { border-color: var(--lav-bd); background: var(--lav-bg); }
.bl-plan-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.bl-hero h2 { margin: 8px 0 2px; font-size: 22px; font-weight: 700; color: var(--text); }
.bl-state { margin: 0; font-size: 14px; font-weight: 600; color: var(--soft); }
.bl-hero.is-bad .bl-state { color: var(--danger-tx); }
.bl-hero-figures { display: flex; gap: 28px; flex-wrap: wrap; }
.bl-hero-figures > div { display: grid; gap: 2px; }
.bl-hero-figures strong { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bl-hero-figures span { font-size: 12.5px; color: var(--muted); }
.bl-progress { grid-column: 1 / -1; display: grid; gap: 6px; }
.bl-progress svg { width: 100%; height: 8px; }
.bl-progress span { font-size: 12.5px; color: var(--muted); }
.bl-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.bl-due { border-color: var(--lav-bd); }
.bl-empty { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-tx); font-size: 14px; font-weight: 600; }
.bl-quote { display: grid; gap: 2px; }
.bl-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-card); }
.bl-line:first-child { border-top: 0; }
.bl-line > span:first-child { display: grid; gap: 2px; }
.bl-line b { font-size: 13.5px; color: var(--text); }
.bl-line small { font-size: 12px; color: var(--muted); }
.bl-line.is-sub { font-size: 13px; color: var(--soft); }
.bl-amount { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.bl-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.bl-total span { font-size: 14px; font-weight: 600; color: var(--soft); }
.bl-total strong { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bl-pay { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 10px; border: 0; border-radius: 14px; background: var(--go); color: var(--on-primary); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.bl-pay:hover { background: var(--go-hover); }
.bl-address { display: grid; gap: 2px; font-style: normal; font-size: 14px; color: var(--soft); }
.bl-address b { font-size: 15px; color: var(--text); }
.bl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-plan { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--border-card); border-radius: 20px; background: var(--surface); }
.bl-plan.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.bl-plan h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 17px; color: var(--text); }
.bl-plan p { margin: 0; }
.bl-range { font-size: 13px; color: var(--muted); }
.bl-price { font-size: 15px; font-weight: 650; color: var(--text); }
.bl-setup { font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .bl-hero { grid-template-columns: 1fr; } .bl-plans { grid-template-columns: 1fr; } }

/* Mon compte */
.pf { display: grid; gap: 18px; max-width: 980px; }
.pf-head { display: flex; align-items: center; gap: 16px; }
.pf-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--primary); color: var(--on-primary); font-size: 22px; font-weight: 700; }
.pf-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text); }
.pf-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.pf-email { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-2fa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pf-2fa form { margin: 0; }
.pf-ok { color: var(--ok-tx); font-weight: 600; }
.pf-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.pf-qr .qr { padding: 10px; border-radius: 14px; background: #fff; }
.pf-confirm { display: flex; gap: 8px; margin-top: 8px; }
.pf-confirm .input { width: 140px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.pf-tenants { display: grid; gap: 8px; padding: 6px 0 12px; }
.pf-tenant { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-card); border-radius: 16px; }
.pf-tenant.is-current { border-color: var(--accent); background: var(--accent-soft); }
.pf-tenant.is-off { opacity: .6; }
.pf-tenant .wz-ic { width: 40px; height: 40px; border-radius: 12px; }
.pf-tenant-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pf-tenant-main b { font-size: 14.5px; color: var(--text); }
.pf-tenant-main > span { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-tenant form { margin: 0; }
.pf-dialog-form { display: grid; gap: 12px; }

/* Menu du compte (bas de la barre latérale) */
.acct { position: relative; }
.acct-trigger { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.acct-trigger .acct-caret { margin-left: auto; color: var(--muted); transition: transform .15s; }
.acct.is-open .acct-caret { transform: rotate(180deg); }
.acct-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60; display: grid; gap: 2px; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.acct-menu[hidden] { display: none; }
.acct-menu a, .acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--surface-2); color: var(--text); }
.acct-menu .is-danger { color: var(--danger-tx); }
.acct-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--border-card); }
.acct-menu form { margin: 0; }
/* Changement d'établissement (en-tête) */
.site-dd { position: relative; }
.site-switch { font: inherit; cursor: pointer; }
.site-caret { transition: transform .15s; }
.site-dd.is-open .site-caret { transform: rotate(180deg); }
.site-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; gap: 2px; width: 300px; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.site-menu[hidden] { display: none; }
.site-menu-title { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.site-menu form { margin: 0; }
.site-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.site-item:hover:not(:disabled) { background: var(--surface-2); }
.site-item.is-current { background: var(--accent-soft); cursor: default; }
.site-item-ic { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); color: var(--soft); }
.site-item.is-current .site-item-ic { background: var(--primary); color: var(--on-primary); }
.site-item-main { flex: 1; min-width: 0; display: grid; }
.site-item-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.site-item-main small { font-size: 12px; color: var(--muted); }
.site-item-check { color: var(--accent-text); }

/* En-tête collant, fond translucide flouté */
.topbar { position: sticky; top: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); margin-bottom: 14px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: var(--bg); } }

/* Recherche de l'en-tête : suggestions pendant la frappe */
.topbar-search { position: relative; }
.qs-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px rgba(0, 0, 0, .18); }
.qs-menu[hidden] { display: none; }
.qs-title { display: block; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.qs-item:hover, .qs-item.is-active { background: var(--surface-2); }
.qs-item.is-active { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.qs-ic { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); font-size: 15px; }
.qs-ic.is-person { background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.qs-main { flex: 1; min-width: 0; display: grid; }
.qs-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); }
.qs-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.qs-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 11.5px; font-weight: 600; }
.qs-badge.st-confirmed { background: var(--ok-bg); color: var(--ok-tx); }
.qs-badge.st-checked_in { background: var(--accent-soft); color: var(--accent-text); }
.qs-badge.st-option { background: var(--warn-bg); color: var(--warn-tx); }
.qs-badge.st-cancelled, .qs-badge.st-no_show { background: var(--danger-bg); color: var(--danger-tx); }
.qs-empty { margin: 0; padding: 14px 12px; font-size: 13.5px; color: var(--muted); }
.qs-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--border-card); border-radius: 0 0 12px 12px; color: var(--accent-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.qs-all:hover, .qs-all.is-active { background: var(--surface-2); }
/* Sécurité : activation guidée de la double authentification */
.sc { max-width: 820px; }
.sc-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sc-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border-card); font-size: 13.5px; color: var(--muted); }
.sc-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); font-size: 12px; font-weight: 700; }
.sc-steps li.is-on { border-color: var(--accent); color: var(--text); font-weight: 600; }
.sc-steps li.is-on span { background: var(--primary); color: var(--on-primary); }
.sc-steps li.is-done span { background: var(--ok-dot); color: var(--on-primary); }
.sc-go { padding: 4px 0 18px; }
/* Choix de l'établissement (après la connexion) */
.ch { max-width: 1040px; display: grid; gap: 18px; }
.ch-head h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--text); }
.ch-head p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.ch-grid form { margin: 0; }
.ch-card { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 20px; border: 1px solid var(--border-card); border-radius: 22px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; }
.ch-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.ch-card.is-current { border-color: var(--accent); background: var(--accent-soft); }
.ch-card .wz-ic { width: 48px; height: 48px; border-radius: 15px; }
.ch-name { font-size: 17px; font-weight: 650; color: var(--text); }
.ch-role { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent-text); font-size: 13.5px; font-weight: 600; }
/* Page de résultats de recherche */
.sr-bar { display: flex; align-items: center; gap: 12px; max-width: 820px; margin-bottom: 14px; padding: 8px 8px 8px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--muted); }
.sr-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sr-bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.sr-count { margin: 0 0 12px 4px; font-size: 13.5px; color: var(--muted); }
.sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-item { margin: 0 -8px; }
@media (max-width: 900px) { .sr-grid { grid-template-columns: 1fr; } }
/* Réglages → Taxes */
.tx-value { flex-shrink: 0; display: grid; place-items: center; min-width: 74px; height: 40px; padding: 0 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-item.is-on .tx-value { background: var(--accent-soft); color: var(--accent-text); }
.tx-empty { margin: 0; padding: 10px 2px; font-size: 13px; color: var(--muted); }
.tx-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 18px; align-items: start; border-top: 0; }
.tx-test-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.tx-test-form .rs-btn { justify-self: start; }
.tx-result { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.tx-dialog { width: min(640px, calc(100vw - 32px)); }
.tx-form { display: grid; gap: 12px; }
.tx-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tx-active { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.tx-delete-btn { margin-right: auto; }
@media (max-width: 760px) { .tx-test { grid-template-columns: 1fr; } .tx-kinds { grid-template-columns: 1fr; } }
.pm-item:not(.is-on) .tx-value { color: var(--muted); }
.st-section [data-st-show][hidden] { display: none; }
.sp-value .ui-date.is-bare { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; font-weight: 400; font-size: 14px; }
.sp-value .ui-date.is-bare:hover { background: var(--surface-2); }
.sp-value .ui-date.is-bare.is-open { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sp-value .ui-date.is-bare.is-empty .ui-date-text { opacity: .7; }
/* Réglages → E-mails */
.ml-item .pm-text { gap: 4px; }
.ml-delay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-delay small { font-size: 12.5px; color: var(--muted); }
.ml-previews { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-toggle { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.ml-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 16px; }
.ml-add .input { max-width: 320px; }
.ml-test { padding: 12px 18px; border: 1px dashed var(--border); border-radius: 18px; color: var(--muted); }
.ml-delay .ui-qty.is-boxed { display: inline-flex; flex: none; width: 132px; }

/* Aujourd'hui : restauration à préparer */
.meal-card { margin-top: 18px; padding: 20px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); }
.meal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.meal-head-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--peach-bg); color: var(--peach-tx); }
.meal-head h3 { margin: 0; font-size: 16px; font-weight: 650; color: var(--text); }
.meal-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.meal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; align-items: start; }
.meal-service { border-radius: 18px; border: 1px solid var(--border-card); background: var(--surface-2); overflow: hidden; }
.meal-service > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.meal-service > summary::-webkit-details-marker { display: none; }
.meal-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.meal-service.tone-peach .meal-ic { background: var(--peach-bg); color: var(--peach-tx); }
.meal-service.tone-mint .meal-ic { background: var(--mint-bg); color: var(--mint-tx); }
.meal-service.tone-lavender .meal-ic { background: var(--lav-bg); color: var(--lav-tx); }
.meal-service.tone-cream .meal-ic { background: var(--cream-bg); color: var(--cream-tx); }
.meal-name { flex: 1; display: grid; }
.meal-name strong { font-size: 15px; color: var(--text); }
.meal-name small { font-size: 12.5px; color: var(--muted); }
.meal-count { display: grid; justify-items: end; line-height: 1.1; }
.meal-count b { font-size: 28px; font-weight: 750; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.meal-count small { font-size: 12px; color: var(--muted); }
.meal-split { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.meal-split span { padding: 3px 10px; border-radius: 99px; background: var(--surface); font-size: 12.5px; color: var(--soft); }
.meal-split b { color: var(--text); }
.meal-split .meal-plan { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.meal-guests { list-style: none; margin: 0; padding: 4px 16px 12px; border-top: 1px solid var(--border-card); display: grid; }
.meal-guests li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border-card); }
.meal-guests li:last-child { border-bottom: 0; }
.meal-guests a { color: var(--text); text-decoration: none; }
.meal-guests a:hover { color: var(--accent-text); }
.meal-guests span { color: var(--muted); white-space: nowrap; }
.meal-service:not([open]) .meal-guests { display: none; }
@media print { .meal-service .meal-guests { display: grid !important; } }

/* Réglages → E-mails : fenêtre d'aperçu */
.st-dialog.ml-preview { width: min(860px, calc(100vw - 32px)); height: min(860px, calc(100vh - 48px)); padding: 0; }
.ml-preview[open] { display: flex; flex-direction: column; }
.ml-preview .rs-dialog-head { gap: 14px; flex-wrap: wrap; }
.ml-preview-titles { display: grid; min-width: 0; flex: 1; }
.ml-preview-titles small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-preview-tools { display: flex; align-items: center; gap: 8px; }
.ml-device { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-card); }
.ml-device button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--soft); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ml-device button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ml-preview-out { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--soft); }
.ml-preview-out:hover { background: var(--surface-2); color: var(--text); }
.ml-preview-stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 0; background: var(--surface-2); border-top: 1px solid var(--border-card); }
.ml-preview-frame { width: 100%; height: 100%; border: 0; background: #f5f5f3; transition: width .2s ease, opacity .15s ease; }
.ml-preview.is-mobile .ml-preview-stage { padding: 18px 0; }
.ml-preview.is-mobile .ml-preview-frame { width: 390px; max-width: 100%; border-radius: 26px; border: 1px solid var(--border-card); }
.ml-preview.is-loading .ml-preview-frame { opacity: .35; }
@media (max-width: 640px) { .ml-device { display: none; } }

/* Pages d'erreur (403, 404, 419, 429, 500, 503) */
.err { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 32px 16px; background: var(--bg); }
.err-card { position: relative; width: min(520px, 100%); display: grid; justify-items: center; gap: 12px; padding: 44px 32px 32px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border-card); text-align: center; box-shadow: 0 20px 50px rgba(26, 26, 31, .06); }
.err-code { position: absolute; top: 18px; right: 22px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.err-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; }
.err-ic.tone-peach { background: var(--peach-bg); color: var(--peach-tx); }
.err-ic.tone-lavender { background: var(--lav-bg); color: var(--lav-tx); }
.err-card h1 { margin: 6px 0 0; font-size: 26px; letter-spacing: -0.03em; color: var(--text); }
.err-card p { margin: 0; max-width: 400px; color: var(--soft); line-height: 1.55; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.err-foot { margin: 0; font-size: 13px; color: var(--muted); }
.pc-state.is-stale { background: var(--out-bg); color: var(--out-tx); }
.pc-warn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--out-tx); }

/* En-tête sur écran moyen (tablette, petit portable) : le titre de la page passe avant la recherche et l'établissement. */
.topbar-title { flex: 1 1 auto; min-width: 160px; }
@media (max-width: 1280px) {
  .topbar-search input { width: 170px; }
  .site-switch-name { max-width: 150px; }
}
@media (max-width: 1080px) {
  .topbar-search input { width: 110px; }
  .site-switch-name { max-width: 110px; }
  .topbar-actions .btn-label-collapse { display: none; }
}

/* Tarification → plans, restauration, codes promo, règles de séjour : catalogue de cartes + fenêtres (tf-*) */
.tf-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 14px; }
.tf-intro p { margin: 0; max-width: 760px; color: var(--soft); font-size: 14px; line-height: 1.55; }
.tf-intro .rs-btn { flex-shrink: 0; }
.tf-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.tf-templates > span { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.tf-template { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--border); background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.tf-template:hover { border-style: solid; border-color: var(--lilac); color: var(--text); background: var(--accent-soft); }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; align-items: stretch; }
.tf-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 168px; padding: 18px 18px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tf-card:hover { transform: translateY(-2px); border-color: var(--lilac); box-shadow: 0 12px 30px rgba(26, 26, 31, .07); }
.tf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-card.is-off { background: var(--surface-2); }
.tf-card.is-off .tf-card-main, .tf-card.is-off .tf-value { opacity: .55; }
.tf-card-head { display: flex; align-items: flex-start; gap: 12px; }
.tf-ic { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; }
.tf-ic.tone-lavender { background: var(--lav-bg); color: var(--lav-tx); }
.tf-ic.tone-peach { background: var(--peach-bg); color: var(--peach-tx); }
.tf-ic.tone-mint { background: var(--mint-bg); color: var(--mint-tx); }
.tf-ic.tone-sky { background: var(--sky-bg); color: var(--sky-tx); }
.tf-ic.tone-cream { background: var(--cream-bg); color: var(--cream-tx); }
.tf-card-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tf-card-main h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.tf-card-main h3.is-code { font-family: var(--mono); letter-spacing: .06em; }
.tf-card-main p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tf-value { display: grid; justify-items: end; flex-shrink: 0; text-align: right; line-height: 1.1; }
.tf-value b { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-value b.is-down { color: var(--ok-tx); }
.tf-value b.is-up { color: var(--out-tx); }
.tf-value small { margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 12px; font-weight: 600; }
.tf-chip.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.tf-chip.is-ok { background: var(--ok-bg); color: var(--ok-tx); }
.tf-chip.is-warn { background: var(--warn-bg); color: var(--warn-tx); }
.tf-chip.is-off { background: var(--danger-bg); color: var(--danger-tx); }
.tf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.tf-card-edit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); }
.tf-usage { display: grid; gap: 5px; min-width: 120px; }
.tf-usage-track { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.tf-usage-bar { height: 100%; border-radius: 99px; background: var(--accent); }
.tf-empty { display: grid; justify-items: center; gap: 10px; padding: 46px 24px; border-radius: 24px; border: 1.5px dashed var(--border); background: var(--surface); text-align: center; }
.tf-empty h3 { margin: 6px 0 0; font-size: 18px; color: var(--text); }
.tf-empty p { margin: 0; max-width: 460px; color: var(--soft); font-size: 14px; line-height: 1.5; }
.tf-empty .tf-templates { justify-content: center; margin: 8px 0 0; }
/* Fenêtre de création / modification */
dialog.tf-dialog { width: min(620px, calc(100vw - 32px)); }
.tf-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.tf-dialog .rs-dialog-head strong { font-size: 17px; }
.tf-form { display: grid; gap: 16px; overflow: auto; }
.tf-section { display: grid; gap: 10px; }
.tf-section + .tf-section { padding-top: 14px; border-top: 1px solid var(--hair); }
.tf-section-title { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tf-row.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tf-field { display: grid; gap: 6px; min-width: 0; }
.tf-field > span { font-size: 13px; font-weight: 600; color: var(--text); }
.tf-field > small { font-size: 12px; color: var(--muted); }
.tf-field .error { font-size: 12.5px; color: var(--danger-tx); }
.tf-field .input[aria-invalid="true"] { border-color: var(--danger-bd); }
.tf-affix { position: relative; display: flex; align-items: center; }
.tf-affix .input { padding-right: 46px; }
.tf-affix b { position: absolute; right: 12px; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.tf-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-seg label { position: relative; }
.tf-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tf-seg span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 13.5px; font-weight: 500; transition: border-color .15s, background .15s, color .15s; }
.tf-seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tf-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.tf-toggle span { display: grid; gap: 1px; }
.tf-toggle strong { font-size: 14px; font-weight: 600; color: var(--text); }
.tf-toggle small { font-size: 12.5px; color: var(--muted); }
.tf-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sky-bg); color: var(--sky-tx); font-size: 12.5px; line-height: 1.45; }
.tf-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--surface); }
.tf-dialog-foot > div { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 640px) {
  .tf-intro { flex-direction: column; }
  .tf-row, .tf-row.is-3 { grid-template-columns: 1fr; }
}
.tf-field em.error { font-style: normal; }
.tf-field .tf-affix > span { display: contents; }
.tf-field > label { font-size: 13px; font-weight: 600; color: var(--text); }
.tf-hint { margin-top: -4px; font-size: 12px; color: var(--muted); }
.tf-field { align-content: start; }
.tf-field .input-code { width: 100%; max-width: none; text-transform: uppercase; font-family: var(--mono); letter-spacing: .08em; background: var(--surface); }
.tf-field .input-code { font-size: 15px; text-align: left; }

/* Tarification → Simuler un prix */
.sim-layout { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.sim-form { display: grid; gap: 14px; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-card); position: sticky; top: 96px; }
.sim-block { display: grid; gap: 10px; }
.sim-block + .sim-block { padding-top: 14px; border-top: 1px solid var(--hair); }
.sim-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sim-count { font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.sim-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.sim-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); outline: none; }
.sim-groups { display: grid; gap: 6px; max-height: 340px; overflow: auto; padding-right: 2px; }
.sim-group { border-radius: 14px; border: 1px solid var(--border-card); background: var(--surface); }
.sim-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sim-group > summary::-webkit-details-marker { display: none; }
.sim-group-n { padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--soft); font-size: 12px; font-weight: 600; }
.sim-group.has-picked .sim-group-n { background: var(--accent-soft); color: var(--accent-text); }
.sim-group[hidden] { display: none; }
.sim-units { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.sim-unit { position: relative; }
.sim-unit[hidden] { display: none; }
.sim-unit input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sim-unit span { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--soft); font-size: 12.5px; font-weight: 500; }
.sim-unit input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-primary); }
.sim-unit input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sim-go { height: 46px; font-size: 15px; }
.sim-result { display: grid; gap: 12px; min-width: 0; }
.sim-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.sim-alert.is-danger { background: var(--danger-bg); color: var(--danger-tx); }
.sim-alert.is-warn { background: var(--warn-bg); color: var(--warn-tx); }
.sim-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: 24px; background: var(--mint-bg); border: 1px solid var(--mint-bd); }
.sim-total > div { display: grid; gap: 2px; }
.sim-total-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mint-tx); }
.sim-total strong { font-size: 36px; font-weight: 750; letter-spacing: -0.03em; color: var(--mint-num); font-variant-numeric: tabular-nums; }
.sim-total-sub { font-size: 13px; color: var(--mint-tx); }
.sim-item { padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); }
.sim-item header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sim-item header strong { font-size: 15px; color: var(--text); }
.sim-item header span { font-size: 12.5px; color: var(--muted); }
.sim-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.sim-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--soft); }
.sim-lines li span:last-child { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.sim-lines li .is-down { color: var(--ok-tx); }
.sim-lines li.is-tax { font-size: 13px; color: var(--muted); }
.sim-lines li.is-total { border-bottom: 0; padding-top: 10px; font-weight: 700; color: var(--text); }
.sim-lines li.is-total small { font-weight: 500; color: var(--muted); margin-left: 6px; }
@media (max-width: 1100px) { .sim-layout { grid-template-columns: 1fr; } .sim-form { position: static; } }

/* Téléphone : le menu latéral passe par-dessus le contenu (au lieu de le pousser), l'en-tête passe sur deux lignes. */
@media (max-width: 760px) {
  .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; }
  .rail[data-open] { box-shadow: 0 24px 60px rgba(20, 20, 25, .28); }
  .main { margin-left: 76px; min-width: 0; }
}
@container main (max-width: 760px) {
  .topbar-title { flex: 1 1 100%; min-width: 0; }
  .topbar-actions { margin-left: 0; flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
}
.tf-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.sim-layout { grid-template-columns: minmax(min(340px, 100%), 440px) minmax(0, 1fr); }
@media (max-width: 1100px) { .sim-layout { grid-template-columns: minmax(0, 1fr); } }

/* Téléphone : en-tête non collé (il prendrait un tiers de l'écran), recherche sur toute la largeur. */
@media (max-width: 760px) {
  .topbar { position: static; }
}
@container main (max-width: 760px) {
  .topbar-search { flex: 1 1 100%; }
  .topbar-search input { width: 100%; min-width: 0; }
  .topbar .eyebrow { font-size: 11.5px; }
}

/* Aujourd'hui sur téléphone */
@container main (max-width: 560px) {
  .day-bar { gap: 8px; }
  .day-switch > .day-switch-btn[aria-label] { display: none; }
  .day-switch { flex: 1 1 auto; }
  .day-switch-btn { flex: 1; padding: 0 8px; }
  .day-bar-label { display: none; }
  .day-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 13px; border-radius: 16px; }
  .kpi-label { font-size: 12px; white-space: normal; line-height: 1.25; }
  .kpi-value { font-size: 26px; }
  .kpi-money { font-size: 18px; letter-spacing: -0.02em; }
  .kpi-sub { font-size: 11.5px; }
  .day-row { grid-template-columns: 38px minmax(0, 1fr); row-gap: 6px; align-items: start; }
  .day-row .day-pay { grid-column: 2; justify-self: start; flex-direction: row; align-items: baseline; gap: 6px; }
  .day-name, .day-meta { white-space: normal; }
  .presence-actions { width: 100%; }
  .presence-actions .presence-btn { flex: 1; justify-content: center; white-space: nowrap; }
}
@container main (max-width: 560px) {
  .presence-hero { flex-direction: column; align-items: stretch; }
  .presence-actions { flex-wrap: wrap; }
  .presence-actions .presence-btn { flex: 1 1 130px; }
  .presence-hero-big { font-size: 56px; }
}

/* Cartes de présence sur téléphone : les textes passent à la ligne au lieu d'être coupés. */
@container main (max-width: 560px) {
  .guest-top { flex-wrap: wrap; }
  .guest-state { white-space: normal; }
  .guest-name { white-space: normal; flex-wrap: wrap; }
  .guest-tile-foot { flex-wrap: wrap; }
}
/* Clients sur téléphone */
@container main (max-width: 560px) {
  .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cl-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 13px; border-radius: 16px; }
  .cl-kpi-ic { width: 34px; height: 34px; border-radius: 11px; }
  .cl-kpi-value { font-size: 22px; white-space: nowrap; }
  .cl-kpi-label { font-size: 12px; line-height: 1.3; }
  .cl-tabs { padding: 0 12px; }
}
/* En-tête sur téléphone : boutons de la page à côté de l'établissement (pas seuls sur une ligne). */
@container main (max-width: 760px) {
  .topbar-actions { gap: 8px; }
  .topbar-actions > .site-dd { flex: 1 1 auto; min-width: 0; }
  .topbar-actions .site-switch { width: 100%; justify-content: flex-start; }
  .topbar-actions .site-switch-name { flex: 1; max-width: none; }
}
@container main (max-width: 760px) {
  .topbar-actions > .site-dd { flex: 1 1 0; }
}
@container main (max-width: 560px) {
  .cl-toolbar { padding: 12px 12px 10px; }
  .cl-search { flex: 1 1 100%; min-width: 0; padding: 0 12px; }
  .cl-selects { width: 100%; }
  .cl-selects > * { flex: 1 1 auto; min-width: 0; }
}

/* Caisse → Stock */
.sk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sk-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-card); font: inherit; color: inherit; text-align: left; }
button.sk-kpi { cursor: pointer; transition: border-color .15s, transform .15s; }
button.sk-kpi:hover { border-color: var(--lilac); transform: translateY(-1px); }
.sk-kpi > span:last-child { display: grid; min-width: 0; }
.sk-kpi b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.sk-kpi small { font-size: 12.5px; color: var(--muted); }
.sk-kpi.is-alert { background: var(--danger-bg); border-color: var(--danger-bd); }
.sk-kpi.is-alert b, .sk-kpi.is-alert small { color: var(--danger-tx); }
.sk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.sk-card { border-radius: 22px; background: var(--surface); border: 1px solid var(--border-card); }
.sk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.sk-toolbar .sim-search { flex: 1 1 220px; }
.sk-cats { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.tf-template.is-on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.sk-list { list-style: none; margin: 0; padding: 6px 10px 10px; }
.sk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--hair); border-radius: 12px; transition: background .3s; }
.sk-row:last-child { border-bottom: 0; }
.sk-row[hidden] { display: none; }
.sk-row.is-updated { background: var(--ok-bg); }
.sk-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--muted); overflow: hidden; }
.sk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sk-who { display: grid; min-width: 0; }
.sk-who strong { font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-who small { font-size: 12.5px; color: var(--muted); }
.sk-level { display: grid; justify-items: end; min-width: 74px; line-height: 1.1; }
.sk-level b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sk-level small { font-size: 11.5px; font-weight: 600; color: var(--ok-tx); }
.sk-row.is-low .sk-level b, .sk-row.is-low .sk-level small { color: var(--warn-tx); }
.sk-row.is-out .sk-level b, .sk-row.is-out .sk-level small { color: var(--danger-tx); }
.sk-actions { display: flex; gap: 6px; }
.sk-actions .rs-btn { height: 36px; padding: 0 12px; }
.sk-quick { background: var(--accent-soft); border-color: var(--lav-bd); color: var(--accent-text); }
.sk-history header { display: grid; padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); }
.sk-history header strong { font-size: 15px; color: var(--text); }
.sk-history header small { font-size: 12.5px; color: var(--muted); }
.sk-moves { list-style: none; margin: 0; padding: 4px 16px 12px; max-height: 560px; overflow: auto; }
.sk-move { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.sk-move:last-child { border-bottom: 0; }
.sk-move.is-new { animation: sknew 1.6s ease; }
@keyframes sknew { from { background: var(--ok-bg); } to { background: transparent; } }
.sk-move-main { display: grid; min-width: 0; }
.sk-move-main strong { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-move-main small { font-size: 12px; color: var(--muted); }
.sk-move-qty { display: grid; justify-items: end; flex-shrink: 0; line-height: 1.15; }
.sk-move-qty b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sk-move-qty small { font-size: 11.5px; color: var(--muted); }
.sk-move.tone-in .sk-move-qty b { color: var(--ok-tx); }
.sk-move.tone-out .sk-move-qty b { color: var(--soft); }
.sk-move.tone-loss .sk-move-qty b { color: var(--danger-tx); }
.sk-move.tone-move .sk-move-qty b { color: var(--accent-text); }
.sk-dialog-product { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 15px; font-weight: 600; color: var(--text); }
.sk-dialog-product small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tf-form em.error { font-style: normal; font-size: 13px; color: var(--danger-tx); }
.tf-form em.error[hidden] { display: none; }
@media (max-width: 1100px) { .sk-layout { grid-template-columns: minmax(0, 1fr); } }
@container main (max-width: 560px) {
  .sk-kpis { grid-template-columns: 1fr; gap: 8px; }
  .sk-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .sk-actions { grid-column: 2 / -1; }
  .sk-thumb { width: 40px; height: 40px; }
}
@container main (max-width: 560px) { .sk-who strong { white-space: normal; } .sk-actions .rs-btn { flex: 1; justify-content: center; } }

/* Photo de profil (reprise de la v1) à la place des initiales. */
.avatar, .pf-avatar { overflow: hidden; }
.avatar img, .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aide et support (ticket dans le CRM de Holeedays) */
.help-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.help-form { display: flex; flex-direction: column; gap: 14px; }
.help-form textarea { width: 100%; }
.help-request { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.help-request > div { display: flex; flex-direction: column; min-width: 0; }
.help-request .muted { font-size: 13px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } }