/* ============================================================
   OYVIA — Application (shell + écrans)
   Sidebar claire, topbar, zone de contenu bleu très pâle.
   Préfixe .app-  pour le shell ; préfixes par écran ailleurs.
   ============================================================ */

.app { background: var(--bg-subtle); }
.app-shell { display: flex; min-height: 100vh; }

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
.app-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--c-nav-bg); border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: var(--z-nav);
  transition: width var(--t), transform var(--t);
}
.app-sidebar__brand { display: flex; align-items: flex-start; gap: var(--sp-2); height: var(--header-h); padding: 0 var(--sp-5); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); overflow: visible; position: relative; z-index: 1; }
/* Le logo déborde volontairement en dessous de la barre (plus grand qu'elle) : aligné en haut (la sidebar commence tout en haut de l'écran, il n'y a pas de place au-dessus) et compensé par le padding de la nav ci-dessous pour ne jamais chevaucher les liens */
.app-sidebar__brand .brand-logo { height: 96px; }
.app-sidebar__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--blue-600); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-blue); }
.app-sidebar__mark svg { width: 19px; height: 19px; }
.app-sidebar__nav { flex: 1; overflow-y: auto; padding: 16px var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.app-navlabel { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); line-height: 1; padding: 0 var(--sp-3) var(--sp-2); }
.app-navlabel:not(:first-of-type) { margin-top: var(--sp-3); }
.app-navitem {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-nav-text);
  transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; position: relative;
}
.app-navitem svg { width: 20px; height: 20px; flex-shrink: 0; }
.app-navitem:hover { background: var(--c-nav-hover-bg); color: var(--c-text); }
.app-navitem.is-active { background: var(--c-nav-active-bg); color: var(--c-nav-active); font-weight: var(--fw-semibold); }
.app-navitem__badge { margin-left: auto; background: var(--c-accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--r-full); min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; }
.app-sidebar__foot { border-top: 1px solid var(--c-border); padding: var(--sp-3); }
.app-userchip { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); transition: background var(--t-fast); cursor: pointer; }
.app-userchip:hover { background: var(--c-nav-hover-bg); }
.app-userchip__meta { min-width: 0; }
.app-userchip__meta b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-userchip__meta span { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar repliée (mini) */
.app-sidebar.is-mini { width: var(--sidebar-w-mini); }
.app-sidebar.is-mini .app-sidebar__brand span,
.app-sidebar.is-mini .app-navitem span,
.app-sidebar.is-mini .app-navlabel,
.app-sidebar.is-mini .app-userchip__meta,
.app-sidebar.is-mini .app-navitem__badge { display: none; }
.app-sidebar.is-mini .app-navitem { justify-content: center; padding: var(--sp-3); }
.app-sidebar.is-mini .app-sidebar__brand { justify-content: center; align-items: center; padding: 0; }
.app-sidebar.is-mini .app-sidebar__brand .brand-logo { height: auto; max-width: 40px; }
.app-sidebar.is-mini .app-sidebar__nav { padding-top: var(--sp-4); }
.app-sidebar.is-mini .app-userchip { justify-content: center; }

/* ------------------------------------------------------------
   Corps + topbar
   ------------------------------------------------------------ */
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  height: var(--header-h); flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5);
}
/* min-width:0 + ellipsis : le titre est le seul élément élastique de la
   barre, c'est donc à lui de céder. Sans ça, un intitulé long comme
   « Automatisations » restait à sa largeur de contenu et poussait la
   barre hors de l'écran (9 px de débordement sur mobile). */
.app-topbar__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar__search { position: relative; width: 260px; }
.app-topbar .btn--icon { color: var(--c-text-soft); }
.app-topbar__menu { display: none; }
.app-bell { position: relative; }
.app-bell__dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; background: var(--c-danger); border: 2px solid var(--white); border-radius: var(--r-full); }
.app-bell__count { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full); background: var(--c-danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; display: grid; place-items: center; border: 2px solid var(--c-surface); }
.app-bell__count--medium { background: var(--amber-500); }
/* Filtre par logement, placé dans l'en-tête de page (cf. layout.js) */
.app-logement-select { min-width: 200px; }

/* Centre de notifications (dropdown ancré à la cloche) */
.notif-dropdown { position: fixed; z-index: var(--z-modal); width: 360px; max-width: calc(100vw - 2 * var(--sp-4)); max-height: 440px; overflow-y: auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast); }
.notif-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface); }
.notif-dropdown__head b { font-size: var(--fs-md); }
.notif-item { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-4) var(--sp-5); border: 0; border-bottom: 1px solid var(--c-border); background: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--c-surface-alt); }
.notif-item__ic { width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; }
.notif-item__ic svg { width: 17px; height: 17px; }
.notif-item__ic--high { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.notif-item__ic--medium { background: var(--amber-100); color: var(--amber-700); }
.notif-item__body { min-width: 0; }
.notif-item__body b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: block; }
.notif-item__body p { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; line-height: var(--lh-snug); }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.notif-empty svg { width: 28px; height: 28px; color: var(--c-positive-ink); }

/* Menu de compte (dropdown ancré à l'avatar / à la fiche utilisateur) */
.account-dropdown { position: fixed; z-index: var(--z-modal); width: 260px; max-width: calc(100vw - 2 * var(--sp-4)); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast); overflow: hidden; }
.account-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.account-dropdown__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.account-dropdown__head b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown__head span { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.account-dropdown__body { padding: var(--sp-2); }
.account-dropdown__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); border: 0; border-radius: var(--r-md); background: none; color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: left; cursor: pointer; transition: background var(--t-fast); }
.account-dropdown__item:hover { background: var(--c-nav-hover-bg); }
.account-dropdown__item svg { width: 17px; height: 17px; color: var(--c-text-soft); flex-shrink: 0; }
.account-dropdown__item--danger { color: var(--c-danger-ink); }
.account-dropdown__item--danger svg { color: var(--c-danger-ink); }
.account-dropdown__item--danger:hover { background: var(--c-danger-soft); }
.account-dropdown__sep { height: 1px; background: var(--c-border); margin: var(--sp-2) 0; }

/* Toast « push » simulé pour le centre de notifications (message plus long : pilule → carte) */
.toast--notif { cursor: pointer; border-radius: var(--r-xl); max-width: 360px; align-items: flex-start; }
.toast--notif svg { flex-shrink: 0; margin-top: 2px; color: var(--amber-400); }

.app-main { flex: 1; padding: var(--sp-6); max-width: 100%; }
.app-main--wide { padding: var(--sp-5); }

/* En-tête de page (dans le contenu) */
.app-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.app-pagehead h1 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tighter); }
.app-pagehead p { color: var(--c-text-soft); font-size: var(--fs-sm); margin-top: 2px; }
.app-pagehead__actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.app-pagehead__actions .select { width: auto; }

/* Barre de filtres réutilisable */
.app-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.app-filters .input, .app-filters .select { height: 40px; }
.app-filters .select { width: auto; min-width: 168px; flex: 0 0 auto; }
.app-filters .input-icon { flex: 0 0 auto; }
.app-filters .input-icon .input { width: 240px; }
.app-filters .grow { flex: 1 1 auto; }

/* Grilles utilitaires

   minmax(0, …) partout et non 1fr : « 1fr » vaut « minmax(auto, 1fr) »,
   dont la borne basse est la largeur MINIMALE du contenu. Une colonne
   contenant un canvas de graphique (que Chart.js dimensionne en pixels)
   ou un tableau large refuse alors de rétrécir et pousse toute la page
   en débordement horizontal. C'est ce qui faisait déborder Statistiques
   de 195 px sur mobile. */
.app-grid { display: grid; gap: var(--sp-4); }
.app-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Liste simple (arrivées/départs, prochaines résas) */
.app-list { display: flex; flex-direction: column; }
.app-list__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.app-list__item:last-child { border-bottom: 0; }
.app-list__item .grow { min-width: 0; }
.app-list__item b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.app-list__item small { font-size: var(--fs-xs); color: var(--c-text-muted); display: block; }

/* Overlay mobile de la sidebar */
.app-scrim { position: fixed; inset: 0; background: rgba(11,16,32,0.44); z-index: calc(var(--z-nav) - 1); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.app-scrim.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------
   Responsive : sidebar repliable en tiroir
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-topbar__menu { display: grid; }
  .app-topbar__search { display: none; }
    /* Sur mobile la sidebar est un tiroir plein écran : le bouton « replier »
     (pensé pour la version bureau, mini-rail) ferait doublon avec le burger. */
  #app-collapse { display: none; }
}
@media (max-width: 620px) {
  .app-grid--2, .app-grid--3, .app-grid--2-1 { grid-template-columns: 1fr; }
  .app-main { padding: var(--sp-4); }
  /* En pleine largeur, le filtre logement reste utilisable au lieu d'être masqué */
  .app-logement-select { min-width: 0; width: 100%; }
}

/* ============================================================
   CALENDRIER UNIFIÉ  (.cal-)
   ============================================================ */
.cal-nav { display: flex; align-items: center; gap: var(--sp-1); }
.cal-nav__label { font-weight: var(--fw-semibold); min-width: 128px; text-align: center; text-transform: capitalize; font-size: var(--fs-sm); }
.cal-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: center; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-soft); }
.cal-legend i { width: 12px; height: 12px; border-radius: 3px; }
.cal-legend i.hatch { background: repeating-linear-gradient(45deg, var(--ch-bloque), var(--ch-bloque) 4px, #a7b1c0 4px, #a7b1c0 8px); }

.cal-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.cal-grid { min-width: max-content; }
.cal-row { display: flex; border-bottom: 1px solid var(--c-border); }
.cal-row:last-child { border-bottom: 0; }
.cal-namecell { position: sticky; left: 0; z-index: 2; width: 196px; min-width: 196px; background: var(--c-surface); border-right: 1px solid var(--c-border); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); }
.cal-namecell__thumb { width: 30px; height: 30px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cal-namecell__meta { min-width: 0; }
.cal-namecell__meta b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-namecell__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); }

