/* Borne tactile, prévue pour un écran 1024 x 768. Charte club : bleu #1f4e79, orange #ef7c2c. */
:root {
  --bleu: #1f4e79; --bleu-clair: #2a6db0; --orange: #ef7c2c; --vert: #3f7d3a; --rouge: #b3261e;
  --fond: #f4f5f2; --carte: #ffffff; --encre: #222; --gris: #6b6b66; --bord: #d9dad5;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: "Ubuntu", "DejaVu Sans", sans-serif; color: var(--encre);
  background: var(--fond); user-select: none; overflow: hidden; }
button { font: inherit; border: 0; border-radius: 10px; cursor: pointer; }
input { font: inherit; font-size: 20px; padding: 12px 14px; border: 2px solid var(--bord); border-radius: 10px;
  width: 100%; background: #fff; }
input:focus { outline: none; border-color: var(--bleu-clair); }
[hidden] { display: none !important; }

.primaire { background: var(--bleu); color: #fff; }
.primaire:disabled { background: #9fb3c6; }
.secondaire { background: #e4e6e0; color: var(--encre); }
.danger { background: var(--rouge); color: #fff; }
.gros { font-size: 22px; padding: 18px 24px; width: 100%; margin-top: 18px; }
.petit { font-size: 15px; padding: 8px 14px; background: rgba(255,255,255,.15); color: #fff; }
.discret { color: var(--gris); font-size: 15px; }

.ecran { height: 100%; }
.plein { display: flex; align-items: center; justify-content: center; }
.carte-centre { background: var(--carte); padding: 32px; border-radius: 16px; width: 520px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.carte-centre.large { width: 640px; }
.carte-centre h1 { margin-top: 0; color: var(--bleu); }
.carte-centre label { display: block; margin: 18px 0 8px; font-weight: bold; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.puces button { background: #e8eef5; color: var(--bleu); padding: 10px 14px; font-size: 17px; }
.puces button.choisi { background: var(--bleu); color: #fff; }

header { height: 60px; background: var(--bleu); color: #fff; display: flex; align-items: center;
  padding: 0 14px; gap: 16px; }
header .titre { font-weight: bold; font-size: 16px; white-space: nowrap; }
header nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.onglet { background: transparent; color: #cfdceb; font-size: 17px; padding: 9px 14px; }
.onglet.actif { background: #fff; color: var(--bleu); font-weight: bold; }
header .etat { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pastille { padding: 4px 10px; border-radius: 20px; font-size: 13px; background: var(--vert); }
.pastille.horsligne { background: var(--orange); }

main { height: calc(100% - 60px - 26px); }
.onglet-contenu { height: 100%; display: flex; }

#grille-articles { flex: 1; overflow-y: auto; padding: 10px 12px; }
.famille h3 { margin: 10px 4px 6px; font-size: 15px; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.famille .tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tuile { background: var(--carte); border: 2px solid var(--bord); padding: 10px 8px; min-height: 84px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.tuile:active { background: #e8eef5; }
.tuile .nom { font-weight: bold; font-size: 17px; line-height: 1.15; }
.tuile .prix { font-size: 16px; color: var(--bleu); }
.tuile .info { font-size: 12px; color: var(--gris); }
.tuile.munition { border-color: #f3c29c; }
.tuile.epuise { opacity: .45; }

#panier { width: 340px; background: var(--carte); border-left: 2px solid var(--bord); display: flex;
  flex-direction: column; padding: 12px; }
.acheteur { min-height: 0; }
.acheteur .bloc { border-radius: 10px; padding: 10px; font-size: 15px; margin-bottom: 8px; }
.acheteur .requis { background: #fdecdf; border: 2px dashed var(--orange); }
.acheteur .ok { background: #e6f1e4; border: 2px solid var(--vert); }
.acheteur .ko { background: #f8e1df; border: 2px solid var(--rouge); }
.acheteur button { padding: 8px 10px; font-size: 14px; margin-top: 6px; }
#lignes-panier { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
#lignes-panier li { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #eee; }
#lignes-panier .lib { flex: 1; font-size: 16px; }
#lignes-panier .lib small { display: block; color: var(--gris); }
#lignes-panier .q { min-width: 30px; text-align: center; font-weight: bold; font-size: 18px; }
#lignes-panier button { width: 40px; height: 40px; font-size: 22px; background: #e4e6e0; padding: 0; }
#lignes-panier button.plus10 { width: 48px; font-size: 14px; }
.total { display: flex; justify-content: space-between; font-size: 26px; font-weight: bold; padding: 10px 0; }
.actions-panier { display: flex; gap: 8px; }
.actions-panier button { padding: 16px; font-size: 18px; }
.actions-panier .primaire { flex: 1; }
#derniere-vente { margin-top: 8px; min-height: 22px; }
#derniere-vente button { font-size: 13px; padding: 4px 8px; margin-left: 6px; }

.invite-scan { flex: 1; padding: 24px 32px; text-align: center; }
.invite-scan .picto { height: 56px; }
.invite-scan h2 { font-size: 32px; margin: 6px 0; color: var(--bleu); }
.resultats { list-style: none; padding: 0; margin: 8px 0; text-align: left; max-height: 260px; overflow-y: auto; }
.resultats li { padding: 12px 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  margin-bottom: 6px; font-size: 18px; cursor: pointer; }
.resultats li small { color: var(--gris); }
.presences-jour { width: 340px; background: var(--carte); border-left: 2px solid var(--bord); padding: 12px; overflow-y: auto; }
.presences-jour h3 { margin-top: 0; }
#liste-presents { list-style: none; padding: 0; margin: 0; font-size: 15px; }
#liste-presents li { padding: 6px 0; border-bottom: 1px solid #eee; }
#liste-presents small { color: var(--gris); }

.modale { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center;
  justify-content: center; z-index: 10; }
.modale-boite { background: #fff; border-radius: 16px; padding: 26px; width: 620px; max-height: 92%; overflow-y: auto; }
.modale-boite h2 { margin-top: 0; color: var(--bleu); }
.modale-boite .choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.modale-boite .choix button { padding: 20px 10px; font-size: 20px; background: #e8eef5; color: var(--bleu); font-weight: bold; border: 3px solid transparent; }
.modale-boite .choix button.choisi { background: var(--bleu); color: #fff; border-color: var(--orange); }
.modale-boite .choix button.choisi::before { content: "✔ "; }
.modale-boite .rangee { display: flex; gap: 10px; margin-top: 14px; }
.modale-boite .rangee button { flex: 1; padding: 16px; font-size: 18px; }
.modale-boite label { display: block; margin: 12px 0 6px; font-weight: bold; }
.modale-boite table { width: 100%; font-size: 18px; border-collapse: collapse; }
.modale-boite td { padding: 6px 0; }
.modale-boite td:last-child { text-align: right; font-weight: bold; }
.statut { padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-size: 17px; }
.statut.ok { background: #e6f1e4; color: #24521f; }
.statut.ko { background: #f8e1df; color: #7d1a14; }
.statut.info { background: #e8eef5; color: var(--bleu); }

.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: #222; color: #fff;
  padding: 14px 22px; border-radius: 10px; font-size: 18px; z-index: 20; max-width: 80%; }
.toast.erreur { background: var(--rouge); }
.toast.succes { background: var(--vert); }

.puces button.prevu { border: 2px solid var(--orange); }
.carte-centre.large { max-height: 96vh; overflow-y: auto; }
.page-texte { flex: 1; padding: 18px 26px; overflow-y: auto; }
.page-texte h2 { margin: 0 0 6px; color: var(--bleu); }
textarea { font: inherit; font-size: 18px; padding: 12px; border: 2px solid var(--bord); border-radius: 10px; width: 100%; resize: vertical; }
textarea:focus { outline: none; border-color: var(--bleu-clair); }
.table-planning { width: 100%; border-collapse: collapse; font-size: 18px; margin-top: 10px; }
.table-planning td { padding: 10px 8px; border-bottom: 1px solid var(--bord); }
.table-planning tr.aujourdhui td { background: #fdecdf; font-weight: bold; }
.table-planning a { color: var(--bleu); text-decoration: none; font-weight: bold; }
.liste-liaison { list-style: none; padding: 0; margin: 16px 0 0; }
.liste-liaison li { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.liste-liaison .qui { color: var(--gris); font-size: 14px; margin-bottom: 4px; }
.liste-liaison .quoi { white-space: pre-wrap; font-size: 17px; user-select: text; }
.liste-liaison li.attente { border-style: dashed; }

header .logo { width: 38px; height: 38px; }
header .etat { white-space: nowrap; }
header #permanent-actuel { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.pastille { white-space: nowrap; }
.modale-boite h2.refus { color: var(--rouge); display: flex; align-items: center; gap: 10px; }
.modale-boite h2.refus::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--rouge); color: #fff; font-size: 24px; }

/* Photo du pas de tir en filigrane, logo du club, date, pied de page */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--fond-stand, none) center / cover no-repeat;
  opacity: .22; filter: grayscale(100%) brightness(.78) contrast(1.15); }
html, body { background-color: transparent; }
html { background: var(--fond); }
#grille-articles, .invite-scan, .page-texte { background: transparent; }
header .logo { width: auto; height: 46px; background: #fff; border-radius: 8px; padding: 2px 4px; }
.logo-ouverture { display: block; height: 70px; margin: 0 auto 6px; }
.date-jour { background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 20px; font-weight: bold; }
.lien-bureau { text-decoration: none; border-radius: 10px; }
.pied { position: fixed; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: var(--gris); background: rgba(255,255,255,.85); border-top: 1px solid var(--bord); z-index: 5; }
.pied img { height: 18px; vertical-align: middle; }
.ecran.plein { height: calc(100% - 26px); }
.modale.large .modale-boite { width: 94%; height: 90%; display: flex; flex-direction: column; }
.doc-planning { flex: 1; width: 100%; min-height: 0; border: 0; object-fit: contain; background: #fff; }

/* Clavier tactile */
#clavier { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #d9dcd4; padding: 8px 8px 10px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.2); }
#clavier .rangee-touches { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
#clavier button { flex: 0 0 auto; width: 82px; height: 54px; font-size: 22px; background: #fff; color: var(--encre);
  border-radius: 8px; box-shadow: 0 2px 0 #aaa; touch-action: manipulation; }
#clavier button:active { background: #e8eef5; transform: translateY(1px); }
#clavier button.large { width: 330px; }
#clavier button.fonction { background: #eef0ea; font-size: 18px; }
#clavier button.fonction.actif { background: var(--bleu); color: #fff; }
#clavier button.effacer { background: #d62400; color: #fff; font-size: 30px; font-weight: bold;
  border: 3px solid #7a1500; box-shadow: 0 3px 0 #7a1500; }
#clavier button.effacer:active { background: #a81c00; }
#clavier button.ok { background: var(--bleu); color: #fff; width: 170px; font-size: 18px; }
#clavier.pave { left: auto; right: 12px; bottom: 34px; border-radius: 14px; width: auto; }
#clavier.pave button { width: 96px; height: 62px; font-size: 26px; }
#clavier.pave button.ok { width: 300px; }
body.clavier-ouvert.clavier-texte .modale { align-items: flex-start; padding-top: 8px; }
body.clavier-ouvert.clavier-texte .modale-boite { max-height: calc(100% - 330px); }

/* En-tête compact pour tenir en 1024 px */
header { gap: 10px; padding: 0 10px; }
.onglet { padding: 9px 11px; }
header .etat { gap: 7px; font-size: 14px; }
header #permanent-actuel { max-width: 150px; }
.pastille { padding: 3px 8px; font-size: 12px; }
.petit { padding: 7px 10px; }
.date-jour { padding: 3px 8px; }
/* Écran d'ouverture compact */
.carte-centre.large { padding: 20px 26px; }
.carte-centre h1 { margin: 0 0 2px; font-size: 26px; }
.carte-centre label { margin: 10px 0 6px; }
.logo-ouverture { height: 54px; }
.puces button { padding: 7px 11px; font-size: 15px; }
#clavier.azerty button.large { width: 250px; }
#clavier.azerty button.ok { width: 150px; }
#clavier.azerty .rangee-touches { flex-wrap: nowrap; }
/* Pavé numérique à droite : la fenêtre se range à gauche pour rester entièrement visible. */
body.clavier-ouvert:not(.clavier-texte) .modale-boite { width: 640px; }

/* ---- Version compacte : tout l'écran sans défilement en 1024 x 768 ---- */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #c5c8c0; border-radius: 3px; }
#grille-articles, .page-texte, .presences-jour, #lignes-panier, .resultats, .modale-boite, .carte-centre { touch-action: pan-y; }

/* Comptoir : une famille par rangée, son nom à la verticale, cinq articles par ligne */
#grille-articles { padding: 8px 10px; }
.famille { display: flex; gap: 6px; margin-bottom: 8px; }
.famille h3 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font-size: 11px; text-align: center;
  background: rgba(31,78,121,.08); border-radius: 6px; padding: 4px 2px; min-width: 22px; }
.famille .tuiles { flex: 1; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tuile { min-height: 76px; padding: 6px 7px; }
.tuile .nom { font-size: 15px; }
.tuile .prix { font-size: 14px; }
.tuile .prix small { display: block; font-size: 11px; color: var(--gris); }
.tuile .info { font-size: 11px; line-height: 1.1; }
#panier { width: 320px; }

/* Ouverture : logo et « Permanence du ... » sur une ligne, permanents en grille */
.titre-ouverture { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.titre-ouverture .logo-ouverture { height: 48px; margin: 0; }
.titre-ouverture h1 { font-size: 22px; margin: 0; }
.carte-centre.large { width: 700px; padding: 16px 22px; }
#permanents-recents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#permanents-recents button { padding: 7px 6px; font-size: 14px; }
#ecran-ouverture input { padding: 9px 12px; font-size: 18px; }
#ecran-ouverture .gros { margin-top: 12px; padding: 14px; }
body.clavier-texte .ecran.plein { align-items: flex-start; padding-top: 6px; }
body.clavier-ouvert:not(.clavier-texte) .carte-centre.large { width: 660px; }

/* Présences : code-barres et consigne sur une ligne ; clavier ouvert, la recherche monte */
.ligne-scan { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ligne-scan .picto { height: 44px; width: auto; }
.ligne-scan h2 { margin: 0; }
.invite-scan { padding: 16px 28px; }
body.clavier-texte .invite-scan { padding-top: 8px; }
body.clavier-texte .ligne-scan, body.clavier-texte .ou-nom, body.clavier-texte #btn-invite { display: none; }
body.clavier-texte .resultats { max-height: 250px; }
body.clavier-texte .page-texte { padding-top: 8px; }

#liste-presents li { cursor: pointer; }
#liste-presents li.parti { color: var(--gris); }
#liste-presents .sortie { float: right; color: var(--bleu); font-size: 13px; }

.deux-boutons { display: flex; gap: 10px; } .deux-boutons button { flex: 1; }
body.clavier-texte .deux-boutons { display: none; }
.deux-colonnes { display: flex; gap: 12px; } .deux-colonnes > div { flex: 1; }
.modale-boite .choix-motif { grid-template-columns: repeat(3, 1fr); margin: 6px 0; }
.modale-boite .choix-motif button, .modale-boite .choix-cv button { padding: 12px 6px; font-size: 16px; }
.modale-boite .choix-cv { grid-template-columns: repeat(5, 1fr); margin: 6px 0; }
.modale-boite input[type="date"] { font-size: 18px; padding: 10px; }
.modale-boite label.trajet { background: #e8eef5; padding: 10px; border-radius: 8px; }
.liste-benevoles { max-height: 420px; }

.bouton-licence { display: block; width: 100%; padding: 12px; font-size: 16px; margin-top: 8px; }
.modale-boite .trajet { background: #e8eef5; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: 16px; }
.oui-non { display: flex; gap: 10px; margin-top: 8px; }
.oui-non button { flex: 1; padding: 12px; font-size: 18px; background: #fff; color: var(--bleu); border: 2px solid var(--bleu); }
.oui-non button.choisi { background: var(--bleu); color: #fff; }
body.clavier-texte #btn-invite { display: none; }

.modale-boite .choix-date { grid-template-columns: 1fr 1fr 1.3fr; margin: 6px 0; }
.modale-boite .choix-date button { padding: 12px 6px; font-size: 16px; }

/* Liste « Aujourd'hui » : lignes hautes, bouton Départ facile à toucher */
#liste-presents li { display: flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 56px; font-size: 16px; }
#liste-presents .qui-present { flex: 1; line-height: 1.25; }
#liste-presents .bouton-depart { flex: 0 0 auto; min-width: 92px; height: 46px; font-size: 17px; background: var(--bleu); color: #fff; }
#liste-presents .parti-le { color: var(--gris); font-size: 14px; min-width: 92px; text-align: center; }
.presences-jour { width: 330px; }

.lien-sb { color: var(--gris); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.carte-sb { display: flex; align-items: center; gap: 20px; }
.carte-sb > img { width: 180px; height: 180px; }

/* Onglet « Ventes » : ventes de la permanence en cours */
.bilan-ventes { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; font-size: 20px; margin: 10px 0; }
.bilan-ventes .discret { font-size: 15px; }
.recap-articles details { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.recap-articles summary { font-weight: bold; font-size: 17px; cursor: pointer; }
.recap-articles table { width: 100%; font-size: 16px; border-collapse: collapse; margin-top: 6px; }
.recap-articles td:last-child { text-align: right; font-weight: bold; }
#filtre-ventes { margin-bottom: 8px; }
.liste-ventes { list-style: none; padding: 0; margin: 0; }
.liste-ventes li { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: 8px; margin-bottom: 6px; font-size: 17px; cursor: pointer; }
.liste-ventes .h { font-weight: bold; color: var(--bleu); min-width: 52px; }
.liste-ventes .quoi { flex: 1; }
.liste-ventes .quoi small, .liste-ventes .montant small { display: block; color: var(--gris); font-size: 13px; font-weight: normal; }
.liste-ventes .montant { font-weight: bold; text-align: right; font-size: 19px; }
.liste-ventes li.annulee { opacity: .55; }
.liste-ventes li.annulee .quoi, .liste-ventes li.annulee .montant { text-decoration: line-through; }
.modale-boite tr.total-vente td { border-top: 2px solid var(--bord); padding-top: 8px; }
.modale-boite .bouton-detail { width: 100%; padding: 14px; font-size: 17px; margin-top: 10px; }
.extinction { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #fdecdf; border: 2px solid var(--orange); font-size: 17px; color: var(--encre); }
.modale-boite .choix button:disabled { background: #eceeea; color: #b5b8b0; cursor: not-allowed; text-decoration: line-through; }
/* Signature du permanent à la clôture */
.modale-boite canvas.signature { display: block; width: 100%; height: 150px; background: #fff; border: 2px dashed #1f4e79;
  border-radius: 10px; touch-action: none; cursor: crosshair; }
.modale-boite .effacer-signature { margin-top: 6px; padding: 8px 12px; font-size: 15px; }
.modale-boite .choix button.ecole { background: #fdecdf; color: #8a3d0c; border-color: #ef7c2c; }
.modale-boite .choix button.ecole.choisi { background: #ef7c2c; color: #fff; }
/* Tuiles du comptoir en relief : ombre portée, enfoncement au toucher (29/09/2026). */
.tuile { border-color: #b3b8ae; box-shadow: 0 5px 0 #8e948a, 0 8px 16px rgba(0, 0, 0, .28); transition: transform .06s, box-shadow .06s; }
.tuile:active { transform: translateY(4px); box-shadow: 0 1px 0 #8e948a, 0 2px 4px rgba(0, 0, 0, .25); }
.tuile.munition { border-color: #e39a5f; box-shadow: 0 5px 0 #c87431, 0 8px 16px rgba(0, 0, 0, .28); }
.famille .tuiles { row-gap: 12px; }
.tuile.epuise { box-shadow: none; }
/* Le bandeau vertical de la famille couvre aussi l'ombre de la dernière rangée de tuiles. */
.famille { align-items: stretch; margin-bottom: 12px; }
.famille .tuiles { padding-bottom: 6px; }
.famille h3 { background: rgba(31, 78, 121, .16); color: #1f4e79; font-weight: bold; }

/* Instance de démonstration : bouton-bandeau permanent (on ne peut pas la confondre avec la vraie borne), qui ramène à la vraie. */
#sortie-demo { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1000; background: #c0392b; color: #fff;
  font-weight: bold; font-size: 17px; padding: 12px 24px; border: 0; border-radius: 26px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.lien-demo { display: block; margin-top: 14px; text-align: center; color: #666; font-size: 15px; padding: 8px; }
.mois-planning th { text-align: left; background: #1f4e79; color: #fff; font-size: 17px; padding: 8px 12px; }
body:has(#modale:not([hidden])) #sortie-demo { display: none; }   /* ne pas cacher une fenêtre (signature) en démonstration */


/* Personne sous mesure n'est invisible dans la recherche : le permanent doit la trouver et
   lire en clair ce qui la frappe. Rouge pour une interdiction, orange pour un terme. */
li.ligne-mesure { background: #fdeaea; border-left: 4px solid #c81e1e; }
small.mesure-interdit { color: #fff; background: #c81e1e; font-weight: 700;
                        padding: 2px 7px; border-radius: 3px; margin-left: 6px; }
small.mesure-temporaire { color: #fff; background: #c2611d; font-weight: 700;
                          padding: 2px 7px; border-radius: 3px; margin-left: 6px; }
small.mesure-vigilance { color: #1b2733; background: #ffd166; font-weight: 700;
                        padding: 2px 7px; border-radius: 3px; margin-left: 6px; }
small.mesure-complement { color: #8a4b12; font-weight: 600; margin-left: 6px; font-style: italic; }


/* ---------------------------------------------------------------- prêt d'armes */
#onglet-prets { flex-direction: column; overflow-y: auto; padding: 14px 20px 28px; }
/* Trois tuiles larges : l'écran se manipule debout, parfois les mains prises. */
.titre-prets { margin: 18px 0 10px; }
.titre-prets .compte { background: #c2611d; color: #fff; border-radius: 12px; padding: 2px 11px; font-size: .7em; }
.tuiles-armes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tuile-arme { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
              padding: 26px 22px; border: 3px solid #1f4e79; border-radius: 14px;
              background: #fff; cursor: pointer; text-align: left; }
.tuile-arme:active { transform: translateY(2px); }
.tuile-arme.cat-b { border-color: #c81e1e; }
.tuile-arme .t-titre { font-size: 23px; font-weight: 700; color: #1f4e79; }
.tuile-arme.cat-b .t-titre { color: #c81e1e; }
.tuile-arme .t-sous { font-size: 14px; color: #5a6573; }
.tuile-arme .t-nb { margin-top: 6px; font-size: 15px; font-weight: 700; color: #2e7d32; }
.liste-armes { margin-top: 18px; }
.liste-armes h3 { display: flex; justify-content: space-between; align-items: center; }
.avert-b { background: #fdeaea; border-left: 4px solid #c81e1e; padding: 10px 14px; border-radius: 4px; }
.avert-b .de-droit { color: #1d4e79; font-weight: 600; }
/* Coffre ferme : la tuile est grisee et porte son cadenas. Le permanent voit qu'il n'a pas la main,
   comme devant le coffre lui-meme, dont il n'a pas le code. */
.tuile-arme.verrouillee { background: #f2f3f0; border-color: #b9bdb4; }
.tuile-arme.verrouillee .t-titre { color: #6b7280; }
/* Cadenas dessine et non emoji : la police du poste du club peut ne pas porter le caractere,
   et un carre vide a la place d un cadenas ne dit rien au permanent. */
.tuile-arme.verrouillee .t-titre::before { content: ""; display: inline-block;
  width: 20px; height: 20px; margin-right: 8px; vertical-align: -3px;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2210.5%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010.5V7a4%204%200%200%201%208%200v3.5%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain; }
.tuile-arme.verrouillee .t-nb { color: #6b7280; font-weight: 600; }
.lien { background: none; border: 0; color: #1f4e79; text-decoration: underline; font: inherit;
        font-size: 15px; padding: 0 2px; cursor: pointer; }
.grille-armes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.arme { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 14px 16px;
        border: 2px solid #c3cedb; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.arme b { font-size: 17px; }
.arme .sn { font-family: monospace; color: #8a94a0; }
.liste-sorties { display: grid; gap: 10px; }
.sortie { display: flex; justify-content: space-between; align-items: center; gap: 14px;
          padding: 14px 18px; border: 2px solid #c2611d; border-radius: 10px; background: #fff8f1; }
.sortie .qui { margin-top: 4px; color: #5a6573; }
.etats { gap: 10px; flex-wrap: wrap; }
/* « Incident » se dessine en contour rouge et non en rouge plein : le bouton par defaut du retour
   est « Rien a signaler ». Sans le fond clair, le « color » rouge de cette regle tombait sur le fond
   rouge de « .danger » et le texte du bouton disparaissait. */
.etats .danger { background: #fdf2f2; border: 2px solid #c81e1e; color: #c81e1e; }

/* Qualite propre du porteur de la prerogative : le President l'a de droit, non par delegation. */
.sortie .qui small.de-droit { color: #1d4e79; font-weight: 600; }

/* Rappel des personnes sous mesure retenues hors de la liste : information, pas une proposition. */
.suggestions li.non-cliquable { cursor: default; font-style: italic; }

/* Moyens de reglement proposes a l'encaissement, quand le club en accepte plusieurs. */
.moyens { gap: 8px; margin-bottom: 12px; }
.moyens button { flex: 1; }
.moyens button.choisi { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* Vitrine : aucune cle de borne, donc rien ne part au serveur. Le dire, sinon le visiteur croit
   enregistrer et s'etonne de ne rien retrouver. */
body.vitrine::after { content: "DÉMONSTRATION · données fictives"; position: fixed; right: 14px; bottom: 14px;
  z-index: 1000; background: #0f7b8a; color: #fff; font-size: 14px; font-weight: 700;
  padding: 8px 16px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.25); pointer-events: none; }