/* Tokens de base (--bg/--surface/--t*/--line/--blue/--green/--rose/…) :
   plus AUCUNE copie locale — hérités de la source unique
   css/hostome-tokens.css (clair + sombre). Mission GLOBAL-UI-DARK-THEME
   re-diagnostic : la copie :root/[data-theme] verbatim ombrait la
   source et empêchait les corrections de lisibilité dark de se
   propager. */
/* css/pages/reservations.css
   Migration de reservations.html hors de app.css - 2026-07-20.
   Position 13 dans la trajectoire canonique (apres help.html, users.html,
   cleaning.html, techniques.html, changelog.html, profile.html, labels.html,
   deleted-properties.html, register.html, booking-page.html, templates.html,
   financial-reports.html).

   ===== DECOMPTE REEL DES SCRIPTS =====
   7 externes (data/geonames/countries.js, utils.js, sidebar.js,
   js/services/property-store.js, js/services/reservation-store.js, auth.js,
   app.js) + 3 inline (garde anti-flash, init theme, remplissage du
   selecteur de nationalite) = 10 scripts reels, confirme par lecture du
   HTML ET par comptage live dans le DOM (document.scripts.length = 10,
   0 script injecte). Conforme a l'etat initial annonce.

   ===== LOCALISATION DE LA LOGIQUE =====
   Aucun script dedie js/pages/reservations.js. La logique vit dans le
   fichier partage auth.js, repartie en plusieurs fonctions (non un seul
   bloc contigu comme templates.html) : bindReservationFilters(),
   bindReservationFocusActions(), bindReservationSortButtons(),
   bindReservationForm(), bindReservationDetailButtons(),
   bindReservationDetailPanel(), renderReservations(), getReservations(),
   saveReservations(), openReservationDetail(), showReservationForm(),
   showReservationEmptyState(). auth.js n'a pas ete modifie. Preuve directe
   de lecture du code : ouvrir le formulaire "Nouveau" (bouton
   data-res-add-new) n'appelle que setReservationFocus()/renderReservations()/
   showReservationForm() - aucune des trois n'ecrit dans le stockage.

   ===== ORIGINE DES DONNEES =====
   Reservations : architecture hybride prouvee par lecture de
   reservation-store.js (endpoint /api/reservations/, 1225 lignes) et de
   auth.js. getReservations() delegue a window.HostomeReservationStore
   quand disponible (mode 'server'/'conflict-readonly'/'degraded-readonly'),
   sinon repli sur une copie localStorage (cle hostome_reservations,
   meme mecanisme que hostome_properties/hostome_properties_server_migrated_v1
   deja documente dans les migrations precedentes). SOURCE_SERVEUR confirmee
   comme source principale, CACHE_SERVEUR_TEMPORAIRE pour la copie locale -
   pas de dette fonctionnelle identifiee (contrairement aux cautions de
   financial-reports.html qui n'avaient aucune sauvegarde serveur).
   Logements : meme mecanisme deja connu (property-store.js, api/properties/).
   Tarifs par nuit : generes dans le formulaire (nightly-rates), lies aux
   dates saisies - non explores plus avant (hors perimetre CSS, aucune
   ecriture testee).

   ===== ETAT VISUEL REELEMENT ACCESSIBLE =====
   Le compte de test ne possede aucune reservation (confirme en direct :
   data-reservations-count = "0", liste = "Aucune reservation a venir.").
   Etats valides visuellement : ecran de liste vide, barre de filtres,
   formulaire "Nouveau" ouvert en lecture seule (sans saisie ni soumission,
   ouverture prouvee sans ecriture par lecture du code). Etats NON
   accessibles sans mutation : detail d'une reservation existante, onglets
   Facturation/Message du detail, liste garnie (vue cartes ou tableau) -
   audites uniquement par lecture exhaustive du code (auth.js), documentes
   comme tels, non captures visuellement.

   ===== COMPOSANT PARTAGE reservation-billing.css =====
   Fichier dedie (612 lignes), deja correctement externalise de app.css,
   partage avec la modale de calendar.html (en-tete du fichier source :
   "communs a reservations.html et la modale du calendrier"). NON copie,
   NON modifie, conserve dans l'ordre de chargement existant. app.css
   contient encore des copies legacy de ces regles (.reservation-billing-*,
   101 occurrences) explicitement documentees comme non-canoniques par le
   fichier dedie lui-meme - non recopiees ici (ni exclusives ni necessaires,
   le fichier dedie fait deja foi et reste charge).

   ===== DECOUVERTE .prop-back-btn (au-dela de ce qui etait documente
   lors des migrations precedentes) =====
   Une regle non-:where() avec !important existe dans app.css
   (.prop-back-btn, .ms-back-btn, .exp2-back, ... { height:38px !important;
   width:38px !important; ... }), en plus de la regle :where(...) !important
   de hostome-ui.css. Cette regle app.css a une specificite reelle
   (0,1,0) superieure a :where() (0,0,0) : entre deux regles !important,
   la specificite l'emporte sur l'ordre de declaration. C'est donc CETTE
   regle qui pilote la taille reelle du bouton retour (38px), pas les
   tokens --ui-back-size comme documente precedemment pour d'autres pages.
   Copiee verbatim, avec la variante specifique a reservations.html qui la
   suit immediatement dans app.css (bouton retour toujours visible,
   couleurs harmonisees).

   ===== LIEN AVEC CALENDAR.HTML =====
   Couplage fort confirme : meme css/components/reservation-billing.css,
   memes scripts js/services/property-store.js et reservation-store.js
   (verifie par lecture directe des deux fichiers HTML). .res-inline-edit-form
   (formulaire d'edition inline) est explicitement partage entre "popup
   calendrier, dashboard, page reservations" (commentaire source app.css) -
   copie verbatim sans deplacement, calendar.html continue de le lire
   depuis app.css (inchange). calendar.html teste en priorite lors des
   tests finaux.

   ===== ANALYSE DE L'ATTRIBUT STYLE="" =====
   1 attribut statique confirme (style="margin-bottom:14px" sur une carte
   du formulaire) - transfere en classe .res-billing-margin. Un second
   style inline decouvert en cours de mission, genere par renderReservations()
   dans auth.js pour l'etat vide de la liste (style="padding:18px" sur le
   message "Aucune reservation a venir.") - valeur constante mais generee
   par un script qu'il est interdit de modifier ; laisse tel quel,
   documente comme STYLE_DYNAMIQUE_FONCTIONNEL au sens large (genere par
   JS non modifiable), non extrait.

   ===== ANCIENNES REGLES NEUTRALISEES, COPIEES SANS DANGER =====
   Meme raisonnement que les migrations precedentes : aucune regle copiee
   ici n'est neutralisee autrement qu'elle ne l'est deja aujourd'hui (les
   regles non !important restent neutralisees par les !important existants
   de hostome-ui.css/app.css quel que soit l'ordre de chargement).

   ===== QUALIFICATION DE HOSTOME-TOKENS.CSS =====
   HOSTOME_TOKENS_QUALIFIE : OUI. Preuve la plus directe rencontree a ce
   jour : le HTML source utilise explicitement les classes .ui-button,
   .ui-button--ghost, .ui-button--primary et .ui-back-button (pas
   seulement via les correspondances generiques :where()). Renforce par
   .reservation-picker-head, .res-page-card, .res-page-tabs, .res-search-input
   qui dependent tous de variables --ui-* sans repli dans les blocs
   partages de hostome-ui.css/app.css.

   Ordre des feuilles apres migration :
     css/hostome-tokens.css
     css/hostome-ui.css
     css/components/reservation-billing.css
     css/pages/reservations.css
*/

