/* =========================================================================
   LA BORNE EN 3D DE LA DEMO PUBLIQUE (demo_borne.css)
   =========================================================================
   Le modele est construit en CSS 3D par demo_borne.js : des faces planes
   posees dans l'espace (matrix3d), eclairees face par face selon l'angle de
   vue. Aucune bibliotheque, aucune image, aucun appel a un tiers. Couleurs du
   site : fond #09090b, surfaces #121215, indigo #6366f1 -> violet #a855f7.
   ========================================================================= */

/* Le fond va jusqu'au bord : html porte la couleur de la page, comme body (rebond
   d'iOS, decalage du doigt). Le filet `clip` (et non `hidden`) ne fait pas de body
   un conteneur de defilement. */
html.db-racine { background-color: #09090b; color-scheme: dark; overflow-x: clip; }
.db {
    margin: 0;
    min-height: 100vh;
    background: #09090b;
    color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}
.db *, .db *::before, .db *::after { box-sizing: border-box; }
.db [hidden] { display: none !important; }

/* ---------------- La barre du haut ---------------- */
.db-tete {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px; border-bottom: 1px solid #1c1c22;
    background: rgba(9, 9, 11, .92);
    position: relative; z-index: 5;
}
.db-marque { display: inline-flex; align-items: center; gap: 10px; color: #f8fafc; text-decoration: none; font-weight: 800; }
/* Le sigle officiel (static/sigle.svg, l'empreinte violette du favicon), dans la meme boite. */
.db-logo {
    display: block; width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
    object-fit: contain;
}
.db-titre { flex: 1 1 auto; min-width: 0; }
.db-titre h1 { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-titre p { margin: 2px 0 0; color: #a1a1aa; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Au telephone, la ligne sous le titre passe a la ligne au lieu d'etre coupee. */
@media (max-width: 480px) { .db-titre p { white-space: normal; overflow: visible; line-height: 1.35; } }
.db-retour {
    display: inline-flex; align-items: center; gap: 8px; color: #d4d4d8; text-decoration: none;
    border: 1px solid #27272a; border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 600;
}
.db-retour:hover, .db-retour:focus-visible { border-color: #6366f1; color: #fff; }
@media (max-width: 560px) {
    .db-marque span:last-child, .db-retour span { display: none; }
    .db-retour { padding: 8px 11px; }
}

/* ---------------- La page : la scene, puis le panneau ---------------- */
.db-page { display: block; }
@media (min-width: 980px) {
    .db-page { display: grid; grid-template-columns: minmax(0, 1fr) 390px; height: calc(100vh - 57px); }
}

.db-scene {
    position: relative; overflow: hidden;
    height: 64vh; min-height: 360px;
    background:
        radial-gradient(60% 55% at 50% 38%, rgba(99, 102, 241, .17), rgba(99, 102, 241, 0) 70%),
        radial-gradient(50% 40% at 50% 92%, rgba(56, 189, 248, .07), rgba(56, 189, 248, 0) 70%),
        linear-gradient(180deg, #0c0c10 0%, #09090b 60%, #070709 100%);
    cursor: grab;
    /* Le doigt est a la borne (demo_borne.js) : un doigt la tourne, deux la
       rapprochent ou l'eloignent. La page defile toujours hors de la scene,
       dont la hauteur laisse le haut et le bas de l'ecran au defilement. */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none; user-select: none;
}
.db-scene.tire { cursor: grabbing; }
.db-scene:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
@media (min-width: 980px) { .db-scene { height: auto; min-height: 0; } }
@media (max-width: 979px) and (orientation: landscape) { .db-scene { height: 88vh; } }

.db-monde { position: absolute; top: 0; right: 0; bottom: 0; left: 0; perspective-origin: 50% 50%; }
.db-borne {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    will-change: transform;
}
.db-face {
    position: absolute; left: 0; top: 0;
    transform-origin: 50% 50%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.db-sol { backface-visibility: visible; -webkit-backface-visibility: visible; border-radius: 50%; pointer-events: none; }
.db-ombre { pointer-events: none; }

/* Les deux verres (le grand ecran devant, l'ecran client et la zone sans
   contact au dos) : du verre noir dans le liseré graphite du boitier.
   Pas de `overflow: hidden` ici : sous une transformation 3D a grande echelle,
   Chromium rogne la page de la borne au mauvais endroit (vue « Écran »). */
.db-verre {
    position: absolute;
    background: #050507;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.db-face > * { position: absolute; }
/* Le logo du fabricant, en haut a gauche du grand ecran (photo du fabricant). */
.db-logo-sunmi {
    display: flex; align-items: center; justify-content: center;
    background: #3f3f46; color: #d4d4d8; font-weight: 700; letter-spacing: .06em;
    text-transform: lowercase; pointer-events: none;
}
/* Les prises de la levre avant, la grille du haut-parleur sur le flanc droit. */
.db-prise { background: #0b0b0e; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.db-prise-ronde { border-radius: 999px; }
.db-haut-parleur {
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(0, 0, 0, .78) 0 1.1px, rgba(0, 0, 0, 0) 1.6px);
    background-size: 5px 5px;
    -webkit-mask-image: radial-gradient(circle, #000 0 68%, rgba(0, 0, 0, 0) 71%);
    mask-image: radial-gradient(circle, #000 0 68%, rgba(0, 0, 0, 0) 71%);
}
/* L'imprimante 58 mm : la barre de coupe orange, la fente du ticket, la trappe. */
.db-coupe { background: linear-gradient(180deg, #ff9a3c, #f26b0f); }
.db-fente { background: #050507; }
.db-trappe-porte {
    border-radius: 3px;
    background: rgba(0, 0, 0, .22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 2px 6px rgba(0, 0, 0, .35);
}
.db-trappe-fente { border-radius: 2px; background: rgba(0, 0, 0, .7); }
.db-cadre-ecran { position: absolute; background: #0b1120; }
.db-cadre-ecran iframe { position: absolute; left: 0; top: 0; border: 0; display: block; background: #0b1120; transform-origin: 0 0; }
.db-reflet {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .085) 47%, rgba(255, 255, 255, .02) 52%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 26%);
    background-size: 320% 100%, 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}
.db-marque-borne {
    position: absolute; left: 0; right: 0; text-align: center;
    color: rgba(228, 228, 231, .38); font-weight: 800; letter-spacing: .32em; text-transform: uppercase;
    pointer-events: none;
}
.db-camera {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3b3b4a 0%, #0a0a0e 60%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .04);
}

/* La zone sans contact du dos : quatre coins de visee, l'onde, et sa lumiere. */
.db-lecteur {
    background:
        linear-gradient(#52525b, #52525b) 0 0 / 18% 2px, linear-gradient(#52525b, #52525b) 0 0 / 2px 18%,
        linear-gradient(#52525b, #52525b) 100% 0 / 18% 2px, linear-gradient(#52525b, #52525b) 100% 0 / 2px 18%,
        linear-gradient(#52525b, #52525b) 0 100% / 18% 2px, linear-gradient(#52525b, #52525b) 0 100% / 2px 18%,
        linear-gradient(#52525b, #52525b) 100% 100% / 18% 2px, linear-gradient(#52525b, #52525b) 100% 100% / 2px 18%,
        #070709;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow .35s ease;
}
.db-lecteur svg { position: static; width: 46%; height: 46%; opacity: .8; }
.db-lecteur.attend { animation: db-respire 2.6s ease-in-out infinite; }
.db-lecteur.lu { box-shadow: inset 0 0 0 4px rgba(56, 189, 248, .95), 0 0 60px 18px rgba(56, 189, 248, .55); }
@keyframes db-respire {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(56, 189, 248, .25), 0 0 18px 2px rgba(56, 189, 248, .08); }
    50% { box-shadow: inset 0 0 0 3px rgba(56, 189, 248, .6), 0 0 34px 8px rgba(56, 189, 248, .22); }
}
.db-led { border-radius: 999px; background: #6366f1; box-shadow: 0 0 14px 3px rgba(99, 102, 241, .65); animation: db-led 3.2s ease-in-out infinite; }
@keyframes db-led { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Le badge du salarie, aux couleurs du site. */
.db-carte-badge {
    border-radius: 34px; overflow: hidden;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
    color: #fff; pointer-events: none;
}
.db-carte-badge .bp { position: absolute; left: 7%; top: 12%; font-weight: 900; letter-spacing: .02em; }
.db-carte-badge .puce { position: absolute; left: 7%; top: 42%; width: 15%; height: 22%; border-radius: 12px;
                        background: linear-gradient(135deg, #fde68a, #d97706); opacity: .9; }
.db-carte-badge .nom { position: absolute; left: 7%; bottom: 12%; font-weight: 800; }
.db-carte-badge .onde { position: absolute; right: 7%; top: 14%; width: 18%; opacity: .85; }
.db-dos-carte { border-radius: 34px; background: linear-gradient(135deg, #312e81, #4c1d95); pointer-events: none; }

/* Sous la borne : l'ombre, et la lueur de son verdict sur le sol. */
.db-scene { --lueur: rgba(56, 189, 248, .10); }

/* ---------------- Ce qui flotte sur la scene ---------------- */
.db-legende {
    position: absolute; left: 16px; top: 14px; z-index: 3;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #a1a1aa;
    background: rgba(18, 18, 21, .72); border: 1px solid #27272a; border-radius: 999px; padding: 6px 12px;
    pointer-events: none;
}
.db-bulle {
    position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 4;
    display: flex; align-items: flex-start; gap: 10px;
    width: min(560px, calc(100% - 32px));
    background: rgba(18, 18, 21, .9); border: 1px solid rgba(99, 102, 241, .45); border-radius: 16px;
    padding: 10px 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    pointer-events: none;
}
.db-bulle i { color: #818cf8; margin-top: 3px; }
.db-bulle small { display: block; color: #a1a1aa; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.db-bulle span span { display: block; font-size: .98rem; line-height: 1.35; }
.db-toast {
    position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 4;
    width: min(520px, calc(100% - 32px)); text-align: center;
    background: #1e1b4b; border: 1px solid #6366f1; color: #e0e7ff; border-radius: 14px;
    padding: 10px 14px; font-size: .9rem; line-height: 1.4; box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.db-vues {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
    display: flex; background: rgba(18, 18, 21, .86); border: 1px solid #27272a; border-radius: 999px; padding: 4px;
}
.db-vues button {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent; color: #d4d4d8; border-radius: 999px;
    padding: 8px 14px; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; min-height: 38px;
    white-space: nowrap;
}
.db-vues button.choisie { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.db-vues button:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.db-vues #agrandir { margin-left: 4px; border-left: 1px solid #27272a; border-radius: 0 999px 999px 0; }
.db-vues #agrandir.choisie { background: rgba(99, 102, 241, .22); color: #e0e7ff; }
/* Le zoom : rapprocher, eloigner, recentrer. Des cibles de 44 px, pour le doigt. */
.db-zoom {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(18, 18, 21, .86); border: 1px solid #27272a; border-radius: 999px; padding: 4px;
}
.db-zoom button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; background: transparent; color: #d4d4d8; border-radius: 999px;
    font: inherit; font-size: .95rem; cursor: pointer;
}
.db-zoom button:hover { background: rgba(99, 102, 241, .16); color: #fff; }
.db-zoom button:active { background: rgba(99, 102, 241, .28); }
.db-zoom button:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.db-zoom #recentrer { margin-top: 2px; border-top: 1px solid #27272a; border-radius: 0 0 999px 999px; }
@media (max-width: 480px) {
    .db-vues { bottom: 26px; max-width: calc(100% - 16px); }
    .db-vues button { padding: 8px 9px; font-size: .78rem; gap: 5px; }
    .db-vues button i { display: none; }
    .db-zoom { right: 8px; }
}
.db-aide {
    position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; z-index: 2;
    color: #71717a; font-size: .74rem; pointer-events: none; padding: 0 16px;
}
/* L'aide dit le geste de l'appareil : la souris, ou le doigt ; sur un telephone,
   une seule ligne, sous les boutons de vue. */
.db-aide-doigt { display: none; }
@media (hover: none), (pointer: coarse) {
    .db-aide-souris { display: none; }
    .db-aide-doigt { display: inline; }
}
@media (max-width: 480px) {
    .db-aide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .db-aide-souris, .db-aide-ecran { display: none; }
    .db-aide-doigt { display: inline; }
}

/* ---------------- Le panneau ---------------- */
.db-panneau { padding: 16px; overflow-y: auto; border-left: 1px solid #1c1c22; background: #0b0b0e; }
@media (max-width: 979px) { .db-panneau { border-left: 0; border-top: 1px solid #1c1c22; max-width: 640px; margin: 0 auto; } }
.db-carte { background: #121215; border: 1px solid #27272a; border-radius: 18px; padding: 18px; }
.db-carte + .db-carte { margin-top: 12px; }
.db-carte h2 { margin: 0 0 12px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.db-etiquette { display: block; font-size: .84rem; font-weight: 600; color: #d4d4d8; margin: 0 0 6px; }
.db-choix {
    width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid #3f3f46; background: #09090b; color: #f8fafc;
    padding: 0 12px; font: inherit; font-size: .95rem;
}
.db-choix:focus-visible { outline: 2px solid #818cf8; outline-offset: 1px; }
.db-etat { margin: 10px 0 12px; font-size: .9rem; color: #c4c4cc; min-height: 1.3em; line-height: 1.4; }
.db-etat b { color: #fff; }
.db-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.db-bouton {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 74px; border-radius: 16px; border: 1px solid transparent; cursor: pointer;
    font: inherit; font-size: .98rem; font-weight: 800; color: #fff; padding: 10px;
    transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease;
}
.db-bouton i { font-size: 1.35rem; }
.db-bouton:active { transform: scale(.98); }
.db-bouton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.db-entree { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 10px 26px rgba(16, 185, 129, .22); }
.db-sortie { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 10px 26px rgba(99, 102, 241, .25); }
.db-geste { width: 100%; margin-top: 10px; flex-direction: row; min-height: 58px;
            background: linear-gradient(135deg, #0284c7, #38bdf8); box-shadow: 0 10px 26px rgba(56, 189, 248, .25);
            animation: db-appel 1.8s ease-in-out infinite; }
@keyframes db-appel { 0%, 100% { box-shadow: 0 10px 26px rgba(56, 189, 248, .2); } 50% { box-shadow: 0 10px 36px rgba(56, 189, 248, .55); } }
.db-bouton[aria-disabled="true"] { opacity: .38; box-shadow: none; cursor: not-allowed; }
.db-bouton small { font-size: .74rem; font-weight: 600; opacity: .9; }
.db-indice { margin: 10px 0 0; font-size: .84rem; color: #a1a1aa; line-height: 1.45; min-height: 1.2em; }
.db-secondaires { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; border-top: 1px solid #1f1f25; padding-top: 10px; }
.db-lien {
    display: flex; align-items: center; gap: 10px; text-align: left;
    background: transparent; border: 0; color: #c7d2fe; font: inherit; font-size: .9rem; font-weight: 600;
    padding: 9px 4px; cursor: pointer; border-radius: 10px; min-height: 40px;
}
.db-lien:hover, .db-lien:focus-visible { background: rgba(99, 102, 241, .1); color: #fff; outline: none; }
.db-lien[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.db-texte { color: #d4d4d8; font-size: .95rem; line-height: 1.55; margin: 0; }
.db-petit { color: #a1a1aa; font-size: .82rem; line-height: 1.5; margin: 8px 0 0; }
.db-interrupteur {
    display: inline-flex; align-items: center; gap: 10px; border: 1px solid #3f3f46; background: #09090b; color: #f8fafc;
    border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; min-height: 42px;
}
.db-interrupteur[aria-pressed="true"] { border-color: #6366f1; background: rgba(99, 102, 241, .14); }
.db-interrupteur[aria-pressed="false"] { color: #a1a1aa; }
.db-savoir summary { cursor: pointer; font-weight: 800; font-size: .95rem; }
.db-savoir ul { margin: 10px 0 0; padding-left: 18px; color: #c4c4cc; font-size: .86rem; line-height: 1.55; }
.db-savoir li + li { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    .db-lecteur.attend, .db-led, .db-geste { animation: none; }
}

/* ---------------- La fin de la demo (comme demo_pied.html) ---------------- */
.db-fin { border-color: rgba(165, 180, 252, .35);
    background: linear-gradient(120deg, rgba(99, 102, 241, .16), rgba(16, 185, 129, .08)), #111114; }
.db-fin strong { display: block; color: #fff; font-weight: 800; }
.db-fin-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.db-fin-actions a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px;
    border-radius: 12px; font-weight: 700; font-size: .9rem; text-decoration: none; text-align: center; }
.db-fin-actions a:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }
.db-fin-retour { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.db-fin-creer { color: #052e1f; background: #34d399; }
.db-fin-fin { color: #fff; background: #4f46e5; }
.db-fin-fin:hover { background: #6366f1; }