:root { --vert:#0b5d2a; --vert-clair:#e6f2ea; --rouge:#b00020; --jaune:#7a5b00; --gris:#5a5f66; --bord:#cfd6d2; --fond:#f6f8f7; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fond); color:#14181b;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.saut { position:absolute; left:-999px; } .saut:focus { left:8px; top:8px; background:#fff; padding:8px; z-index:10; }
.entete { display:flex; align-items:center; gap:12px; background:var(--vert); color:#fff; padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.compteurs { flex:0 0 auto !important; display:flex; gap:8px; }
.compteur { position:relative; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 14px 6px 10px; font-weight:700; font-size:14px; text-decoration:none; min-height:36px; }
.compteur svg { flex:0 0 22px; }
/* Pastille rouge posée sur l'icône : rouge foncé + bord blanc (contraste), chiffre toujours lu, jamais la couleur seule. */
.compteur .pastille { position:absolute; top:-7px; left:22px; background:#b3261e; color:#fff; border:2px solid #fff; border-radius:999px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1; font-weight:800; }
.compteur.courant { background:#fff; color:#0b5d2a; }
.compteur.courant .pastille { border-color:#0b5d2a; }
.compteur.nouveau { animation:compteur-pulse 1s ease-in-out 3; }
.compteur .pastille.vide { visibility:hidden; }
.badge.statut-nouvelle { background:#b3261e; color:#fff; }
.badge.statut-consultee { background:#8a5a00; color:#fff; }
.badge.statut-traitee { background:#2e7d32; color:#fff; }
@keyframes compteur-pulse { 50% { transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .compteur.nouveau { animation:none; } }
@media (max-width: 480px) { .compteur-libelle { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .compteur { padding:6px 10px; } }
/* Petit écran : l'en-tête passe à la ligne (titre, puis compteurs et déconnexion) au lieu de déborder de la page. */
@media (max-width:560px) {
  .entete { flex-wrap:wrap; row-gap:8px; }
  .entete > div:not(.compteurs) { flex:1 1 140px; min-width:0; }
  .compteurs { flex-wrap:wrap; }
  #deconnexion { margin-left:auto; }
}
.entete small { display:block; opacity:.9; font-size:12px; } .entete div { flex:1; }
.menu { display:flex; gap:6px; overflow-x:auto; padding:8px 10px; background:#fff; border-bottom:1px solid var(--bord); }
.menu a { white-space:nowrap; padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--vert); border:1px solid var(--bord); min-height:44px; display:inline-flex; align-items:center; }
.menu a[hidden] { display:none; }
.menu a[aria-current="page"] { background:var(--vert); color:#fff; border-color:var(--vert); }
main { max-width:960px; margin:0 auto; padding:14px; outline:none; }

/* Connexion : affiche officielle à gauche, formulaire à droite. Mise en page fluide (clamp) et sans rognage. */
body:has(.connexion-layout) {
  background:
    radial-gradient(900px 520px at 8% -5%, rgba(11, 93, 42, .18), transparent 60%),
    radial-gradient(700px 480px at 100% 100%, rgba(122, 91, 0, .12), transparent 60%),
    linear-gradient(180deg, #f3f9f5 0%, #eef5f0 100%);
  background-attachment:fixed;
}
main:has(> .connexion-layout) { max-width:min(1360px, 100%); padding-inline:clamp(10px, 2.5vw, 32px); }
.connexion-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(300px, 1fr);
  align-items:center;
  gap:clamp(18px, 3vw, 44px);
  width:100%;
  margin:clamp(10px, 4vh, 48px) auto;
}
.connexion-visuel, .connexion-formulaire {
  position:relative; min-width:0; margin:0; background:#fff;
  border:1px solid rgba(11, 93, 42, .14);
  border-radius:clamp(14px, 1.8vw, 24px);
  animation:connexion-entree .6s cubic-bezier(.2, .7, .2, 1) both;
}
/* Liseré tricolore (vert, jaune, rouge) en haut de chaque carte. */
.connexion-visuel::before, .connexion-formulaire::before {
  content:""; position:absolute; inset:0 0 auto 0; height:6px; z-index:1;
  background:linear-gradient(90deg, #0b5d2a 0 60%, #f2b705 60% 80%, #b00020 80% 100%);
}
.connexion-visuel {
  overflow:hidden; padding-top:6px;
  box-shadow:0 2px 4px rgba(13, 50, 31, .06), 0 24px 60px rgba(13, 50, 31, .22);
  transition:transform .35s ease, box-shadow .35s ease;
}
.connexion-visuel img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#fff; }
.connexion-formulaire {
  overflow:hidden; padding:clamp(24px, 3vw, 40px);
  padding-top:clamp(28px, 3.2vw, 44px);
  box-shadow:0 2px 4px rgba(13, 50, 31, .06), 0 24px 60px rgba(13, 50, 31, .16);
  animation-delay:.12s;
}
.connexion-logo {
  display:block; width:clamp(56px, 6.5vw, 76px); height:auto; margin:0 0 12px;
  padding:3px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px var(--vert-clair), 0 8px 20px rgba(11, 93, 42, .25);
}
.connexion-formulaire h1 { color:var(--vert); margin:0; font-size:clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-.01em; }
.connexion-sous-titre { margin:.3em 0 .8em; color:var(--gris); }
.connexion-formulaire input { border-radius:10px; border-color:#9fb0a6; transition:border-color .2s, box-shadow .2s; }
.connexion-formulaire input:hover { border-color:var(--vert); }
.connexion-formulaire input:focus { border-color:var(--vert); box-shadow:0 0 0 4px rgba(11, 93, 42, .15); }
.connexion-mdp { display:flex; gap:8px; align-items:stretch; }
.connexion-mdp input { flex:1; min-width:0; }
.connexion-voir { flex:none; min-width:96px; border-radius:10px; }
.connexion-formulaire .actions { margin-top:22px; }
.connexion-formulaire .actions button:not(.secondaire) {
  width:100%; min-height:50px; font-size:1.05rem; border:0; border-radius:12px; letter-spacing:.02em;
  background:linear-gradient(135deg, #0f7a37 0%, #0b5d2a 55%, #08481f 100%);
  box-shadow:0 10px 22px rgba(11, 93, 42, .35);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.connexion-formulaire .actions button:not(.secondaire):hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 14px 28px rgba(11, 93, 42, .4); }
.connexion-formulaire .actions button:not(.secondaire):active { transform:translateY(0); box-shadow:0 6px 14px rgba(11, 93, 42, .35); }
/* Bouton secondaire du formulaire (ex. « Se déconnecter » pendant le changement de mot de passe) : fond blanc, texte et bord verts. */
.connexion-formulaire .actions button.secondaire {
  width:100%; min-height:50px; font-size:1.05rem; border-radius:12px; border:2px solid var(--vert);
  background:#fff; color:var(--vert); box-shadow:none;
}
.connexion-formulaire .actions button.secondaire:hover { background:var(--vert-clair); }
.connexion-formulaire .actions + .actions { margin-top:12px; }
.connexion-atouts { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; list-style:none; margin:20px 0 0; padding:0; }
.connexion-atouts li { padding:5px 12px; border-radius:999px; background:var(--vert-clair); color:var(--vert); font-size:12.5px; font-weight:600; }
.connexion-atouts li::before { content:"✓ "; }
.connexion-note { margin:14px 0 0; font-size:13px; color:var(--gris); text-align:center; }
@keyframes connexion-entree { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (hover:hover) { .connexion-visuel:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(13, 50, 31, .06), 0 30px 70px rgba(13, 50, 31, .28); } }
@media (prefers-reduced-motion:reduce) {
  .connexion-visuel, .connexion-formulaire, .connexion-formulaire .actions button { animation:none; transition:none; }
  .connexion-visuel:hover { transform:none; }
}
@media (max-width:1000px) { .connexion-layout { grid-template-columns:minmax(0, 1.3fr) minmax(280px, 1fr); } }
@media (max-width:760px) {
  .connexion-layout { grid-template-columns:minmax(0, 1fr); gap:16px; margin:6px auto 20px; }
  .connexion-formulaire { padding:22px 18px; }
}
@media (max-width:380px) {
  .connexion-layout { gap:12px; }
  .connexion-formulaire { padding:18px 14px; }
  .connexion-mdp { flex-direction:column; }
  .connexion-voir { width:100%; }
}
h1 { font-size:1.3rem; margin:.2em 0 .6em; } h2 { font-size:1.1rem; margin:1em 0 .4em; }
.carte { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:14px; margin:0 0 12px; }
label { display:block; font-weight:600; margin:10px 0 4px; }
input, select, textarea { width:100%; min-height:44px; padding:8px 10px; font:inherit; border:1px solid #8a948f; border-radius:8px; background:#fff; }
button { min-height:44px; padding:8px 16px; font:inherit; font-weight:600; border-radius:8px; border:1px solid var(--vert); background:var(--vert); color:#fff; cursor:pointer; }
button.secondaire { background:#fff; color:var(--vert); } button:disabled { opacity:.55; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #ffb300; outline-offset:2px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.etat { padding:12px; border-radius:10px; font-weight:600; margin:10px 0; }
.etat.ok { background:#e3f4e8; color:#0b5d2a; } .etat.ko { background:#fde7ea; color:var(--rouge); } .etat.attention { background:#fff4d6; color:var(--jaune); }
.tableau { overflow-x:auto; } table { border-collapse:collapse; width:100%; font-size:14px; } th, td { border-bottom:1px solid var(--bord); padding:6px 8px; text-align:left; white-space:nowrap; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#eee; }
.badge.erreur { background:#fde7ea; color:var(--rouge); } .badge.avertissement { background:#fff4d6; color:var(--jaune); }
.note { color:var(--gris); font-size:14px; }
video { width:100%; max-height:260px; background:#000; border-radius:8px; }
code.jeton { display:block; word-break:break-all; font-size:12px; background:#f0f2f1; padding:8px; border-radius:6px; }

/* QR dynamique : contraste élevé et dimension confortable à l'impression/lecture mobile. */
.qr-carte { display: grid; justify-items: center; gap: 0.75rem; }
.qr-image { display: block; width: min(80vw, 320px); height: auto; background: #fff; padding: 0.5rem; border-radius: 0.5rem; image-rendering: pixelated; }

/* Créateur de badges professionnels avec photo au recto et QR code au verso. */
.form-creation-badge { border-top:4px solid var(--vert); }
.form-badge-grille, .filtres-badges { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 14px; }
.form-badge-grille label, .filtres-badges label { margin-top:4px; }
.champ-photo-badge { grid-column:1 / -1; }
.champ-photo-badge input[type="file"] { padding:8px; }
.miniature-photo-agent { width:70px; height:88px; object-fit:cover; border:1px solid var(--bord); border-radius:6px; margin-top:4px; }
.note-avertissement { background:#fff8e7; border-left:4px solid #a36a00; border-radius:8px; padding:10px 14px; margin:12px 0; }
.note-avertissement p { margin:4px 0 0; }
.grille-badges { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start; }
.badge-imprimable { min-width:0; background:transparent; border:0; border-radius:0; padding:0; min-height:0; display:flex; flex-direction:column; gap:6px; break-inside:avoid; }
.controle-selection { display:flex; align-items:center; min-height:32px; }
.controle-selection label { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--gris); cursor:pointer; }
.controle-selection input { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--vert); }
.badge-paire-apercu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
/* Badge CR80 (86 × 54 mm). Toutes les tailles sont en cqw : la carte garde les mêmes proportions à l'écran, en PDF et à l'impression. */
.badge-visuel {
  container-type:size; position:relative; overflow:hidden; display:flex; flex-direction:column;
  width:100%; aspect-ratio:86 / 54; min-height:0; padding:0;
  border:1px solid #c3d0c8; border-radius:3.2% / 5.1%; background:#fff; color:#14241a;
  box-shadow:0 2px 4px rgba(16, 45, 26, .08), 0 10px 24px rgba(16, 45, 26, .14);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.badge-demo .badge-visuel { filter:grayscale(.25); }
.filigrane-demo { position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-20deg); padding:1cqw 5cqw; border:.35cqw solid #b00020; background:rgba(255,255,255,.85); color:#b00020; font-size:6cqw; font-weight:900; letter-spacing:.1em; white-space:nowrap; pointer-events:none; }
/* ===== Design du badge : carte blanche, entête vert profond, filigrane du logo CHNUF en encre verte, pied de page vert ===== */
.badge-visuel { background:linear-gradient(160deg,#ffffff 0%,#f6faf7 100%); }
.badge-visuel > * { position:relative; z-index:1; }
/* Filigrane : logo de l'hôpital, monochrome, derrière le contenu (imprimé comme un élément image, pas un fond CSS). */
.badge-visuel > .badge-filigrane { position:absolute; z-index:0; display:block; height:auto; aspect-ratio:1; max-width:none; opacity:.1; pointer-events:none; user-select:none; }
.badge-recto > .badge-filigrane { width:64cqw; right:-9cqw; top:14cqw; }
.badge-verso > .badge-filigrane { width:62cqw; left:50%; top:6cqw; transform:translateX(-50%); opacity:.085; }
.badge-visuel > .filigrane-demo { position:absolute; z-index:4; }
/* Recto */
.badge-recto-entete { flex:0 0 17.5cqw; display:flex; align-items:center; gap:3cqw; padding:0 4.5cqw; color:#fff; overflow:hidden; background:linear-gradient(105deg,#052f16 0%,#0b5d2a 52%,#17924d 100%); }
/* Correctif mobile : l'ancien calque en dégradé transparent (rgba) s'imprimait en bandes noires/blanches dans le PDF des téléphones. Le fond vert opaque de l'entête suffit. */
.badge-recto-entete::before { content:none; }
.badge-recto-entete::after { content:""; position:absolute; inset:auto 0 0 0; height:.9cqw; background:linear-gradient(90deg, #e3bb4a 0 62%, #c8102e 62% 100%); }
.badge-recto-entete > * { position:relative; z-index:1; }
.badge-recto-entete img { flex:none; width:13cqw; height:13cqw; padding:.5cqw; border-radius:50%; background:#fff; object-fit:contain; box-shadow:0 0 0 .55cqw rgba(255,255,255,.3), 0 .8cqw 1.8cqw rgba(0,0,0,.28); }
.badge-recto-entete div { min-width:0; display:flex; flex-direction:column; gap:.9cqw; }
.badge-recto-entete strong { font-size:2.85cqw; line-height:1.18; letter-spacing:.035em; font-weight:800; text-wrap:balance; }
.badge-recto-entete small { font-size:2.5cqw; letter-spacing:.24em; font-weight:700; color:#f4dc8c; }
.badge-recto-corps { flex:1; min-height:0; display:flex; align-items:center; gap:4.8cqw; padding:2.4cqw 4.8cqw; }
.badge-photo { flex:none; width:26cqw; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:center top; border:.8cqw solid #fff; border-radius:2.2cqw; background:#e9f1ec; box-shadow:0 0 0 .5cqw #0b5d2a, 0 1.6cqw 3.2cqw rgba(8,60,28,.3); }
.badge-photo-vide { display:flex; justify-content:center; align-items:center; font-size:3cqw; font-weight:800; color:#66736a; }
.badge-recto-identite { min-width:0; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:1.1cqw; overflow:hidden; overflow-wrap:anywhere; }
.badge-nom, .badge-prenom, .badge-profession { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; }
.badge-nom { -webkit-line-clamp:2; color:#073d1b; font-size:6.2cqw; line-height:1.04; font-weight:850; letter-spacing:.005em; }
.badge-prenom { -webkit-line-clamp:2; color:#1b2b21; font-size:5.2cqw; line-height:1.1; font-weight:700; }
.badge-profession { -webkit-line-clamp:2; margin-top:.9cqw; padding:1cqw 2.6cqw; border-radius:1.5cqw; background:linear-gradient(100deg,#0b5d2a,#17924d); color:#fff; font-size:2.9cqw; line-height:1.2; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 .7cqw 1.5cqw rgba(11,93,42,.28); }
.badge-matricule { color:#4d5d54; font-size:2.7cqw; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.badge-recto-pied { flex:0 0 7cqw; display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:.9cqw 4.8cqw 0; overflow:hidden; background:linear-gradient(100deg,#052f16 0%,#0b5d2a 60%,#128044 100%); color:#fff; font-size:2.5cqw; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.badge-recto-pied::before { content:""; position:absolute; inset:0 0 auto 0; height:.9cqw; background:linear-gradient(90deg, #e3bb4a 0 62%, #c8102e 62% 100%); }
.badge-recto-pied span:last-child { color:#f4dc8c; letter-spacing:.16em; }
/* Verso */
.badge-verso-entete { flex:0 0 8.6cqw; display:flex; align-items:center; justify-content:space-between; padding:0 4.8cqw; background:linear-gradient(105deg,#052f16 0%,#0b5d2a 52%,#17924d 100%); color:#fff; font-size:3cqw; letter-spacing:.14em; }
.badge-verso-entete::after { content:""; position:absolute; inset:auto 0 0 0; height:.8cqw; background:linear-gradient(90deg, #e3bb4a 0 62%, #c8102e 62% 100%); }
.badge-verso-entete strong, .badge-verso-entete span { white-space:nowrap; }
.badge-verso-entete span { font-size:2.6cqw; font-weight:800; color:#f4dc8c; letter-spacing:.2em; }
.badge-verso-corps { flex:1; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:4cqw; padding:2.2cqw 4.8cqw; }
/* Verso : liste étiquetée (Nom, Prénom, Adresse, Tél.) à gauche, QR à droite. */
.badge-verso-identite { min-width:0; flex:1; align-self:stretch; margin:0; display:flex; flex-direction:column; justify-content:center; gap:.9cqw; overflow:hidden; overflow-wrap:anywhere; color:#14241a; font-size:3.1cqw; line-height:1.18; }
.badge-champ { display:grid; grid-template-columns:13.5cqw minmax(0,1fr); column-gap:1.8cqw; align-items:baseline; margin:0; padding-bottom:.9cqw; border-bottom:.22cqw solid rgba(11,93,42,.16); }
.badge-champ:last-child { border-bottom:0; padding-bottom:0; }
.badge-champ dt { margin:0; color:#0b5d2a; font-size:2.5cqw; font-weight:800; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.badge-champ dd { margin:0; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-weight:650; }
.badge-champ-nom dd { color:#073d1b; font-size:3.6cqw; font-weight:850; }
.badge-champ-prenom dd { font-size:3.3cqw; }
.badge-champ-adresse dd { -webkit-line-clamp:4; font-size:2.8cqw; font-weight:600; }
.badge-champ-telephone dd { -webkit-line-clamp:1; font-variant-numeric:tabular-nums; font-weight:750; }
.badge-champ-matricule dd { -webkit-line-clamp:1; font-size:2.7cqw; color:#4d5d54; font-variant-numeric:tabular-nums; }
.badge-champ-vide dd { color:#9aa79f; font-weight:500; }
.badge-qr-bloc { flex:none; width:33cqw; display:flex; flex-direction:column; align-items:center; gap:1cqw; }
.badge-qr-bloc small { font-size:2.5cqw; font-weight:700; color:#2f4a38; letter-spacing:.03em; text-align:center; line-height:1.15; }
.badge-qr-verso { display:block; width:100%; aspect-ratio:1; height:auto; padding:1.1cqw; object-fit:contain; background:#fff; border:.6cqw solid #0b5d2a; border-radius:2.2cqw; box-shadow:0 1.2cqw 2.6cqw rgba(8,60,28,.22); image-rendering:pixelated; }
.badge-verso-pied { flex:0 0 7.6cqw; display:flex; align-items:center; padding:.9cqw 4.8cqw 0; background:#e9f2ec; color:#3d5044; font-size:2.5cqw; line-height:1.2; }
.badge-verso-pied::before { content:""; position:absolute; inset:0 0 auto 0; height:.9cqw; background:linear-gradient(90deg, #0b5d2a 0 62%, #e3bb4a 62% 82%, #c8102e 82% 100%); }
.badge-imprimable { transition:transform .2s ease; }
.badge-imprimable.selectionnee .badge-visuel { outline:3px solid #138546; outline-offset:2px; }
@media (hover:hover) { .badge-imprimable:hover .badge-visuel { box-shadow:0 2px 4px rgba(16, 45, 26, .1), 0 14px 30px rgba(16, 45, 26, .22); } }
.compteur-selection { margin:4px 0 8px; }
@media screen {
  .apercu-impression { margin:12px 0; }
  .apercu-impression .feuille-badges { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; margin:0 0 16px; }
  .apercu-impression .badge-print-face { min-width:0; }
}
.champ-large { grid-column:1 / -1; }
.champ-large textarea { width:100%; resize:vertical; }
.form-badge-grille small.note { display:block; margin-top:2px; }
/* Éditeur de badge : fenêtre modale avec aperçu recto-verso en direct. */
.dialogue-badge { width:min(940px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:18px 20px; border:0; border-radius:12px; box-shadow:0 24px 60px rgba(16, 45, 26, .35); }
.dialogue-badge::backdrop { background:rgba(10, 28, 18, .55); }
.dialogue-badge h2 { margin-top:0; }
.badge-editeur-apercu { margin:14px 0; max-width:700px; }
@media (max-width:560px) { .badge-editeur-apercu { grid-template-columns:1fr; } .dialogue-badge { padding:14px; } }
@media (max-width:480px) {
  .grille-badges { grid-template-columns:1fr; }
  .badge-paire-apercu { gap:5px; }
}
@media print {
  @page { size:A4 portrait; margin:8mm; }
  html, body { width:100%; height:auto; background:#fff !important; color:#000; margin:0 !important; padding:0 !important; }
  .entete, .menu, .saut, .banniere-demo { display:none !important; }
  .apercu-impression-actions { display:none !important; }
  main { display:block !important; width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
  main > *:not(.impression-badges-recto-verso):not(.zone-imprimable) { display:none !important; }
  .zone-imprimable { display:block !important; visibility:visible !important; margin:0 !important; padding:0 !important; }
  .barre-impression, .hors-impression { display:none !important; }
  .impression-badges-recto-verso { display:block !important; visibility:visible !important; margin:0 !important; padding:0 !important; }
  .feuille-badges { display:grid !important; grid-template-columns:repeat(2,86mm); grid-template-rows:repeat(4,54mm); grid-auto-rows:54mm; gap:2mm 4mm; align-content:start; width:176mm; height:222mm; margin:0 auto; padding:0; overflow:hidden; break-inside:avoid; page-break-inside:avoid; break-after:page; page-break-after:always; }
  .feuille-badges:last-child { break-after:auto; page-break-after:auto; }
  .badge-print-face { display:block; width:86mm; height:54mm; min-width:86mm; min-height:54mm; margin:0; padding:0; break-inside:avoid; page-break-inside:avoid; }
  .badge-visuel { width:86mm; height:54mm; min-height:54mm; aspect-ratio:auto; border:0.2mm solid #b9c6bd; border-radius:3mm; box-shadow:none; filter:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .badge-demo .badge-visuel { filter:none; }
}

/* Modules administratifs : tableaux lisibles sur téléphones et formulaires accessibles. */
.tableau-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tableau-responsive table { min-width:640px; }
select[multiple] { min-height:120px; padding:8px; }
.form-creation-badge button, .carte button { min-height:38px; }
@media (max-width:640px) { .form-badge-grille { grid-template-columns:1fr; } .tableau-responsive th, .tableau-responsive td { padding:8px 10px; } }

.banniere-demo { padding:10px 14px; color:#6a4100; background:#fff3cd; border-block:1px solid #f0d98e; font-size:13px; font-weight:700; text-align:center; }
.badge-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px; }

.actions-compte { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 12rem; }
.actions-compte button { white-space: nowrap; }


/* Tableau de bord métier : hiérarchie visuelle, contraste accessible et adaptation mobile. */
:root { --navy:#10263b; --navy-2:#1e3a53; --teal:#087f8c; --or:#c69a35; --surface:#ffffff; --ombre:0 10px 28px rgba(16,38,59,.07); }
body.mode-postgres { background:#f2f5f8; }
.mode-postgres .entete { background:linear-gradient(115deg,#10263b 0%,#17445a 68%,#0b5d2a 100%); padding:13px clamp(14px,3vw,34px); box-shadow:0 3px 14px rgba(16,38,59,.18); }
.mode-postgres .entete { padding-top:calc(12px + env(safe-area-inset-top, 0px)); padding-bottom:12px; }
.mode-postgres .menu { position:sticky; top:0; z-index:5; padding:10px clamp(10px,2vw,26px); box-shadow:0 3px 10px rgba(16,38,59,.04); }
.mode-postgres .menu a { color:var(--navy); border-color:#dbe3e9; font-weight:650; }
.mode-postgres .menu a[aria-current="page"] { color:#fff; background:var(--navy); border-color:var(--navy); }
.mode-postgres main { max-width:1360px; padding:clamp(14px,2.5vw,32px); }
.dashboard { display:grid; gap:18px; }
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:clamp(20px,3vw,32px); border-radius:18px; background:linear-gradient(120deg,#10263b 0%,#1d4659 70%,#176b57 100%); color:#fff; box-shadow:var(--ombre); }
.dashboard-hero-copy { max-width:760px; }
.dashboard-hero h1 { margin:4px 0 8px; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.035em; }
.dashboard-kicker { margin:0 0 6px; font-size:.72rem; font-weight:850; letter-spacing:.13em; color:#7bd2b0; }
.dashboard-subtitle { max-width:700px; color:#e1eaf0; margin:0; }
.dashboard-meta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:190px; }
.dashboard-meta small { color:#d4e0e8; }
.dashboard-state { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:7px 11px; font-size:.8rem; font-weight:800; background:#ffffff18; border:1px solid #ffffff2b; }
.dashboard-state-dot { width:8px; height:8px; border-radius:50%; background:#8ee0b7; box-shadow:0 0 0 4px #8ee0b726; }
.dashboard-state.is-demo .dashboard-state-dot { background:#ffcc65; box-shadow:0 0 0 4px #ffcc6526; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.dashboard-kpi { min-width:0; padding:18px; background:#fff; border:1px solid #e0e7ed; border-radius:15px; box-shadow:0 6px 18px rgba(16,38,59,.04); border-top:3px solid #1b735b; }
.dashboard-kpi.navy { border-top-color:#244c70; } .dashboard-kpi.teal { border-top-color:#078b93; } .dashboard-kpi.gold { border-top-color:#c69a35; } .dashboard-kpi.rose { border-top-color:#b54755; }
.dashboard-kpi-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dashboard-kpi-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:#edf5f1; color:#14664d; font-size:1.1rem; font-weight:900; }
.dashboard-kpi.navy .dashboard-kpi-icon { background:#edf2f8; color:#244c70; } .dashboard-kpi.teal .dashboard-kpi-icon { background:#e8f8f8; color:#087f8c; } .dashboard-kpi.gold .dashboard-kpi-icon { background:#fbf5e7; color:#906a16; } .dashboard-kpi.rose .dashboard-kpi-icon { background:#fff0f1; color:#a53849; }
.dashboard-kpi-label { font-size:.82rem; font-weight:750; color:#536678; }
.dashboard-kpi-value { display:block; margin:12px 0 1px; font-size:clamp(1.7rem,2.5vw,2.3rem); line-height:1.1; color:#10263b; letter-spacing:-.035em; }
.dashboard-kpi small { color:#7b8995; font-size:.78rem; }
.dashboard-section { min-width:0; padding:20px; background:#fff; border:1px solid #e0e7ed; border-radius:16px; box-shadow:0 6px 18px rgba(16,38,59,.035); }
.dashboard-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dashboard-section-head h2, .dashboard-regimes h2 { margin:0; font-size:1.2rem; color:#10263b; }
.dashboard-section-head .dashboard-kicker { color:#648091; }
.dashboard-rate { color:#0b795b; font-size:1.5rem; }
.dashboard-progress { display:block; width:100%; height:10px; border:0; border-radius:999px; overflow:hidden; appearance:none; background:#e7edf1; }
.dashboard-progress::-webkit-progress-bar { background:#e7edf1; border-radius:999px; }
.dashboard-progress::-webkit-progress-value { background:linear-gradient(90deg,#0e7755,#37b98d); border-radius:999px; }
.dashboard-progress::-moz-progress-bar { background:linear-gradient(90deg,#0e7755,#37b98d); border-radius:999px; }
.dashboard-presence .note { margin-bottom:0; }
.dashboard-pill { color:#51697b; background:#f0f4f7; border-radius:999px; padding:6px 10px; font-size:.78rem; font-weight:750; }
.dashboard-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; align-items:end; padding-top:6px; }
.dashboard-chart-day { display:grid; gap:8px; text-align:center; min-width:0; }
.dashboard-chart-day strong { color:#24445b; font-size:.9rem; }
.dashboard-chart-bar { position:relative; display:block; width:100%; height:88px; background:#edf2f5; border-radius:8px; overflow:hidden; }
.dashboard-chart-fill { position:absolute; left:0; right:0; bottom:0; display:block; background:linear-gradient(0deg,#1f6d8a,#43b19c); border-radius:6px 6px 0 0; }
.dashboard-chart-day small { color:#738492; font-size:.75rem; }
.dashboard-regimes { display:grid; grid-template-columns:1fr; gap:12px; }
.dashboard-filter { display:flex; align-items:center; gap:10px; width:min(360px,50%); }
.dashboard-filter label { margin:0; color:#607586; font-size:.8rem; white-space:nowrap; }
.dashboard-filter select { min-height:38px; padding:6px 10px; }
.dashboard-regime-card { padding:18px; border:1px solid #dfe7ec; border-radius:14px; background:linear-gradient(130deg,#fff,#fafcfd); }
.dashboard-regime-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.dashboard-regime-top > div { display:flex; align-items:center; gap:10px; }
.dashboard-regime-top h3 { margin:0; color:#213c51; font-size:1.02rem; }
.dashboard-regime-mark { width:10px; height:28px; border-radius:8px; background:#176b57; }
.dashboard-regime-mark.regime-garde { background:#a27a1f; } .dashboard-regime-mark.regime-urgences { background:#367c9a; }
.dashboard-regime-count { color:#596f80; font-size:.83rem; font-weight:750; }
.dashboard-regime-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:14px; }
.dashboard-regime-stats > div { min-width:0; display:flex; flex-direction:column; gap:3px; padding:10px; background:#f4f7f9; border-radius:9px; }
.dashboard-regime-stats span { color:#667a89; font-size:.76rem; }
.dashboard-regime-stats strong { color:#17394c; font-size:1.15rem; }
.dashboard-regime-stats .has-alert { background:#fff3ed; } .dashboard-regime-stats .has-alert strong { color:#a9472e; }
.dashboard-footnote { margin:0; padding:0 2px; color:#6a7e8b; font-size:.82rem; }
.dashboard-error { padding:20px; border:1px solid #ecc3c8; border-radius:12px; background:#fff2f3; color:#8c2532; }
@media (max-width:1050px) { .dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .dashboard-regime-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px) { .dashboard-hero { align-items:flex-start; flex-direction:column; } .dashboard-meta { align-items:flex-start; min-width:0; } .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-kpi { padding:14px; } .dashboard-kpi-label { font-size:.78rem; } .dashboard-section { padding:14px; } .dashboard-section-head { align-items:flex-start; flex-direction:column; } .dashboard-chart { gap:6px; } .dashboard-chart-bar { height:96px; } .dashboard-chart-day small { font-size:.68rem; } .dashboard-chart-day strong { font-size:.82rem; } .dashboard-regime-top { align-items:flex-start; flex-direction:column; } .dashboard-regime-count { padding-left:20px; } .dashboard-regime-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-filter { width:100%; } }
@media (max-width:360px) { .dashboard-kpis { grid-template-columns:1fr; } }

/* Configuration des zones de pointage : paramètres métier réservés à l'administrateur. */
.form-zone-pointage { display:grid; gap:14px; margin:0 0 16px; }
.form-zone-pointage h2 { margin:0; color:#10263b; }
.form-zone-grille { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.form-zone-grille > div { min-width:0; }
.form-zone-grille label { display:block; margin-bottom:5px; font-size:.86rem; font-weight:750; color:#34485b; }
.form-zone-grille input, .form-zone-grille select { width:100%; min-width:0; }
@media (max-width:760px) { .form-zone-grille { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .form-zone-grille { grid-template-columns:1fr; } .dashboard-hero { align-items:flex-start; flex-direction:column; } .dashboard-meta { align-items:flex-start; } }

/* Téléphone : boutons pleine largeur, marges réduites, actions de compte sans débordement. */
@media (max-width:560px) {
  main { padding:10px; }
  .carte { padding:12px; }
  .actions > button { flex:1 1 100%; }
  .actions-compte { min-width:0; }
  .actions-compte button { flex:1 1 calc(50% - .5rem); white-space:normal; }
}

/* Feuilles d'émargement par service (format du registre papier) et page d'impression dédiée. */
.emarg-zone { display:grid; gap:18px; }
.feuille-emargement { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:14px; color:#000; }
.emarg-titre { text-align:center; font-size:18px; letter-spacing:.04em; margin:0 0 10px; padding:8px 6px; border:2px solid #000; background:#f2f2f2; }
.emarg-infos { display:flex; justify-content:space-between; align-items:stretch; gap:10px; margin:0 0 12px; }
.emarg-infos p { margin:0; flex:1 1 0; border:1px solid #000; padding:6px 10px; font-size:15px; font-weight:700; display:flex; flex-direction:column; gap:1px; }
.emarg-infos .emarg-semaine { text-align:right; align-items:flex-end; }
.emarg-etiquette { font-size:10px; font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:#333; }
.emarg-defilement { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 12px; }
.emarg-table { width:100%; border-collapse:collapse; table-layout:fixed; min-width:560px; font-size:13px; border:2px solid #000; }
.emarg-table th, .emarg-table td { border:1px solid #000; padding:4px 6px; text-align:center; vertical-align:middle; }
.emarg-table thead th { background:#e4e4e4; font-size:11px; font-weight:700; }
.emarg-table .emarg-sous { background:#f2f2f2; font-weight:600; font-size:10px; }
.emarg-table th:nth-child(1), .emarg-table td.emarg-prenom { width:21%; text-align:left; }
.emarg-table th:nth-child(2), .emarg-table td.emarg-nom { width:16%; text-align:left; font-weight:700; }
.emarg-table th:nth-child(3), .emarg-table td.emarg-heures { width:12%; font-size:10px; font-weight:600; }
.emarg-table .emarg-debut-jour { border-left:2px solid #000; }
.emarg-table tbody tr { break-inside:avoid; page-break-inside:avoid; }
.emarg-case { height:38px; }
.emarg-case.grise { background:#e2e2e2; }
.emarg-repos { font-weight:700; font-size:15px; letter-spacing:.1em; }
.emarg-legende { margin:0 0 14px; font-size:11px; color:#222; text-align:center; }
.emarg-signatures { display:flex; justify-content:space-between; gap:40px; margin-top:6px; font-size:13px; break-inside:avoid; page-break-inside:avoid; }
.emarg-signature { flex:1 1 0; }
.emarg-signature p { margin:0; }
.emarg-qui { font-weight:700; text-decoration:underline; }
.emarg-nom-cssi { margin-top:2px; }
.emarg-trait { height:22mm; border-bottom:1px solid #000; margin-top:4px; }
.emarg-ligne-plan { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--bord); }
.emarg-ligne-plan select { max-width:100%; }
.page-impression { margin:0; padding:12px; background:#f3f6f4; }
.barre-impression { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 0 14px; }
.barre-impression .note { flex-basis:100%; margin:0; }
.aide-impression { background:#fff7e0; border:1px solid #e0b84a; border-radius:8px; padding:10px; font-weight:600; }
.aide-impression[hidden] { display:none; }
.lien-retour { font-weight:700; }
.page-impression .zone-imprimable { display:grid; gap:18px; }
@media print {
  .page-impression { padding:0; background:#fff; }
  .page-impression .zone-imprimable { display:block !important; }
  .feuille-emargement { border:0; border-radius:0; padding:0; break-after:page; page-break-after:always; break-inside:avoid-page; }
  .feuille-emargement:last-child { break-after:auto; page-break-after:auto; }
  .emarg-defilement { overflow:visible; }
  .emarg-table { min-width:0; }
  .emarg-titre, .emarg-table th, .emarg-table td { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .emarg-case { height:10.5mm; }
}

/* Messagerie générale : présentation claire sur écran large et sur téléphone. */
.message-carte { border-left: 4px solid var(--bord); }
.message-carte.message-non-lu { border-left-color: var(--vert); }
.message-entete { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.message-entete h3 { margin:.15rem 0 .4rem; font-size:1.05rem; overflow-wrap:anywhere; }
.message-meta { color:var(--gris); font-size:.82rem; margin:.25rem 0 .8rem; }
.message-contenu { white-space:pre-wrap; overflow-wrap:anywhere; margin:.4rem 0; }
@media (max-width:480px) { .message-entete { flex-direction:column; gap:4px; } }

/* Messagerie ciblée : listes de comptes accessibles au clavier et utilisables sur téléphone. */
.form-message { display:grid; gap:10px; }
.form-message > label, .message-destinataires > label { display:block; margin-top:4px; font-weight:750; color:var(--texte, #17394c); }
.form-message input:not([type="checkbox"]), .form-message textarea, .form-message select { width:100%; min-width:0; }
.message-destinataires { display:grid; gap:8px; padding:12px; border:1px solid var(--bord); border-radius:10px; background:var(--surface, #fff); }
.message-destinataires[hidden] { display:none !important; }
.message-destinataires-liste { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:320px; overflow:auto; padding:6px; }
.message-destinataire-option { display:flex !important; align-items:flex-start; gap:8px; padding:9px; margin:0 !important; border:1px solid var(--bord); border-radius:8px; font-weight:500 !important; line-height:1.35; overflow-wrap:anywhere; }
.message-destinataire-option input { flex:0 0 auto; width:18px; height:18px; margin-top:1px; }
.message-urgent { border-left:4px solid #b34227; }
@media (max-width:700px) { .message-destinataires-liste { grid-template-columns:1fr; max-height:280px; } }

.code-provisoire { border:2px solid #8a5a00; }
.code-provisoire .code-valeur { font-family:ui-monospace,Consolas,monospace; font-size:1.15em; letter-spacing:.08em; }

/* Affiches QR permanentes (A4 portrait, une par zone). */
.affiche-qr { background:#fff; color:#0d2a18; border:2px solid var(--vert); border-radius:14px; padding:22px 26px; margin:0 0 16px; text-align:center; break-inside:avoid; page-break-inside:avoid; }
.affiche-entete { display:flex; align-items:center; justify-content:center; gap:14px; padding-bottom:12px; border-bottom:4px solid var(--vert); text-align:left; }
.affiche-entete img { width:72px; height:72px; border-radius:50%; }
.affiche-entete strong { display:block; font-size:1.35rem; color:var(--vert); letter-spacing:.03em; }
.affiche-entete small { display:block; font-size:.95rem; color:#3d5044; }
.affiche-surtitre { margin:18px 0 4px; font-size:1.15rem; font-weight:700; color:#3d5044; }
.affiche-service { margin:0; font-size:2.2rem; line-height:1.1; color:var(--vert); text-transform:uppercase; letter-spacing:.02em; overflow-wrap:anywhere; }
.affiche-zone { margin:6px 0 0; font-size:1.1rem; color:#3d5044; }
.affiche-qr-image { display:block; width:min(100%, 105mm); height:auto; margin:18px auto; padding:10px; background:#fff; border:4px solid var(--vert); border-radius:12px; image-rendering:pixelated; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
.affiche-etapes { display:inline-block; text-align:left; margin:4px auto 0; padding-left:1.4em; font-size:1.05rem; line-height:1.55; max-width:140mm; }
.affiche-pied { margin:18px 0 0; padding-top:10px; border-top:1px solid var(--bord); font-size:.8rem; color:#4d5d54; }
@media print {
  /* Une affiche = exactement une page A4 (297 − 2×8 mm de marge = 281 mm ; 268 mm laisse de la marge pour les en-têtes/pieds du navigateur). */
  .affiche-qr { box-sizing:border-box; height:268mm; max-height:268mm; overflow:hidden; margin:0 auto; border-width:1.2mm; border-radius:0; padding:8mm 12mm; break-after:page; page-break-after:always; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
  .affiche-qr:last-child { break-after:auto; page-break-after:auto; }
  .affiche-qr > * { margin-top:0; margin-bottom:0; }
  .affiche-entete { width:100%; justify-content:center; }
  .affiche-pied { width:100%; margin:0; }
  .affiche-service { font-size:26pt; } .affiche-etapes { font-size:12pt; align-self:center; } .affiche-qr-image { width:100mm; height:100mm; margin:0 auto; }
}

/* Création du PDF sur téléphone : voile d'attente pendant la capture des feuilles. */
#pdf-etat { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#fff; color:#0b5d2a; font-weight:700; font-size:1.1rem; text-align:center; padding:24px; }
#pdf-etat[hidden] { display:none; }
#pdf-resultat[hidden] { display:none; }
#pdf-resultat { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.bouton-lien { display:inline-block; padding:10px 14px; border-radius:8px; background:#0b5d2a; color:#fff; font-weight:700; text-decoration:none; }

/* Affiches de test (adresse non définitive) : filigrane bien visible, jamais confondable avec une affiche de production. */
.affiche-qr-test { border-color:#b3261e; position:relative; }
.affiche-filigrane-test { background:#b3261e; color:#fff; font-weight:800; letter-spacing:.06em; padding:8px 12px; border-radius:6px; margin:0 0 12px; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
.ligne-zone { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #d8e4dc; }
button.danger { background:#b3261e; color:#fff; }

/* Logo de l'entête : médaillon blanc plus grand, fin liseré et ombre légère ; titre plus affirmé. */
.entete > img { flex:none; width:clamp(52px, 7vw, 72px); height:clamp(52px, 7vw, 72px); object-fit:contain; background:#fff; border-radius:50%; padding:5px; box-shadow:0 0 0 2px rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.28); }
.entete strong { display:block; font-size:clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing:.08em; font-weight:800; line-height:1.15; }
.entete small { margin-top:3px; letter-spacing:.02em; }