/* Module hôtellerie : planning, tableau de bord, ménage, démo. Mêmes couleurs que le socle sanseuil. */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--texte-2); background: #fff; border: 1px solid var(--bord); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.filtres a span { color: var(--texte-3); font-weight: 700; }
.filtres a.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.filtres a.actif span { color: var(--vert-clair); }
.pile { display: flex; flex-direction: column; gap: 20px; }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi .evol { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.kpi .evol.pos { background: var(--ok-fond); color: var(--ok); } .kpi .evol.neg { background: var(--err-fond); color: var(--err); }
.kpi .sous { color: var(--texte-3); font-size: 12px; }
.kpi-nuit { background: var(--nuit); border-color: var(--nuit); color: #fff; } .kpi-nuit .kpi-tete, .kpi-nuit .sous { color: var(--sur-nuit); } .kpi-nuit strong { color: var(--vert-clair); }
.jauge { height: 8px; border-radius: 6px; background: var(--ligne); overflow: hidden; } .jauge i { display: block; height: 100%; background: var(--vert); border-radius: 6px; }
.kpi-nuit .jauge { background: var(--nuit-3); } .kpi-nuit .jauge i { background: var(--vert-clair); }
.barres-v { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; padding: 8px 20px 0; }
.barres-v .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barres-v .col i { width: 100%; border-radius: 6px 6px 2px 2px; background: #BBF7D0; min-height: 2px; }
.barres-v .col.fort i { background: var(--vert); } .barres-v .col.plein i { background: var(--nuit); }
.barres-v .col b { font-size: 11px; color: var(--texte-2); } .barres-v .col small { font-size: 11px; color: var(--texte-3); white-space: nowrap; }
.barres-v .col.auj small { color: var(--nuit); font-weight: 800; }
.barre-h { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 10px; padding: 7px 20px; font-size: 13px; }
.barre-h .jauge { height: 10px; } .barre-h b { text-align: right; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--ligne); }
.liste-simple li:first-child { border-top: 0; }
.liste-simple .lq { display: flex; flex-direction: column; text-align: left; } .liste-simple .lq small { color: var(--texte-3); }
/* arrivées / départs */
.col-ad { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }
.carte-sejour { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--ligne); }
.carte-sejour:first-child { border-top: 0; }
.num-ch { flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--nuit); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; line-height: 1.1; }
.num-ch small { font-size: 9px; font-weight: 600; color: var(--sur-nuit); text-transform: uppercase; letter-spacing: .04em; }
.carte-sejour .infos { flex: 1; min-width: 0; } .carte-sejour .infos strong { display: block; } .carte-sejour .infos span { color: var(--texte-3); font-size: 12px; }
.carte-sejour form { flex: none; }
/* planning */
.planning { --col: minmax(54px, 1fr); display: grid; grid-template-columns: 116px repeat(14, var(--col)); min-width: 980px; position: relative; }
.planning .tete-j { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--bord); padding: 8px 4px; text-align: center; font-size: 11px; color: var(--texte-3); line-height: 1.3; }
.planning .tete-j b { display: block; font-size: 15px; color: var(--texte); }
.planning .tete-j.we { background: #F8FAFC; } .planning .tete-j.auj { background: var(--nuit); color: var(--sur-nuit); border-radius: 10px 10px 0 0; } .planning .tete-j.auj b { color: #fff; }
.planning .occ { font-size: 10px; font-weight: 700; color: var(--vert-texte); }
.planning .tete-j.auj .occ { color: var(--vert-clair); }
.planning .nom-ch { grid-column: 1; padding: 6px 10px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; justify-content: center; min-height: 46px; background: #fff; position: sticky; left: 0; z-index: 2; }
.planning .nom-ch b { font-size: 14px; } .planning .nom-ch small { font-size: 11px; color: var(--texte-3); }
.planning .nom-ch.hs b { color: var(--err); }
.planning .case { border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); min-height: 46px; text-decoration: none; display: block; }
.planning .case.we { background: #FAFBFD; } .planning .case.auj { background: #F0FDF4; }
.planning .case:hover { background: var(--vert-pale); }
.planning .bloc-r { margin: 6px 2px; border-radius: 9px; padding: 4px 8px; font-size: 12px; font-weight: 600; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; position: relative; }
.planning .bloc-r small { font-weight: 500; opacity: .8; font-size: 10px; }
.bloc-r.st-confirmee { background: #DBEAFE; color: #1E3A8A; border-left: 4px solid #3B82F6; }
.bloc-r.st-option { background: var(--warn-fond); color: var(--warn); border-left: 4px dashed var(--warn-trait); }
.bloc-r.st-en_sejour { background: var(--vert); color: #fff; border-left: 4px solid var(--vert-fonce); }
.bloc-r.st-partie { background: #E2E8F0; color: #475569; border-left: 4px solid #94A3B8; }
.bloc-r.coupe-g { border-top-left-radius: 0; border-bottom-left-radius: 0; } .bloc-r.coupe-d { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bloc-hs { margin: 6px 2px; border-radius: 9px; background: repeating-linear-gradient(45deg, var(--err-fond), var(--err-fond) 6px, #fff 6px, #fff 12px); color: var(--err); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* ménage */
.grille-menage { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ch-menage { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 80px; }
.ch-menage.prio0 { border: 2px solid var(--err); } .ch-menage.prio1 { border-color: var(--warn-trait); }
.ch-menage .haut { display: flex; justify-content: space-between; align-items: center; }
.ch-menage .haut b { font-size: 22px; letter-spacing: -.02em; }
.ch-menage p { font-size: 13px; color: var(--texte-2); display: flex; gap: 6px; align-items: center; }
.ch-menage .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ch-menage .boutons .btn { min-height: 44px; justify-content: center; }
/* réservation */
.folio .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 9px 20px; border-top: 1px solid var(--ligne); }
.folio .ligne:first-child { border-top: 0; }
.folio .total { font-weight: 800; font-size: 16px; } .folio .reste { background: var(--warn-fond); color: var(--warn); font-weight: 800; font-size: 17px; }
.folio .solde { background: var(--ok-fond); color: var(--ok); font-weight: 800; }
.chambre-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chambre-choix label { position: relative; cursor: pointer; }
.chambre-choix input { position: absolute; opacity: 0; }
.chambre-choix span { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--bord-2); border-radius: 12px; padding: 10px 12px; background: #fff; }
.chambre-choix span b { font-size: 16px; } .chambre-choix span small { color: var(--texte-3); font-size: 12px; }
.chambre-choix input:checked + span { border-color: var(--nuit); background: var(--nuit); color: #fff; } .chambre-choix input:checked + span small { color: var(--sur-nuit); }
.chambre-choix input:focus-visible + span { outline: 3px solid var(--vert-clair); }
.recap-prix { background: var(--fond); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.recap-prix strong { font-size: 18px; }
.histo li { padding: 9px 20px; border-top: 1px solid var(--ligne); font-size: 13px; list-style: none; }
.histo { margin: 0; padding: 0; } .histo li small { color: var(--texte-3); display: block; }
/* partenaire */
.code-promo { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .06em; background: var(--nuit); color: var(--vert-clair); padding: 3px 10px; border-radius: 8px; }
.code-promo.grand { font-size: 30px; padding: 10px 22px; border-radius: 14px; display: inline-block; }
/* connexion démo */
.connexion-demo { flex-direction: column; gap: 18px; }
.demo-acces { gap: 12px !important; }
.demo-grille { display: grid; gap: 8px; }
.demo-btn { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--bord); background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.demo-btn:hover { border-color: var(--vert); background: var(--vert-pale); }
.demo-btn strong { font-size: 14px; } .demo-btn span { font-size: 12px; color: var(--texte-3); }
.bandeau-demo { display: flex; gap: 8px; align-items: center; justify-content: center; background: var(--warn-fond); color: var(--warn); font-size: 12px; font-weight: 600; padding: 6px 12px; }
@media (max-width: 700px) {
  .col-ad { grid-template-columns: 1fr; }
  .barre-h { grid-template-columns: 100px 1fr 56px; padding: 7px 14px; }
  .barres-v { padding: 8px 10px 0; gap: 3px; } .barres-v .col small { font-size: 9px; } .barres-v .col b { font-size: 9px; }
  .carte-sejour { flex-wrap: wrap; } .carte-sejour form { width: 100%; } .carte-sejour form .btn { width: 100%; justify-content: center; }
}