.cal-track { display: grid; position: relative; flex: 1; }
.cal-daycell { border-right: 1px solid var(--c-border); grid-row: 1; position: relative; }
.cal-daycell--we { background: var(--bg-subtle); }
.cal-daycell--today::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--red-600); z-index: 5; }

.cal-row--head { position: sticky; top: 0; z-index: 4; }
.cal-row--head .cal-namecell { background: var(--c-surface-alt); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); font-weight: var(--fw-semibold); z-index: 5; }
.cal-dayhead { border-right: 1px solid var(--c-border); text-align: center; padding: var(--sp-2) 0; font-size: var(--fs-xs); color: var(--c-text-muted); background: var(--c-surface-alt); grid-row: 1; }
.cal-dayhead b { display: block; font-size: var(--fs-sm); color: var(--c-text); font-weight: var(--fw-semibold); }
.cal-dayhead--today { position: relative; }
.cal-dayhead--today::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--red-600); z-index: 5; }
.cal-dayhead--today b { color: var(--red-600); }
.cal-dayhead--we { color: var(--ink-400); }

.cal-row--body { height: 48px; }
.cal-bar { align-self: center; height: 30px; margin: 0 3px; border-radius: var(--r-sm); display: flex; align-items: center; padding: 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-xs); z-index: 1; transition: filter var(--t-fast), transform var(--t-fast); }
.cal-bar:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-bar--airbnb  { background: var(--ch-airbnb); }
.cal-bar--booking { background: var(--ch-booking); }
.cal-bar--direct  { background: var(--ch-direct); }
.cal-bar--bloque  { background: repeating-linear-gradient(45deg, var(--ch-bloque), var(--ch-bloque) 6px, #a7b1c0 6px, #a7b1c0 12px); color: var(--ink-800); }

/* ============================================================
   AUTHENTIFICATION (login factice)  (.auth-)
   ============================================================ */
/* align-content:center + gap : la carte et le bouton « Retour au site »
   sont deux lignes de la grille, groupées au centre de l'écran. */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: var(--sp-4); padding: var(--sp-6); position: relative; overflow: hidden; background: var(--bg-subtle); }
.auth-wrap::before { content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse at center, rgba(81,112,255,0.18), transparent 68%); pointer-events: none; }
/* .auth-back est mutualisé dans components.css (partagé avec les portails) */
.auth-card { position: relative; width: 100%; max-width: 408px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: var(--sp-8); }
.auth-brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); justify-content: center; margin-bottom: var(--sp-6); }
.auth-brand .lp-brand__mark { width: 36px; height: 36px; }
.auth-card h1 { font-size: var(--fs-2xl); text-align: center; letter-spacing: var(--tracking-tight); }
.auth-card > p { text-align: center; color: var(--c-text-soft); font-size: var(--fs-sm); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-note { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-xs); color: var(--c-text-muted); }
.auth-foot { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-soft); }
.auth-foot a { color: var(--c-accent); font-weight: var(--fw-medium); }

/* ============================================================
   TABLEAU DE BORD  (.dash-)
   ============================================================ */
.dash-chart { position: relative; height: 280px; }
.dash-today__group + .dash-today__group { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.dash-arrow { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.dash-arrow--in { background: var(--green-100); color: var(--green-700); }
.dash-arrow--out { background: var(--amber-100); color: var(--amber-700); }
.dash-arrow svg { width: 17px; height: 17px; }

/* ============================================================
   ABONNEMENT  (.ab-)
   ============================================================ */
.ab-hero { border-radius: var(--r-2xl); padding: var(--sp-6); color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); box-shadow: var(--shadow-blue); position: relative; overflow: hidden; }
.ab-hero::after { content: ""; position: absolute; top: -60px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.ab-hero__badge { display: inline-block; background: rgba(255,255,255,0.18); border-radius: var(--r-full); padding: 4px var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ab-hero__plan { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: var(--sp-3); }
.ab-hero__row { display: flex; gap: var(--sp-8); margin-top: var(--sp-5); position: relative; }
.ab-hero__stat small { display: block; font-size: var(--fs-xs); opacity: 0.8; }
.ab-hero__stat b { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Historique de facturation : mois × offre × logements gérés × montant */
.ab-hist__row { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.ab-hist__row:last-child { border-bottom: 0; }
.ab-hist__row--head { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); }
.ab-hist__row--head span:last-child, .ab-hist__amount { text-align: right; }
.ab-hist__amount { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ab-hist__row { grid-template-columns: 1fr auto; row-gap: 2px; }
  /* L'offre et le nombre de logements repassent sur une ligne secondaire */
  .ab-hist__row span:nth-child(2), .ab-hist__row span:nth-child(3) { grid-column: 1; font-size: var(--fs-xs); color: var(--c-text-muted); }
}

/* Comparatif des offres (Abonnement > Changer d'offre) */
.ab-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; }
.ab-plan { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-4); background: var(--c-surface); }
.ab-plan.is-current { border-color: var(--blue-600); background: var(--c-accent-soft); }
.ab-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ab-plan__top b { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.ab-plan__top > span { text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--blue-600); white-space: nowrap; }
.ab-plan__top small { display: block; font-size: 10px; font-weight: var(--fw-regular); color: var(--c-text-muted); white-space: normal; }
.ab-plan__total { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-soft); }
.ab-plan__feats { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-plan__feats li { font-size: var(--fs-xs); color: var(--c-text-soft); padding-left: var(--sp-4); position: relative; }
.ab-plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: var(--fw-bold); }
/* Intertitre de groupe : pas de coche, c'est un libellé de section */
.ab-plan__group { font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); margin-top: var(--sp-2); }
.ab-plan__group::before { content: none !important; }
.ab-plan__feats em { display: block; font-style: normal; color: var(--c-text-muted); margin-top: 2px; }
.ab-plan__action { margin-top: auto; padding-top: var(--sp-4); }
@media (max-width: 900px) { .ab-plans { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ab-plans { grid-template-columns: 1fr; } }

/* ============================================================
   STATISTIQUES  (.st-)
   ============================================================ */
/* width:100% + min-width:0 : sans ça le canvas garde la largeur que
   Chart.js lui a écrite en pixels et ne redescend jamais. */
.st-chart { position: relative; height: 288px; width: 100%; min-width: 0; }
.st-chart--sm { height: 240px; }
.st-chart canvas { max-width: 100%; }
.st-legend { display: flex; flex-direction: column; gap: var(--sp-3); }
.st-legend__item { display: flex; align-items: center; gap: var(--sp-3); }
.st-legend__item i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.st-legend__item b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ============================================================
   MÉNAGE & ÉQUIPE  (.mn-)
   ============================================================ */
.mn-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.mn-teamcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.mn-teamcard__meta { min-width: 0; flex: 1; }
.mn-teamcard__meta b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: block; }
.mn-teamcard__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.mn-teamcard__due { text-align: right; }
.mn-teamcard__due b { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mn-teamcard__due small { font-size: var(--fs-xs); color: var(--c-text-muted); display: block; }

.mn-daygroup { margin-bottom: var(--sp-5); }
.mn-dayhead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mn-dayhead h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); text-transform: capitalize; }
.mn-dayhead .badge { }
.mn-dayhead--today h3 { color: var(--blue-600); }
.mn-tasks { display: flex; flex-direction: column; gap: var(--sp-2); }
.mn-task { display: flex; align-items: center; gap: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: var(--sp-3) var(--sp-4); }
.mn-task.is-done { opacity: 0.6; }
.mn-task__time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-sm); width: 46px; flex-shrink: 0; }
.mn-task__ic { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; background: var(--ink-100); color: var(--ink-600); }
.mn-task__ic svg { width: 19px; height: 19px; }
.mn-task__ic--menage { background: var(--blue-50); color: var(--blue-600); }
.mn-task__ic--checkin { background: var(--green-100); color: var(--green-700); }
.mn-task__ic--maintenance { background: var(--amber-100); color: var(--amber-700); }
.mn-task__ic--linge { background: var(--ch-booking-soft); color: var(--ch-booking-ink); }
.mn-task__meta { min-width: 0; flex: 1; }
.mn-task__meta b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mn-task__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); display: block; }
.mn-task__span { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.mn-task__continuation-tag { font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--c-text-muted); }
/* Tâche créée par Vivi depuis un message : renvoie vers la conversation */
.mn-task__vivi { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--blue-700); background: var(--c-accent-soft); border-radius: var(--r-full); padding: 2px var(--sp-2); text-decoration: none; white-space: nowrap; }
.mn-task__vivi:hover { background: var(--blue-600); color: #fff; }
.mn-task--continuation { background: var(--c-surface-alt); }
.mn-task__time--continuation { display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); }
.mn-task__time--continuation svg { width: 17px; height: 17px; }
.mn-task__prest { width: 190px; flex-shrink: 0; }
.mn-task__prest .select { height: 36px; font-size: var(--fs-sm); }
.mn-task__amount { width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-sm); flex-shrink: 0; }
.mn-task__status { width: 118px; flex-shrink: 0; display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  /* Sans ce wrap, les 5 colonnes à largeur fixe dépassent le viewport et
     provoquent un scroll horizontal sur toute la page. */
  .mn-task { flex-wrap: wrap; row-gap: var(--sp-3); }
  .mn-task__prest { flex: 1 1 100%; width: auto; order: 1; }
  .mn-task__amount { order: 2; }
  /* La corbeille suit le statut sur la même ligne : c'est « margin-left:auto »
     qui pousse le groupe à droite, il passe donc du statut au bouton. */
  .mn-task__status { order: 3; margin-left: auto; }
  .mn-task [data-del] { order: 4; }
}
.mn-statusbtn { cursor: pointer; border: 1px solid transparent; }
.mn-derived { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-snug); }
.mn-derived b { color: var(--c-text); font-weight: var(--fw-semibold); }
.mn-derived:empty { display: none; }