/* ===== SHELL (identique a css/pages/help.css, meme perimetre) ===== */


/* app.css L87-91 (copie verbatim) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* app.css L93-95 (copie verbatim) */
[hidden] {
  display: none !important;
}

/* app.css L97-106 (copie verbatim) */
body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--t2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mission HOSTOME_GLOBAL_SHELL_SIDEBAR_UNIFICATION (2026-08-24) : .app/
   .sidebar (1st copy)/.main/body.sidebar-collapsed .sidebar (base)/
   .mobile-overlay removed - exact duplicates of css/shell/app-shell.css
   and css/shell/sidebar.css, already loaded before this stylesheet. The
   canonical desktop icon-only collapsed contract now lives solely in
   css/shell/sidebar.css. */

/* app.css L6554-6587 (copie verbatim) */
@media (max-width: 860px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    width: 236px;
    transform: translateX(-100%);
    box-shadow: 4px 0 18px rgba(0,0,0,0.12);
    overflow-y: auto;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 36, 0.36);
    z-index: 250;
  }

  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
  }

/* fermeture manuelle @media L6554 (suite non liee omise) */
}

/* .page-main / .sidebar (2nd copy) : removed, duplicates of
   css/shell/app-shell.css and css/shell/sidebar.css. */

/* app.css L11769-11914 (copie verbatim) */
.sb-profile-wrap,
.sb-foot {
  margin-top: auto;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 4px;
  text-decoration: none;
}
.sb-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid; place-items: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 10px -3px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.sb-brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--t1);
}
.sb-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--t2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
.sb-item:hover { background: var(--surface-3); color: var(--t1); }
.sb-item.is-active { background: var(--t1); color: #fff; font-weight: 600; }
.sb-item.is-active .sb-ico { color: #fff; }
.sb-ico {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--t3);
  flex-shrink: 0;
}
.sb-item:hover .sb-ico { color: var(--t1); }
.sb-label { flex: 1; }
.sb-badge {
  background: var(--accent);
  color: var(--ui-color-primary-contrast, #fff);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-item.is-active .sb-badge { background: #fff; color: var(--t1); }
.sb-chevron {
  font-size: 11px;
  color: var(--t4);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sb-item.submenu-open .sb-chevron { transform: rotate(180deg); }
.sb-item.has-submenu { cursor: pointer; }
.sb-submenu {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 2px 30px;
}
.sb-submenu.is-open { display: flex; }
.sb-subitem {
  border-radius: 6px;
  color: var(--t3);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-subitem:hover { background: var(--surface-3); color: var(--t1); }
.sb-subitem.is-active { color: var(--accent); font-weight: 600; }
.sb-divider { height: 1px; background: var(--line); margin: 0 8px; }
.sb-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-3);
}
.sb-foot-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A2A30, #0C0C10);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.sb-foot-meta { flex: 1; min-width: 0; }
.sb-foot-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-foot-org {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 1px;
}

/* Dark sidebar */
[data-theme="dark"] .sb-mark {
  box-shadow: 0 4px 10px -3px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0.5px rgba(255,255,255,0.1);
}

/* app.css L12737-12744 (copie verbatim) */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: -260px; top: 0; bottom: 0;
    transition: transform 0.25s ease; z-index: 500;
  }
  body.sidebar-open .sidebar { transform: translateX(260px); }
  .menu-toggle { display: inline-flex; }
}

/* @media(min-width:861px) collapsed-desktop block : removed, this is now
   the sole responsibility of css/shell/sidebar.css. */

/* app.css L12758-12781 (copie verbatim) */
.sb-profile-wrap { position: relative; margin-top: auto; }
.sb-profile-menu {
  position: absolute;
  bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 600;
}
.sb-profile-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  font-size: 13px; font-weight: 500; color: var(--t1);
  border-radius: 8px; text-decoration: none; cursor: pointer;
  transition: background 0.12s;
  background: none; font-family: inherit; text-align: left;
}
.sb-profile-item:hover { background: var(--surface-3); }
.sb-profile-item i { color: var(--t3); width: 14px; text-align: center; }
.sb-profile-sep { height: 1px; background: var(--line); margin: 4px 0; }
.sb-profile-logout { color: var(--rose); }
.sb-profile-logout i { color: var(--rose); }

