/* Réservation des salles — Croix-Rouge Togolaise — charte rouge et blanc */
:root {
    --rouge: #C8102E;
    --rouge-fonce: #9B0C23;
    --rouge-clair: #FDECEF;
    --rouge-bord: #F3C2CB;
    --blanc: #FFFFFF;
    --fond: #F6F6F7;
    --texte: #1F2328;
    --doux: #5E6670;
    --bord: #E3E5E8;
    --vert: #1E7B45;
    --vert-clair: #E7F5EC;
    --orange: #B15C00;
    --orange-clair: #FFF3E0;
    --gris-clair: #F0F1F3;
    --bleu: #1D5FA8;
    --bleu-clair: #E8F1FB;
    --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
    --rayon: 10px;
    --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--police); color: var(--texte); background: var(--fond); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rouge); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(200, 16, 46, .35); outline-offset: 2px; }

/* ---------- En-tête ---------- */
.entete { background: var(--rouge); color: #fff; display: flex; align-items: center; gap: 14px; padding: 10px 18px; position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.entete .logo { width: 46px; height: 46px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.entete .logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-defaut { font-weight: 800; color: var(--rouge); font-size: 14px; letter-spacing: .5px; }
.entete .titres { min-width: 0; flex: 1; }
.entete .titres b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete .titres span { display: block; font-size: 12.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete .actions { display: flex; align-items: center; gap: 6px; }
.btn-entete { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; }
.btn-entete:hover { background: rgba(255,255,255,.22); }
.pastille { position: absolute; top: -6px; right: -6px; background: #fff; color: var(--rouge); font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center; }
.menu-mobile { display: none; }

/* ---------- Mise en page ---------- */
.cadre { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 66px); }
.cadre.sans-menu { grid-template-columns: 1fr; }
.cadre { background: linear-gradient(to right, var(--blanc) 240px, var(--fond) 240px); }
.grille > .carte + .carte { margin-top: 0; }
.cadre > div { min-width: 0; }
#grille-plan { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
nav.menu { background: var(--blanc); border-right: 1px solid var(--bord); padding: 14px 10px; position: sticky; top: 66px; height: calc(100vh - 66px); overflow: auto; }
nav.menu .groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--doux); margin: 14px 10px 6px; font-weight: 700; }
nav.menu button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--texte); font-weight: 500; }
nav.menu button:hover { background: var(--gris-clair); }
nav.menu button.actif { background: var(--rouge-clair); color: var(--rouge-fonce); font-weight: 700; box-shadow: inset 3px 0 0 var(--rouge); }
nav.menu button .compteur { margin-left: auto; background: var(--rouge); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
main { padding: 22px 26px 40px; min-width: 0; }
.page-titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-titre h1 { font-size: 22px; margin: 0; flex: 1; min-width: 200px; }
.page-titre p { margin: 2px 0 0; color: var(--doux); font-size: 13.5px; width: 100%; }
footer.pied { text-align: center; color: var(--doux); font-size: 12px; padding: 18px 10px 26px; }
footer.pied b { color: var(--rouge); }

/* ---------- Cartes et grilles ---------- */
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; }
.carte + .carte { margin-top: 16px; }
.carte h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.carte h2 .ico { color: var(--rouge); }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); border-top: 4px solid var(--rouge); }
.kpi .val { font-size: 26px; font-weight: 800; color: var(--rouge-fonce); }
.kpi .lib { font-size: 12.5px; color: var(--doux); }
.annonce { background: var(--rouge-clair); border: 1px solid var(--rouge-bord); border-left: 5px solid var(--rouge); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 16px; white-space: pre-wrap; }
.alerte { border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.alerte.erreur { background: var(--rouge-clair); color: var(--rouge-fonce); border: 1px solid var(--rouge-bord); }
.alerte.ok { background: var(--vert-clair); color: var(--vert); border: 1px solid #BFE3CC; }
.alerte.info { background: var(--bleu-clair); color: var(--bleu); border: 1px solid #C7DBF2; }
.alerte.attention { background: var(--orange-clair); color: var(--orange); border: 1px solid #F5D5A8; }
.vide { text-align: center; color: var(--doux); padding: 26px 10px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; padding: 9px 15px; border: 1px solid var(--bord); background: var(--blanc); cursor: pointer; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--texte); }
.btn:hover { background: var(--gris-clair); }
.btn.principal { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn.principal:hover { background: var(--rouge-fonce); }
.btn.vert { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn.danger { color: var(--rouge-fonce); border-color: var(--rouge-bord); }
.btn.danger:hover { background: var(--rouge-clair); }
.btn.petit { padding: 5px 10px; font-size: 13px; }
.btn.lien { border: 0; background: none; color: var(--rouge); padding: 4px 6px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.barre { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.barre .espace { flex: 1; }
.groupe-btn { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow-x: auto; background: #fff; max-width: 100%; }
.groupe-btn button { white-space: nowrap; flex: none; }
.groupe-btn button { border: 0; background: none; padding: 8px 13px; cursor: pointer; font-weight: 600; color: var(--doux); }
.groupe-btn button + button { border-left: 1px solid var(--bord); }
.groupe-btn button.actif { background: var(--rouge); color: #fff; }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.champ label, .champ .lbl { font-size: 13px; font-weight: 600; color: #3A4048; }
.champ .aide { font-size: 12px; color: var(--doux); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
    width: 100%; border: 1px solid #CBD0D6; border-radius: 8px; padding: 9px 11px; background: #fff; min-height: 40px; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--rouge); outline: 3px solid rgba(200,16,46,.12); }
.oblig::after { content: " *"; color: var(--rouge); }
.choix-type { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choix-type label { border: 1.5px solid var(--bord); border-radius: 10px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.choix-type label b { font-size: 14px; }
.choix-type label span { font-size: 12px; color: var(--doux); }
.choix-type input { position: absolute; opacity: 0; pointer-events: none; }
.choix-type label:has(input:checked) { border-color: var(--rouge); background: var(--rouge-clair); box-shadow: inset 0 0 0 1px var(--rouge); }
.cases { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cases label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; cursor: pointer; }
.interrupteur { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-clair); }
.interrupteur:last-child { border-bottom: 0; }
.interrupteur .txt { flex: 1; }
.interrupteur .txt b { display: block; font-size: 14.5px; }
.interrupteur .txt span { font-size: 12.5px; color: var(--doux); }
.bascule { position: relative; width: 46px; height: 26px; flex: none; margin-top: 2px; }
.bascule input { opacity: 0; width: 0; height: 0; }
.bascule i { position: absolute; inset: 0; background: #C9CDD2; border-radius: 26px; cursor: pointer; transition: .2s; }
.bascule i::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bascule input:checked + i { background: var(--rouge); }
.bascule input:checked + i::before { transform: translateX(20px); }
.bascule input:focus-visible + i { outline: 3px solid rgba(200,16,46,.35); }
.etat-dispo { border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px; margin: 4px 0 12px; }
.etat-dispo.libre { background: var(--vert-clair); color: var(--vert); border: 1px solid #BFE3CC; }
.etat-dispo.pris { background: var(--rouge-clair); color: var(--rouge-fonce); border: 1px solid var(--rouge-bord); }
.etat-dispo.attente { background: var(--gris-clair); color: var(--doux); border: 1px solid var(--bord); }

/* ---------- Tableaux ---------- */
.tableau-cadre { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; }
table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th { background: var(--rouge); color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; white-space: nowrap; font-size: 13px; }
table.tab td { padding: 9px 12px; border-top: 1px solid var(--bord); vertical-align: top; }
table.tab tr:nth-child(even) td { background: #FBFBFC; }
table.tab tr.cliquable { cursor: pointer; }
table.tab tr.cliquable:hover td { background: var(--rouge-clair); }
.num { text-align: right; white-space: nowrap; }
.statut { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.statut.en_attente { background: var(--orange-clair); color: var(--orange); }
.statut.validee { background: var(--vert-clair); color: var(--vert); }
.statut.refusee, .statut.annulee { background: var(--gris-clair); color: var(--doux); text-decoration: line-through; }
.statut.liberee { background: var(--gris-clair); color: var(--doux); }
.statut.terminee { background: var(--bleu-clair); color: var(--bleu); }
.etiquette { display: inline-block; background: var(--gris-clair); border-radius: 6px; padding: 1px 8px; font-size: 12px; color: var(--doux); font-weight: 600; }

/* ---------- Planning ---------- */
.plan-entete { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.plan-entete .periode { font-size: 17px; font-weight: 700; min-width: 210px; }
.semaine { display: grid; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; overflow: hidden; }
.semaine .col-entete { background: var(--rouge); color: #fff; text-align: center; padding: 8px 4px; font-size: 13px; font-weight: 600; border-left: 1px solid rgba(255,255,255,.25); }
.semaine .col-entete.aujourdhui { background: var(--rouge-fonce); }
.semaine .col-entete small { display: block; font-weight: 500; opacity: .85; font-size: 11.5px; }
.semaine .heures { position: relative; border-right: 1px solid var(--bord); background: #FAFAFB; }
.semaine .heures div { position: absolute; right: 6px; font-size: 11px; color: var(--doux); transform: translateY(-7px); }
.semaine .jour { position: relative; border-left: 1px solid var(--bord); cursor: copy; }
.semaine .jour.ferme { background: repeating-linear-gradient(45deg, #F4F4F5, #F4F4F5 8px, #ECECEE 8px, #ECECEE 16px); cursor: not-allowed; }
.semaine .jour .ligne-h { position: absolute; left: 0; right: 0; border-top: 1px solid #F0F0F2; pointer-events: none; }
.semaine .jour .ligne-h.demi { border-top-style: dashed; border-top-color: #F6F6F8; }
.semaine .jour .motif-ferme { position: absolute; top: 8px; left: 6px; right: 6px; font-size: 11.5px; color: var(--doux); text-align: center; font-weight: 600; }
.semaine .maintenant { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rouge); z-index: 3; pointer-events: none; }
.evt { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; font-size: 12px; overflow: hidden; cursor: pointer; z-index: 2; line-height: 1.25; border-left: 4px solid var(--rouge); background: var(--rouge-clair); color: var(--rouge-fonce); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.evt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt.en_attente { background: var(--orange-clair); border-left-color: var(--orange); color: #7A4000; border-style: dashed; border-left-style: solid; }
.evt.a-moi { box-shadow: 0 0 0 2px var(--rouge) inset; }
.evt:hover { filter: brightness(.97); }
.mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.mois .nom-jour { background: var(--rouge); color: #fff; text-align: center; padding: 7px; font-size: 12.5px; font-weight: 600; }
.mois .case { min-height: 104px; border-top: 1px solid var(--bord); border-left: 1px solid var(--bord); padding: 4px 5px; cursor: pointer; overflow: hidden; }
.mois .case:nth-child(7n+1) { border-left: 0; }
.mois .case.autre { background: #FAFAFB; color: #A3A9B0; }
.mois .case.ferme { background: repeating-linear-gradient(45deg, #F7F7F8, #F7F7F8 8px, #EFEFF1 8px, #EFEFF1 16px); }
.mois .case .n { font-size: 12.5px; font-weight: 700; }
.mois .case.aujourdhui .n { background: var(--rouge); color: #fff; border-radius: 12px; padding: 0 7px; }
.mois .puce { display: block; font-size: 11.5px; border-radius: 4px; padding: 1px 5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--rouge-clair); color: var(--rouge-fonce); border-left: 3px solid var(--rouge); }
.mois .puce.en_attente { background: var(--orange-clair); color: #7A4000; border-left-color: var(--orange); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--doux); margin-top: 10px; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

/* ---------- Fenêtres ---------- */
.voile { position: fixed; inset: 0; background: rgba(15, 18, 22, .55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 14px; overflow: auto; }
.fenetre { background: #fff; border-radius: 14px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; animation: entree .16s ease-out; }
.fenetre.large { max-width: 900px; }
@keyframes entree { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.fenetre header { background: var(--rouge); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.fenetre header h3 { margin: 0; font-size: 17px; flex: 1; }
.fenetre header button { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; }
.fenetre .corps { padding: 18px; }
.fenetre .actions { padding: 12px 18px; border-top: 1px solid var(--bord); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: #FAFAFB; }
dl.fiche { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; margin: 0; font-size: 14px; }
dl.fiche dt { color: var(--doux); font-weight: 600; }
dl.fiche dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1F2328; color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 90vw; font-size: 14px; }
.toast.erreur { background: var(--rouge-fonce); }
.toast.ok { background: var(--vert); }
.chargement { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--rouge-bord); border-top-color: var(--rouge); border-radius: 50%; animation: tourne .8s linear infinite; vertical-align: middle; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Écrans de connexion ---------- */
.accueil-cnx { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.accueil-cnx .gauche { background: var(--rouge); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.accueil-cnx .gauche::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.07); }
.accueil-cnx .gauche .grand-logo { width: 110px; height: 110px; background: #fff; border-radius: 18px; display: grid; place-items: center; overflow: hidden; margin-bottom: 26px; }
.accueil-cnx .gauche .grand-logo img { max-width: 92%; max-height: 92%; object-fit: contain; }
.accueil-cnx .gauche .grand-logo .logo-defaut { font-size: 30px; }
.accueil-cnx .gauche h1 { font-size: 32px; margin: 0 0 8px; line-height: 1.15; }
.accueil-cnx .gauche p { opacity: .92; font-size: 16px; margin: 0 0 6px; max-width: 460px; }
.accueil-cnx .gauche ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; }
.accueil-cnx .gauche li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); margin-right: 10px; font-size: 12px; }
.accueil-cnx .droite { display: flex; align-items: center; justify-content: center; padding: 30px 18px; background: #fff; }
.boite-cnx { width: 100%; max-width: 400px; }
.boite-cnx h2 { font-size: 22px; margin: 0 0 4px; }
.boite-cnx .sous { color: var(--doux); margin: 0 0 20px; font-size: 14px; }
.boite-cnx .btn.principal { width: 100%; padding: 11px; font-size: 15px; }
.boite-cnx .liens { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 13.5px; }
.boite-cnx .liens button { background: none; border: 0; color: var(--rouge); cursor: pointer; padding: 0; text-decoration: underline; }
.qr { display: flex; justify-content: center; margin: 10px 0; }
.qr img { width: 190px; height: 190px; border: 1px solid var(--bord); border-radius: 10px; padding: 8px; background: #fff; }
.secret { font-family: ui-monospace, Consolas, monospace; background: var(--gris-clair); padding: 8px 10px; border-radius: 8px; word-break: break-all; font-size: 13px; text-align: center; letter-spacing: 1px; }
.code-mfa { letter-spacing: 8px; text-align: center; font-size: 22px !important; font-weight: 700; }
.mention { text-align: center; color: var(--doux); font-size: 12px; margin-top: 26px; }
.mention b { color: var(--rouge); }

/* ---------- Barres de rapport ---------- */
.barres { display: grid; gap: 8px; }
.barres .l { display: grid; grid-template-columns: 150px 1fr 80px; gap: 10px; align-items: center; font-size: 13.5px; }
.barres .l .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .l .fond { background: var(--gris-clair); border-radius: 6px; height: 16px; overflow: hidden; }
.barres .l .rempli { background: var(--rouge); height: 100%; border-radius: 6px; }
.barres .l .v { text-align: right; font-weight: 700; color: var(--rouge-fonce); }

/* ---------- Écran public de salle ---------- */
.ecran { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.ecran .haut { background: var(--rouge); color: #fff; padding: 22px 34px; display: flex; align-items: center; gap: 20px; }
.ecran .haut .logo { width: 72px; height: 72px; background: #fff; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.ecran .haut .logo img { max-width: 92%; max-height: 92%; }
.ecran .haut h1 { margin: 0; font-size: 34px; flex: 1; }
.ecran .haut .heure { font-size: 40px; font-weight: 800; }
.ecran .etat { margin: 26px 34px 10px; border-radius: 16px; padding: 26px 30px; font-size: 30px; font-weight: 800; }
.ecran .etat small { display: block; font-size: 19px; font-weight: 600; margin-top: 6px; }
.ecran .etat.libre { background: var(--vert-clair); color: var(--vert); }
.ecran .etat.occupee { background: var(--rouge-clair); color: var(--rouge-fonce); }
.ecran .liste { margin: 10px 34px 30px; font-size: 21px; }
.ecran .liste div { display: flex; gap: 22px; padding: 13px 4px; border-bottom: 1px solid var(--bord); }
.ecran .liste div b { min-width: 190px; color: var(--rouge-fonce); }
.ecran .liste div.passe { opacity: .45; }

/* ---------- Impression ---------- */
.seulement-impression { display: none; }
@media print {
    body { background: #fff; font-size: 12px; }
    .entete, nav.menu, .pas-impression, .barre, .plan-entete .groupe-btn, footer.pied, .toast { display: none !important; }
    .cadre { display: block; }
    main { padding: 0; }
    .carte { box-shadow: none; border: 0; padding: 0; }
    .seulement-impression { display: block; }
    .entete-impression { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--rouge); padding-bottom: 8px; margin-bottom: 14px; }
    .entete-impression img { height: 54px; }
    .entete-impression b { font-size: 16px; color: var(--rouge); display: block; }
    table.tab th { background: var(--rouge) !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .evt, .puce, .kpi, .rempli, .semaine .col-entete, .mois .nom-jour { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .voile { position: static; background: none; padding: 0; }
    .voile ~ * { display: none; }
    .fenetre { box-shadow: none; max-width: none; }
    .fenetre header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .fenetre .actions { display: none; }
}


/* ---------- 1.1.0 : QR codes, affiche, paramètres verrouillés ---------- */
.bloc-qr { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 14px; border: 1.5px dashed var(--rouge-bord); border-radius: 12px; background: #fff; }
.bloc-qr .qr-img svg { width: 150px; height: 150px; display: block; }
.bloc-qr p { margin: 4px 0 6px; font-size: 13.5px; color: var(--doux); }
.bloc-qr a { font-size: 13px; }
fieldset.groupe-param { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.groupe-param:disabled { opacity: .6; }
.carte.verrouillee { background: #FBFBFC; }
.cadenas-param { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--doux);
    background: var(--gris-clair); border-radius: 20px; padding: 3px 10px 3px 7px; }
.cadenas-param .ico { width: 14px; height: 14px; color: var(--doux); }
.affiche { text-align: center; border: 3px solid var(--rouge); border-radius: 16px; padding: 22px 20px 16px; background: #fff; }
.affiche-haut { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.affiche-haut img { width: 74px; height: 74px; object-fit: contain; }
.affiche-haut b { display: block; font-size: 20px; color: var(--rouge); text-align: left; }
.affiche-haut span { display: block; font-size: 13px; color: var(--doux); text-align: left; }
.affiche-salle { background: var(--rouge); color: #fff; font-size: 30px; font-weight: 800; border-radius: 10px; padding: 12px; margin: 6px 0 6px; }
.affiche-site { color: var(--doux); font-size: 14px; margin-bottom: 8px; }
.affiche-qr svg { width: 300px; height: 300px; max-width: 80%; height: auto; display: block; margin: 8px auto; }
.affiche-texte { font-size: 15.5px; }
.affiche-texte ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.affiche-texte li::before { content: "✓ "; color: var(--rouge); font-weight: 800; }
.affiche-pied { margin-top: 10px; font-size: 12px; color: var(--doux); border-top: 1px solid var(--bord); padding-top: 8px; }
.porte { max-width: 620px; margin: 0 auto; padding: 18px 16px 30px; }
.porte .boutons { display: grid; gap: 10px; margin: 16px 0; }
.porte .boutons .btn { padding: 14px; font-size: 16px; }
.verif { max-width: 520px; margin: 0 auto; padding: 22px 16px 30px; text-align: center; }
.verif .verdict { border-radius: 16px; padding: 26px 18px; font-size: 28px; font-weight: 800; margin: 14px 0; }
.verif .verdict small { display: block; font-size: 15px; font-weight: 600; margin-top: 6px; }
.verif .verdict.ok { background: var(--vert-clair); color: var(--vert); border: 2px solid #BFE3CC; }
.verif .verdict.attente { background: var(--orange-clair); color: var(--orange); border: 2px solid #F5D5A8; }
.verif .verdict.non { background: var(--rouge-clair); color: var(--rouge-fonce); border: 2px solid var(--rouge-bord); }
@media print {
    .fenetre header { display: none !important; }
    .affiche { border-width: 4px; padding: 30px; }
    .affiche-salle, .affiche-haut b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .affiche-qr svg { width: 11cm; height: 11cm; }
    .bloc-qr { break-inside: avoid; }
}


/* ---------- Affiche de porte avec guide (1.1.3) ---------- */
.affiche-guide { text-align: left; padding: 20px 22px 14px; }
.affiche-guide .affiche-haut { justify-content: flex-start; margin-bottom: 10px; }
.affiche-guide .affiche-salle { text-align: center; font-size: 28px; margin: 4px 0 4px; }
.affiche-guide .affiche-site { text-align: center; margin-bottom: 14px; }
.affiche-corps { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.affiche-gauche { text-align: center; border: 2px solid var(--rouge-bord); border-radius: 14px; padding: 14px 12px; background: var(--rouge-clair); }
.affiche-gauche .affiche-qr svg { width: 250px; height: 250px; max-width: 100%; margin: 0 auto; border-radius: 8px; }
.affiche-scan { display: inline-block; background: var(--rouge); color: #fff; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; border-radius: 20px; padding: 5px 16px; margin: 6px 0 10px; }
.affiche-adresse { background: #fff; border: 1.5px solid var(--rouge); border-radius: 10px; padding: 8px 6px; }
.affiche-adresse span { display: block; font-size: 11.5px; color: var(--doux); text-transform: uppercase; letter-spacing: .6px; }
.affiche-adresse b { display: block; font-size: 19px; color: var(--rouge-fonce); word-break: break-all; }
.affiche-avantages { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13.5px; text-align: left; display: grid; gap: 4px; }
.affiche-avantages li::before { content: "✓ "; color: var(--rouge); font-weight: 800; }
.affiche-droite h3 { margin: 0 0 10px; font-size: 19px; color: var(--rouge-fonce); }
.affiche-etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; display: grid; gap: 9px; }
.affiche-etapes li { counter-increment: etape; position: relative; padding-left: 40px; font-size: 13.5px; line-height: 1.4; }
.affiche-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--rouge); color: #fff;
    font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.affiche-etapes li > b { display: block; font-size: 14.5px; color: var(--texte); }
.affiche-etapes li span b { color: var(--rouge-fonce); }
.affiche-etapes li span { color: #3A4048; }
.affiche-regles { margin-top: 12px; background: var(--gris-clair); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: #3A4048; }
.affiche-regles b { display: block; color: var(--rouge-fonce); margin-bottom: 2px; }
.affiche-guide .affiche-pied { text-align: center; }
@media (max-width: 760px) {
    .affiche-corps { grid-template-columns: 1fr; }
}
@media print {
    .affiche-guide { border-width: 4px; padding: 16px 18px 10px; }
    .affiche-corps { grid-template-columns: 7.4cm 1fr; gap: 16px; }
    .affiche-gauche .affiche-qr svg { width: 6.6cm; height: 6.6cm; }
    .affiche-gauche, .affiche-scan, .affiche-etapes li::before, .affiche-regles { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .affiche-guide .affiche-salle { font-size: 26px; }
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 980px) {
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .cadre { grid-template-columns: 1fr; }
    nav.menu { position: fixed; top: 66px; left: 0; bottom: 0; width: 270px; z-index: 60; transform: translateX(-100%); transition: transform .2s; height: auto; visibility: hidden; }
    nav.menu.ouvert { transform: none; box-shadow: 4px 0 20px rgba(0,0,0,.2); visibility: visible; }
    .cadre { background: var(--fond); }
    .menu-mobile { display: inline-flex; }
    main { padding: 16px 16px 30px; }
    .accueil-cnx { grid-template-columns: 1fr; }
    .accueil-cnx .gauche { padding: 28px 22px; }
    .accueil-cnx .gauche ul { display: none; }
    .accueil-cnx .gauche h1 { font-size: 24px; }
    .accueil-cnx .gauche .grand-logo { width: 74px; height: 74px; margin-bottom: 14px; }
    .g2 { grid-template-columns: minmax(0, 1fr); }
    .choix-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    dl.fiche { grid-template-columns: 1fr; gap: 2px; }
    dl.fiche dd { margin-bottom: 8px; }
    .barres .l { grid-template-columns: 100px 1fr 60px; }
    .entete .titres span { display: none; }
    .btn-entete .txt { display: none; }
    .mois .case { min-height: 70px; }
    .mois .puce { font-size: 10px; }
    .ecran .haut h1 { font-size: 22px; } .ecran .haut .heure { font-size: 24px; }
}
@media (max-width: 520px) {
    .g4 { grid-template-columns: 1fr 1fr; }
    .kpi .val { font-size: 21px; }
}

/* ---------- 1.2.0 : réservation sans compte ---------- */
.affiche-adresse small { display: block; font-size: 13px; color: var(--rouge-fonce); font-weight: 700; }
.affiche-contact { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--rouge-fonce); }
.sans-compte { margin-top: 22px; border: 1.5px solid var(--rouge-bord); background: var(--rouge-clair); border-radius: 12px; padding: 14px; text-align: center; }
.sans-compte b { display: block; font-size: 15px; }
.sans-compte span { display: block; font-size: 13px; color: var(--doux); margin: 3px 0 10px; }
.sans-compte .btn { width: 100%; }
.public { max-width: 760px; margin: 0 auto; padding: 18px 16px 30px; }
.public h1 { font-size: 24px; margin: 4px 0 4px; }
.public .intro { color: var(--doux); margin: 0 0 14px; }
.etapes-public { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: e; }
.etapes-public li { counter-increment: e; background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; color: var(--doux); }
.etapes-public li::before { content: counter(e); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rouge); color: #fff; font-weight: 800; margin-right: 6px; font-size: 12px; }
.etapes-public li b { color: var(--texte); }
.recu { text-align: center; }
.recu .ref { font-size: 26px; font-weight: 800; color: var(--rouge-fonce); letter-spacing: 1px; margin: 6px 0; }
.recu .qr-grand svg { width: 220px; height: 220px; display: block; margin: 10px auto; border: 1px solid var(--bord); border-radius: 12px; padding: 6px; background: #fff; }
.recu .consignes { text-align: left; background: var(--gris-clair); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 12px; }
.recu .consignes li { margin-bottom: 6px; }
.arrivee-tel { display: flex; gap: 8px; }
.arrivee-tel input { flex: 1; }
@media (max-width: 640px) { .etapes-public { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .recu .consignes, .recu .qr-grand svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

@media print {
    body:has(.voile) #app, body:has(.voile) > .toast { display: none !important; }
    .voile { display: block !important; padding: 0 !important; overflow: visible !important; }
    .affiche-guide { break-inside: avoid; }
}

/* ---------- 1.2.1 : affiche professionnelle au format paysage ---------- */
.affiche-pro { border: 3px solid var(--rouge); border-radius: 14px; overflow: hidden; background: #fff; color: var(--texte); text-align: left; page: affiche; }
.ap-tete { display: flex; align-items: center; gap: 14px; background: var(--rouge); color: #fff; padding: 12px 20px; }
.ap-tete img { width: 62px; height: 62px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; flex: none; }
.ap-org { flex: 1; min-width: 0; }
.ap-org b { display: block; font-size: 20px; letter-spacing: .2px; }
.ap-org span { display: block; font-size: 13px; opacity: .92; }
.ap-salle { text-align: right; }
.ap-salle span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; }
.ap-salle b { display: block; font-size: 26px; line-height: 1.1; }
.ap-salle small { display: block; font-size: 12.5px; opacity: .9; }
.ap-corps { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 18px; padding: 16px 18px 12px; align-items: start; }
.ap-qr { background: var(--rouge-clair); border: 1.5px solid var(--rouge-bord); border-radius: 12px; padding: 12px; text-align: center; }
.ap-qr-titre { font-weight: 800; color: var(--rouge-fonce); font-size: 16px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px; }
.ap-qr svg { width: 210px; height: 210px; max-width: 100%; display: block; margin: 0 auto; border-radius: 8px; }
.ap-scan { display: inline-block; margin: 8px 0; background: var(--rouge); color: #fff; font-weight: 700; font-size: 12.5px; border-radius: 20px; padding: 4px 12px; }
.ap-adresse { background: #fff; border: 1px solid var(--rouge-bord); border-radius: 8px; padding: 7px 6px; }
.ap-adresse span { display: block; font-size: 11px; color: var(--doux); }
.ap-adresse b { display: block; font-size: 14px; color: var(--rouge-fonce); word-break: break-all; }
.ap-contact { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--rouge-fonce); }
.ap-contact span { display: block; font-size: 10.5px; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .6px; }
.ap-etapes h3 { margin: 0 0 8px; font-size: 16px; color: var(--rouge-fonce); text-transform: uppercase; letter-spacing: .6px; border-bottom: 2px solid var(--rouge); padding-bottom: 4px; }
.ap-etapes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-etapes li { display: flex; gap: 10px; align-items: flex-start; }
.ap-etapes .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rouge); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13.5px; }
.ap-etapes li b { display: block; font-size: 14px; }
.ap-etapes li p { margin: 1px 0 0; font-size: 12.5px; line-height: 1.35; color: #30363D; }
.ap-etapes li p.pourquoi { color: var(--doux); font-size: 11.8px; }
.ap-etapes li p.pourquoi em { font-style: normal; font-weight: 700; color: var(--rouge-fonce); }
.ap-regles { margin-top: 10px; background: var(--gris-clair); border-radius: 10px; padding: 8px 12px; font-size: 12px; }
.ap-regles b { color: var(--rouge-fonce); }
.ap-regles ul { margin: 4px 0 0; padding-left: 16px; }
.ap-pied { background: #FAFAFB; border-top: 1px solid var(--bord); text-align: center; font-size: 11.5px; color: var(--doux); padding: 7px 12px; }
@media (max-width: 860px) {
    .ap-corps { grid-template-columns: 1fr; }
    .ap-tete { flex-wrap: wrap; }
    .ap-salle { text-align: left; width: 100%; }
}
@page affiche { size: A4 landscape; margin: 7mm; }
@media print {
    .affiche-pro { border-width: 3px; }
    .ap-tete, .ap-qr, .ap-scan, .ap-etapes .num, .ap-regles, .ap-pied, .ap-etapes h3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ap-corps { grid-template-columns: 6.6cm 1fr 1fr; gap: 14px; }
    .ap-qr svg { width: 5.6cm; height: 5.6cm; }
}

@media print {
    body:has(.affiche-pro) .fenetre, body:has(.affiche-pro) .fenetre.large { max-width: none !important; width: 100% !important; border-radius: 0; }
    body:has(.affiche-pro) .fenetre .corps { padding: 0 !important; }
    body:has(.affiche-pro) .zone-erreur { display: none; }
    .affiche-pro { break-inside: avoid; }
    .ap-corps { padding: 12px 16px 8px; }
    .ap-etapes ol { gap: 6px; }
}
@media print {
    .ap-tete { flex-wrap: nowrap !important; }
    .ap-salle { text-align: right !important; width: auto !important; }
    .ap-corps { grid-template-columns: 6.4cm 1fr 1fr !important; }
}

/* ---------- 1.2.1 : affiche paysage qui remplit toute la page ---------- */
.ap-etapes li p em.comment { font-style: normal; font-weight: 700; color: var(--texte); }
.ap-infos { margin-top: 10px; border: 1.5px solid var(--rouge-bord); border-radius: 10px; padding: 8px 12px; font-size: 12px; background: #fff; }
.ap-infos > b { color: var(--rouge-fonce); display: block; margin-bottom: 4px; }
.ap-infos dl { display: grid; grid-template-columns: 82px 1fr; gap: 3px 8px; margin: 0; }
.ap-infos dt { font-weight: 700; color: #30363D; }
.ap-infos dd { margin: 0; color: #30363D; }
@media print {
    body:has(.affiche-pro) .affiche-pro { height: 192mm; display: flex; flex-direction: column; overflow: hidden; }
    body:has(.affiche-pro) .ap-tete { padding: 8px 16px; flex: none; }
    body:has(.affiche-pro) .ap-tete img { width: 54px; height: 54px; }
    body:has(.affiche-pro) .ap-pied { flex: none; padding: 5px 12px; font-size: 11px; }
    body:has(.affiche-pro) .ap-corps { flex: 1; min-height: 0; align-items: stretch; grid-template-columns: 7.4cm 1fr 1fr !important; gap: 14px; padding: 10px 14px 8px; }
    body:has(.affiche-pro) .ap-qr { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; }
    body:has(.affiche-pro) .ap-qr svg { width: 6.6cm; height: 6.6cm; }
    body:has(.affiche-pro) .ap-qr-titre { font-size: 16px; }
    body:has(.affiche-pro) .ap-adresse b { font-size: 14px; }
    body:has(.affiche-pro) .ap-etapes { display: flex; flex-direction: column; min-height: 0; }
    body:has(.affiche-pro) .ap-etapes > ol { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
    body:has(.affiche-pro) .ap-jour > ol { flex: 0 0 auto; gap: 8px; }
    body:has(.affiche-pro) .ap-etapes h3 { font-size: 15.5px; margin-bottom: 6px; }
    body:has(.affiche-pro) .ap-etapes li b { font-size: 13.8px; }
    body:has(.affiche-pro) .ap-etapes li p { font-size: 11.8px; line-height: 1.3; }
    body:has(.affiche-pro) .ap-etapes li p.pourquoi { font-size: 11.3px; }
    body:has(.affiche-pro) .ap-infos, body:has(.affiche-pro) .ap-regles { font-size: 11.6px; margin-top: 8px; }
    body:has(.affiche-pro) .ap-jour .ap-regles { margin-top: auto; }
    .ap-infos { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}