/* Liste équipe : édition en place + suppression */
.mn-teamrow { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.mn-teamrow:last-child { border-bottom: 0; }
.mn-teamrow__meta { flex: 1; min-width: 0; }
.mn-teamrow__meta b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: block; }
.mn-teamrow__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.mn-teamrow .icon-btn { width: 32px; height: 32px; flex-shrink: 0; }
.mn-teamrow .icon-btn svg { width: 16px; height: 16px; }
.mn-teamrow .icon-btn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.mn-teamrow.is-editing { flex-direction: column; align-items: stretch; gap: var(--sp-3); background: var(--bg-subtle); padding: var(--sp-3); border-radius: var(--r-md); border-bottom: 0; }
.mn-teamedit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mn-teamedit .input, .mn-teamedit .select { height: 36px; font-size: var(--fs-sm); }
.mn-teamedit__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* Charge d'un prestataire (page Équipe) : le nombre de tâches réalisées est
   ce qui qualifie un collaborateur, une fois le tarif sorti de sa fiche. */
.eq-charge { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; margin-right: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; }
.eq-charge b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-text); }
.eq-charge em { font-style: normal; padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--c-accent-soft); color: var(--blue-700); font-weight: var(--fw-medium); }
@media (max-width: 720px) { .eq-charge span { display: none; } }

/* ============================================================
   AUTOMATISATIONS  (.auto-)
   ============================================================ */
.auto-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.auto-item { display: flex; align-items: center; gap: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-5); }
.auto-item.is-off { opacity: 0.62; }
.auto-item__ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); flex-shrink: 0; }
.auto-item__ic svg { width: 22px; height: 22px; }
.auto-item__meta { min-width: 0; flex: 1; }
.auto-item__meta b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.auto-item__sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.auto-item__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
@media (max-width: 640px) {
  /* Sans ce wrap, meta et actions se disputent la même ligne et le titre
     finit écrasé sur une largeur quasi nulle (un mot par ligne). */
  .auto-item { flex-wrap: wrap; }
  .auto-item__actions { flex-basis: 100%; padding-left: calc(44px + var(--sp-4)); }
}
/* Modèles de départ, à la création d'une automatisation */
.auto-presets { display: grid; gap: var(--sp-2); }
.auto-preset { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.auto-preset:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.auto-preset__ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; }
.auto-preset__ic svg { width: 19px; height: 19px; }
.auto-preset b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.auto-preset small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.auto-preset__quand { flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); background: var(--bg-subtle); border-radius: var(--r-full); padding: 3px var(--sp-3); }

/* Blocs de la page séjour, activables un par un */
.auto-blocs { display: grid; gap: var(--sp-2); }
.auto-bloc { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.auto-bloc.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); }
.auto-bloc input { margin-top: 3px; flex-shrink: 0; accent-color: var(--c-accent); }
.auto-bloc b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.auto-bloc small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }

/* Bloc de planification : événement, décalage, heure d'envoi */
.auto-plan { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); align-items: end; }
.auto-plan__jours { display: flex; align-items: center; gap: var(--sp-2); }
.auto-plan__jours .input { width: 84px; flex-shrink: 0; }
/* Le résumé en toutes lettres évite d'avoir à recomposer « J-1 » de tête */
.auto-plan__resume { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--blue-700); background: var(--c-accent-soft); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); display: inline-block; }
.auto-item__quand { font-weight: var(--fw-medium); color: var(--c-text-soft); }
@media (max-width: 720px) { .auto-plan { grid-template-columns: 1fr; } }

.auto-vars { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.auto-var { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); border-radius: var(--r-sm); padding: 4px var(--sp-2); cursor: pointer; transition: background var(--t-fast); }
.auto-var:hover { background: var(--blue-100); }
.auto-preview { background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-text-soft); white-space: pre-wrap; }

/* ============================================================
   LOGEMENTS  (.lg-)
   ============================================================ */
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--sp-4); }
.lg-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; transition: transform var(--t), box-shadow var(--t); }
.lg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lg-card__cover { height: 132px; display: flex; align-items: flex-start; justify-content: flex-end; padding: var(--sp-3); position: relative; }
.lg-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.18)); }
.lg-card__note { position: relative; z-index: 1; background: rgba(255,255,255,0.92); border-radius: var(--r-full); padding: 3px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 4px; }
.lg-card__note svg { width: 13px; height: 13px; color: var(--amber-400); fill: var(--amber-400); }
.lg-card__body { padding: var(--sp-4); }
.lg-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.lg-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; }
.lg-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); }
.lg-card__channels { display: flex; gap: 5px; align-items: center; }
.lg-chan { width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 10px; font-weight: var(--fw-bold); color: #fff; position: relative; }
.lg-chan__sync { position: absolute; bottom: -2px; right: -2px; width: 9px; height: 9px; border-radius: var(--r-full); border: 1.5px solid var(--c-surface); }
.lg-chan__sync--ok { background: var(--green-500); }
.lg-chan__sync--attention { background: var(--amber-500); }
.lg-card__price b { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.lg-card__price span { font-size: var(--fs-xs); color: var(--c-text-muted); }

.lg-detail__head { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.lg-detail__thumb { width: 84px; height: 84px; border-radius: var(--r-lg); display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-xl); flex-shrink: 0; }
.lg-detail__meta h1 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tighter); }
.lg-detail__meta p { color: var(--c-text-soft); font-size: var(--fs-sm); }
.lg-tabpane { display: none; padding-top: var(--sp-5); }
.lg-tabpane.is-active { display: block; }
.lg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.lg-photo { aspect-ratio: 4/3; border-radius: var(--r-lg); }
.lg-channelrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: var(--sp-3); }
.lg-channelrow__ic { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); flex-shrink: 0; }
.lg-equip { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lg-equip span { background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }

/* --- Carte : structure et alertes --- */
.lg-card__specs { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 4px; }
.lg-card__statut { position: relative; z-index: 1; margin-right: auto; }
.lg-card__cover { justify-content: space-between; }
/* Plafond de nuitées bientôt atteint : l'information doit sauter aux yeux
   depuis la liste, c'est une contrainte légale et non un détail de gestion. */
.lg-card__flag { margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-warning-ink); background: var(--c-warning-soft); border-radius: var(--r-sm); padding: 4px var(--sp-2); }

/* --- Fiche : blocs de description --- */
.lg-desc + .lg-desc { margin-top: var(--sp-4); }
.lg-desc__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); margin-bottom: 4px; }
.lg-desc p { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-base); }

/* Jauge du plafond de nuitées */
.lg-jauge__barre { height: 8px; border-radius: var(--r-full); background: var(--ink-100); overflow: hidden; }
.lg-jauge__barre i { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-full); }

/* Couchages, pièce par pièce */
.lg-couchage { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.lg-couchage:last-child { border-bottom: 0; }
.lg-couchage span { color: var(--c-text-soft); text-align: right; }

/* Équipements groupés par catégorie */
.lg-amgroupe + .lg-amgroupe { margin-top: var(--sp-5); }
.lg-amgroupe__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); margin-bottom: var(--sp-2); }

/* Notes détaillées façon Airbnb */
.lg-note { display: grid; grid-template-columns: 1fr 110px 34px; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.lg-note__barre { height: 6px; border-radius: var(--r-full); background: var(--ink-100); overflow: hidden; }
.lg-note__barre i { display: block; height: 100%; background: var(--c-accent); }
.lg-note b { text-align: right; font-variant-numeric: tabular-nums; }

/* Jours d'arrivée / départ autorisés */
.lg-jours { display: flex; gap: 4px; flex-wrap: wrap; }
.lg-jour { min-width: 38px; text-align: center; padding: 5px var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--c-text-muted); }
.lg-jour.is-on { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--blue-700); font-weight: var(--fw-semibold); }

/* Canal connecté : en-tête + détail de la liaison */
.lg-canal { border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; }
.lg-canal__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.lg-canal__head small { display: block; font-size: var(--fs-xs); }
.lg-canal__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); border-top: 1px solid var(--c-border); background: var(--bg-subtle); }
.lg-canal__grid small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.lg-canal__grid span { font-size: var(--fs-sm); }
.lg-canal__grid a { color: var(--blue-600); font-weight: var(--fw-semibold); }
.lg-canal__alerte { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-warning-soft); color: var(--c-warning-ink); font-size: var(--fs-xs); }

/* Canal mis en pause : encore rattaché, mais il ne synchronise plus. On le
   décolore sans le masquer — il doit rester réactivable d'un clic. */
.lg-canal--pause { background: var(--bg-subtle); }
.lg-canal--pause .lg-channelrow__ic,
.lg-canal--pause .lg-canal__grid { opacity: 0.5; }
.lg-canal__head .btn svg { width: 14px; height: 14px; }

/* Pastille du canal dans la barre d'onglets */
.lg-tabcanal { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* Annonce telle qu'elle existe chez la plateforme  (.ota-) */
.ota-head { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-top: 3px solid var(--ota, var(--c-accent)); border-radius: var(--r-lg); }
.ota-head__ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ota, var(--c-accent)); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg); flex-shrink: 0; }
.ota-head__canal { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ota-head h2 { font-size: var(--fs-xl); line-height: 1.25; margin: 2px 0; }
.ota-head__sub { font-size: var(--fs-sm); color: var(--c-text-soft); }
.ota-head__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ota-head__note { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); flex-shrink: 0; font-size: var(--fs-sm); color: var(--c-text-soft); }
.ota-head__score { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ota-head__note svg { width: 14px; height: 14px; fill: var(--c-accent); align-self: center; flex-shrink: 0; }
.ota-head__note b { font-size: var(--fs-lg); color: var(--c-text); }
.ota-head__note em { font-style: normal; font-weight: var(--fw-semibold); color: var(--green-700); }

/* Onglet Accès  (.acc-) */
.acc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.acc-mode { display: flex; align-items: flex-start; gap: var(--sp-3); text-align: left; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.acc-mode:hover { border-color: var(--c-border-strong); }
.acc-mode.is-active { border-color: var(--blue-600); background: var(--blue-50); }
.acc-mode__ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg-subtle); color: var(--c-text-soft); flex-shrink: 0; }
.acc-mode__ic svg { width: 19px; height: 19px; }
.acc-mode.is-active .acc-mode__ic { background: var(--c-accent); color: #fff; }
.acc-mode__txt b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.acc-mode__txt small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45; }
.acc-mode.is-active .acc-mode__txt b { color: var(--blue-700); }

