/* Cadeaux VIP aux couleurs d'Inwood Hotels (inwood-hotels.com) : crème, or, gris anthracite, bleu nuit ;
   titres en capitales espacées (Jost à la place de leur Bodoni Sans, qui n'existe pas en police libre), texte en Open Sans. */
:root {
  --fond: #fbf6ef;           /* crème du site */
  --carte: #ffffff;
  --encre: #2d2d2d;          /* gris anthracite du site */
  --discret: #6a645c;        /* 5,4:1 sur le crème */
  --trait: #e9e0d2;
  --bord-champ: #948b7e;     /* 3,4:1 */
  --nuit: #0f1650;           /* bleu nuit du site */
  --action: #0f1650;          /* bouton principal */
  --sur-action: #ffffff;
  --or: #b4965a;             /* or du site : accents, filets, onglet actif */
  --or-fonce: #7a6233;       /* or lisible en texte, 5,5:1 */
  --ok: #1d7a52;
  --alerte: #b42318;
  --annule: #8a8f94;
  --focus: #0f1650;
  --entete: #ffffff;
  --nuit-texte: #0f1650;     /* bleu nuit en texte (éclairci en sombre) */
  --titre: "Jost", "Futura", "Century Gothic", sans-serif;
  --texte: "Open Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #161512; --carte: #211f1b; --encre: #f3eee6; --discret: #b8b0a3; --trait: #3a352e; --bord-champ: #7d7468;
    --action: #c9ab70; --sur-action: #1a1814; --or-fonce: #d8bd85; --ok: #5fd39f; --alerte: #ff8a7a; --focus: #d8bd85;
    --entete: #1b1916; --nuit-texte: #b9c0f0; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #161512; --carte: #211f1b; --encre: #f3eee6; --discret: #b8b0a3; --trait: #3a352e; --bord-champ: #7d7468;
  --action: #c9ab70; --sur-action: #1a1814; --or-fonce: #d8bd85; --ok: #5fd39f; --alerte: #ff8a7a; --focus: #d8bd85;
  --entete: #1b1916; --nuit-texte: #b9c0f0; color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
@media (min-width: 900px) { html { scroll-padding-bottom: 0; } }
body { margin: 0; min-height: 100dvh; background: var(--fond); color: var(--encre); font: 400 1rem/1.55 var(--texte); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, label.case, label.fichier { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.chargement { padding: 40px 16px; color: var(--discret); }
.discret { color: var(--discret); }

/* ---------- En-tête : choix de l'hôtel en haut à gauche */
.haut { position: sticky; top: 0; z-index: 6; }
.entete {
  display: flex; align-items: center; gap: 8px 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--entete); color: var(--encre); border-bottom: 2px solid var(--or);
}
.logo-marque { display: block; height: 30px; width: auto; flex: none; }
@media (max-width: 420px) { .logo-marque { height: 24px; } }
.choix-hotel { position: relative; min-width: 0; flex: 0 1 auto; }
.choix-hotel select {
  min-height: 44px; max-width: 100%; padding: 6px 34px 6px 12px; border: 1px solid var(--trait); border-radius: 25px;
  background: var(--carte); color: var(--encre); font: 500 0.9375rem/1.2 var(--titre); text-transform: uppercase; letter-spacing: 0.075em; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
}
.choix-hotel select option { color: #2d2d2d; background: #fff; font: 400 1rem var(--texte); text-transform: none; letter-spacing: 0; }
.choix-hotel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(45deg); pointer-events: none; }
.choix-hotel .seul { font: 500 0.9375rem/1.2 var(--titre); text-transform: uppercase; letter-spacing: 0.075em; }
.entete .qui { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; min-width: 0; }
.entete .qui > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--discret); }
.entete .qui button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; border: 1px solid var(--trait); border-radius: 25px; background: none; color: var(--encre); font-size: 0.875rem; }
@media (max-width: 560px) {
  .entete .qui > span, .entete .qui .libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: var(--carte); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
.nav button {
  flex: 1; min-width: 0; min-height: 56px; padding: 8px 2px 6px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--discret); font-size: 0.75rem; font-weight: 700; border-top: 3px solid transparent;
}
.nav button svg.ico { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--encre); border-top-color: var(--or); }
@media (min-width: 900px) {
  .nav { position: relative; bottom: auto; justify-content: center; border-top: 0; border-bottom: 1px solid var(--trait); padding: 0 16px; }
  .nav button { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 0 18px; font-size: 0.9375rem; border-top: 0; border-bottom: 3px solid transparent; }
  .nav button[aria-current="page"] { border-bottom-color: var(--or); }
}

