/* ---- application plein écran (PWA) ---- */
  html,body{height:100%;overscroll-behavior:none}
  body{background:var(--fond);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       color:var(--texte);display:flex;flex-direction:column;height:100vh;
       height:100dvh;overflow:hidden}
  .appli{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;
         max-width:520px;width:100%;margin:0 auto}
  .ecran{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
  header.appbar{padding-top:calc(10px + env(safe-area-inset-top))}
  .tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

  :root{
    --orange:#e8752a; --orange-clair:#fdf1e7; --vert:#2e9e5b; --vert-clair:#e6f5ec;
    --rouge:#d64545; --rouge-clair:#fbecec; --bleu:#2f6fb2; --bleu-clair:#eaf2fa;
    --fond:#f4f2ee; --carte:#ffffff; --texte:#2b2b2b; --gris:#8a8a8a; --bord:#e5e1da;
    --jaune:#f2ff45;   /* jaune fluo : clients qui n'ont pas payé */
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  header.appbar{padding:10px 16px 12px;background:var(--fond);position:sticky;top:0;z-index:5}
  .appbar h1{font-size:21px;font-weight:800}
  .appbar .sous{font-size:13px;color:var(--gris);margin-top:2px}
  .retour{display:inline-flex;align-items:center;gap:6px;color:var(--bleu);font-size:15px;font-weight:600;
          background:none;border:none;padding:4px 0;cursor:pointer;margin-bottom:2px}
  .contenu{padding:0 14px 90px}
  .carte{background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:14px;margin-bottom:12px}
  .titre-section{font-size:13px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;margin:14px 4px 8px}
  /* --- barre du jour (navigation + total réunis) --- */
  .barre-jour{display:flex;align-items:center;gap:6px;background:var(--orange);color:#fff;
              border-radius:16px;padding:7px;margin-bottom:2px}
  .barre-jour button{width:44px;height:50px;border-radius:12px;border:none;background:rgba(255,255,255,.22);
                     color:#fff;font-size:17px;font-weight:800;cursor:pointer;flex:none}
  .barre-jour{padding:8px}
  .barre-jour .milieu{flex:1;text-align:center;line-height:1.05}
  .barre-jour .quand{font-size:13px;font-weight:700;opacity:.95}
  .barre-jour .tot{font-size:46px;font-weight:800;letter-spacing:-2px;margin:1px 0}
  .barre-jour .tot-lib{font-size:13px;font-weight:600;opacity:.95}
  .barre-jour .premier{font-size:12px;margin-top:5px;background:rgba(255,255,255,.22);
                       border-radius:20px;padding:3px 10px;display:inline-block}
  .barre-jour .premier b{font-size:14px}
  /* --- bloc boulangerie (une seule ligne) --- */
  .boulangerie{padding:8px 10px;margin-bottom:0;display:flex;align-items:center;gap:9px}
  .boulangerie.faite{background:var(--vert-clair);border-color:#bfe3cd}
  .boul-haut{display:flex;align-items:center;gap:9px;cursor:pointer;flex:1;min-width:0}
  .case{width:28px;height:28px;border-radius:9px;border:2px solid #cfcac2;background:#fff;flex:none;
        display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff}
  .case.cochee{background:var(--vert);border-color:var(--vert)}
  .boul-txt{flex:1;min-width:0}
  .boul-titre{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .boul-sous{font-size:11px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .boul-qui{display:flex;align-items:center;gap:5px;flex:none}
  .boul-qui span{font-size:11px;color:var(--gris);font-weight:600}
  .boul-qui select{padding:6px 4px;border-radius:9px;border:2px solid var(--bord);max-width:96px;
                   font-size:13px;font-weight:700;background:#fff;color:var(--texte)}
  /* --- l'accueil ne défile jamais : les 9 lignes se partagent la place --- */
  .ecran.accueil{overflow:hidden}
  .ecran.accueil .contenu{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:72px}
  #liste-jour{flex:1;min-height:0;display:flex}
  #liste-jour>.carte{flex:1;display:flex;flex-direction:column;overflow:hidden;margin-bottom:0}
  #liste-jour .ligne-logement{flex:1;min-height:34px;padding:0}
  /* --- liste compacte des 9 logements (tient sans scroller) --- */
  .ligne-logement{display:flex;align-items:center;gap:10px;padding:7px 0;min-height:41px;
                  border-bottom:1px solid var(--bord);cursor:pointer}
  .ligne-logement:last-child{border-bottom:none}
  .lg-code{font-size:14px;font-weight:800;min-width:70px;flex:none}
  .lg-nom{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg-nom.long{font-size:13px}      /* noms un peu longs */
  .lg-nom.tres-long{font-size:11.5px;letter-spacing:-.2px}   /* noms à rallonge */
  .lg-cpt{min-width:40px;height:31px;border-radius:10px;background:var(--orange);color:#fff;flex:none;
          display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
  .lg-cpt.zero{background:#f0efec;color:#b5b2ac}   /* aucun petit déj : zéro, pas d'alerte */
  .lg-etat{font-size:12px;color:var(--gris);flex:none}
  .lg-heure{font-size:14px;font-weight:700;color:var(--bleu);flex:none;min-width:44px;text-align:right}
  .lg-heure.sans{color:var(--rouge);font-weight:800}
  .ligne-logement.libre .lg-code,.ligne-logement.libre .lg-nom{color:#b5b2ac;font-weight:600}
  /* --- sélecteur d'heure (écran séjour) --- */
  .sel-heure{border:2px solid var(--bord);border-radius:10px;padding:6px 4px;font-size:13px;font-weight:700;
             background:#fff;color:var(--bleu);flex:none;width:78px}
  .sel-heure.vide{color:var(--rouge);border-color:#f0cfcf}
  .pastille-demain{background:var(--orange);color:#fff;font-size:10px;font-weight:800;
                   border-radius:10px;padding:2px 6px;margin-left:6px;vertical-align:middle}
  /* --- séjours --- */
  .carte-sejour{cursor:pointer}
  .carte-sejour .haut{display:flex;align-items:center;gap:10px}
  .carte-sejour .nom{font-weight:800;font-size:17px;flex:1}
  .badge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap}
  .badge.paye{background:var(--vert-clair);color:var(--vert)}
  .badge.apayer{background:var(--rouge-clair);color:var(--rouge)}
  .badge.partiel{background:#fff4e0;color:#c07b16}
  .badge.encours{background:var(--bleu-clair);color:var(--bleu)}
  .carte-sejour .dates{font-size:14px;color:var(--gris);margin-top:4px}
  .carte-sejour .resume-pd{font-size:14px;margin-top:6px;font-weight:600}
  /* --- détail séjour --- */
  .entete-invite{display:flex;align-items:center;gap:12px}
  .avatar{width:54px;height:54px;border-radius:50%;background:var(--orange-clair);color:var(--orange);
          display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex:none}
  .entete-invite .nom{font-size:19px;font-weight:800}
  .entete-invite .dates{font-size:13px;color:var(--gris);margin-top:2px}
  .entete-invite a.lien-tel{font-size:14px;color:var(--vert);font-weight:700;text-decoration:none;margin-top:2px;display:inline-block}
  .ligne-jour{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--bord)}
  .ligne-jour:last-child{border-bottom:none}
  .ligne-jour .lib-jour{flex:1}
  .ligne-jour .lib-jour .j{font-weight:700;font-size:15px;text-transform:capitalize}
  .btn-pm{width:40px;height:40px;border-radius:12px;border:none;font-size:24px;font-weight:700;cursor:pointer;line-height:1}
  .btn-moins{background:#f0efec;color:#6b6b6b}
  .btn-plus{background:var(--orange);color:#fff}
  .nb-jour{min-width:32px;text-align:center;font-size:20px;font-weight:800}
  /* --- total + paiements --- */
  .bandeau-total{display:flex;justify-content:space-between;align-items:center;background:#2b2b2b;color:#fff;
                 border-radius:14px;padding:11px 14px;font-size:14px;margin-bottom:2px}
  .bandeau-total b{font-size:20px}
  .ligne-paiement{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bord);font-size:14px}
  .ligne-paiement:last-child{border-bottom:none}
  .ligne-paiement.vide{color:var(--gris);justify-content:center;font-style:italic;padding:10px 0}
  .pm-ico{font-size:17px}
  .pm-mode{font-weight:700;flex:1}
  .pm-date{color:var(--gris);font-size:13px}
  .pm-montant{color:var(--vert);font-size:16px;min-width:72px;text-align:right}
  .pm-suppr{border:none;background:none;color:#c6c2bb;font-size:16px;cursor:pointer;padding:0 2px}
  .bandeau-reste{display:flex;justify-content:space-between;align-items:center;background:var(--rouge-clair);
                 color:var(--rouge);border-radius:14px;padding:12px 14px;font-size:15px;font-weight:700}
  .bandeau-reste b{font-size:22px}
  .bandeau-solde{background:var(--vert-clair);color:var(--vert);border-radius:14px;padding:14px;
                 text-align:center;font-size:17px;font-weight:800}
  .modes-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .mode.inactif{opacity:.35;cursor:not-allowed;background:#f4f2ee}
  .mode{padding:8px 2px;border-radius:11px;border:2px solid var(--bord);background:var(--carte);
        font-size:11px;font-weight:700;cursor:pointer;text-align:center;line-height:1.35}
  .mode.choisi{border-color:var(--orange);background:var(--orange-clair);color:var(--orange)}
  .champ-montant{display:flex;align-items:center;gap:8px;margin-top:10px}
  .champ-montant input{flex:1;min-width:0;padding:11px;border-radius:12px;border:2px solid var(--bord);
                       font-size:17px;font-weight:700;text-align:right}
  .champ-montant span{font-size:16px;font-weight:700}
  .btn-encaisser{background:var(--vert);color:#fff;border:none;border-radius:12px;padding:12px 20px;
                 font-size:16px;font-weight:800;cursor:pointer;flex:none}
  .aide-champ{font-size:11px;color:var(--gris);text-align:right;margin-top:5px}
  .btn-large{width:100%;padding:15px;border-radius:14px;border:none;font-size:16px;font-weight:800;cursor:pointer;margin-top:4px}
  .btn-vert{background:var(--vert);color:#fff}
  .btn-orange{background:var(--orange);color:#fff}
  .btn-blanc{background:var(--carte);border:2px solid var(--bord);color:var(--texte);margin-top:8px}
  /* --- écran paiements --- */
  .bloc-resume{background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:12px;text-align:center}
  .bloc-resume .rp-val{font-size:36px;font-weight:800;letter-spacing:-1px;line-height:1.1}
  .bloc-resume .rp-lib{font-size:12px;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .bloc-resume.alerte{background:var(--jaune);border-color:#d9e000}
  .bloc-resume.alerte .rp-val{color:#3d3d00}
  .bloc-resume.alerte .rp-lib{color:#6b6b00}
  .bloc-resume.ok .rp-val{color:var(--vert)}
  .ligne-paie{display:flex;align-items:center;gap:10px;padding:10px 12px;
              border-bottom:1px solid var(--bord);cursor:pointer}
  .ligne-paie:last-child{border-bottom:none}
  .ligne-paie.impaye{background:var(--jaune);border-left:5px solid #d9e000;padding-left:9px}
  .paie-qui{flex:1;min-width:0}
  .paie-nom{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .paie-nom.long{font-size:13.5px}
  .paie-nom.tres-long{font-size:12px;letter-spacing:-.2px}
  .paie-det{font-size:11.5px;color:var(--gris);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ligne-paie.impaye .paie-det{color:#6b6b00}
  .paie-souhait{font-size:11.5px;font-weight:700;color:#6b6b00;margin-top:2px}
  .paie-montant{flex:none;text-align:right}
  .paie-du{font-size:16px;font-weight:800}
  .paie-etat{font-size:11px;font-weight:800;margin-top:2px}
  .paie-etat.ok{color:var(--vert)}
  .paie-etat.impaye{color:#8a7500}
  /* --- souhait de paiement annoncé par le client --- */
  .souhait{display:flex;align-items:center;gap:9px;background:var(--bleu-clair);border-radius:12px;
           padding:9px 12px;font-size:13px;margin-bottom:8px}
  .souhait b{color:var(--bleu)}
  /* --- journal / réglages --- */
  .entree-journal{padding:10px 4px;border-bottom:1px solid var(--bord);font-size:14px}
  .entree-journal:last-child{border-bottom:none}
  .entree-journal .quand{font-size:12px;color:var(--gris);margin-bottom:2px}
  .ligne-reglage{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--bord)}
  .ligne-reglage:last-child{border-bottom:none}
  .ligne-reglage .lib{flex:1;font-weight:600;font-size:15px}
  .ligne-reglage input{width:80px;padding:9px;border-radius:10px;border:2px solid var(--bord);font-size:16px;font-weight:700;text-align:right}
  .note-api{font-size:13px;color:var(--gris);line-height:1.5}
  /* --- vue client QR --- */
  .entete-client{background:linear-gradient(135deg,#e8752a,#d05a10);color:#fff;border-radius:18px;padding:18px;text-align:center;margin-bottom:12px}
  .entete-client .bienvenue{font-size:14px;opacity:.9}
  .entete-client .logement{font-size:24px;font-weight:800;margin-top:2px}
  .confirme-nom{display:flex;align-items:center;gap:10px}
  .confirme-nom .avatar{width:46px;height:46px;font-size:17px}
  .confirme-nom .txt{flex:1}
  .confirme-nom .txt .q{font-size:12px;color:var(--gris)}
  .confirme-nom .txt .n{font-size:17px;font-weight:800}
  /* --- barre d'onglets --- */
  .tabbar{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
          border-top:1px solid var(--bord);display:flex;padding:8px 0 18px}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
       font-size:11px;font-weight:700;color:var(--gris);cursor:pointer}
  .tab .ico{font-size:22px}
  .tab.actif{color:var(--orange)}
  .toast{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);background:#333;color:#fff;
         padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;z-index:20}
  .toast.visible{opacity:1}

  /* ---- liens : neutraliser le style par défaut du navigateur ----
     (la feuille du navigateur cible a:-webkit-any-link, plus spécifique qu'une classe) */
  a.tab, a.tab:visited{color:var(--gris);text-decoration:none}
  a.tab.actif{color:var(--orange)}
  a.retour, a.retour:visited{text-decoration:none}
  a.lien-tel, a.lien-tel:visited{text-decoration:none}
  .barre-jour .bouton-jour{width:44px;height:50px;border-radius:12px;flex:none;
    background:rgba(255,255,255,.22);color:#fff;font-size:17px;font-weight:800;
    display:flex;align-items:center;justify-content:center;text-decoration:none}
  .barre-jour .bouton-jour:visited{color:#fff}
  /* jour de séjour : jamais de retour à la ligne, les lignes restent compactes */
  .ligne-jour .lib-jour{white-space:nowrap}
  .ligne-jour .lib-jour .j{text-transform:capitalize}
  /* la ligne d'un jour ne doit jamais pousser le bouton « + » hors de l'écran */
  .ligne-jour{gap:8px}
  .ligne-jour .lib-jour{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .sel-heure{width:74px}
  /* les boutons + et − ne se laissent jamais écraser par un libellé trop long */
  .ligne-jour .btn-pm{flex:none}
  .ligne-jour .nb-jour{flex:none}
  .ligne-jour .lib-jour{min-width:0}
  /* le libellé se tronque, mais la pastille « demain » reste toujours visible */
  .ligne-jour .lib-jour{display:flex;align-items:center;gap:6px}
  .ligne-jour .lib-jour .j{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .ligne-jour .pastille-demain{flex:none;margin-left:0}
  .ligne-jour .j.est-demain{color:var(--orange)}
  /* --- champs de formulaire (connexion, installation) --- */
  .champ-texte{width:100%;padding:12px;border-radius:12px;border:2px solid var(--bord);
               font-size:16px;background:#fff;color:var(--texte)}
  .champ-texte:focus{outline:none;border-color:var(--orange)}
  .btn-large.btn-vert{background:var(--vert);color:#fff;border:none}
  /* la règle .ligne-reglage input{width:80px} ne doit pas écraser les champs de formulaire */
  .ligne-reglage .champ-texte{width:100%}
  /* --- accueil : nom + arrivant du jour, téléphones cliquables --- */
  .lg-qui{flex:1;min-width:0}
  .lg-arrivant{font-size:11px;color:var(--bleu);font-weight:700;white-space:nowrap;
               overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .lg-tel{width:34px;height:34px;border-radius:50%;background:var(--vert-clair);flex:none;
          display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none}
  .lg-cpt.aucun{background:var(--vert-clair);color:var(--vert)}   /* zéro confirmé auprès du client */
  .boul-tel{width:34px;height:34px;border-radius:50%;background:var(--vert-clair);flex:none;
            display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none}
  /* --- « pas de petit déjeuner », confirmé auprès du client --- */
  .btn-aucun{width:34px;height:40px;border-radius:12px;border:2px solid var(--bord);background:#fff;
             color:#c6c2bb;font-size:16px;font-weight:800;cursor:pointer;flex:none;padding:0}
  .btn-aucun.confirme{background:var(--vert-clair);border-color:var(--vert);color:var(--vert)}
  .ligne-jour.sans-pdj .nb-jour{color:#b5b2ac}
  .ligne-jour{gap:6px}
  .sel-heure{width:70px}
  /* --- reste à encaisser, visible d'un coup d'œil --- */
  .lg-du{width:30px;height:30px;border-radius:50%;background:var(--rouge);color:#fff;flex:none;
         display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
         text-decoration:none;animation:pulse-du 2.4s ease-in-out infinite}
  @keyframes pulse-du{0%,100%{opacity:1}50%{opacity:.55}}
  @media (prefers-reduced-motion: reduce){ .lg-du{animation:none} }
  .lg-part{font-size:11px;color:var(--gris);font-weight:600;margin-top:1px}
  .paie-du-rouge{color:var(--rouge);font-weight:800}
  /* --- recherche et filtres de l'écran Paiements --- */
  .recherche-paie{display:flex;gap:8px;margin:10px 0 8px}
  .btn-chercher{border:none;border-radius:12px;background:var(--orange);color:#fff;
                font-size:17px;padding:0 16px;cursor:pointer;flex:none}
  .filtres-paie{display:flex;gap:6px;flex-wrap:wrap}
  .filtre{padding:6px 12px;border-radius:20px;background:var(--carte);border:1px solid var(--bord);
          font-size:13px;font-weight:700;color:var(--gris);text-decoration:none}
  .filtre.actif{background:var(--orange);border-color:var(--orange);color:#fff}
  .paie-euro{width:28px;height:28px;border-radius:50%;background:var(--rouge);color:#fff;flex:none;
             display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
  /* --- copie d'essai locale : impossible de la confondre avec le site en ligne --- */
  .bandeau-essai{background:#7b3fa0;color:#fff;font-size:11px;font-weight:800;text-align:center;
                 padding:4px;letter-spacing:.5px;flex:none}