.acc-device { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-4); background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.acc-device__ic { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-soft); flex-shrink: 0; }
.acc-device__ic svg { width: 20px; height: 20px; }
.acc-device b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.acc-device small { display: block; font-size: var(--fs-xs); }

.acc-code { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-4); background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.acc-code__val { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: 0.18em; text-indent: 0.18em; }
.acc-code__hint { font-size: var(--fs-xs); color: var(--c-text-muted); }
.acc-code--vide .acc-code__val { color: var(--c-text-muted); }

.acc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.acc-actions .btn { flex: 1 1 auto; justify-content: center; }

/* Un ordre est en vol vers la serrure : on gèle le panneau plutôt que
   d'accepter un second ordre que la porte n'aurait pas le temps de traiter. */
.lg-tabpane.is-busy { opacity: 0.55; pointer-events: none; transition: opacity var(--t-fast); }

.acc-input-code { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.14em; text-transform: uppercase; }
.acc-radio { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; }
.acc-radio:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); }
.acc-radio input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--blue-600); flex-shrink: 0; }
.acc-radio b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.acc-radio small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-muted); }

@media (max-width: 900px) {
  .acc-modes { grid-template-columns: 1fr; }
  .ota-head { flex-wrap: wrap; }
  .ota-head__note { align-items: flex-start; text-align: left; }
}

/* Photos : couverture et légende */
.lg-photo { position: relative; overflow: hidden; }
.lg-photo__flag { position: absolute; top: var(--sp-2); left: var(--sp-2); background: rgba(255,255,255,0.92); border-radius: var(--r-full); padding: 3px var(--sp-2); font-size: 10px; font-weight: var(--fw-bold); }
.lg-photo__legende { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-3) var(--sp-2); color: #fff; font-size: var(--fs-xs); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); }

.font-mono { font-family: var(--font-mono); word-break: break-all; }

/* Tâches récurrentes (onglet fiche logement)  (.rec-) */
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.rec-head p { max-width: 62ch; }
.rec-ic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.rec-ic svg { width: 18px; height: 18px; }
.rec-ic--menage { background: var(--blue-50); color: var(--blue-600); }
.rec-ic--accueil { background: var(--green-100); color: var(--green-700); }
.rec-ic--maintenance { background: var(--amber-100); color: var(--amber-700); }
.rec-ic--inspection { background: var(--ch-booking-soft); color: var(--ch-booking-ink); }
.rec-ic--linge { background: var(--ink-100); color: var(--ink-600); }
.rec-ic--cles { background: var(--ch-airbnb-soft); color: var(--ch-airbnb-ink); }
.rec-task { display: flex; align-items: center; gap: var(--sp-3); }
.rec-task__meta { min-width: 0; }
.rec-task__meta b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: block; }
.rec-task__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* Sélecteur de type (modale) */
.rec-typepicker { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rec-typechip { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-soft); cursor: pointer; background: var(--c-surface); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.rec-typechip svg { width: 16px; height: 16px; }
.rec-typechip:hover { border-color: var(--ink-400); color: var(--c-text); }
.rec-typechip.is-active { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.rec-delai { display: flex; align-items: center; gap: var(--sp-2); }
.rec-delai .input { max-width: 110px; }

/* ============================================================
   MESSAGERIE  (.msg-)  — 3 colonnes
   ============================================================ */
.app-main--flush { padding: 0; }
.msg-layout { display: grid; grid-template-columns: 340px 1fr 330px; height: calc(100vh - var(--header-h)); min-height: 0; }
.msg-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--c-surface); }
.msg-col--list { border-right: 1px solid var(--c-border); }
.msg-col--thread { background: var(--bg-subtle); }
.msg-col--ctx { border-left: 1px solid var(--c-border); }
.msg-back { display: none; flex-shrink: 0; }

.msg-listhead { padding: var(--sp-4); border-bottom: 1px solid var(--c-border); flex-shrink: 0; }
.msg-listhead h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.msg-convs { overflow-y: auto; flex: 1; }
.msg-conv { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); cursor: pointer; transition: background var(--t-fast); border-left: 3px solid transparent; }
.msg-conv:hover { background: var(--c-surface-alt); }
.msg-conv.is-active { background: var(--blue-50); border-left-color: var(--blue-600); }
.msg-conv__body { min-width: 0; flex: 1; }
.msg-conv__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.msg-conv__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv__time { font-size: var(--fs-xs); color: var(--c-text-muted); flex-shrink: 0; }
.msg-conv__sub { display: flex; align-items: center; gap: var(--sp-2); margin: 3px 0; }
.msg-conv__preview { font-size: var(--fs-sm); color: var(--c-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv__unread { margin-left: auto; background: var(--c-accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; }
/* Marqueur Vivi dans la liste : ✦ elle a répondu · ⏳ elle attend votre aval */
.msg-conv__ia { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--blue-700); background: var(--c-accent-soft); border-radius: var(--r-full); padding: 2px var(--sp-2); flex-shrink: 0; }
.msg-conv__ia--attente { color: var(--c-warning-ink); background: var(--c-warning-soft); }

/* Filtres rapides de la boîte de réception : la colonne est étroite,
   les 3 boutons se partagent la largeur au lieu de déborder */
.msg-filters { display: flex; width: 100%; margin-top: var(--sp-3); }
.msg-filters button { flex: 1; padding: 0 var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }

.msg-threadhead { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-border); background: var(--c-surface); flex-shrink: 0; }
.msg-threadhead__meta { min-width: 0; }
.msg-threadhead__meta b { font-size: var(--fs-md); font-weight: var(--fw-semibold); display: block; }
.msg-threadhead__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.msg-threadhead__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.msg-thread { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.msg-daysep { text-align: center; font-size: var(--fs-xs); color: var(--c-text-muted); margin: var(--sp-2) 0; }
.msg-bubble { max-width: 72%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: var(--lh-snug); position: relative; }
.msg-bubble__time { font-size: var(--fs-xs); margin-top: 4px; opacity: 0.7; }
.msg-bubble--in { align-self: flex-start; background: var(--c-surface); border: 1px solid var(--c-border); border-bottom-left-radius: var(--r-sm); }
.msg-bubble--out { align-self: flex-end; background: var(--blue-600); color: #fff; border-bottom-right-radius: var(--r-sm); }
/* Signature de Vivi sous une bulle qu'elle a écrite : la transparence sur
   « qui a répondu » est la condition pour faire confiance à l'automatisation */
.msg-bubble__vivi { font-weight: var(--fw-semibold); }

/* Bloc Vivi, intercalé entre le fil et le composeur */
.msg-vivi { flex-shrink: 0; border-top: 1px solid var(--c-border); padding: var(--sp-3) var(--sp-4); }
.msg-vivi--attente { background: var(--c-warning-soft); border-top-color: var(--amber-500); }
.msg-vivi--ok { background: var(--c-surface-alt); }
.msg-vivi--promo { background: var(--c-accent-soft); }
/* min-width:0 sur le bloc de texte : sans lui, les boutons d'action
   (white-space: nowrap) refusent de rétrécir et compriment le texte à
   un mot par ligne au lieu de passer à la ligne eux-mêmes. */
.msg-vivi__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.msg-vivi__head > .grow { min-width: 0; }
.msg-vivi__head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; }
.msg-vivi__ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-full); background: #fff; border: 1px solid var(--c-border); display: grid; place-items: center; }
.msg-vivi__ic img { width: 24px; height: 24px; display: block; }
.msg-vivi__head b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.msg-vivi__head small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.msg-vivi__texte { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.msg-vivi__edit { margin-top: var(--sp-3); width: 100%; min-height: 88px; }
.msg-vivi__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Tâche déduite d'un message. Fond distinct de la proposition de réponse :
   les deux encarts peuvent s'empiler sur un même fil, il faut les
   distinguer au premier coup d'œil. */
.msg-vivi--tache { background: var(--c-accent-soft); border-top-color: var(--c-accent); }
.msg-tache__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.msg-tache__grid .field { margin: 0; }
.msg-tache__cible { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-soft); }
.msg-tache__why { display: inline-block; margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-muted); }
/* Étape 1 du déroulé : le voyageur a-t-il déjà reçu une réponse ? */
.msg-tache__etape { display: inline-block; padding: 1px var(--sp-2); border-radius: var(--r-full); font-weight: var(--fw-semibold); white-space: nowrap; }
.msg-tache__etape--ok { color: var(--c-positive-ink); background: var(--c-positive-soft); }
.msg-tache__etape--wait { color: var(--c-warning-ink); background: var(--c-warning-soft); }
/* Confiance située par rapport au seuil, à côté du statut : « 96 % ≥ seuil
   75 % » explique d'un coup d'œil qu'un autre garde-fou est en cause. */
.msg-vivi__conf { flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 2px var(--sp-2); border-radius: var(--r-full); white-space: nowrap; border: 1px solid var(--c-border); background: var(--c-surface); }
.msg-vivi__conf.is-ok { color: var(--c-positive-ink); border-color: transparent; background: var(--c-positive-soft); }
.msg-vivi__conf.is-low { color: var(--c-text-soft); }

