/* Liaison HP Cleaning — charte HP Cleaning (bleu nuit, turquoise), mobile d'abord */
:root{
  --bleu-nuit:#0a2f57; --turquoise:#6ac3c9; --sarcelle:#0b6a78; --turquoise-eau:#12a3ad;
  --vert:#1e8a55; --vert-fond:#e3f4ea; --alerte:#b4472f; --alerte-fond:#fbece7; --attente:#9a6a00; --attente-fond:#fdf3dc;
  --ciel:#eaf4fb; --fond-doux:#f2f7fb; --fond:#ffffff; --texte:#10263d; --texte-secondaire:#51677c; --texte-sur-fonce:#c3d6e8; --filet:#d5e3ee;
  --bulle-moi:#0b6a78; --bulle-moi-texte:#ffffff;
  --f-titres:"Outfit","Segoe UI",system-ui,sans-serif; --f-texte:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --sarcelle:#7fd3d8; --turquoise-eau:#6ac3c9; --vert:#3fbf7f; --vert-fond:#123526; --alerte:#f08a70; --alerte-fond:#3a1f1a; --attente:#f0c35a; --attente-fond:#33290f;
  --ciel:#0f2740; --fond-doux:#0d2036; --fond:#08172a; --texte:#e6eef6; --texte-secondaire:#9fb4c9; --filet:#1c3550; --bulle-moi:#12a3ad; --bulle-moi-texte:#04131f; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond-doux);color:var(--texte);font:16px/1.5 var(--f-texte);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.band{background:var(--bleu-nuit);color:#fff;padding-top:env(safe-area-inset-top,0px)}
header.band .wrap{padding-block:16px 14px;display:grid;gap:12px}
.tete{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.logo{font:600 26px/1 var(--f-titres);letter-spacing:-.01em}
.logo .hp{color:var(--turquoise)} .logo .cl{color:#fff}
.logo .i{position:relative;display:inline-block}
.logo .i svg{position:absolute;left:50%;top:-.42em;width:.5em;height:.5em;transform:translateX(-50%)}
.signature{font:500 10px var(--f-titres);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-sur-fonce);margin-top:7px}
.tete-droite{font-size:14px;color:var(--texte-sur-fonce);text-align:right}
.tete-droite button{background:none;border:0;color:var(--texte-sur-fonce);font:600 14px var(--f-texte);text-decoration:underline;cursor:pointer;padding:0}
.onglets{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:14px;padding:4px;overflow-x:auto}
.onglet{flex:1;font:600 15px var(--f-titres);color:var(--texte-sur-fonce);background:none;border:0;border-radius:11px;padding:9px 10px;cursor:pointer;white-space:nowrap;display:flex;gap:6px;justify-content:center;align-items:center}
.onglet[aria-current="page"]{background:#fff;color:var(--bleu-nuit)}
.badge{font:700 12px var(--f-texte);background:#e0573c;color:#fff;border-radius:999px;padding:0 7px;min-width:20px;text-align:center}
main{padding-block:20px 60px;display:grid;gap:16px}
.surtitre{font:500 12px var(--f-titres);letter-spacing:.14em;text-transform:uppercase;color:var(--sarcelle);margin:0 0 6px}
h1,h2{font-family:var(--f-titres);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:22px} h2{font-size:18px}
.carte{background:var(--fond);border:1px solid var(--filet);border-radius:16px}
.pad{padding:16px 18px}
.pile{display:grid;gap:12px}
.sous{color:var(--texte-secondaire);font-size:14px}
.note{font-size:14px;color:var(--texte-secondaire);background:var(--ciel);border:1px solid var(--filet);border-radius:12px;padding:10px 14px;margin:0}
label.champ{display:grid;gap:5px;font-size:14px;font-weight:600;color:var(--texte-secondaire)}
select,input,textarea{font:400 16px var(--f-texte);color:var(--texte);background:var(--fond);border:1px solid var(--filet);border-radius:10px;padding:9px 11px;width:100%;max-width:100%}
textarea{min-height:84px;resize:vertical}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--turquoise-eau);outline-offset:2px}
.btn{font:700 15px var(--f-texte);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;background:var(--vert);color:#fff;display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none}
.btn.sec{background:var(--ciel);color:var(--texte);border:1px solid var(--filet)}
.btn.bleu{background:var(--bleu-nuit);color:#fff}
.btn.danger{background:none;color:var(--alerte);border:1px solid var(--alerte)}
.btn.petit{font-size:14px;padding:6px 13px}
.btn.plein{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cat{font:600 15px var(--f-texte);text-align:left;border:1.5px solid var(--filet);background:var(--fond);color:var(--texte);border-radius:14px;padding:12px;cursor:pointer;display:grid;gap:2px}
.cat small{font-weight:400;font-size:13px;color:var(--texte-secondaire)}
.cat[aria-pressed="true"]{border-color:var(--sarcelle);background:var(--ciel)}
.ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.entre{justify-content:space-between}
.case{display:flex;gap:8px;align-items:center;font-weight:600;font-size:15px}
.case input{width:20px;height:20px;accent-color:var(--alerte)}
.apercu{max-width:120px;border-radius:10px;border:1px solid var(--filet)}
.erreur{color:var(--alerte);font-size:14px;font-weight:600;margin:0}
.liste{display:grid;gap:10px}
.dem{overflow:hidden}
.dem-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px;background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.dem-tete:hover{background:var(--fond-doux)}
.dem.nouvelle{box-shadow:0 0 0 2px var(--turquoise-eau)}
.dem.urgente{border-left:5px solid var(--alerte)}
.titre-dem{font:600 16px var(--f-titres);overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.s-envoye{color:var(--alerte);background:var(--alerte-fond)}
.s-vu{color:var(--attente);background:var(--attente-fond)}
.s-regle{color:var(--vert);background:var(--vert-fond)}
.s-transmis{color:var(--sarcelle);background:var(--ciel)}
.tag{font:700 11px var(--f-titres);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-secondaire);border:1px solid var(--filet);border-radius:6px;padding:1px 6px}
.tag.urg{color:var(--alerte);border-color:var(--alerte)}
.fil{border-top:1px solid var(--filet);background:var(--fond-doux);padding:14px 16px;display:grid;gap:10px}
.msgs{display:grid;gap:8px}
.msg{max-width:85%;padding:8px 12px;border-radius:14px;background:var(--fond);border:1px solid var(--filet);font-size:15px;overflow-wrap:anywhere}
.msg.moi{justify-self:end;background:var(--bulle-moi);color:var(--bulle-moi-texte);border-color:transparent}
.msg .auteur{display:block;font:700 11px var(--f-titres);letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:2px}
.msg img{display:block;max-width:240px;border-radius:10px;margin-top:6px}
.repondre{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{padding:12px 14px}
.kpi b{display:block;font:600 24px var(--f-titres);font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;font-weight:600;color:var(--texte-secondaire)}
.kpi.alerte b{color:var(--alerte)}
.filtres{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 14px var(--f-texte);border:1px solid var(--filet);background:var(--fond);color:var(--texte);border-radius:999px;padding:5px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--bleu-nuit);border-color:var(--bleu-nuit);color:#fff}
.vide{padding:28px 18px;text-align:center;color:var(--texte-secondaire)}
.tableau{width:100%;border-collapse:collapse;font-size:15px}
.tableau th{text-align:left;font:500 12px var(--f-titres);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-secondaire);padding:8px;border-bottom:1px solid var(--filet)}
.tableau td{padding:8px;border-bottom:1px solid var(--filet);vertical-align:middle}
.defile{overflow-x:auto}
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(440px,calc(100% - 32px));background:var(--bleu-nuit);color:#fff;border-radius:16px;padding:12px 16px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.3);cursor:pointer}
.toast b{display:block;font:600 15px var(--f-titres)}
.toast span{font-size:14px;color:var(--texte-sur-fonce)}
footer{color:var(--texte-secondaire);font-size:13px;padding-block:0 32px}
@media (max-width:560px){.tete-droite{text-align:left}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.repondre{grid-template-columns:minmax(0,1fr) auto}.repondre .photo-btn{grid-column:1/-1;justify-self:start}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Planche de QR codes à imprimer (A6) */
.planche{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.qr-carte{background:#fff;color:#10263d;border:1px solid #d5e3ee;border-radius:14px;padding:18px;display:grid;gap:10px;justify-items:center;text-align:center;break-inside:avoid}
.qr-carte .qr-logo{font:600 22px/1 "Outfit",sans-serif}
.qr-carte .qr-logo .hp{color:#0b6a78}
.qr-carte h3{font:600 17px "Outfit",sans-serif;margin:0}
.qr-carte p{margin:0;font-size:13px;color:#51677c}
.qr-carte .qr-img{width:170px;height:170px}
.qr-carte .qr-img img,.qr-carte .qr-img svg{width:100%;height:100%}
.qr-carte .qr-pied{font-size:11px;color:#51677c}
@media print{
  header.band,.pas-imprimer,footer{display:none!important}
  body{background:#fff}
  main{padding:0}
  .planche{grid-template-columns:repeat(2,1fr);gap:8mm}
  .qr-carte{border:1px dashed #9fb4c9;border-radius:0;min-height:138mm}
}