/* app.css L6619-6622 isole (mobile .ms-card-head) */
@media (max-width: 860px) {
  .ms-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}




/* app.css L109-133 (copie verbatim) - case a cocher generique du site
   entier (sauf .ms-ios-sw), necessaire pour les cases du filtre logements */
input[type="checkbox"]:not(.ms-ios-sw) {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
}
input[type="checkbox"]:not(.ms-ios-sw):checked {
  background: var(--cb-accent, var(--accent));
  border-color: var(--cb-accent, var(--accent));
}
input[type="checkbox"]:not(.ms-ios-sw):checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* app.css ~L30460 (copie verbatim) - fond du conteneur principal */
.page-main {
  background: var(--bg);
}



/* ═══════════════ Boutons .btn de base (app.css, copie verbatim) ═══════════════
   Utilises par les actions du formulaire (Annuler/Creer) et de l'edition
   inline (res-edit-actions). Meme decouverte que financial-reports.html :
   fusion entre la regle de base app.css (non !important) et les regles
   :where(...) !important de hostome-ui.css. */
.btn {
  height: 36px;
  border: 0;
  border-radius: 4px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--ui-color-primary-contrast, #fff);
}
.btn-primary:hover {
  background: var(--accent-2);
}
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--t2);
}
.btn-secondary:hover {
  background: var(--surface-3);
}

/* ═══════════════ Composants globaux partages (ms-*, form-*, page-split, tag) ═══════════════ */

/* app.css L1069-1123 (copie verbatim) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field.full {
  grid-column: 1 / -1;
}
.form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  margin-bottom: 7px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
  color: var(--t1);
  background: var(--surface);
  outline: none;
  transition: border-color .13s, box-shadow .13s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: var(--surface-2);
}
.form-field input,
.form-field select {
  height: 38px;
}
.form-field textarea {
  min-height: 98px;
  padding-top: 10px;
  resize: vertical;
}
/* app.css L6593-6596 (copie verbatim) - effondrement mobile du formulaire
   (selecteur isole de ".grid, .form-grid", .grid non utilisee ici) */
@media (max-width: 860px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* app.css L3506-3519 (copie verbatim) */
.form-message {
  margin-top: 14px;
  font-weight: 600;
}
.form-message.error {
  color: #c14343;
}
.form-message.success {
  color: #23836e;
}
/* app.css (copie verbatim) - utilisee dans le placeholder des tarifs par nuit */
.muted {
  color: #8a8f97;
  margin-top: 5px;
}

/* app.css L4267+ (copie verbatim) */
.ms-prop-card,
.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border-light);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
.ms-prop-card {
  align-items: center;
  display: flex;
  gap: 14px;
  padding: 14px 18px;
}
.ms-prop-avatar {
  align-items: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  width: 40px;
}
.ms-prop-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
/* app.css L16114-16117 (copie verbatim) - regle plus tardive, gagne */
.ms-prop-avatar {
  background: var(--accent-soft);
  color: var(--accent);
}
.ms-prop-name {
  font-size: 15px;
  font-weight: 600;
}
.ms-prop-meta {
  color: var(--ms-text-2);
  font-size: 12px;
  margin-top: 2px;
}
.ms-card-head {
  align-items: center;
  border-bottom: 1px solid var(--ms-border-light);
  display: flex;
  gap: 12px;
  padding: 14px 18px;
}
/* app.css L6619-6622 (copie verbatim) - variante mobile, replacee ICI APRES
   la regle de base (meme correctif que pour financial-reports.html : une
   copie de cette regle dans le bloc SHELL en tete de fichier, AVANT
   .ms-card-head lui-meme, la ferait perdre a specificite egale par ordre
   de source) */