/* --- Panneau Vivi : une file d'étapes, une seule visible --- */
.vp__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.vp__head b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vp__compteur { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 1px var(--sp-2); }
.vp-etape__titre { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.vp-etape__titre b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vp-etape__titre small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.vp-etape__titre .badge { margin-left: auto; flex-shrink: 0; }
/* Ce qui reste après l'étape en cours : annoncé, jamais actionnable, pour
   qu'on sache combien il reste sans être tenté de sauter une étape. */
.vp__suite { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--c-border); display: grid; gap: var(--sp-1); }
.vp__suite li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.vp__suite li span { width: 17px; height: 17px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 10px; font-weight: var(--fw-bold); }
/* La couleur dit la nature de l'étape en cours : ambre pour un message à
   valider, bleu pour une intervention à engager. */
.vp--reponse { background: var(--c-warning-soft); border-top-color: var(--amber-500); }
.vp--tache { background: var(--c-accent-soft); border-top-color: var(--c-accent); }


/* Case « prévenir le voyageur » + aperçu du message qui partira */
.msg-tache__prevenir { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-xs); cursor: pointer; }
.msg-tache__prevenir input { margin-top: 2px; flex-shrink: 0; accent-color: var(--blue-600); }
/* Sans min-width:0, un enfant de flex refuse de descendre sous la largeur de
   son contenu : l'aperçu tronqué débordait alors de tout l'écran. */
.msg-tache__prevenir > span { min-width: 0; }
.msg-tache__prevenir em { color: var(--c-warning-ink); font-style: normal; font-weight: var(--fw-semibold); }
.msg-tache__prevenir small { display: block; margin-top: 2px; color: var(--c-text-muted); font-style: italic; }
.msg-conv__ia--tache { color: var(--c-text-soft); background: var(--c-surface-alt); border: 1px solid var(--c-border); }

/* Sur mobile, la messagerie n'a qu'une colonne : le bloc Vivi ne doit pas
   manger tout le fil de discussion. Le badge est redondant avec la couleur
   de fond et le titre, on le retire ; la proposition devient scrollable. */
@media (max-width: 620px) {
  .msg-vivi { padding: var(--sp-3); }
  .msg-vivi__head > .badge { display: none; }
  /* Sur une seule colonne, seules les ACTIONS descendent sur leur propre
     ligne (flex-basis 100 %) et s'y partagent la largeur. L'icône et le
     texte restent ensemble sur la première : pousser aussi le texte à la
     ligne laisserait l'icône seule sur une ligne vide. */
  .msg-vivi__head-actions { flex: 1 1 100%; margin-left: 0; }
  .msg-vivi__head-actions > .btn { flex: 1 1 0; justify-content: center; }
  /* Trois colonnes de formulaire ne tiennent pas : date et heure côte à
     côte, le prestataire sur toute la largeur (son nom est long). */
  .msg-tache__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg-tache__grid .field:last-child { grid-column: 1 / -1; }

  /* Une tâche proposée ET une réponse proposée peuvent coexister sur le même
     fil : sur 812 px de haut, en-tête + fil + deux encarts + composeur ne
     tiennent pas. Deux arbitrages, dans cet ordre :
       1. aucun encart n'est tronqué. Un bouton « Créer la tâche » ou
          « Approuver » masqué par un défilement interne est un défaut
          fonctionnel ; un fil court n'est qu'une gêne, d'autant qu'il défile
          automatiquement jusqu'au message qui a déclenché la proposition.
       2. on récupère de la hauteur sur le seul élément vraiment élastique,
          le paragraphe de la réponse proposée, qui reste lisible en défilant. */
  .msg-vivi__texte { max-height: 60px; overflow-y: auto; }
  /* L'aperçu de la confirmation tient sur trois lignes en large ; ici il
     coûterait 30 px au fil de discussion. Une ligne tronquée suffit à savoir
     qu'un message part et de quoi il parle — le texte complet reste lisible
     dans la conversation une fois envoyé. */
  .msg-tache__prevenir small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.msg-composer { flex-shrink: 0; border-top: 1px solid var(--c-border); background: var(--c-surface); padding: var(--sp-3) var(--sp-4); }
.msg-composer__tools { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.msg-composer__tools .select { height: 34px; font-size: var(--fs-sm); min-width: 0; flex: 0 1 200px; }
.msg-composer__box { display: flex; gap: var(--sp-2); align-items: flex-end; }
.msg-composer__box .textarea { min-width: 0; }
.msg-composer textarea { min-height: 44px; max-height: 140px; }

/* Contexte réservation : les valeurs longues ne débordent jamais */
.msg-ctx .rp-row span:first-child { flex-shrink: 0; }
.msg-ctx .rp-row span:last-child { min-width: 0; overflow-wrap: anywhere; }
.msg-ctx__code b { overflow-wrap: anywhere; text-align: right; }

.msg-ctx { overflow-y: auto; padding: var(--sp-5); }
.msg-ctx__code { background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.msg-ctx__code b { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0.06em; }

@media (max-width: 1200px) { .msg-layout { grid-template-columns: 320px 1fr; } .msg-col--ctx { display: none; } }
@media (max-width: 800px) {
  /* Une seule colonne visible à la fois : la liste par défaut, le fil une
     fois une conversation ouverte (bouton retour pour revenir à la liste). */
  .msg-layout { grid-template-columns: 1fr; }
  .msg-col--thread { display: none; }
  .msg-layout.is-thread-open .msg-col--list { display: none; }
  .msg-layout.is-thread-open .msg-col--thread { display: flex; }
  .msg-back { display: grid; }
  .msg-threadhead { flex-wrap: wrap; }
  .msg-threadhead__meta { flex: 1 1 auto; min-width: 0; }
  .msg-threadhead__meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-threadhead__actions { margin-left: 0; flex-basis: 100%; order: 3; }
  .msg-threadhead__actions .btn { flex: 1; }
}

/* Vue « Tâches » : chips d'interventions dans les cellules */
.cal-tchips { position: absolute; inset: 4px 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; z-index: 3; }
.cal-tchip { font-size: 10px; line-height: 1.35; padding: 1px 4px 1px 5px; border-left: 3px solid var(--ink-400); border-radius: 3px; background: var(--ink-50); color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: var(--fw-semibold); transition: filter var(--t-fast); }
.cal-tchip:hover { filter: brightness(0.97); }
.cal-tchip b { font-weight: var(--fw-bold); }
.cal-tchip--menage { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.cal-tchip--checkin { border-color: var(--green-600); background: var(--green-100); color: var(--green-700); }
.cal-tchip--maintenance { border-color: var(--amber-500); background: var(--amber-100); color: var(--amber-700); }
.cal-tchip--linge { border-color: var(--ch-booking); background: var(--ch-booking-soft); color: var(--ch-booking-ink); }
/* Jours suivants d'une tâche multi-jours : bordure pointillée + légèrement estompée */
.cal-tchip--suite { border-left-style: dashed; opacity: 0.75; }
.cal-grid--taches .cal-row--body { height: 60px; }

/* Tooltip flottant du calendrier */
.cal-tt { position: fixed; z-index: var(--z-toast); background: var(--bg-ink); color: #fff; border-radius: var(--r-md); padding: var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-snug); box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transition: opacity var(--t-fast); max-width: 240px; }
.cal-tt.is-open { opacity: 1; }
.cal-tt b { font-size: var(--fs-sm); }
.cal-tt__row { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: 4px; color: rgba(255,255,255,0.75); }
.cal-tt__row span:last-child { color: #fff; font-weight: var(--fw-semibold); }

/* Liste de prestataires à cocher (modale « Bloquer des dates ») */
.blk-prest-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2); }
.blk-prest-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--t-fast); }
.blk-prest-row:hover { background: var(--c-nav-hover-bg); }
.blk-prest-row input { width: 16px; height: 16px; accent-color: var(--blue-600); flex-shrink: 0; }
.blk-prest-row small { color: var(--c-text-muted); font-weight: var(--fw-medium); margin-left: auto; }

/* Panneau de détail réservation */
.rp-section { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); }
.rp-section:last-child { border-bottom: 0; }
.rp-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.rp-row span:first-child { color: var(--c-text-soft); }
.rp-row span:last-child { font-weight: var(--fw-medium); text-align: right; }
.rp-guest { display: flex; align-items: center; gap: var(--sp-3); }
.rp-guest b { font-size: var(--fs-md); }

/* Fiches de police (panneau de détail réservation) */
.rp-fiche { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.rp-fiche__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.rp-fiche__who b { font-size: var(--fs-sm); display: block; }
.rp-fiche__who small { font-size: var(--fs-xs); display: block; margin-top: 1px; }
.rp-fiche__ic { width: 30px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; }
.rp-fiche__ic svg { width: 15px; height: 15px; }
.rp-fiche__ic--done { background: var(--c-positive-soft); color: var(--c-positive-ink); }
.rp-fiche__ic--pending { background: var(--amber-100); color: var(--amber-700); }
.rp-fiche__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.rp-fiche__actions .icon-btn { width: 32px; height: 32px; }
.rp-fiche__actions .icon-btn svg { width: 16px; height: 16px; }

/* Modale de visualisation d'une fiche de police */
.modal--fiche { width: min(600px, calc(100vw - 2 * var(--sp-6))); }
.fiche-doc__band { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.fiche-doc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.fiche-doc__f small { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.fiche-doc__f b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-top: 2px; }
.fiche-doc__f--full { grid-column: 1 / -1; }
@media (max-width: 480px) { .fiche-doc__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Paramètres — profil / mot de passe / plateformes  (.pf-)
   ------------------------------------------------------------ */
.pf-section + .pf-section { margin-top: var(--sp-8); }
.pf-section__label { margin-bottom: var(--sp-4); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.pf-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-xs); }
.pf-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.pf-card__ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-md); flex-shrink: 0; }
.pf-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.pf-card__status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.pf-card__desc { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-snug); flex: 1; }
@media (max-width: 980px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Comptabilité — synthèse / facturation / dépenses  (.cp-)
   ------------------------------------------------------------ */
.cp-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--sp-4); align-items: end; }
.cp-filters .btn { height: 44px; }
@media (max-width: 900px) { .cp-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cp-filters { grid-template-columns: 1fr; } }