main { max-width: 1180px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) 120px max(16px, env(safe-area-inset-left)); }
@media (min-width: 900px) { main { padding-bottom: 64px; } }
h1 { margin: 0 0 4px; font: 400 min(1.75rem, 7.5vw)/1.2 var(--titre); text-transform: uppercase; letter-spacing: 0.075em; text-wrap: balance; }
h2 { margin: 0 0 12px; font: 400 1.1875rem/1.25 var(--titre); text-transform: uppercase; letter-spacing: 0.075em; text-wrap: balance; }
h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.sous-titre { margin: 0 0 20px; color: var(--discret); }
.bloc { margin-top: 32px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; }
.vide { padding: 18px; border: 2px dashed var(--trait); border-radius: 14px; color: var(--discret); text-align: center; }

/* ---------- Barre de date : mois, puis ‹ 01 › */
.barre-date { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.barre-date input[type="month"] { width: auto; min-height: 44px; }
.fleches { display: flex; align-items: center; gap: 6px; }
.fleches button { width: 48px; height: 48px; border: 2px solid var(--trait); border-radius: 12px; background: var(--carte); display: inline-flex; align-items: center; justify-content: center; }
.fleches button:hover { border-color: var(--action); }
.fleches .jour { min-width: 64px; text-align: center; font: 400 2.25rem/1 var(--titre); }
.date-longue { font-weight: 700; }
.saison { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; border: 1px solid currentColor; }
.saison.haute { color: var(--or-fonce); }
.saison.basse { color: var(--nuit-texte); }
.lien-aujourdhui { min-height: 44px; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--discret); }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-bottom: 20px; background: var(--trait); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.chiffres > div { background: var(--carte); padding: 12px 14px; }
.chiffres .lib { font-size: 0.8125rem; color: var(--discret); }
.chiffres .val { font: 400 1.75rem/1.15 var(--titre); letter-spacing: 0.02em; }
.chiffres .lib { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.chiffres .principal-chiffre { background: var(--nuit); color: #fff; }
.chiffres .principal-chiffre .lib { color: rgb(255 255 255 / 0.8); }

/* ---------- Fiche client du jour */
.clients { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1100px) { .clients { grid-template-columns: 1fr 1fr; } }
.client { display: grid; gap: 12px; }
.client.annule { opacity: 0.6; }
.client .tete { display: flex; align-items: flex-start; gap: 12px; }
.num-chambre { flex: none; min-width: 52px; padding: 6px 8px; border-radius: 10px; background: var(--nuit); color: #fff; text-align: center; font-weight: 700; }
.num-chambre small { display: block; font-size: 0.6875rem; font-weight: 600; opacity: 0.8; }
button.num-chambre { border: 0; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
button.num-chambre:hover { outline: 2px solid var(--or); outline-offset: 2px; }
input.num-chambre.saisie { width: 76px; min-height: 52px; padding: 6px; border: 2px solid var(--or); background: var(--carte); color: var(--encre); text-align: center; font-weight: 700; }
.imprimer-jour { margin-left: auto; }
.client .ident { flex: 1; min-width: 0; }
.client .ident h3 { overflow-wrap: anywhere; }
.client .ident p { margin: 2px 0 0; color: var(--discret); font-size: 0.9375rem; }
.palier { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; background: color-mix(in srgb, var(--or) 30%, var(--carte)); color: var(--or-fonce); white-space: nowrap; }
.palier.p2 { background: color-mix(in srgb, var(--nuit-texte) 12%, var(--carte)); color: var(--nuit-texte); }
.palier.p3, .palier.inconnu { background: var(--fond); color: var(--discret); }
.palier.occasion { background: color-mix(in srgb, var(--alerte) 12%, var(--carte)); color: var(--alerte); }
.badge-annule { padding: 3px 10px; border-radius: 999px; background: var(--annule); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.options select { width: auto; min-height: 44px; padding: 6px 10px; }
.bascule { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 2px solid var(--trait); border-radius: 999px; background: var(--carte); font-weight: 700; }
.bascule[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--sur-action); }
.choix-cadeau { display: grid; gap: 6px; }
.choix-cadeau .legende { font-size: 0.8125rem; font-weight: 700; color: var(--discret); text-transform: uppercase; letter-spacing: 0.04em; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 2px solid var(--trait); border-radius: 25px;
  background: var(--carte); text-align: left; font-size: 0.9375rem; transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.puce:hover { border-color: var(--or); }
.puce .prix { color: var(--discret); font-size: 0.8125rem; }
.puce[aria-pressed="true"] { border-color: var(--or); background: color-mix(in srgb, var(--or) 18%, var(--carte)); font-weight: 700; }
.puce[aria-pressed="true"]::before { content: "✓"; color: var(--or-fonce); font-weight: 800; }
.puce.autre select { min-height: 32px; border: 0; padding: 0; background: none; width: auto; }
.qte { display: inline-flex; align-items: center; gap: 4px; }
.qte button { width: 44px; height: 44px; border: 2px solid var(--trait); border-radius: 10px; background: var(--carte); font-size: 1.25rem; line-height: 1; }
.qte span { min-width: 28px; text-align: center; font-weight: 700; }
.pied { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--trait); padding-top: 10px; }
.pied .cout { font-weight: 700; }
.pied input { flex: 1 1 220px; min-height: 44px; padding: 8px 12px; }
.chien { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--fond); font-size: 0.9375rem; }
.etat-enreg { font-size: 0.8125rem; color: var(--ok); font-weight: 700; min-height: 1.2em; }
.notes { margin: 0; font-size: 0.875rem; color: var(--discret); white-space: pre-wrap; overflow-wrap: anywhere; }
.long-sejour { border-left: 4px solid var(--or); }

/* ---------- Formulaires */
label.champ { display: block; margin-bottom: 14px; }
label.champ > span, .legende-champ { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.9375rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input[type="number"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--bord-champ); border-radius: 10px; background: var(--carte);
}
input:focus, select:focus, textarea:focus { border-color: var(--action); outline: none; }
textarea { min-height: 90px; resize: vertical; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.principal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 25px;
  background: var(--action); color: var(--sur-action); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; font-weight: 700; font-size: 1.0625rem; transition: filter 120ms ease-out, transform 80ms ease-out;
}
.principal:hover { filter: brightness(1.08); }
.principal:active { transform: scale(0.98); }
.principal:disabled { opacity: 0.6; cursor: wait; }
.principal.large { width: 100%; }
.secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--encre); border-radius: 25px; background: none; font-weight: 600; color: inherit; text-decoration: none; }
.lien { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; color: var(--discret); font-size: 0.9375rem; }
.lien.danger { color: var(--alerte); }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.erreur-form { margin: -4px 0 14px; color: var(--alerte); font-weight: 700; }
label.case { display: flex; align-items: center; gap: 10px; min-height: 44px; }
label.case input { width: 22px; height: 22px; accent-color: var(--action); flex: none; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.radios label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--trait); border-radius: 999px; font-weight: 700; }
.radios label:has(input:checked) { border-color: var(--action); background: var(--action); color: var(--sur-action); }
.radios label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.radios input { position: absolute; opacity: 0; }
label.fichier { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 2px dashed var(--bord-champ); border-radius: 12px; font-weight: 700; }
label.fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.fichier:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Tableaux (récap, grille) */
.tableau-wrap { overflow-x: auto; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; }
th { font-size: 0.8125rem; color: var(--discret); font-weight: 700; background: color-mix(in srgb, var(--fond) 60%, var(--carte)); }
td.n, th.n { text-align: right; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 2px solid var(--trait); }
.grille-table input { min-height: 44px; padding: 6px 8px; }
.grille-table input[type="number"] { width: 6.5em; }
.grille-table td.action { width: 1%; }
.groupe-choix { margin-bottom: 18px; }
.barre-enreg { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 4; display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 24px; padding: 12px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 6px 20px rgb(0 0 0 / 0.08); }
@media (min-width: 900px) { .barre-enreg { bottom: 16px; } }