@media (max-width: 860px) {
  .ms-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
.ms-card-icon {
  align-items: center;
  background: var(--ms-blue-bg);
  border-radius: 8px;
  color: var(--ms-blue);
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.ms-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.ms-card-body {
  padding: 18px;
}
/* app.css L15206-15219 (copie verbatim) - override exclusif reservations.html
   ("ms-card-icon - accent orange, no blue"), !important, gagne quel que
   soit l'ordre de chargement */
.reservations-mode .ms-card-icon,
.reservations-mode .ms-card-icon.blue,
.reservations-mode .ms-card-icon.green,
.reservations-mode .ms-card-icon.orange {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(12, 12, 16, 0.08) !important;
}
[data-theme="dark"] .reservations-mode .ms-card-icon,
[data-theme="dark"] .reservations-mode .ms-card-icon.blue,
[data-theme="dark"] .reservations-mode .ms-card-icon.green,
[data-theme="dark"] .reservations-mode .ms-card-icon.orange {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.ms-btn-primary,
.ms-btn-ghost {
  align-items: center;
  border-radius: 980px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 9px 20px;
}
.ms-btn-primary {
  background: var(--accent);
  border: none;
  color: var(--ui-color-primary-contrast, #fff);
}
.ms-btn-primary:hover {
  background: var(--accent-2);
}
.ms-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ms-border);
  color: var(--ms-text-2);
}
.ms-btn-ghost:hover {
  border-color: var(--ms-blue);
  color: var(--ms-blue);
}
.ms-detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  max-width: 820px;
  padding-bottom: 78px;
  width: 100%;
}
/* app.css (copie verbatim) - le formulaire de creation est un enfant direct
   de .ms-detail-content ici (contrairement a financial-reports.html) */
.ms-detail-content > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ms-action-bar {
  align-items: center;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ms-border-light);
  border-radius: 999px;
  bottom: 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
  padding: 8px;
  position: sticky;
  z-index: 20;
}
[data-theme="dark"] .ms-action-bar {
  background: rgba(22,22,26,.9);
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
}
@media (max-width: 860px) {
  .ms-action-bar {
    border-radius: 14px;
    bottom: 12px;
    flex-wrap: wrap;
    justify-content: stretch;
    position: sticky;
  }
  .ms-action-bar > * {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* app.css (copie verbatim) - liste maitre/detail generique */
.page-split {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.page-split-list {
  width: var(--ms-list-panel-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.page-split-list-hd {
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.page-split-list-body {
  flex: 1;
  overflow-y: auto;
}
.page-split-detail {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.page-split-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--t4);
  font-size: 14px;
}
.page-split-empty i { font-size: 48px; opacity: 0.35; }
/* app.css L8420-8442 (copie verbatim) - variante mobile GENERIQUE de
   .page-split-list/.page-split-detail, distincte des variantes
   .reservations-mode plus specifiques. Manquait initialement dans cette
   migration (detecte par la comparaison locale a 760/761px, corrige). */
@media (max-width: 860px) {
  .page-split { flex-direction: column; }
  .page-split-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    max-height: 40vh;
  }
  .page-split-detail { padding: 16px; }
}

/* app.css (copie verbatim) */
.tag {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--t2);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}
/* app.css L15224-15230 (copie verbatim) - override exclusif reservations.html
   ("tag - neutral, no blue"), gagne car scope .reservations-mode plus
   specifique que .tag seul */
.reservations-mode .tag {
  color: var(--t1);
  background: rgba(12, 12, 16, 0.06);
  border: 1px solid rgba(12, 12, 16, 0.1);
}
[data-theme="dark"] .reservations-mode .tag {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
/* app.css L1650-1673 (copie verbatim, selecteur isole de son groupe
   ".status-pill, .source-pill" - meme specificite, sans effet) */
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.status-confirmed {
  background: var(--green-soft);
  color: var(--green);
}
.status-pending {
  background: var(--accent-soft);
  color: var(--accent-2);
}
.status-cancelled {
  background: var(--rose-soft);
  color: var(--rose);
}
/* app.css (copie verbatim) - badges source/canal utilises dans le tableau */
.source-direct {
  color: #126b5b;
  background: #a7f0df;
}
.source-airbnb {
  color: #6b1e24;
  background: #ffb3b7;
}
.source-booking {
  color: #ffffff;
  background: #003580;
}
.source-google,
.source-expedia,
.source-vrbo,
.source-abritel,
.source-beds24 {
  color: #344052;
  background: #e8eef5;
}
.source-logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
.source-logo-fallback {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef0f2;
  color: #5a6068;
  font-weight: 700;
}

/* app.css (copie verbatim) - regle de base */
.experience-eyebrow {
  display: block; font-size: 11px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
}

/* app.css L28569-28601 (copie verbatim) - en-tete "picker", reutilise
   volontairement depuis la page Logements (commentaire source explicite) */
.prop-picker-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 10px 0 18px;
  padding: 0 !important;
}
.prop-picker-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}
.prop-picker-title .experience-eyebrow {
  flex-basis: 100%;
  line-height: 1;
}
.prop-picker-title h1 {
  color: var(--t1);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.prop-picker-count {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
}

/* app.css L28811-28816 (copie verbatim) - selecteurs isoles de leur bloc
   .prop-mode d'origine (non applicable ici), meme valeurs reutilisees */
@media (max-width: 760px) {
  .prop-picker-head {
    margin: 10px 0 16px;
  }
  .prop-picker-title h1 {
    font-size: 28px;
  }
}

/* app.css L30468-30479 (copie verbatim) - complement partage (design system,
   fond/bordure/ombre via --ui-*), ne concurrence pas les proprietes deja
   fixees par les regles .reservations-mode .reservation-picker-head
   ci-dessous (grace a leur specificite superieure). Preuve supplementaire
   de qualification hostome-tokens.css. */
.reservation-picker-head {
  align-items: center;
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  display: flex;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
}

/* app.css (copie verbatim) - bouton "Nouveau", meme composant que templates.html */
.pg-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  background: var(--t1);
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.pg-mini-cta:hover { background: #1c1c22; }
.pg-mini-cta:active { transform: scale(0.97); }
[data-theme="dark"] .pg-mini-cta { background: var(--accent); color: var(--ui-color-primary-contrast, #fff); }
[data-theme="dark"] .pg-mini-cta:hover { background: var(--accent-2); }
/* app.css L13982-13986 (copie verbatim) - regle plus tardive qui gagne
   pour font-weight uniquement (meme mecanisme documente pour templates.html) */
.pg-mini-cta { font-weight: 500; }
/* app.css L14559-14567 (copie verbatim, meme mecanisme que templates.html) */
@media (max-width: 860px) {
  .page-split-list-hd .pg-mini-cta {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
  .page-split-list-hd .pg-mini-cta i { font-size: 10px; }
}

/* app.css (copie verbatim) - boutons Trier / outils generiques */
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--t2); box-shadow: var(--shadow-1); cursor: pointer; font-family: inherit;
}
.tool-btn:hover { background: var(--surface-2); color: var(--t1); }

/* app.css (copie verbatim) - bouton retour standard, PARTAGE_GLOBAL. Groupe
   multi-selecteurs (utilise par de nombreuses pages) copie tel quel : le
   comportement !important s'applique uniquement au bouton reellement present
   ici (.prop-back-btn), aucun effet sur les autres pages puisque app.css
   n'est pas modifie. DECOUVERTE : cette regle non-:where() avec !important
   et specificite reelle (0,1,0) l'emporte sur la regle :where(...) !important
   de hostome-ui.css (specificite 0,0,0) - c'est donc CETTE regle qui pilote
   reellement la taille du bouton (38px), pas les tokens --ui-back-size. */
.prop-back-btn,
.ms-back-btn,
.exp2-back,
.dashboard-side-back,
.cln-users-back-btn,
.cln-back-btn,
.property-back-btn {
  border-radius: 10px !important;
  flex: 0 0 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  width: 38px !important;
}
.prop-back-btn i,
.ms-back-btn i,
.exp2-back i,
.dashboard-side-back i,
.cln-users-back-btn i,
.cln-back-btn i,
.property-back-btn i {
  font-size: 15px;
}
/* app.css (copie verbatim) - base non !important (fond, comportement par defaut) */
.prop-back-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--t3);
  cursor: pointer;
  display: none;
  justify-content: center;
}
/* app.css (copie verbatim) - override reservations.html : bouton retour
   toujours visible ("partout"), fond/couleur harmonises */
.page-split.reservations-mode .page-split-detail .prop-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--t1); cursor: pointer; margin: 0 0 16px; font-size: 15px;
  position: static;
}
.page-split.reservations-mode .page-split-detail .prop-back-btn:hover {
  border-color: var(--accent); color: var(--accent);
}
.page-split.prop-mode .page-split-detail .prop-back-btn,
.page-split.reservations-mode .page-split-detail .prop-back-btn,
.settings-mode .ms-back-btn,
.experience-mobile-back,
.exp2-back {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  color: var(--t2) !important;
  font-weight: 500 !important;
}

/* ═══════════════ Modales partagees (app-modal, cal-modal) ═══════════════ */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 12, 16, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 20px;
  animation: app-modal-fade 0.15s ease-out;
}
.app-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.15);
  animation: app-modal-pop 0.18s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.app-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.app-modal-message {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 16px;
}
.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.app-modal-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.app-modal-btn-primary {
  background: var(--t1);
  color: #fff;
}
.app-modal-btn-primary:hover { background: #1c1c22; }
[data-theme="dark"] .app-modal-btn-primary { background: var(--accent); }
[data-theme="dark"] .app-modal-btn-primary:hover { background: var(--accent-2); }
@keyframes app-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes app-modal-pop {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* app.css (copie verbatim) - modale "message" (declencheur non atteignable
   sans reservation reelle, auditee par lecture de code) */
.reservation-message-modal .app-modal-title {
  margin-bottom: 8px;
}

/* ═══════════════ Selecteur de date et heure (app.css, copie verbatim, PARTAGE_GLOBAL) ═══════════════ */
.date-picker {
  position: relative;
}
.date-picker input[readonly] {
  cursor: pointer;
  background: var(--surface);
}
.date-picker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 292px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 500;
}
.date-picker.open .date-picker-panel {
  display: block;
}
.date-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.date-picker-head button,
.date-picker-day {
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.date-picker-head button {
  width: 30px;
  height: 30px;
  color: var(--t2);
}
.date-picker-title {
  font-weight: 700;
  color: var(--t1);
}
.date-picker-week,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.date-picker-week span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  padding: 4px 0;
}
.date-picker-day {
  height: 34px;
  color: var(--t2);
  font: inherit;
}
.date-picker-day:hover {
  background: var(--blue-soft);
  color: var(--blue);
}
.date-picker-day.is-empty {
  cursor: default;
}
.date-picker-day.is-today {
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  position: relative;
}
.date-picker-day.is-today::after {
  background: var(--accent);
  border-radius: 999px;
  bottom: 4px;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 4px;
}
.date-picker-day.is-selected {
  background: var(--accent);
  color: var(--ui-color-primary-contrast, #fff);
  font-weight: 700;
}
.date-picker-day.is-selected.is-today {
  color: var(--ui-color-primary-contrast, #fff);
}
.date-picker-day.is-selected.is-today::after {
  background: #ffffff;
}
/* app.css L12853-12856 (copie verbatim) - override tardif !important
   (couleur de bordure), gagne quel que soit l'ordre de chargement */
.date-picker-panel {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.time-select {
  display: inline-grid;
  grid-template-columns: 74px auto 74px;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
}
.time-select::before {
  content: "";
  display: none;
}
.time-select::after {
  content: "";
  display: none;
}
.time-select select {
  width: 74px;
  padding: 0 8px;
}
.time-select .time-separator {
  color: #5a6068;
  font-weight: 700;
}

/* app.css (copie verbatim) - champs de la barre de filtres (date pickers) */
.ms-label {
  color: var(--ms-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ms-field-input {
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  color: var(--ms-text-1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  padding: 9px 12px;
  transition: border-color .13s, box-shadow .13s;
  width: 100%;
}
.ms-field-input:focus {
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 3px var(--ms-blue-bg);
}
.ms-textarea {
  line-height: 1.5;
  min-height: 150px;
  resize: vertical;
}

/* app.css (copie verbatim) - tarifs par nuit, formulaire de creation */
.nightly-rates {
  display: grid;
  gap: 10px;
}
.nightly-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  background: #fafbfc;
}
.nightly-rate-row span {
  font-weight: 600;
  color: #5a6068;
}
.nightly-rate-row input {
  height: 34px;
}

/* ═══════════════ Filtres, recherche, tri (app.css, copie verbatim, exclusif) ═══════════════ */
.filter-dropdown {
  position: relative;
}
.filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #d9dde2;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(20, 28, 36, 0.14);
  z-index: 520;
}
.filter-dropdown.open .filter-menu {
  display: grid;
  gap: 8px;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a4a4a;
  font-weight: 600;
}
.filter-option input {
  width: auto;
}
.filter-option.is-group-covered {
  background: #f7faff;
  border-color: #d8e8f8;
  color: var(--ms-blue);
}
.filter-section {
  display: grid;
  gap: 6px;
}
.filter-section + .filter-section {
  border-top: 1px solid #eef0f3;
  padding-top: 8px;
}
.filter-section-title {
  color: var(--ms-text-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 0 2px;
  text-transform: uppercase;
}
.filter-clear {
  margin-bottom: 0;
}

/* app.css (copie verbatim) - table/liste et cartes mobiles de reservations */
.reservations-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}
.reservations-mobile-list {
  display: none;
}
.reservations-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 12px;
}
.reservations-table th,
.reservations-table td {
  border: 1px solid #eef0f2;
  padding: 8px 9px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.reservations-table th {
  background: #f7f9fb;
  color: #344052;
  font-weight: 700;
}
.reservations-table tr {
  cursor: pointer;
}
.reservations-table tbody tr:hover {
  background: #f7f9fb;
}
.reservation-mobile-card {
  width: 100%;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
  color: #4a4a4a;
  font: inherit;
  cursor: pointer;
}
.reservation-mobile-card:hover {
  background: #f7f9fb;
}
.reservation-mobile-top,
.reservation-mobile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* app.css (copie verbatim) - barre d'outils, filtres, recherche */
.reservations-mode .page-split-list {
  width: var(--ms-list-panel-width);
}
.reservation-list-actions,
.reservation-filter-row {
  align-items: center;
  display: flex;
  gap: 8px;
}
.reservation-filter-stack {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 12px 16px 14px;
}
.reservation-focus-mode .reservation-filter-stack {
  display: none;
}
.reservation-focus-banner {
  align-items: center;
  background: var(--blue-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}
.reservation-focus-banner strong {
  color: var(--t1);
  display: block;
  font-size: 13px;
}
.reservation-focus-banner span {
  color: var(--t2);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}
.reservation-focus-banner .ms-btn-ghost {
  flex: 0 0 auto;
  white-space: nowrap;
}
.reservation-filter-row .date-picker,
.reservation-property-filter {
  flex: 1;
  min-width: 0;
}
.reservation-property-filter .filter-menu {
  border-radius: 12px;
  max-height: 360px;
  width: 100%;
}
.reservation-property-filter .filter-option {
  border: 1px solid transparent;
  border-radius: 9px;
  min-height: 34px;
  padding: 0 8px;
}
.reservation-property-filter .filter-option:hover {
  background: var(--surface-2);
}
.reservation-filter-row .date-picker:last-child .date-picker-panel {
  left: auto;
  right: 0;
}
/* NOTE : .reservation-filter-btn est utilise a la fois par le bouton
   "Logements" (qui porte AUSSI .ui-button.ui-button--ghost directement
   dans le HTML) et par le SELECT de statut (qui ne porte PAS ces classes).
   Aujourd'hui (app.css avant hostome-ui.css), le bloc .ui-button de
   hostome-ui.css gagne pour le bouton (meme specificite, declare apres),
   tandis que le SELECT recoit les valeurs de .reservation-filter-btn sans
   concurrence (aucune regle .ui-button ne le cible). Comme reservations.css
   doit charger APRES hostome-ui.css, une regle .reservation-filter-btn
   simple gagnerait desormais aussi pour le bouton - changement de
   comportement. Fixe avec :not(.ui-button) (specificite 0,2,0, superieure
   a .ui-button seul 0,1,0) : s'applique uniquement au SELECT, jamais au
   bouton, qui continue de recevoir ses valeurs de hostome-ui.css comme
   aujourd'hui. */
.reservation-filter-btn:not(.ui-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--t2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.reservation-filter-btn {
  width: 100%;
}
.reservation-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.reservation-search-btn {
  width: 100%;
}
.reservation-search-btn:hover { opacity: 0.85; }
.reservation-search-btn:active { transform: scale(0.97); }
.reservation-icon-btn {
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}
.res-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.res-search-icon {
  position: absolute;
  left: 11px;
  color: var(--t4);
  font-size: 12px;
  pointer-events: none;
}
.res-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--t1);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .13s, background .13s;
  -webkit-appearance: none;
}
.res-search-input:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.res-search-input::placeholder { color: var(--t4); }

/* app.css (copie verbatim) - liste sous forme de cartes cliquables */
.reservation-choice-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.reservation-choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--t1);
  cursor: pointer;
  display: grid;
  gap: 9px;
  padding: 12px;
  text-align: left;
  transition: background .14s, border-color .14s, box-shadow .14s;
  width: 100%;
}
.reservation-choice:hover,
.reservation-choice.active {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.reservation-choice-top,
.reservation-choice-bottom {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}
.reservation-choice-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reservation-choice-property,
.reservation-choice-dates {
  color: var(--t3);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reservation-choice-total {
  color: var(--t1);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.reservation-detail-card .detail-section {
  margin-bottom: 0;
}
.reservation-detail-card .detail-section + .detail-section {
  margin-top: 18px;
}
.reservation-detail-card .detail-note {
  border-radius: 12px;
}

/* app.css (copie verbatim) - champs du formulaire, scope .reservations-mode
   (specificite superieure a la regle generique .form-field ci-dessus,
   gagne pour les proprietes qu'elle redefinit) */
.reservations-mode [data-reservation-form] .form-field label {
  color: var(--ms-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.reservations-mode [data-reservation-form] .form-field input,
.reservations-mode [data-reservation-form] .form-field select,
.reservations-mode [data-reservation-form] .form-field textarea,
.reservations-mode .nightly-rate-row input {
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  color: var(--ms-text-1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .13s, box-shadow .13s;
}
.reservations-mode [data-reservation-form] .form-field input:focus,
.reservations-mode [data-reservation-form] .form-field select:focus,
.reservations-mode [data-reservation-form] .form-field textarea:focus,
.reservations-mode .nightly-rate-row input:focus {
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 3px var(--ms-blue-bg);
}

/* app.css (copie verbatim) - bascule maitre/detail mobile, seuil 640px
   PROPRE a reservations.html (different du seuil standard 860px utilise
   ailleurs dans le site) */
@media (max-width: 640px) {
  .page-split.reservations-mode {
    flex-direction: column;
    overflow-y: auto;
  }
  .page-split.reservations-mode .page-split-list {
    border-bottom: none;
    border-right: none;
    max-height: none;
    overflow: visible;
    width: 100%;
  }
  .reservation-focus-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .page-split.reservations-mode .page-split-detail {
    overflow-y: visible;
    padding: 16px;
  }
  .page-split.reservations-mode[data-res-panel="detail"] .page-split-list {
    display: none;
  }
  .page-split.reservations-mode:not([data-res-panel="detail"]) .page-split-detail {
    display: none;
  }
}

/* app.css L11064-11099 (copie verbatim) - DECOUVERTE MAJEURE (corrigee apres
   0 diff local initial rate a 130+ ecarts) : la mise en page reelle de
   reservations.html N'EST PAS le flex cote-a-cote generique de .page-split,
   mais un "menu central unique" (commentaire source : "Meme logique que la
   page Logements : plus de colonne a gauche, tout est centre dans le menu
   principal"). Cette regle, plus specifique (.page-split.reservations-mode,
   2 classes) que la regle generique .page-split (1 classe), la remplace :
   display:block (pas flex), liste et detail centres en colonne unique,
   bascule visuelle uniquement via l'attribut [data-res-panel="detail"]. */
.page-split.reservations-mode {
  display: block;
  overflow-y: auto;
  background: var(--surface-2);
}
.reservations-mode .page-split-list-body {
  overflow: visible;
}
.page-split.reservations-mode .page-split-list {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  border-right: 0;
  border-bottom: 0;
  max-height: none;
  overflow: visible;
  padding: 26px 24px 56px;
  box-sizing: border-box;
  background: transparent;
}
.page-split.reservations-mode .page-split-detail {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  border: 0;
  overflow: visible;
  background: transparent;
}

/* app.css L11097-11147 (copie verbatim) - bascule liste/detail INCONDITIONNELLE
   ("a toutes les largeurs" - commentaire source), fait partie du meme bloc
   que ci-dessus. Egalement : en-tete picker, barre d'outils centree, grille
   de cartes, largeur illimitee du contenu de detail (necessaire pour la
   table de facturation). */
.page-split.reservations-mode[data-res-panel="detail"] .page-split-list { display: none; }
.page-split.reservations-mode:not([data-res-panel="detail"]) .page-split-detail { display: none; }
.reservations-mode .reservation-picker-head { border-bottom: 0; }
.reservations-mode .reservation-toolbar {
  border-bottom: 0;
  padding: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.reservations-mode .reservation-toolbar .res-search-wrap {
  flex: 1 1 320px;
  max-width: 520px;
}
.reservations-mode .reservation-toolbar .reservation-filter-row { margin: 0; }
.reservations-mode .reservation-toolbar .date-picker { min-width: 130px; }
.reservations-mode .reservation-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.reservations-mode .ms-detail-content { max-width: none; }
.reservations-mode .reservation-toolbar .reservation-search-btn {
  flex: 0 0 auto;
  width: auto;
}

/* app.css (copie verbatim) - action bar de la page (droite, sans etirement) */
.reservations-mode .ms-action-bar {
  justify-content: flex-end;
}
.reservations-mode .ms-action-bar > * {
  flex: 0 0 auto;
}
.reservations-mode [data-reservation-workspace] {
  padding-bottom: 0;
}
.reservations-mode .res-action-bar.ms-action-bar {
  -webkit-backdrop-filter: none;
  align-items: center;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  bottom: auto;
  box-shadow: none;
  margin: 0;
  padding: 14px 18px;
  position: static;
  width: 100%;
}
[data-theme="dark"] .reservations-mode .res-action-bar.ms-action-bar {
  background: transparent;
  box-shadow: none;
}
.reservations-mode .res-action-bar .ms-btn-primary,
.reservations-mode .res-action-bar .ms-btn-ghost {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 18px;
}
.reservations-mode .reservation-detail-empty {
  min-height: 360px;
  text-align: center;
}
.reservations-mode .reservation-detail-empty p {
  margin: 0;
}
/* app.css L17916-17917 (copie verbatim) - correctif mobile bouton Creer,
   commentaire source : "Bug 3c : bouton Creer une nouvelle reservation" */
@media (max-width: 860px) {
  .ms-action-bar [data-reservation-submit],
  .ms-action-bar [data-res-cancel-edit] {
    flex: 0 0 auto;
  }
}

/* app.css (copie verbatim) - "Harmonisation 20260616d" : mise en page
   toolbar/picker-head en grille, harmonisation des champs, cartes de liste */
.reservation-status-filter {
  appearance: none;
  min-width: 132px;
}
.reservation-view-toggle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
}
.reservation-view-toggle button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--t3);
  cursor: pointer;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 750;
  gap: 7px;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
}
.reservation-view-toggle button.is-active {
  background: var(--t1);
  color: var(--surface);
}
/* CANARY LOT2: in dark --t1 is near-white -> the active toggle became a bright
   white island. Use the canonical filled-primary pairing instead. */
[data-theme="dark"] .reservation-view-toggle button.is-active {
  background: var(--accent);
  color: var(--ui-color-primary-contrast, #fff);
}
.reservation-list-view {
  display: grid;
  gap: 6px;
  padding: 12px;
}
.reservation-list-head,
.reservation-list-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(150px, 1.1fr) minmax(100px, .8fr) minmax(90px, .7fr);
}
.reservation-list-head {
  color: var(--t3);
  font-size: 11px;
  font-weight: 800;
  padding: 0 12px 4px;
  text-transform: uppercase;
}
.reservation-list-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--t2);
  cursor: pointer;
  font-size: 12.5px;
  min-height: 54px;
  padding: 10px 12px;
  text-align: left;
}
.reservation-list-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.reservation-list-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.reservation-list-main strong,
.reservation-list-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reservation-list-main strong {
  color: var(--t1);
  font-size: 13px;
}
.reservation-list-main small {
  color: var(--t3);
  font-size: 11.5px;
}
@media (max-width: 760px) {
  .reservation-filter-row .reservation-status-filter {
    width: 100%;
  }
  .reservation-list-head {
    display: none;
  }
  .reservation-list-row {
    gap: 5px;
    grid-template-columns: 1fr;
  }
  .reservation-list-row > span {
    white-space: normal;
  }
}
.reservations-mode .reservation-toolbar {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(260px, 1.2fr) minmax(260px, .8fr) minmax(280px, .8fr) auto auto;
  padding: 0 0 14px !important;
}
.reservations-mode .reservation-picker-head {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  height: auto;
}
.reservations-mode .reservation-picker-head .prop-picker-count {
  align-self: center;
  justify-self: end;
}
.reservations-mode .reservation-picker-head .reservation-add-btn {
  align-self: center;
  justify-self: end;
}
.reservations-mode .reservation-toolbar .res-search-wrap {
  flex: none !important;
  max-width: none !important;
  min-width: 0;
  width: 100%;
}
.reservations-mode .reservation-toolbar .reservation-filter-row {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.reservations-mode .reservation-toolbar .date-picker,
.reservations-mode .reservation-toolbar .filter-dropdown,
.reservations-mode .reservation-status-filter {
  flex: 1 1 0;
  min-width: 0 !important;
  width: 100%;
}
.reservations-mode .reservation-filter-btn,
.reservations-mode .reservation-status-filter,
.reservations-mode .reservation-toolbar .date-picker .ms-field-input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--t1);
  min-height: 42px;
}
.reservations-mode .reservation-filter-btn {
  justify-content: center;
  width: 100%;
}
.reservations-mode .reservation-status-filter {
  padding: 0 14px;
}
.reservations-mode .reservation-view-toggle {
  align-self: stretch;
  min-width: 152px;
}
.reservations-mode .reservation-search-btn {
  min-height: 42px;
  white-space: nowrap;
}
.reservations-mode .reservation-property-filter .filter-menu {
  min-width: 320px;
  width: min(360px, calc(100vw - 48px));
}
.reservation-list-view {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  margin-top: 12px;
}
.reservation-list-row {
  background: var(--surface);
}
@media (max-width: 1100px) {
  .reservations-mode .reservation-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 760px) {
  .reservations-mode .reservation-toolbar {
    grid-template-columns: 1fr !important;
  }
  .reservations-mode .reservation-picker-head {
    grid-template-columns: 1fr auto;
  }
  .reservations-mode .reservation-picker-head .reservation-add-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .reservations-mode .reservation-toolbar .reservation-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .reservations-mode .reservation-property-filter .filter-menu {
    min-width: 0;
    width: 100%;
  }
  .reservations-mode .reservation-view-toggle,
  .reservations-mode .reservation-search-btn {
    width: 100%;
  }
}
/* ═══════════════ Panneau de detail : onglets (app.css, copie verbatim) ═══════════════
   NON accessible visuellement sur ce compte de test (0 reservation) - audite
   par lecture de code uniquement (bindReservationDetailPanel/openReservationDetail
   dans auth.js), conserve pour fidelite au rendu si des reservations existent. */
.reservations-mode [data-reservation-detail-inline] .cmd-actions {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  margin: 20px -24px -20px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
}
.reservations-mode [data-reservation-detail-inline] .cmd-edit-btn {
  align-items: center;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
}
.reservations-mode [data-reservation-detail-inline] .cmd-edit-btn:hover {
  background: var(--accent-2);
  color: #fff;
}
.reservations-mode [data-reservation-detail-inline] .cmd-delete-btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: #ef4444;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
}
.reservations-mode [data-reservation-detail-inline] .cmd-delete-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}
.res-page-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.res-page-tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  padding: 0 6px;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}
.res-page-pane:last-child,
.res-page-pane--msg:last-child {
  border-radius: 0 0 16px 16px;
}
.res-page-tab {
  padding: 12px 20px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--t3); background: none; border: none; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  display: flex; align-items: center; gap: 7px;
  transition: color .15s;
}
.res-page-tab.active  { color: var(--accent); border-bottom-color: var(--accent); }
.res-page-tab:hover:not(.active) { color: var(--t1); }
.res-page-pane { padding: 20px 24px; }
.res-page-pane--billing { background: var(--bg); }
.res-page-pane--msg {
  padding: 0;
  height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-height: 800px) {
  .res-page-pane--msg { height: 560px; }
}
@media (max-width: 900px) {
  .res-page-pane--msg { height: 420px; }
}
@media (max-width: 720px) {
  .res-page-pane--billing { padding: 14px; }
}
@media (min-width: 641px) {
  body:has(.page-split-detail.res-msg-active) {
    height: 100vh;
    overflow: hidden;
  }
  body:has(.page-split-detail.res-msg-active) .app {
    height: 100vh;
    overflow: hidden;
  }
  body:has(.page-split-detail.res-msg-active) .main {
    min-height: 0;
    overflow: hidden;
  }
  .page-split-detail.res-msg-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 28px;
  }
  .res-msg-active [data-reservation-workspace] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0 !important;
  }
  .res-msg-active [data-reservation-workspace] > .ms-prop-card {
    flex-shrink: 0;
  }
  .res-msg-active [data-reservation-detail-inline] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .res-msg-active .res-page-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .res-msg-active .res-page-pane--msg {
    flex: 1;
    height: auto !important;
    min-height: 0;
  }
}
.res-msg-active .cal-modal-thread {
  background: var(--surface);
}
/* app.css (copie verbatim) - formulaire d'edition inline, PARTAGE avec le
   popup calendrier et le tableau de bord (non deplace, non modifie) */
.res-inline-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.res-edit-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.res-edit-section:last-of-type { border-bottom: none; }
.res-edit-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 12px;
}
.res-edit-actions {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -24px -20px;
  padding: 16px 24px;
}
.res-edit-actions .btn,
.res-edit-actions .btn-primary,
.res-edit-actions .btn-secondary {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 18px;
}

/* ═══════════════ Utilitaire transfere depuis l'attribut style="" statique ═══════════════ */
.res-billing-margin { margin-bottom: 14px; }