.cp-bar { display: flex; height: 14px; border-radius: var(--r-full); overflow: hidden; background: var(--ink-100); }
.cp-bar__seg { height: 100%; transition: width var(--t-slow); }
.cp-bar__seg--comm { background: var(--c-warning); }
.cp-bar__seg--dep  { background: var(--c-danger); }
.cp-bar__seg--net  { background: var(--c-positive); }
.cp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.cp-legend span { display: flex; align-items: center; gap: var(--sp-2); }
.cp-dot { width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block; flex-shrink: 0; }
.cp-dot--comm { background: var(--c-warning); }
.cp-dot--dep  { background: var(--c-danger); }
.cp-dot--net  { background: var(--c-positive); }

.cp-ownercard { border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.cp-ownercard + .cp-ownercard { margin-top: var(--sp-4); }

/* En-tête repliable. Le <summary> porte lui-même la zone de clic, d'où
   le retrait du marqueur natif : le chevron maison le remplace, et on
   garde le comportement clavier de <details> sans le réécrire. */
.cp-ownercard__head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  cursor: pointer; list-style: none; user-select: none;
  margin: calc(var(--sp-5) * -1); padding: var(--sp-5); border-radius: var(--r-xl);
  transition: background var(--t-fast); }
.cp-ownercard__head::-webkit-details-marker { display: none; }
.cp-ownercard__head:hover { background: var(--c-surface-alt); }
.cp-ownercard__head:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.cp-ownercard[open] .cp-ownercard__head { margin-bottom: var(--sp-1); border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-bottom: 1px solid var(--c-border); }
.cp-ownercard[open] .cp-ownercard__chevron { transform: rotate(90deg); }
.cp-ownercard__chevron { display: grid; place-items: center; flex-shrink: 0; color: var(--c-text-muted);
  transition: transform var(--t-fast); }
.cp-ownercard__chevron svg { width: 18px; height: 18px; }
.cp-ownercard__id { flex: 1 1 280px; min-width: 0; }

/* Les termes du contrat, en clair sous le nom du propriétaire */
.cp-contrat { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); }
.cp-contrat__f { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-contrat__f em { font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--tracking-wider); color: var(--c-text-muted); }
.cp-contrat__f b { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text); }
.cp-ownercard__id b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cp-ownercard__id small { color: var(--c-text-muted); }
.cp-ownercard__resume { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-left: auto; }
.cp-ownercard__montant { font-size: var(--fs-md); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ownercard__montant small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-text-muted); }
/* Marge de respiration entre l'en-tête et le premier bloc déplié */
.cp-ownercard[open] > .app-grid:first-of-type { margin-top: var(--sp-5); }
@media (max-width: 720px) {
  .cp-ownercard__resume { margin-left: 0; width: 100%; }
}
.cp-ownercard__rate { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cp-ownercard__rate input { width: 64px; text-align: right; }
.cp-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.cp-month { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); background: none; text-align: left; }
.cp-month:hover { background: var(--c-surface-alt); }
.cp-month__ic { width: 20px; height: 20px; flex-shrink: 0; }
.cp-month--generee .cp-month__ic { color: var(--c-positive); }
.cp-month--attente { border-style: dashed; }
.cp-month--attente .cp-month__ic { color: var(--c-warning-ink); }
.cp-month b { display: block; font-weight: var(--fw-semibold); }
.cp-month small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }

.cp-depense__facture { display: inline-flex; align-items: center; gap: 6px; color: var(--c-accent-ink); font-weight: var(--fw-medium); background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; }
.cp-depense__facture:hover { text-decoration: underline; }
.cp-depense__facture svg { width: 14px; height: 14px; flex-shrink: 0; }

.cp-alert { display: flex; align-items: center; gap: var(--sp-4); background: var(--c-warning-soft); color: var(--c-warning-ink); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.cp-alert svg { width: 22px; height: 22px; flex-shrink: 0; }
.cp-alert__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cp-alert__body b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cp-alert__body span { font-size: var(--fs-xs); opacity: .85; }
.cp-alert .btn { flex-shrink: 0; }

.modal--lg { width: min(720px, calc(100vw - 2 * var(--sp-6))); }

/* ------------------------------------------------------------
   Propriétaires — fiche par propriétaire + biens rattachés  (.po-)
   ------------------------------------------------------------ */
.po-card { border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.po-card + .po-card { margin-top: var(--sp-4); }
.po-card__head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.po-card__meta { flex: 1; min-width: 180px; }
.po-card__meta b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.po-card__meta small { display: block; color: var(--c-text-muted); }
.po-card__actions { display: flex; align-items: center; gap: var(--sp-2); }
.po-card__editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); flex: 1; min-width: 260px; }
.po-card__editgrid input { width: 100%; }

.po-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.po-chip { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 6px 8px 6px 14px; font-size: var(--fs-sm); }
.po-chip__del { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-full); border: none; background: var(--ink-100); color: var(--c-text-soft); cursor: pointer; flex-shrink: 0; }
.po-chip__del:hover { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.po-chip__del svg { width: 11px; height: 11px; }
.po-chips-empty { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; margin: var(--sp-2) 0 var(--sp-4); }

.po-addrow { display: flex; gap: var(--sp-2); align-items: center; }
.po-addrow .select { flex: 1; max-width: 340px; }

.po-billing { font-size: var(--fs-xs); color: var(--c-text-muted); }
.po-billing a { color: var(--c-accent-ink); font-weight: var(--fw-medium); }

/* ------------------------------------------------------------
   Rôles & accès — comptes utilisateurs + permissions  (.rl-)
   ------------------------------------------------------------ */
.rl-comptes { margin-bottom: var(--sp-6); }
.rl-roleselect { height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); min-width: 150px; }
.rl-lien { margin-top: 4px; }

.rl-rolecard { border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.rl-rolecard + .rl-rolecard { margin-top: var(--sp-4); }
.rl-rolecard__head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.rl-rolecard__head b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.rl-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.rl-permgroup__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-muted); margin-bottom: var(--sp-2); }
.rl-perm { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 3px 0; cursor: pointer; }
.rl-perm input { cursor: pointer; flex-shrink: 0; }
.rl-perm.is-locked { cursor: default; opacity: 0.7; }
.rl-perm.is-locked input { cursor: default; }

/* ============================================================
   Site web & réservations directes (app/site.html)
   ============================================================ */
.sw-hero { border: 1px solid var(--c-border); border-radius: var(--r-xl); background: var(--c-surface); padding: var(--sp-5); }
.sw-hero.is-off { opacity: .7; }
.sw-hero__main { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sw-hero__url { font-family: var(--font-mono, monospace); font-size: var(--fs-md); }
.sw-hero__main .switch { margin-left: auto; }
.sw-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.sw-hero__stats b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.sw-hero__stats small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.sw-hero__note { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-text-muted); line-height: var(--lh-snug); }

