/* ══════════════════════════════════════════════════════════════════════════════
   OZÉ INVIT — feuille unique.
   Langage du MOULE : carte badge, bulle rouge + deux traits, filets fins,
   AUCUNE ombre portée, aucun emoji en interface.
   Deux registres :
     · PUBLIC  (landing, page de l'invité) — sombre, halos radiaux, particules ;
     · MÉTIER  (direction, accueil)         — clair crème, lisible au bureau.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --or: #d4a574;
  --rouge: #a32b2b;          /* la bulle rouge du moule */
  --rouge-vif: #e63946;
  --encre: #1b1b1d;
  --encre-2: #4a4a4f;
  --encre-3: #7c7c82;
  --creme: #f7f7f5;
  --creme-2: #efece6;
  --filet: #e2ded6;
  --filet-fort: #cfc9be;
  --blanc: #ffffff;
  --nuit: #0b0b0d;
  --nuit-2: #131317;
  --vert: #2b7a57;
  --ambre: #8a6a2b;
  --bleu: #2b5ba3;
  --radius: 14px;
  --radius-sm: 9px;
  --police: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Georgia, "Cormorant Garamond", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--police); font-weight: 420; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 510; letter-spacing: -0.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ── le langage de section : bulle rouge + deux traits (moule) ─────────────── */
.bande { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; }
.bande::before, .bande::after { content: ""; height: 1px; background: var(--filet-fort); flex: 1; }
.bulle-rouge {
  background: var(--rouge); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
}

/* ── pastille de catégorie ─────────────────────────────────────────────────── */
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); }
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--rouge)); }

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRE PUBLIC — la landing et la page de l'invité
   ══════════════════════════════════════════════════════════════════════════ */
body.public {
  background: var(--nuit); color: #f2f0ec; min-height: 100vh; overflow-x: hidden;
}
body.public::before {
  /* Jamais de fond noir plat : trois halos radiaux. */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 460px at 14% 8%, rgba(230, 57, 70, .20), transparent 68%),
    radial-gradient(720px 520px at 88% 18%, rgba(212, 165, 116, .16), transparent 70%),
    radial-gradient(900px 700px at 50% 118%, rgba(163, 43, 43, .14), transparent 72%);
}
.particules { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }
body.public > * { position: relative; z-index: 1; }
/* ⚠️ LA RÈGLE CI-DESSUS ATTRAPE LE CANVAS AUSSI (`body.public > *` est plus spécifique que
   `.particules`), le repasse en flux et pousse tout le contenu sous la ligne de flottaison.
   Mesuré en capture : la landing apparaissait VIDE. Le canvas doit rester en `fixed`. */
body.public > canvas.particules { position: fixed; top: 0; left: 0; z-index: 0; }