/* ---------- Comptes */
.personne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.personne .infos { grid-column: 1 / -1; font-size: 0.875rem; color: var(--discret); overflow-wrap: anywhere; }
.personne .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes > li { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.lignes > li:first-child { padding-top: 0; }
.lignes > li:last-child { border-bottom: 0; padding-bottom: 0; }
.statut { font-size: 0.8125rem; font-weight: 700; }
.statut.attente { color: var(--or-fonce); }
.statut.off, .statut.bloque { color: var(--alerte); }
.statut.ok { color: var(--ok); }
.lien-acces { margin-top: 10px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--or) 22%, var(--carte)); }
.lien-acces code { display: block; margin: 8px 0 12px; font-size: 0.8125rem; overflow-wrap: anywhere; }

.porte { max-width: 420px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top)) 16px 40px; }
.porte .logo { display: block; width: 200px; height: auto; margin-bottom: 28px; }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 10; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: 12px; background: var(--encre); color: var(--fond); font-weight: 700; pointer-events: none; }
.toast.erreur { background: var(--alerte); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.impression { display: none; }
@media print {
  @page { margin: 12mm; }
  /* page du jour : seule la feuille d'impression sort */
  main:has(.impression:not(:empty)) > div > :not(.impression) { display: none !important; }
  .impression:not(:empty) { display: block; color: #000; font-size: 10.5pt; }
  .impression h1 { font-size: 15pt; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
  .impression header p { margin: 2px 0 10px; }
  .impression h2 { font-size: 11pt; margin: 14px 0 6px; }
  .impression table { width: 100%; border-collapse: collapse; }
  .impression th, .impression td { border: 1px solid #999; padding: 4px 6px; text-align: left; vertical-align: top; }
  .impression th { background: #eee; font-size: 9pt; text-transform: uppercase; }
  .impression td.ch { font-weight: 700; font-size: 12pt; white-space: nowrap; }
  .impression td.n { text-align: right; white-space: nowrap; }
  .impression td.case { text-align: center; font-size: 13pt; width: 2.5em; }
  .impression tr { break-inside: avoid; }
  .haut, .nav, .toast, .boutons, .barre-enreg { display: none !important; }
  body { background: #fff; color: #000; }
  .carte, .tableau-wrap { break-inside: avoid; }
}