.sw-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.sw-theme { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; display: block; transition: border-color var(--t-fast), background var(--t-fast); }
.sw-theme.is-on { border-color: var(--blue-600); background: var(--c-accent-soft); }
.sw-theme input { position: absolute; opacity: 0; }
.sw-theme__apercu { display: block; height: 54px; border-radius: var(--r-md); margin-bottom: var(--sp-2); border: 1px solid var(--c-border); }
.sw-theme__apercu--epure { background: linear-gradient(180deg, #fff 55%, #EEF1F8 55%); }
.sw-theme__apercu--chaleur { background: linear-gradient(180deg, #FDF8F3 55%, #E8CFC0 55%); }
.sw-theme__apercu--nuit { background: linear-gradient(180deg, #0F1422 55%, #171E30 55%); }
.sw-theme b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sw-theme small { font-size: var(--fs-xs); color: var(--c-text-muted); }

.sw-logs { display: grid; gap: var(--sp-2); }
.sw-log { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.sw-log.is-on { border-color: var(--blue-600); background: var(--c-accent-soft); }
.sw-log input { accent-color: var(--blue-600); flex-shrink: 0; }
.sw-log__thumb { width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.sw-log__meta { min-width: 0; }
.sw-log__meta b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sw-log__meta small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.sw-log__prix { margin-left: auto; text-align: right; flex-shrink: 0; }
.sw-log__prix b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sw-log__prix small { font-size: 10px; color: var(--c-text-muted); }

.sw-modes { display: grid; gap: var(--sp-2); }
.sw-domaine { display: flex; align-items: center; gap: var(--sp-2); }
.sw-domaine input { max-width: 220px; }
.sw-domaine__suffixe { font-size: var(--fs-sm); color: var(--c-text-muted); }
.sw-dns { background: var(--bg-subtle); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); }
.sw-dns__titre { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.sw-dns__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); padding: var(--sp-1) 0; }
.sw-dns__row span { color: var(--c-text-muted); }

/* ============================================================
   Assistant de création du site — 5 étapes
   ============================================================ */
.wz { width: min(720px, 100%); margin-inline: auto; }
.wz__head { text-align: center; margin-bottom: var(--sp-6); }
.wz__head h1 { font-size: var(--fs-3xl); margin: var(--sp-2) 0; }
.wz__sous { color: var(--c-text-soft); font-size: var(--fs-sm); max-width: 54ch; margin-inline: auto; line-height: var(--lh-snug); }

/* Fil des étapes : on voit d'où l'on vient et ce qu'il reste. */
.wz__pas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: center; margin-bottom: var(--sp-5); }
.wz__pas li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.wz__pas li span { width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--c-surface-alt); border: 1px solid var(--c-border); font-weight: var(--fw-bold); font-size: 11px; }
.wz__pas li.is-fait span { background: var(--c-positive-soft); color: var(--c-positive-ink); border-color: transparent; }
.wz__pas li.is-courant { color: var(--c-text); font-weight: var(--fw-semibold); }
.wz__pas li.is-courant span { background: var(--blue-600); color: #fff; border-color: transparent; }

.wz__corps { min-height: 220px; }
.wz__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); justify-content: flex-end; }
.wz__bloque { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Logo */
.wz-logo { display: flex; align-items: center; gap: var(--sp-4); }
.wz-logo__apercu { width: 72px; height: 72px; border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--bg-subtle); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.wz-logo__apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wz-logo__apercu span { font-weight: var(--fw-bold); color: var(--c-text-muted); }
.wz-logo__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.wz-logo__actions label { cursor: pointer; }

/* Couleurs */
.wz-couleur { display: flex; gap: var(--sp-2); align-items: center; }
.wz-couleur input[type="color"] { width: 46px; height: 42px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); flex-shrink: 0; cursor: pointer; }
.wz-apercu { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.wz-apercu > b { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.wz-apercu__bloc { margin-top: var(--sp-3); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c2); display: flex; align-items: center; gap: var(--sp-4); }
.wz-apercu__titre { color: #fff; font-weight: var(--fw-semibold); }
.wz-apercu__btn { margin-left: auto; background: var(--c1); color: #fff; border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Photos */
.wz-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.wz-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); background: var(--bg-subtle); }
.wz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-photo__x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: var(--r-full); background: rgba(11,16,32,.72); color: #fff; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.wz-photo__x:hover { background: var(--c-danger-ink); }
.wz-photo--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); cursor: pointer; border-style: dashed; font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; padding: var(--sp-3); }
.wz-photo--add span { font-size: 22px; line-height: 1; }
.wz-photo--add:hover { border-color: var(--blue-600); color: var(--blue-600); }

/* Écran final */
.wz-fin { text-align: center; margin-top: var(--sp-5); }
.wz-fin__ic { width: 54px; height: 54px; margin: 0 auto var(--sp-4); border-radius: var(--r-full); background: var(--c-positive-soft); color: var(--c-positive-ink); display: grid; place-items: center; font-size: 26px; font-weight: var(--fw-bold); }
.wz-fin > b { display: block; font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.wz-fin > p { color: var(--c-text-soft); font-size: var(--fs-sm); max-width: 52ch; margin: 0 auto var(--sp-5); line-height: var(--lh-snug); }
.wz-fin__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .wz__pas li { font-size: 0; gap: 0; }      /* seuls les numéros restent */
  .wz__pas li span { font-size: 11px; }
  .wz__actions { flex-direction: column-reverse; align-items: stretch; }
  .wz-fin__actions .btn { width: 100%; }
}

.sw-hero__liens { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }


/* ---------- Éditeur de site : couleurs, contacts, sections ---------- */
.sw-couleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.sw-theme__apercu { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.sw-theme__apercu i { width: 14px; height: 14px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.5); }

.sw-contacts { display: grid; gap: var(--sp-3); }
.sw-contact { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3); }
.sw-contact.is-on { border-color: var(--blue-600); background: var(--c-accent-soft); }
.sw-contact__tete { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; margin-bottom: var(--sp-2); }
.sw-contact__tete input { accent-color: var(--blue-600); }
.sw-contact__ic { width: 30px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-border); flex-shrink: 0; }
.sw-contact__ic svg { width: 17px; height: 17px; }
.sw-contact__tete b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.sw-secs { display: grid; gap: var(--sp-2); }
.sw-sec { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.sw-sec.is-off { opacity: .6; }
.sw-sec__tete { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.sw-sec__ordre { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sw-sec__ordre .icon-btn { width: 22px; height: 20px; font-size: 12px; }
.sw-sec__ordre .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.sw-sec__tete b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sw-sec__tete small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.sw-sec__corps { padding: 0 var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
.sw-cartes { display: grid; gap: var(--sp-3); }
.sw-carte { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--sp-2); align-items: start; }
.sw-carte textarea { min-height: 44px; }
@media (max-width: 720px) { .sw-carte { grid-template-columns: 1fr auto; } .sw-carte textarea { grid-column: 1 / -1; } }

/* ---------- Demandes de réservation à valider ---------- */
.resa-alerte { display: flex; align-items: center; gap: var(--sp-4); background: var(--c-warning-soft); border: 1px solid var(--amber-500); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.resa-alerte b { display: block; font-size: var(--fs-sm); color: var(--c-warning-ink); }
.resa-alerte small { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; }
.resa-alerte .btn { flex-shrink: 0; }

/* Bloc de décision en tête du panneau de réservation */
.rp-decision { background: var(--c-warning-soft); border: 1px solid var(--amber-500); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.rp-decision--refus { background: var(--c-surface-alt); border-color: var(--c-border); }
.rp-decision__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.rp-decision__tete b { font-size: var(--fs-sm); }
.rp-decision__tete span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.rp-decision__txt { font-size: var(--fs-xs); color: var(--c-text-soft); line-height: var(--lh-snug); }
.rp-decision__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Barre « demande » dans le planning : hachurée, donc lisible sans clic */
.cal-bar--demande { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); opacity: .92; }

/* ============================================================
   TARIFICATION DYNAMIQUE (Intégrations)
   ============================================================ */

/* --- Écran d'accroche : passerelle non connectée --- */
.td-gate { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; overflow: hidden; }
.td-gate__main { padding: var(--sp-8); }
.td-gate__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-lg);
  background: var(--ch-pricelabs); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.td-gate__main h2 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-3); }
.td-gate__main p { line-height: var(--lh-base); max-width: 54ch; }
.td-gate__actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.td-gate__points { background: var(--c-surface-alt); border-left: 1px solid var(--c-border);
  padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); justify-content: center; }
.td-gate__points li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.td-gate__points svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ch-pricelabs); margin-top: 2px; }
.td-gate__points b { display: block; font-size: var(--fs-sm); }
.td-gate__points span { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); line-height: var(--lh-snug); margin-top: 2px; }
@media (max-width: 900px) {
  .td-gate { grid-template-columns: 1fr; }
  .td-gate__main { padding: var(--sp-6); }
  .td-gate__points { border-left: 0; border-top: 1px solid var(--c-border); padding: var(--sp-6); }
}

/* Le « /5 » du compteur ne doit pas peser autant que le chiffre lui-même */
.kpi__sur { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--c-text-muted); }

/* --- Calendrier des prix : tableau croisé logements × nuits --- */
.td-cal .card__head { align-items: flex-start; }
.td-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.td-grid { min-width: 720px; }
.td-row { display: grid; grid-template-columns: 220px 1fr; align-items: stretch; border-bottom: 1px solid var(--c-border); }
.td-row:last-child { border-bottom: 0; }
.td-row__nom { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--c-border); background: var(--c-surface); position: sticky; left: 0; z-index: 1; min-width: 0; }
.td-row__nom b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-row__nom span { display: block; font-size: 11px; color: var(--c-text-muted); margin-top: 1px; }
.td-row__pastille { width: 8px; height: 26px; border-radius: var(--r-full); flex-shrink: 0; }
/* Une colonne par nuit : minmax(0,1fr) et non 1fr, sinon le contenu
   impose sa largeur minimale et la grille déborde du conteneur. */
.td-row__cells { display: grid; grid-template-columns: repeat(var(--td-cols, 21), minmax(0, 1fr)); }

.td-row--head { border-bottom: 1px solid var(--c-border-strong); background: var(--c-surface-alt); }
.td-row--head .td-row__nom { background: var(--c-surface-alt); }
.td-col { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-2) 0; border-left: 1px solid var(--c-border); }
.td-col__j { font-size: 10px; text-transform: uppercase; color: var(--c-text-muted); letter-spacing: .04em; }
.td-col__d { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.td-col.is-we { background: var(--ink-50); }
.td-col.is-today .td-col__d { color: var(--c-accent); }
.td-col.is-today { box-shadow: inset 0 -2px 0 var(--c-accent); }

.td-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; padding: var(--sp-2) 2px; border-left: 1px solid var(--c-border);
  background: var(--c-surface); transition: background var(--t-fast), box-shadow var(--t-fast); cursor: pointer; }
.td-cell:hover { box-shadow: inset 0 0 0 2px var(--c-accent); z-index: 2; }
.td-cell__prix { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.td-cell__tag { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-semibold);
  line-height: 1; opacity: .85; }

.td-cell--haut     { background: var(--green-100); color: var(--c-positive-ink); }
.td-cell--bas      { background: var(--blue-50);   color: var(--c-accent-ink); }
.td-cell--plancher { background: var(--red-100);   color: var(--c-danger-ink); }
.td-cell--plafond  { background: var(--amber-100); color: var(--c-warning-ink); }
.td-cell--orphelin { background: var(--ch-pricelabs-soft); color: var(--ch-pricelabs-ink); }
.td-cell--fixe     { background: var(--ink-100);   color: var(--ink-800); box-shadow: inset 0 0 0 1px var(--ink-300); }
/* Une nuit vendue n'est plus pilotée : elle doit se lire comme inerte,
   sinon on croit que le moteur agit encore dessus. */
.td-cell--vendu    { background: repeating-linear-gradient(135deg, var(--ink-50) 0 5px, var(--ink-100) 5px 10px);
  color: var(--c-text-muted); }
.td-cell--vendu .td-cell__prix { font-weight: var(--fw-medium); }