.pub-tete { display: flex; align-items: center; justify-content: space-between; padding: 26px 40px; }
.pub-logo { height: 34px; width: auto; }
.pub-nav { display: flex; gap: 10px; align-items: center; }
.pub-lien { font-size: 13px; color: #cfc9be; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 18px; transition: border-color .2s, color .2s; background: rgba(255,255,255,.02); }
.pub-lien:hover { border-color: var(--or); color: #fff; }
.pub-lien.fort { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.pub-lien.fort:hover { background: var(--rouge-vif); border-color: var(--rouge-vif); }

.pub-hero { max-width: 1120px; margin: 0 auto; padding: 54px 40px 40px; }
.pub-surtitre { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin-bottom: 20px; }
.pub-titre { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 74px); line-height: 1.04; letter-spacing: -0.02em; }
.pub-titre em { font-style: normal; color: var(--or); }
.pub-chapeau { margin-top: 24px; max-width: 620px; font-size: 16.5px; line-height: 1.7; color: #bdb8b0; }

.grille-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; max-width: 1120px; margin: 20px auto 0; padding: 0 40px 30px; }
.atout {
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius);
  padding: 22px 20px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter: blur(6px);
}
.atout h3 { font-size: 15px; margin-bottom: 9px; }
.atout p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #a9a49c; }
.atout .num { font-family: var(--serif); font-size: 30px; color: var(--or); line-height: 1; margin-bottom: 12px; display: block; }

.pub-pied { max-width: 1120px; margin: 16px auto 0; padding: 30px 40px 56px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 12.5px; color: #8c8781; }

/* ── page de l'invité (cible du QR) ───────────────────────────────────────── */
body.page-invite { background: var(--nuit); color: #f2f0ec; display: grid; place-items: center; min-height: 100vh; padding: 26px; }
body.page-invite::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(620px 420px at 50% 0%, rgba(212,165,116,.18), transparent 70%), radial-gradient(700px 500px at 50% 110%, rgba(163,43,43,.18), transparent 72%);
}
.inv-carte {
  position: relative; width: 100%; max-width: 430px; text-align: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 36px 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.inv-agence { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin: 0 0 18px; }
.inv-nom { font-family: var(--serif); font-size: 31px; font-weight: 500; line-height: 1.15; }
.inv-soc { font-size: 13.5px; color: #bdb8b0; margin: 8px 0 0; }
.inv-badge-ligne { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.inv-badge-ligne .pastille { color: #ded9d2; }
.inv-place { font-size: 12.5px; color: #bdb8b0; }
.inv-trait { border: 0; border-top: 1px solid rgba(255,255,255,.13); margin: 24px 0 20px; }
.inv-event { font-size: 17px; font-weight: 500; margin: 0; }
.inv-date, .inv-lieu { font-size: 13.5px; color: #bdb8b0; margin: 6px 0 0; }
.inv-qr { margin: 22px auto 10px; display: block; background: #fff; border-radius: 12px; padding: 10px; width: 232px; height: 232px; }
.inv-code { font-size: 13px; color: #bdb8b0; margin: 10px 0 0; letter-spacing: .04em; }
.inv-code b { color: #fff; font-size: 17px; letter-spacing: .16em; }
.inv-statut { font-size: 12.5px; color: #9a958e; margin: 16px 0 0; }
.inv-statut.est-arrive { color: #8fd6b0; }

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRE MÉTIER — direction, accueil, badges
   ══════════════════════════════════════════════════════════════════════════ */
.app-tete {
  position: sticky; top: 0; z-index: 40; background: rgba(247,247,245,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet); padding: 0 26px;
  display: flex; align-items: center; gap: 20px; height: 66px;
}
.app-tete .logo { height: 26px; width: auto; }
.app-tete .ou { font-size: 12px; color: var(--encre-3); letter-spacing: .04em; }
.app-tete .ev-select { border: 1px solid var(--filet-fort); border-radius: 999px; padding: 7px 14px; background: var(--blanc); font-size: 13px; font-weight: 500; max-width: 320px; }
.app-tete .droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.puce-moi { display: flex; align-items: center; gap: 9px; border: 1px solid var(--filet-fort); border-radius: 999px; padding: 6px 14px 6px 8px; background: var(--blanc); font-size: 12.5px; }
.puce-moi .rond { width: 24px; height: 24px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 500; }

.onglets { display: flex; gap: 2px; padding: 0 26px; border-bottom: 1px solid var(--filet); background: rgba(247,247,245,.94); overflow-x: auto; }
.onglet { border: 0; background: transparent; padding: 15px 15px 13px; font-size: 13.5px; color: var(--encre-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.onglet:hover { color: var(--encre); }
.onglet.actif { color: var(--rouge); border-bottom-color: var(--rouge); font-weight: 500; }

.vue { max-width: 1360px; margin: 0 auto; padding: 24px 26px 90px; }
.vue[hidden] { display: none; }

/* ── widgets ─────────────────────────────────────────────────────────────── */
.guichets { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.guichet { border: 1px solid var(--filet); border-radius: var(--radius); background: var(--blanc); padding: 18px 18px 16px; }
.guichet .val { font-size: 30px; font-weight: 510; letter-spacing: -.02em; line-height: 1; }
.guichet .lib { font-size: 11.5px; color: var(--encre-3); margin-top: 9px; text-transform: uppercase; letter-spacing: .06em; }
.guichet.accent .val { color: var(--rouge); }
.jauge { height: 6px; border-radius: 999px; background: var(--creme-2); margin-top: 14px; overflow: hidden; }
.jauge > i { display: block; height: 100%; background: var(--rouge); }

/* ── cartes du moule ─────────────────────────────────────────────────────── */
.cartes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.carte {
  width: 264px; border: 1px solid var(--filet); border-radius: var(--radius); background: var(--blanc);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.carte .tete { display: flex; align-items: center; gap: 10px; }
.carte .photo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; object-position: center 18%; background: var(--creme-2); flex: 0 0 auto; }
.carte .photo.ini { display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--encre-2); }
.carte .qui { min-width: 0; }
.carte .qui b { display: block; font-size: 14.5px; font-weight: 500; }
.carte .qui span { display: block; font-size: 12px; color: var(--encre-3); overflow-wrap: break-word; }
.carte .faits { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--encre-2); }
.carte .bas { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── tableaux ────────────────────────────────────────────────────────────── */
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--radius); overflow: hidden; }
.tableau th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-3); font-weight: 500; padding: 12px 14px; border-bottom: 1px solid var(--filet); background: var(--creme); white-space: nowrap; }
.tableau td { padding: 11px 14px; border-bottom: 1px solid var(--filet); font-size: 13.5px; vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr:hover td { background: #fbfaf8; }
.cell-qui { display: flex; align-items: center; gap: 10px; }
.cell-qui img, .cell-qui .ini { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; object-position: center 18%; background: var(--creme-2); flex: 0 0 auto; }
.cell-qui .ini { display: grid; place-items: center; font-size: 11.5px; color: var(--encre-2); }
.etat { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--filet-fort); color: var(--encre-2); white-space: nowrap; }
.etat.arrive { border-color: #b6d9c6; background: #eef7f1; color: var(--vert); }
.etat.confirme { border-color: #c2d2ea; background: #f0f5fc; color: var(--bleu); }
.etat.decline { border-color: #e6c3c3; background: #fdf1f1; color: var(--rouge); }

/* ── commandes ───────────────────────────────────────────────────────────── */
.btn { border: 1px solid var(--filet-fort); background: var(--blanc); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 500; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--encre-2); }
.btn.fort { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn.fort:hover { background: var(--rouge-vif); border-color: var(--rouge-vif); }
.btn.mini { padding: 5px 11px; font-size: 11.5px; }
.btn.sec { background: transparent; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.barre-outils .pousse { margin-left: auto; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 11.5px; color: var(--encre-3); text-transform: uppercase; letter-spacing: .06em; }
.champ input, .champ select, .champ textarea {
  border: 1px solid var(--filet-fort); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--blanc); font-size: 13.5px; min-width: 0;
}
.champ textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid rgba(163,43,43,.25); outline-offset: 1px; border-color: var(--rouge); }
.recherche { flex: 1; min-width: 210px; }
.form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.carte-panneau { border: 1px solid var(--filet); border-radius: var(--radius); background: var(--blanc); padding: 20px; }
.aide { font-size: 12px; color: var(--encre-3); line-height: 1.6; }
.alerte { border: 1px solid #e6c3c3; background: #fdf1f1; color: #7a2222; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; }
.vide { text-align: center; color: var(--encre-3); font-size: 13.5px; padding: 40px 10px; border: 1px dashed var(--filet-fort); border-radius: var(--radius); }

/* fenêtre */
.voile { position: fixed; inset: 0; background: rgba(20,18,16,.42); z-index: 90; display: grid; place-items: center; padding: 22px; }
.voile[hidden] { display: none; }
.fenetre { background: var(--creme); border: 1px solid var(--filet-fort); border-radius: 18px; width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; }
.fenetre .ftete { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--filet); position: sticky; top: 0; background: var(--creme); }
.fenetre .ftete h3 { font-size: 16px; }
.fenetre .ftete .x { margin-left: auto; border: 1px solid var(--filet-fort); background: var(--blanc); width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1; }
.fenetre .fcorps { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.fenetre .fpied { padding: 16px 22px; border-top: 1px solid var(--filet); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--creme); }

/* ══════════════════════════════════════════════════════════════════════════
   LE SCAN — téléphone
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LE SCAN — la page de l'hôtesse. Mobile d'abord, puis deux colonnes
   dès qu'il y a la place (tablette, téléphone couché).
   ⚠️ Trois règles apprises sur ce projet, qui valent ici :
     · `100dvh` + `safe-area-inset` : sur iPad/Safari, `100vh` déborde sous la barre ;
     · un champ de saisie sous 16 px fait ZOOMER iOS au focus — 16 px minimum ;
     · toute cible tactile ≥ 48 px, sinon un doigt rate le bouton en pleine foule.
   ══════════════════════════════════════════════════════════════════════════ */
body.scan {
  background: var(--nuit); color: #f2f0ec;
  min-height: 100dvh; overflow-y: auto;
  -webkit-text-size-adjust: 100%;
}
.scan-tete {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap;
}
.scan-tete .logo { height: 22px; width: auto; }
.scan-tete .compte { margin-left: auto; font-size: 12.5px; color: #bdb8b0; }
.scan-zone {
  padding: 14px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1180px; margin: 0 auto; width: 100%;
}
.scan-zone > #ev { font-size: 15px; min-height: 46px; }

/* ── les deux blocs : empilés par défaut ── */
.scan-duo { display: flex; flex-direction: column; gap: 14px; }
.scan-gauche, .scan-droite { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.scan-cadre {
  position: relative; border-radius: 18px; overflow: hidden; background: #000;
  aspect-ratio: 4 / 3; max-height: 42dvh; border: 1px solid rgba(255,255,255,.14);
  /* en portrait, la caméra ne mange pas plus de 42 % de l'écran : le résultat reste près */
  width: 100%;
}
.scan-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-cadre .cible { position: absolute; inset: 18% 12%; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; }
.scan-aide { font-size: 13px; color: #bdb8b0; text-align: center; margin: 0; overflow-wrap: break-word; }
/* ⚠️ NE JAMAIS mettre `display:flex` sur un élément de TEXTE : le texte devient un élément
   anonyme dimensionné au max-content, il NE SE REPLIE PAS et sort de sa boîte — coupé net
   à « code d'accu » (mesuré sur 390 px). `min-height` seul suffit à réserver la place. */
#aide { min-height: 2.6em; padding: 4px 0; }

.scan-res {
  border-radius: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); min-width: 0;
}
.scan-res.ok { border-color: #3f8f68; background: rgba(43,122,87,.16); }
.scan-res.deja { border-color: #b8860b; background: rgba(184,134,11,.16); }
.scan-res.inconnu { border-color: #a33; background: rgba(163,43,43,.18); }
.scan-res .nom { font-family: var(--serif); font-size: clamp(21px, 5.4vw, 28px); margin: 4px 0 0; overflow-wrap: break-word; }
.scan-res .ligne2 { font-size: 13px; color: #cfc9be; margin-top: 5px; overflow-wrap: break-word; }
.scan-res .gros { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: .8; margin: 0; }

.scan-compteur {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  text-align: center;
}
.scan-compteur span { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #bdb8b0; text-transform: uppercase; letter-spacing: .06em; }
.scan-compteur b { color: #fff; font-size: 19px; letter-spacing: 0; }

.scan-saisie { display: flex; gap: 8px; min-width: 0; }
.scan-saisie input {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; border-radius: 999px; padding: 13px 16px;
  font-size: 16px;   /* ⚠️ 16 px minimum, sinon iOS zoome au focus */
  letter-spacing: .1em; text-transform: uppercase;
}
.scan-saisie .btn, .scan-actions .btn, .scan-res .btn { min-height: 48px; padding-left: 20px; padding-right: 20px; }
.scan-file { font-size: 12px; color: #bdb8b0; text-align: center; margin: 0; }
.scan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.scan-actions .btn { flex: 1 1 180px; }

/* ── TÉLÉPHONE COUCHÉ ou fenêtre courte : on passe en deux colonnes ── */
@media (max-width: 900px) and (orientation: landscape), (min-width: 620px) {
  .scan-duo { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .scan-cadre { max-height: 56dvh; }
  /* la colonne de droite s'étale sur la hauteur de la caméra au lieu de laisser un vide en bas */
  .scan-droite { justify-content: space-between; }
}
/* ── le titre long n'a pas sa place sur un téléphone : l'hôtesse sait où elle est ── */
@media (max-width: 560px) {
  .scan-titre { display: none; }
  .scan-tete { padding: 10px 14px; }
  .scan-tete .compte { font-size: 12px; }
}
/* ── fenêtre courte (téléphone couché) : la caméra se limite encore ── */
@media (orientation: landscape) and (max-height: 560px) {
  .scan-cadre { max-height: 62dvh; aspect-ratio: 4 / 3; }
  .scan-zone { gap: 10px; padding-top: 10px; }
  .scan-tete { padding: 8px 14px; }
}
/* ── vraie tablette : plus d'air, caméra plus grande ── */
@media (min-width: 900px) {
  .scan-zone { padding: 20px 22px 40px; gap: 16px; }
  .scan-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
  .scan-cadre { max-height: 62dvh; }
  .scan-tete { padding: 14px 22px; }
  .scan-res { padding: 22px; }
}
/* ── très petit téléphone : les compteurs passent en 2 × 2 ── */
@media (max-width: 420px) {
  .scan-compteur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-tete .compte { width: 100%; margin-left: 0; }
}
/* ══ TÉLÉPHONE : une COLONNE ÉTROITE ET CENTRÉE, et tout ce qu'elle contient centré ══
   Demande d'Hatim : « le mode téléphone n'est pas bien, ce n'est pas centré ».
   Sur un téléphone on ne cherche pas à remplir la largeur : on cherche une colonne
   calme, centrée, où l'œil tombe au milieu. Chaque bloc reçoit une largeur maximale
   ET `margin:0 auto`, pour qu'aucun ne puisse paraître décalé. */
@media (max-width: 600px) {
  .scan-zone { max-width: 520px; padding-left: 16px; padding-right: 16px; }
  .scan-zone > #ev { text-align: center; text-align-last: center; }
  .scan-cadre { max-width: 100%; margin-left: auto; margin-right: auto; border-radius: 16px; }
  /* le résultat se lit au CENTRE : c'est le seul endroit que l'hôtesse regarde vraiment */
  #res { text-align: center; }
  #res .nom, #res .ligne2, #res .gros { text-align: center; }
  #res .nom { font-size: clamp(20px, 6.4vw, 26px); }
  .scan-compteur { max-width: 340px; margin-left: auto; margin-right: auto; }
  /* ⚠️ La saisie passe EN COLONNE : un champ large avec un petit bouton collé à droite
     se lit comme un bloc décentré. Champ pleine largeur, bouton dessous, tout centré. */
  .scan-saisie { flex-direction: column; align-items: stretch; }
  .scan-saisie .btn { width: 100%; }
  #manuel { text-align: center; }
  .scan-actions { justify-content: center; }
  /* l'en-tête aussi est centré, sinon le haut de page jure avec le reste */
  .scan-tete { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .scan-tete .logo { margin: 0 auto; }
  .scan-tete .compte { margin-left: 0; width: 100%; text-align: center; }
  /* la recherche reste alignée à gauche : ses lignes portent un bouton à droite */
  details.scan-res { text-align: left; }
  #res-recherche > div { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE BADGE — impression thermique
   ══════════════════════════════════════════════════════════════════════════ */
body.badge-page { background: #e9e6e0; margin: 0; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.badge { background: #fff; color: #17171a; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.badge.carte { width: 85.6mm; height: 54mm; }              /* Badgy / carte PVC */
.badge.badge  { width: 100mm;  height: 80mm; }
.badge .haut { display: flex; gap: 3.2mm; padding: 3.4mm 3.4mm 0; flex: 1; min-height: 0; }
.badge .ph { flex: 0 0 auto; width: 21mm; height: 21mm; border-radius: 2mm; object-fit: cover; object-position: center 18%; background: #efefef; display: grid; place-items: center; font-size: 8mm; color: #bbb; }
.badge.badge .ph { width: 27mm; height: 27mm; }
.badge .id { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.badge .nom { font-size: 4.6mm; font-weight: 600; line-height: 1.1; letter-spacing: -.2px; }
.badge .soc { font-size: 2.7mm; color: #55555c; margin-top: .8mm; }
.badge .fon { font-size: 2.4mm; color: #83838a; margin-top: .4mm; }
.badge .bas { display: flex; align-items: flex-end; justify-content: space-between; padding: 2.2mm 3.4mm 3mm; }
.badge .qr { width: 13mm; height: 13mm; }
.badge.badge .qr { width: 19mm; height: 19mm; }
.badge .cat { font-size: 2.4mm; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.badge .ev { font-size: 2.2mm; color: #77777e; margin-top: .8mm; }
.badge .code { font-size: 2.6mm; letter-spacing: .12em; color: #55555c; margin-top: .6mm; }
.badge .bande-cat { height: 1.9mm; background: var(--c, #a32b2b); }
.badge .marque { font-size: 2mm; color: #a8a8ad; text-align: right; }

@media print {
  body.badge-page { background: #fff; padding: 0; display: block; }
  .sans-impression { display: none !important; }
  .badge { page-break-after: always; border: 0; }
  @page { margin: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESPACE RESPONSABLE — le dashboard du Jour J, en ligne.
   Sombre à dessein : c'est un écran de salle de contrôle, on le lit de loin,
   et il ne doit pas se confondre avec la direction de l'agence.
   ══════════════════════════════════════════════════════════════════════════ */
body.resp { background: var(--nuit); color: #f2f0ec; min-height: 100vh; }
body.resp::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(230, 57, 70, .16), transparent 68%),
    radial-gradient(820px 560px at 92% 8%, rgba(212, 165, 116, .13), transparent 70%);
}
body.resp > * { position: relative; z-index: 1; }

.resp-tete {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px;
  padding: 0 26px; height: 66px; background: rgba(11, 11, 13, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.resp-tete .logo { height: 24px; width: auto; }
.resp-tete .ou { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.resp-tete select { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; max-width: 300px; }
.resp-tete .droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.resp-tete .btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #f2f0ec; }
.resp-tete .btn:hover { border-color: var(--or); }
.resp-tete .btn.fort { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.resp-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #bdb8b0; }
.resp-live i { width: 8px; height: 8px; border-radius: 50%; background: #4ec38a; animation: battre 1.8s ease-in-out infinite; }
.resp-live.ko i { background: #e6a0a0; animation: none; }
.resp-live.pause i { background: var(--or); animation: none; }
@keyframes battre { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
body.resp .puce-moi { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #f2f0ec; }

.resp-corps { max-width: 1320px; margin: 0 auto; padding: 26px 26px 70px; display: flex; flex-direction: column; }
body.resp .bande::before, body.resp .bande::after { background: rgba(255,255,255,.18); }
body.resp .aide { color: #8f8a84; }

.resp-phare {
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 26px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.resp-big { display: flex; align-items: baseline; gap: 12px; }
.resp-big .n { font-family: var(--serif); font-size: clamp(58px, 9vw, 104px); line-height: .92; letter-spacing: -.03em; }
.resp-big .l { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.resp-phare-txt { flex: 1; min-width: 260px; }
.resp-surtitre { font-size: 15px; margin: 0 0 10px; color: #ded9d2; }
.resp-chiffres { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: #bdb8b0; margin: 0; }
.resp-chiffres b { color: #fff; font-size: 17px; }
.resp-jauge { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); margin-top: 14px; overflow: hidden; }
.resp-jauge > i { display: block; height: 100%; background: linear-gradient(90deg, var(--rouge), var(--or)); transition: width .5s; }

.resp-cats { display: flex; flex-direction: column; gap: 10px; }
.resp-cat { display: grid; grid-template-columns: minmax(140px, 210px) 1fr 74px; align-items: center; gap: 14px; }
.resp-cat .bar, .resp-heure .bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.11); overflow: hidden; display: block; }
.resp-cat .bar > i { display: block; height: 100%; background: var(--or); transition: width .5s; }
.resp-cat b { text-align: right; font-size: 15px; }
.resp-cat b span { color: #8f8a84; font-size: 12.5px; font-weight: 400; }

.resp-heures { display: flex; align-items: flex-end; gap: 8px; height: 130px; overflow-x: auto; }
.resp-heure { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 46px; height: 100%; justify-content: flex-end; }
.resp-heure .h { font-size: 11.5px; color: #bdb8b0; }
.resp-heure .bar { width: 22px; height: 74px; display: flex; align-items: flex-end; }
.resp-heure .bar > i { width: 100%; background: linear-gradient(180deg, var(--or), rgba(212,165,116,.35)); border-radius: 4px 4px 0 0; transition: height .5s; }
.resp-heure b { font-size: 12px; }

.resp-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 6px; }
.resp-table { background: transparent; border-color: rgba(255,255,255,.12); }
.resp-table td { border-bottom-color: rgba(255,255,255,.08); color: #ded9d2; }
.resp-table tr:hover td { background: rgba(255,255,255,.04); }
.resp-table .cell-qui img, .resp-table .cell-qui .ini { background: rgba(255,255,255,.10); color: #ded9d2; }
.resp-table .t { color: var(--or); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.resp .etat { color: #ded9d2; border-color: rgba(255,255,255,.25); }
body.resp .etat.arrive { color: #8fd6b0; border-color: rgba(78,195,138,.5); background: rgba(78,195,138,.10); }
body.resp .etat.decline { color: #e8a0a0; border-color: rgba(230,160,160,.5); background: rgba(230,57,70,.10); }

body.resp #q { width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; margin-bottom: 12px; }
.resp-absent { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13.5px; }
.resp-absent b { min-width: 150px; }
.resp-absent > span { color: #8f8a84; }
.resp-absent code { margin-left: auto; letter-spacing: .12em; color: var(--or); font-size: 12.5px; }

@media (max-width: 860px) {
  .resp-deux { grid-template-columns: 1fr; }
  .resp-tete { height: auto; flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .resp-corps { padding: 18px 14px 60px; }
  .resp-cat { grid-template-columns: 1fr 60px; }
  .resp-cat .nom { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .pub-tete, .pub-hero, .grille-atouts, .pub-pied { padding-left: 20px; padding-right: 20px; }
  .app-tete { padding: 0 14px; gap: 12px; }
  .onglets { padding: 0 14px; }
  .vue { padding: 18px 14px 80px; }
}