.td-legende { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-text-muted); }
.td-legende span { display: inline-flex; align-items: center; gap: 6px; }
.td-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.td-dot--haut { background: var(--green-100); box-shadow: inset 0 0 0 1px var(--c-positive); }
.td-dot--bas { background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--c-accent); }
.td-dot--plancher { background: var(--red-100); box-shadow: inset 0 0 0 1px var(--c-danger); }
.td-dot--plafond { background: var(--amber-100); box-shadow: inset 0 0 0 1px var(--c-warning); }
.td-dot--orphelin { background: var(--ch-pricelabs-soft); box-shadow: inset 0 0 0 1px var(--ch-pricelabs); }
.td-dot--fixe { background: var(--ink-100); box-shadow: inset 0 0 0 1px var(--ink-400); }
.td-dot--vendu { background: repeating-linear-gradient(135deg, var(--ink-50) 0 3px, var(--ink-200) 3px 6px); box-shadow: inset 0 0 0 1px var(--ink-300); }

@media (max-width: 720px) {
  .td-row { grid-template-columns: 150px 1fr; }
  .td-row__nom span { display: none; }
}

/* --- Panneau : décomposition du prix --- */
.td-calc { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.td-calc__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.td-calc__ligne span { color: var(--c-text-soft); }
.td-calc__ligne b { font-variant-numeric: tabular-nums; }
.td-calc__ligne--brut { border-top: 1px solid var(--c-border); background: var(--c-surface-alt); }
.td-calc__borne { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); line-height: var(--lh-snug);
  color: var(--c-warning-ink); background: var(--c-warning-soft); border-top: 1px solid var(--c-border); }
.td-calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); border-top: 1px solid var(--c-border-strong); background: var(--c-accent-soft); }
.td-calc__total span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-accent-ink); }
.td-calc__total b { font-size: var(--fs-xl); color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }

.td-fac { border-top: 1px solid var(--c-border); }
.td-fac li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.td-fac li:last-child { border-bottom: 0; }
.td-fac__lab b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: capitalize; }
.td-fac__lab span { display: block; font-size: 11px; color: var(--c-text-muted); }
.td-fac__pct { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.td-fac__pct.is-plus { color: var(--c-positive-ink); }
.td-fac__pct.is-moins { color: var(--c-danger-ink); }
.td-fac__vide { font-size: var(--fs-sm); color: var(--c-text-muted); }

.td-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2);
  margin-top: var(--sp-4); }
.td-meta div { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-3); }
.td-meta span { display: block; font-size: 11px; color: var(--c-text-muted); }
.td-meta b { display: block; font-size: var(--fs-md); font-variant-numeric: tabular-nums; margin-top: 2px; }

.td-note { border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs);
  line-height: var(--lh-snug); margin-bottom: var(--sp-4); }
.td-note b { display: block; font-size: var(--fs-sm); margin-bottom: 2px; }
.td-note span { display: block; margin-top: 2px; }
.td-note--info { background: var(--ink-50); color: var(--c-text-soft); border: 1px solid var(--c-border); }
.td-note--fixe { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.td-note--orphelin { background: var(--ch-pricelabs-soft); color: var(--ch-pricelabs-ink); margin-top: var(--sp-4); margin-bottom: 0; }

/* --- Onglet Règles --- */
.td-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-4); align-items: start; }
.td-regle .card__title { font-size: var(--fs-md); }
.td-pcts { display: grid; gap: var(--sp-2); }
.td-pcts--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.td-pcts--7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.td-pcts--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.td-pct { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-pct > span { font-size: 11px; color: var(--c-text-muted); text-align: center; text-transform: capitalize; }
.input--pct { height: 34px; padding: 0 var(--sp-2); text-align: center; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; width: 100%; }
.td-liste { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-base); }
.td-liste li { position: relative; padding-left: var(--sp-4); }
.td-liste li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: var(--r-full); background: var(--c-border-strong); }
@media (max-width: 560px) { .td-pcts--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   AVIS
   ============================================================ */

.kpi--alerte { border-color: var(--amber-500); }
.kpi--alerte .kpi__icon { background: var(--c-warning-soft); color: var(--c-warning-ink); }

.av-compte { font-size: var(--fs-sm); color: var(--c-text-soft); margin: var(--sp-4) 0 var(--sp-3); }
.av-compte b { color: var(--c-warning-ink); font-weight: var(--fw-semibold); }

.av-liste { display: flex; flex-direction: column; gap: var(--sp-4); }
.av-carte { padding: var(--sp-5); }
/* Le liseré ambre remplace un badge « en attente » sur chaque carte :
   l'information est portée par le bloc entier, pas par une étiquette. */
.av-carte.is-attente { border-left: 3px solid var(--amber-500); }
.av-carte__tete { display: flex; align-items: flex-start; gap: var(--sp-3); }
.av-carte__vignette { width: 40px; height: 40px; font-size: var(--fs-md); }
.av-carte__logement { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.av-carte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-text-muted); }
.av-carte__note { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.av-carte__note b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.av-carte__texte { margin-top: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-text); }

.av-stars { display: inline-flex; gap: 1px; }
.av-star svg { width: 15px; height: 15px; color: var(--ink-300); }
.av-star.is-on svg { color: var(--amber-500); fill: var(--amber-500); }

.av-repondre { margin-top: var(--sp-4); }
.av-bloque { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-muted);
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-3); }
.av-bloque a { color: var(--c-accent); font-weight: var(--fw-semibold); }

.av-reponse { margin-top: var(--sp-4); background: var(--c-surface-alt); border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--sp-3) var(--sp-4); }
.av-reponse__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.av-reponse__tete b { font-size: var(--fs-xs); color: var(--c-accent-ink); }
.av-reponse__tete span { font-size: 11px; color: var(--c-text-muted); }
.av-reponse p { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.av-reponse__actions { margin-top: var(--sp-2); }

.av-form { margin-top: var(--sp-4); }
.av-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }

.av-delai { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.av-delai.is-urgent { color: var(--c-danger-ink); }

/* Sélecteur de note de la modale : cibles larges, pas des micro-étoiles */
.av-notes { display: flex; align-items: center; gap: var(--sp-1); }
.av-note { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md);
  transition: background var(--t-fast); }
.av-note:hover { background: var(--c-surface-alt); }
.av-note svg { width: 26px; height: 26px; color: var(--ink-300); transition: color var(--t-fast), fill var(--t-fast); }
.av-note.is-on svg { color: var(--amber-500); fill: var(--amber-500); }
.av-notes__valeur { margin-left: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-text-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .av-carte { padding: var(--sp-4); }
  .av-carte__tete { flex-wrap: wrap; }
  /* La note passe sous l'en-tête plutôt que de comprimer le nom du
     logement à trois caractères sur un écran étroit. */
  .av-carte__note { flex-direction: row; align-items: center; gap: var(--sp-2);
    width: 100%; order: 3; margin-top: var(--sp-2); }
}

/* ============================================================
   CIBLES TACTILES — mobile et tablette

   Au doigt, tout ce qui se clique doit faire au moins 48 px de haut.
   Les tailles compactes de la version bureau (btn--sm à 36, seg à 32,
   icon-btn à 38) sont pensées pour un curseur au pixel près ; au
   pouce, elles produisent des ratés d'appui.

   On agrandit la ZONE D'APPUI, pas systématiquement le dessin : les
   contrôles minuscules (croix d'une puce, interrupteur) gardent leur
   apparence et gagnent une surface invisible autour d'eux. Grossir la
   croix elle-même déséquilibrerait la puce qui la porte.
   ============================================================ */
@media (max-width: 900px) {
  .btn, .btn--sm, .select, .input, .dp-input { min-height: 48px; }
  .btn--icon, .icon-btn { min-width: 48px; min-height: 48px; }
  .seg button, .tabs button, .vc-nav button { min-height: 48px; }
  .tabs button { padding-inline: var(--sp-3); }
  .textarea { min-height: 96px; }

  /* Zone d'appui étendue sans toucher au dessin.
     `inset` négatif : la surface déborde de l'élément visible. */
  .switch { position: relative; }
  .switch input { position: absolute; inset: -12px; width: auto; height: auto; }

  /* La croix d'une puce ne peut pas faire 48 px sans faire éclater la
     puce qui la porte. On l'agrandit visiblement (18 → 32) ET on écarte
     les puces, pour que la zone d'appui étendue de l'une n'empiète pas
     sur sa voisine — c'est ce qui se produisait avec un simple ::after
     de 48 px sur des puces espacées de 8 px : le bas de la zone d'une
     puce appartenait déjà à celle du dessous. */
  .po-chips { gap: var(--sp-3); }
  .po-chip { padding: 8px 8px 8px 16px; }
  .po-chip__del { width: 32px; height: 32px; position: relative; }
  .po-chip__del svg { width: 14px; height: 14px; }
  .icon-btn--xs { position: relative; }
  .po-chip__del::after, .icon-btn--xs::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Case à cocher enveloppée dans son label : c'est le label qui reçoit
     l'appui, il doit donc respecter la hauteur minimale, pas la case. */
  .vc-check { min-height: 48px; }

  /* Une ligne d'actions ne doit pas se comprimer : elle passe à la ligne. */
  .app-pagehead__actions, .app-filters { width: 100%; }
  .app-pagehead__actions > .btn, .app-pagehead__actions > .select { flex: 1 1 auto; }
  .app-filters > .select, .app-filters > .input-icon { flex: 1 1 160px; min-width: 0; }
}

/* ---------- Décompte de facturation propriétaire ---------- */
.cp-decompte { background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.cp-decompte__titre { font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.cp-decompte__l { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.cp-decompte__l span { color: var(--c-text-soft); }
.cp-decompte__l b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-decompte__l--info span, .cp-decompte__l--info b { color: var(--c-text-muted); }
.cp-decompte__l--total { border-top: 1px solid var(--c-border-strong); margin-top: var(--sp-2);
  padding-top: var(--sp-3); }
.cp-decompte__l--total span { color: var(--c-text); font-weight: var(--fw-semibold); }
.cp-decompte__l--total b { font-size: var(--fs-lg); color: var(--c-accent-ink); }
.cp-decompte__note { margin-top: var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-snug);
  color: var(--c-warning-ink); background: var(--c-warning-soft);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.cp-ownercard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }