:root{
    --bg: #0F1B15;
    --bg-elev: #16261D;
    --bg-elev-2: #1C3024;
    --border: #2C4536;
    --text: #F1EFE8;
    --text-dim: #9DB2A4;
    --text-dimmer: #61786A;
    --gold: #D9A94E;
    --ok: #6FCF97;
    --warn: #E8B95A;
    --join: #6FA8DC;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 20% -10%, rgba(217,169,78,0.08), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .poster-font{font-family:'Anton',sans-serif;letter-spacing:0.01em;}
  .wrap{max-width:960px;margin:0 auto;padding:36px 20px 80px;}
  /* Le Parcours client peut avoir quatre groupes de front — une arène
     chacun. 960 px n'en laissaient passer que trois. L'écran s'élargit donc
     pour lui seul, et seulement quand la fenêtre le permet : partout
     ailleurs la lecture reste bornée à 960 px, qui est la bonne largeur pour
     du texte. */
  .wrap.wrap-wide{max-width:1320px;}

  .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:14px;}
  .brand{display:flex;align-items:center;}
  .brand img{height:34px;width:auto;display:block;}
  .top-sub{color:var(--text-dim);font-size:13.5px;}
  .top-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .nav-tabs{display:flex;gap:4px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:9px;padding:3px;}
  .nav-tab{background:transparent;border:none;color:var(--text-dim);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:7px 14px;border-radius:7px;cursor:pointer;}
  .nav-tab.active{background:var(--gold);color:#1B1607;}

  /* planning */
  .plan-table{width:100%;border-collapse:collapse;font-size:12.5px;}
  .plan-table th{
    background:var(--bg-elev-2);color:var(--text-dim);font-weight:600;font-size:11.5px;
    /* L'en-tête des colonnes reste lisible quand on descend dans la journée :
       sans lui, à 21:00, plus rien ne dit quelle colonne est quelle arène.
       « sticky » ne s'accroche qu'au plus proche conteneur défilant : c'est
       .plan-wrap, qui défile désormais lui-même (voir plus bas). Tant que
       c'était la page entière qui défilait, cette règle-ci ne servait à
       rien — l'en-tête restait au sommet d'un tableau qui, lui, s'en
       allait vers le haut.
       z-index inférieur à celui du calendrier (30) : c'est le calendrier
       qui passe devant, pas l'inverse. */
    padding:8px 6px;border:1px solid var(--border);text-align:center;
    position:sticky;top:0;z-index:5;
  }
  .plan-table td{border:1px solid var(--border);padding:0;vertical-align:top;height:34px;}
  .plan-time{
    background:var(--bg-elev-2);color:#fff;font-size:11px;text-align:right;
    padding:0 10px;white-space:nowrap;width:1%;
  }
  .plan-cell-free{height:100%;min-height:34px;transition:background .12s;}
  .plan-cell-free.drop-hover{background:color-mix(in srgb, var(--gold) 25%, transparent);}
  .plan-cell-booked{
    height:100%;padding:6px 8px;color:#1B1607;font-weight:600;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;gap:1px;
    background:color-mix(in srgb, var(--accent) 70%, white);
    transition:filter .15s;
  }
  .plan-cell-booked[draggable="true"]{cursor:grab;}
  .plan-cell-booked[draggable="true"]:active{cursor:grabbing;}
  .plan-cell-booked.dragging{opacity:.4;}
  .plan-cell-booked:hover{filter:brightness(1.08);}
  .plan-cell-booked .n{font-size:12px;line-height:1.2;}
  .plan-cell-booked .p{font-size:10.5px;font-weight:500;opacity:.85;}
  /* Le tableau défile DANS SA PROPRE BOÎTE, et non avec la page.
     C'est ce qui permet à l'en-tête des colonnes de tenir en haut : un
     élément « sticky » ne s'accroche qu'au conteneur qui défile autour de
     lui. Le calendrier au-dessus et la légende en dessous ne bougent donc
     plus du tout — seules les lignes d'heures glissent. */
  .plan-wrap{overflow:auto;border-radius:10px;}

  /* ===================== INTERFACE TÉLÉPHONE =========================
     Deux écrans seulement, une barre d'onglets en bas — là où le pouce se
     trouve déjà. Le rail latéral est masqué : 64 px sur 390 px de large,
     c'est un sixième de l'écran pour une navigation dont on n'a pas besoin
     à la porte.
     Le rembourrage bas réserve la place de la zone gestuelle des iPhone
     récents (safe-area), sans quoi les onglets tombent sous la barre du
     système. « dvh » et non « vh » : la barre d'adresse mobile change de
     hauteur au défilement, et « vh » laisse alors un trou en bas. */
  body.tel-view, body.tel-view html{height:100%;overflow:hidden;}
  body.tel-view #app.wrap{max-width:none;padding:0;height:100dvh;display:block;overflow:hidden;}
  /* Le rail ET le bandeau du haut. Ce dernier est celui de la vue publique,
     qui réapparaissait dès que le rail était masqué : logo, titre et deux
     menus déroulants, soit près de la moitié d'un écran de 844 px, pour une
     navigation que les deux onglets du bas remplacent. */
  body.tel-view .rail-wrap, body.tel-view .top{display:none;}
  .tel-page{height:100dvh;display:flex;flex-direction:column;background:var(--bg);}
  .tel-corps{flex:1;min-height:0;overflow:auto;padding:12px 14px 18px;-webkit-overflow-scrolling:touch;}
  .tel-nav{
    display:flex;border-top:1px solid var(--border);background:var(--bg-elev);
    padding-bottom:env(safe-area-inset-bottom,0px);flex-shrink:0;
  }
  .tel-onglet{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:10px 4px 12px;background:none;border:0;cursor:pointer;
    color:var(--text-dim);font:inherit;font-size:12px;font-weight:600;
  }
  .tel-onglet.actif{color:var(--gold);}
  .tel-onglet-picto{font-size:20px;line-height:1;}

  .tel-entete{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
  .tel-jour{flex:1;text-align:center;line-height:1.2;}
  .tel-jour strong{display:block;font-size:16px;}
  .tel-jour span{display:block;font-size:12.5px;color:var(--text-dim);}
  .tel-fleche{
    width:42px;height:42px;flex-shrink:0;border:1px solid var(--border);border-radius:11px;
    background:var(--bg-elev);color:var(--text);font-size:19px;cursor:pointer;
  }
  .tel-titre{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
             color:var(--text-dim);margin:16px 0 8px;}
  .tel-carte{
    background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;
    padding:11px 13px;margin-bottom:8px;
  }
  .tel-carte-haut{display:flex;align-items:baseline;gap:9px;}
  .tel-heure{font-family:'Anton',sans-serif;font-size:19px;color:var(--gold);}
  .tel-nom{font-weight:700;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tel-carte-bas{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;
                 font-size:12.5px;color:var(--text-dim);}
  .tel-qui{color:var(--text);}
  .tel-complet{margin:22px 0 4px;width:100%;}

  /* Le viseur : un cadre carré, pour cadrer le QR sans réfléchir. */
  .tel-scan-cadre{
    /* Un carré, mais plafonné à 40 % de la hauteur : sur un écran de
       téléphone, un viseur carré plein cadre repoussait la saisie manuelle
       et le résultat du scan hors de l'écran. Le viseur reste largement
       assez grand pour un QR de billet. */
    position:relative;width:100%;aspect-ratio:1/1;max-height:40dvh;
    border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--border);
  }
  .tel-scan-video{position:absolute;inset:0;}
  .tel-scan-vide{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:10px;color:var(--text-dim);font-size:13.5px;
  }
  .tel-scan-viseur{
    position:absolute;inset:16%;border:2px solid rgba(217,169,78,.85);border-radius:12px;
    box-shadow:0 0 0 2000px rgba(0,0,0,.28);pointer-events:none;
  }

  .fullpage-plan{display:flex;flex-direction:column;}
  /* min-height:0 SUR LE PANNEAU n'est pas décoratif : sans lui, un enfant
     flex refuse de devenir plus court que son contenu, le panneau prend la
     hauteur du tableau entier, et c'est de nouveau la page qui défile —
     les en-têtes repartent alors vers le haut. Vérifié en le retirant :
     trois contrôles du banc passent au rouge.
     Sur .plan-wrap il serait inutile, et je l'y avais d'abord mis en le
     croyant indispensable : un élément dont le débordement n'est pas
     « visible » a déjà une taille minimale automatique nulle. */
  .fullpage-plan > .panel{display:flex;flex-direction:column;min-height:0;flex:1;}
  .fullpage-plan .plan-wrap{flex:1;}
  .plan-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
  .plan-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);}
  .plan-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;}
  .plan-empty{color:var(--text-dimmer);font-size:13.5px;text-align:center;padding:40px 0;}

  /* dashboard */
  .dash-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  /* Même habillage que .dash-table, mais tout aligné à gauche : ces
     tableaux-là contiennent des champs de saisie, pas des montants à
     comparer colonne par colonne. */
  .tarifs-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  .tarifs-table th{background:var(--bg-elev-2);color:var(--text-dim);font-weight:600;
    font-size:11.5px;padding:8px 10px;border:1px solid var(--border);text-align:left;}
  .tarifs-table td{border:1px solid var(--border);padding:7px 10px;}
  .dash-table th{
    background:var(--bg-elev-2);color:var(--text-dim);font-weight:600;font-size:11.5px;
    padding:10px 12px;border:1px solid var(--border);text-align:left;
  }
  .dash-table th:not(:first-child), .dash-table td:not(:first-child){text-align:right;}
  .dash-table td{border:1px solid var(--border);padding:10px 12px;}
  .dash-table tfoot td{font-family:'Anton',sans-serif;font-size:14px;color:var(--gold);border-top:2px solid var(--gold);}
  /* ---------------------------------------------------------------------
     PARCOURS CLIENT — groupes réunis par heure de départ
     Deux colonnes dès qu'il y a la place, une seule sur tablette étroite :
     une carte écrasée ne se lit pas mieux qu'une carte empilée.
     --------------------------------------------------------------------- */
  .slot-group{margin-bottom:22px;}
  .slot-group-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
  .slot-group-time{font-family:'Anton',sans-serif;font-size:20px;color:var(--gold);letter-spacing:1px;}
  .slot-group-count{font-size:12px;color:var(--text-dim);}
  /* Jusqu'à QUATRE groupes à la même heure — une arène chacun. La largeur
     minimale est calculée pour que quatre cartes tiennent sur un écran de
     bureau, et que la grille retombe d'elle-même à trois, deux puis une sur
     les écrans plus étroits. min() évite qu'une carte dépasse sur mobile. */
  /* auto-FILL et non auto-fit : les colonnes vides sont conservées, donc un
     groupe seul garde la largeur d'une carte au lieu de s'étirer sur toute
     la ligne — une frise à cinq étapes étalée sur 1300 px se lit mal. */
  .slot-group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));gap:10px;align-items:start;}

  /* En colonne serrée, la frise à cinq étapes et la rangée de boutons ont
     besoin d'un peu moins d'air. Rien n'est masqué : tout reste lisible et
     atteignable au doigt. */
  @media (min-width:900px){
    .slot-group-cards .g-body{padding:12px 13px;}
    .slot-group-cards .g-steps .lbl{font-size:10px;}
    .slot-group-cards .g-name{font-size:14px;}
    .slot-group-cards .g-time{font-size:19px;}
    .slot-group-cards .g-actions{gap:6px;}
    .slot-group-cards .g-actions .btn{padding:7px 10px;font-size:11.5px;}
  }

  /* Journal de caisse : une ligne cliquable doit se voir comme telle. */
  .caisse-log-row{cursor:pointer;}
  .caisse-log-row:hover td{background:var(--bg-elev-2);}

  /* ---------------------------------------------------------------------
     ACCÈS ÉQUIPE TACTILE
     Les tailles ne sont pas décoratives : 64 px de côté, c'est le minimum
     pour qu'un doigt ne se trompe pas de touche sur une tablette tenue à
     bout de bras. touch-action et user-select évitent le zoom accidentel
     et la sélection de texte à l'appui long.
     --------------------------------------------------------------------- */
  .pin-panel{max-width:420px;margin:40px auto;}
  /* Le bouton de retour était en position absolue et chevauchait le prénom
     dès qu'il était un peu long. Il vit maintenant dans le flux, au-dessus
     du titre : aucun recouvrement possible, quelle que soit la longueur. */
  .pin-head{display:flex;align-items:center;gap:10px;min-height:38px;margin-bottom:6px;}
  .pin-back{font-size:12px;padding:8px 12px;margin:0;}

  .staff-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px;}
  .staff-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    min-height:104px;padding:16px 10px;cursor:pointer;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:14px;
    color:var(--text);font-family:inherit;
    touch-action:manipulation;-webkit-user-select:none;user-select:none;
    transition:border-color .12s, transform .06s;
  }
  .staff-tile:hover{border-color:var(--gold);}
  .staff-tile:active{transform:scale(.97);}
  .staff-tile-initials{
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--gold);color:#12211B;font-family:'Anton',sans-serif;font-size:17px;letter-spacing:1px;
  }
  .staff-tile-name{font-size:14.5px;text-align:center;line-height:1.25;}

  .pin-dots{display:flex;gap:12px;justify-content:center;margin:20px 0 14px;}
  .pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:transparent;transition:background .12s,border-color .12s;}
  .pin-dot.on{background:var(--gold);border-color:var(--gold);}

  .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto;}
  .pin-key{
    min-height:64px;font-size:24px;font-family:'Anton',sans-serif;letter-spacing:1px;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:14px;color:var(--text);
    cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
    transition:background .12s, transform .06s;
  }
  .pin-key:hover{background:var(--bg-elev);}
  .pin-key:active{transform:scale(.95);background:var(--gold);color:#12211B;}
  .pin-key:disabled{opacity:.4;cursor:not-allowed;}
  .pin-key-back{font-size:20px;}

  /* Pavé réduit, pour les saisies insérées dans un écran déjà chargé. */
  .pin-pad-sm{max-width:216px;margin:0 auto;}
  .pin-pad-sm .pin-pad{max-width:216px;gap:8px;}
  .pin-pad-sm .pin-key{min-height:48px;font-size:19px;}
  .pin-pad-sm .pin-dots{margin:10px 0 12px;}
  /* Attribution d'un code depuis le tableau des employés. */
  .pin-assign{max-width:280px;padding:10px 0 4px;}

  /* ----------------------------------------------------------------
     Réservation au comptoir, au doigt (19/09)
     Une liste déroulante et un champ numérique demandent un clavier et
     une bonne visée. Sur la tablette du comptoir, devant un client, on
     veut une affiche à toucher et un chiffre à toucher.
     ---------------------------------------------------------------- */
  .exp-tiles{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr));
    gap:10px;margin-bottom:16px;
  }
  .exp-tile{
    position:relative;display:block;width:100%;padding:0;overflow:hidden;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
    cursor:pointer;text-align:left;color:var(--text);font-family:'Inter',sans-serif;
    transition:border-color .12s,transform .06s;
  }
  .exp-tile:active{transform:scale(.98);}
  .exp-tile.on{border-color:var(--gold);outline:2px solid var(--gold);}
  .exp-tile-img{display:block;width:100%;height:84px;object-fit:cover;background:var(--bg-elev);}
  .exp-tile-fallback{
    display:flex;align-items:center;justify-content:center;height:84px;
    font-size:22px;font-weight:700;letter-spacing:1px;color:#0E0E0C;
  }
  .exp-tile-body{padding:7px 9px 9px;}
  .exp-tile-name{display:block;font-size:12.5px;font-weight:600;line-height:1.25;}
  .exp-tile-meta{display:block;font-size:11px;color:var(--text-dimmer);margin-top:2px;}
  .exp-tile-check{
    position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
    background:var(--gold);color:#0E0E0C;font-size:13px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }

  .count-pad{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;}
  .count-key{
    min-width:52px;min-height:52px;padding:0 6px;font-size:19px;font-weight:600;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
    color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;
    transition:border-color .12s,transform .06s;
  }
  .count-key:active{transform:scale(.95);}
  .count-key.on{background:var(--gold);border-color:var(--gold);color:#0E0E0C;}
  .count-key:disabled{opacity:.3;cursor:not-allowed;}
  /* Montants d'un bon cadeau : « 180 € » ne tient pas dans la largeur d'un
     chiffre seul. */
  .count-key-wide{min-width:74px;font-size:15px;}

  /* ----------------------------------------------------------------
     Les visuels de packs sont des BILLETS : 2,2 fois plus larges que
     hauts, et leur texte fait partie de l'image. Les enfermer dans la
     vignette carrée des expériences en couperait le titre. Ils ont donc
     leur propre grille, plus large, au format du billet.
     ---------------------------------------------------------------- */
  .pack-tiles{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr));
    gap:10px;margin-bottom:16px;
  }
  .pack-tiles .exp-tile-img{height:auto;aspect-ratio:1860/845;}
  .pack-tiles .exp-tile-fallback{height:0;padding-bottom:45.4%;position:relative;}
  .pack-tiles .exp-tile-fallback span{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }
  /* Le billet du paramétrage et celui de la page d'achat : même format. */
  /* .poster-card est une rangée : l'affiche à gauche, le texte à droite.
     Un billet occupe toute la largeur, ce qui écrasait le nom et le prix
     à zéro pixel — présents dans la page, invisibles à l'écran. La carte
     d'un pack est donc une colonne. */
  .poster-card.pack-card{flex-direction:column;}
  .pack-banniere{
    width:100%;display:block;border-radius:10px;border:1px solid var(--border);
    aspect-ratio:1860/845;object-fit:cover;background:var(--bg-elev);
  }

  .toggle-pill{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:52px;padding:0 18px;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
    color:var(--text);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;
    margin:0;transition:border-color .12s,transform .06s;
  }
  .toggle-pill:active{transform:scale(.97);}

  /* Le créneau retenu, une fois le planning replié. */
  .res-choix{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
    padding:12px 14px;margin-bottom:14px;
  }
  .res-choix-txt{font-size:13.5px;}
  .res-choix-btn{margin:0;padding:8px 14px;font-size:12.5px;white-space:nowrap;}
  .toggle-pill.on{background:var(--gold);border-color:var(--gold);color:#0E0E0C;font-weight:600;}
  .crm-filter-row th{padding:6px 8px;background:var(--bg-elev);}
  .crm-filter-row input{
    width:100%;box-sizing:border-box;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:6px;
    padding:6px 8px;color:var(--text);font-size:12px;font-family:'Inter',sans-serif;font-weight:400;
  }
  .crm-filter-row input:focus{outline:none;border-color:var(--gold);}
  .crm-sort-icon{font-size:9px;color:var(--gold);margin-left:2px;}
  .kanban-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;}
  .kanban-column{
    flex:0 0 220px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
    padding:12px;min-height:120px;
  }
  .kanban-column-title{font-size:12.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
  .kanban-count{
    background:rgba(255,255,255,0.08);color:var(--text-dim);font-size:11px;font-weight:600;
    border-radius:999px;padding:1px 7px;
  }
  .kanban-empty{color:var(--text-dimmer);font-size:12px;text-align:center;padding:10px 0;}
  .kanban-card{
    background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
    margin-bottom:8px;cursor:grab;
  }
  .kanban-card:hover{border-color:var(--gold);}
  .kanban-card-num{font-size:10.5px;color:var(--text-dimmer);}
  .kanban-card-name{font-size:13px;font-weight:600;color:#fff;margin:2px 0;}
  .kanban-card-total{font-size:12.5px;color:var(--gold);font-weight:600;}

  .crm-action-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:rgba(217,169,78,0.1);border:1px solid var(--gold);border-radius:9px;
    padding:12px 16px;margin-bottom:14px;font-size:13.5px;color:var(--text);
  }
  .gestion-wrap{position:relative;display:inline-block;}
  .gestion-dropdown{
    position:absolute;top:calc(100% + 6px);right:0;z-index:60;
    background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
    padding:6px;min-width:190px;box-shadow:0 10px 28px rgba(0,0,0,0.45);
  }
  .gestion-dropdown button{
    display:block;width:100%;text-align:left;background:transparent;border:none;
    color:var(--text);padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13.5px;font-family:'Inter',sans-serif;
  }
  .gestion-dropdown button:hover{background:var(--bg-elev-2);}
  .gestion-dropdown button.active{color:var(--gold);background:rgba(217,169,78,0.1);}

  .revenue-chart{display:flex;flex-direction:column;gap:12px;}
  .revenue-bar-row{display:grid;grid-template-columns:150px 1fr 84px;align-items:center;gap:12px;}
  .revenue-bar-label{font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .revenue-bar-track{background:var(--bg-elev-2);border-radius:6px;height:16px;overflow:hidden;}
  .revenue-bar-fill{height:100%;border-radius:6px;transition:width .3s;}
  .revenue-bar-value{font-size:13px;font-weight:600;color:var(--text);text-align:right;white-space:nowrap;}
  @media(max-width:560px){
    .revenue-bar-row{grid-template-columns:90px 1fr 70px;gap:8px;}
    .revenue-bar-label{font-size:11.5px;}
  }

  .revenue-columns{display:flex;align-items:flex-end;gap:18px;height:220px;padding-top:10px;overflow-x:auto;}
  .revenue-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:64px;flex:1;}
  .revenue-column-value{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;white-space:nowrap;}
  .revenue-column-track{width:36px;flex:1;background:var(--bg-elev-2);border-radius:6px 6px 0 0;display:flex;align-items:flex-end;overflow:hidden;}
  .revenue-column-fill{width:100%;border-radius:6px 6px 0 0;transition:height .3s;}
  .revenue-column-label{font-size:11px;color:var(--text-dim);margin-top:8px;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .revenue-pie-wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
  .revenue-pie{width:180px;height:180px;border-radius:50%;flex-shrink:0;}
  .revenue-pie-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:180px;}
  .revenue-pie-legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-dim);}
  .revenue-pie-legend-item i{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
  .revenue-pie-legend-item span{flex:1;}
  .revenue-pie-legend-item b{color:var(--text);font-weight:600;}
  .plan-cell-block{
    background:
      repeating-linear-gradient(45deg, rgba(217,169,78,0.4), rgba(217,169,78,0.4) 4px, transparent 4px, transparent 11px),
      var(--bg-elev-2) !important;
    border:1.5px solid var(--gold) !important;
    color:var(--gold) !important;
  }
  .plan-cell-block .p{color:var(--text-dim) !important;opacity:1;}

  .block-form{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:11px;padding:18px;margin-bottom:18px;}
  .block-form select{
    width:100%;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:9px;
    padding:11px 12px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;
  }
  .block-form select:focus{outline:none;border-color:var(--gold);}
  .block-resources{display:flex;flex-wrap:wrap;gap:10px;}
  .block-resource{
    display:flex;align-items:center;gap:7px;background:var(--bg-elev);border:1px solid var(--border);
    border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;
  }
  .block-resource input{accent-color:var(--gold);width:15px;height:15px;}
  .caisse-article{padding:6px 10px;font-size:12px;}


  .progress{display:flex;align-items:center;gap:0;margin-bottom:32px;}
  .p-step{display:flex;align-items:center;gap:9px;color:var(--text-dimmer);font-size:13px;white-space:nowrap;}
  .p-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-elev-2);border:1.5px solid var(--border);flex-shrink:0;transition:all .25s;}
  .p-step.active .p-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(217,169,78,0.55);}
  .p-step.done .p-dot{background:var(--ok);border-color:var(--ok);}
  .p-step.active{color:var(--text);}
  .p-step.done{color:var(--text-dim);}
  .p-line{flex:1;height:1px;background:var(--border);margin:0 10px;min-width:12px;}

  .panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:28px;}
  .panel + .panel{margin-top:18px;}
  h2.title{font-size:20px;margin:0 0 6px;font-weight:600;}
  .subtitle{color:var(--text-dim);font-size:14px;margin:0 0 22px;}

  /* poster grid */
  .poster-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:640px){.poster-grid{grid-template-columns:1fr;}}
  .poster-card{
    display:flex;flex-direction:row;align-items:stretch;text-align:left;
    border-radius:12px;cursor:pointer;position:relative;overflow:hidden;
    border:1px solid var(--border); padding:0; background:var(--bg-elev-2);
    transition:transform .15s, border-color .15s;
  }
  .poster-card:hover{transform:translateY(-2px);border-color:var(--accent);}
  .poster-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .poster-info{flex:1;min-width:0;display:flex;flex-direction:column;}
  .poster-top-inner{padding:16px 16px 12px;}
  .poster-name{font-family:'Anton',sans-serif;font-size:20px;line-height:1.05;margin:0 0 6px;color:var(--text);}
  .poster-tagline{font-size:12.5px;color:var(--text-dim);margin:0;}
  .poster-genre{
    display:inline-block;font-size:11px;font-weight:600;color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    padding:3px 9px;border-radius:5px;margin-bottom:10px;
  }
  .poster-meta{display:flex;gap:14px;flex-wrap:wrap;padding:10px 16px;margin-top:auto;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim);}
  .poster-meta b{color:var(--text);font-weight:600;}
  .poster-thumb{
    width:92px;flex-shrink:0;background-size:cover;background-position:center 15%;background-repeat:no-repeat;
    background-color:var(--bg-elev-2);border-left:1px solid var(--border);
  }
  .poster-thumb.no-photo{
    background-image:linear-gradient(190deg, color-mix(in srgb, var(--accent) 40%, var(--bg-elev-2)) 0%, var(--bg-elev-2) 100%) !important;
  }
  @media(max-width:480px){ .poster-thumb{width:68px;} .poster-top-inner{padding:14px 12px 10px;} .poster-name{font-size:18px;} }

  /* stepper */
  .stepper{display:flex;align-items:center;gap:16px;margin-top:6px;}
  .stepper button{
    width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--bg-elev-2);
    color:var(--text);font-size:18px;cursor:pointer;
  }
  .stepper button:disabled{opacity:.3;cursor:not-allowed;}
  .stepper .count{font-family:'Anton',sans-serif;font-size:26px;min-width:34px;text-align:center;}
  .hint{color:var(--text-dimmer);font-size:12.5px;margin-top:10px;}
  .config-note{
    margin-top:16px;padding:12px 14px;background:var(--bg-elev-2);border:1px solid var(--border);
    border-radius:9px;font-size:13px;color:var(--text-dim);
  }
  .config-note b{color:var(--text);}

  /* date/time */
  .date-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;}
  .date-chip{
    flex-shrink:0;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;
    padding:6px 9px;cursor:pointer;text-align:center;min-width:44px;
  }
  .date-chip .d{font-size:9.5px;color:#fff;display:block;line-height:1.3;}
  .date-chip .n{font-family:'Anton',sans-serif;font-size:14px;color:#fff;line-height:1.2;}
  .date-chip.selected{border-color:var(--gold);background:rgba(217,169,78,0.08);}

  /* --- Planning : le calendrier ne défile pas ---
     Même raison qu'au Parcours client : on descend dans la journée pour
     lire les créneaux du soir, et on veut pouvoir changer de jour sans
     remonter. Les flèches, les pastilles de date et les deux boutons
     restent donc collés en haut de la zone qui défile.
     Les marges négatives la font déborder dans le rembourrage du panneau
     (28 px), pour qu'elle en occupe toute la largeur : sans cela, les
     lignes de la grille se verraient passer dans les deux bandes laissées
     libres à gauche et à droite. */
  .plan-date-nav{
    display:flex;align-items:center;gap:8px;
    position:sticky; top:0; z-index:30;
    background:var(--bg-elev);
    margin:-28px -28px 16px; padding:20px 28px 14px;
    border-bottom:1px solid var(--border);
    border-radius:13px 13px 0 0;
  }
  .plan-date-actions{display:flex;gap:8px;flex-shrink:0;}
  /* En-tête de l'étape « Créneau » : titre à gauche, bouton de paiement à
     droite. Le bouton du bas restait invisible sur un écran large, où la
     grille des créneaux le repousse sous la ligne de flottaison. */
  .slot-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
  @media (max-width: 720px){ .slot-head > div:last-child{width:100%;text-align:left !important;} }
  /* Écran étroit : les boutons repassent sous le calendrier plutôt que
     d'écraser les pastilles de date. */
  @media (max-width: 1100px){
    .plan-date-nav{flex-wrap:wrap;}
    .plan-date-actions{width:100%;order:3;}
  }
  .date-nav-arrow{
    flex-shrink:0;width:34px;height:34px;border-radius:8px;background:var(--bg-elev-2);
    border:1px solid var(--border);color:#fff;font-size:16px;cursor:pointer;
  }
  .date-nav-arrow:hover{border-color:var(--gold);color:var(--gold);}
  .date-jump-input{
    flex-shrink:0;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;
    padding:7px 8px;color:#fff;font-size:12.5px;font-family:'Inter',sans-serif;width:132px;
  }
  .date-jump-input:focus{outline:none;border-color:var(--gold);}
  .date-chip.selected .d, .date-chip.selected .n{color:var(--gold);}
  .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
  .slot{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:9px;padding:10px 6px;text-align:center;cursor:pointer;font-size:13.5px;font-weight:500;position:relative;color:#fff;}
  .slot .tier{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--text-dimmer);margin-top:2px;}
  .slot:hover{border-color:var(--gold);}
  .slot.selected{border-color:var(--gold);background:rgba(217,169,78,0.1);color:var(--gold);}
  .slot.taken{opacity:.3;cursor:not-allowed;text-decoration:line-through;}
  /* Jauge d'une session déjà entamée, sous l'heure : « 2 inscrits · 4 places ». */
  .slot-join{display:block;font-size:10px;line-height:1.3;margin-top:3px;color:var(--gold);}
  .slot.taken .slot-join{display:none;}
  .join-options{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  .join-option{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--bg-elev-2);
    border:1px solid var(--border);border-radius:11px;padding:14px;cursor:pointer;color:#fff;font-size:13px;}
  .join-option:hover{border-color:var(--gold);}
  .join-option.selected{border-color:var(--gold);background:rgba(217,169,78,0.1);}
  .join-option b{font-size:14px;}
  .join-option span{color:var(--text-dim);}
  .legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--text-dim);margin-top:14px;}
  .legend span{display:inline-flex;align-items:center;gap:6px;}
  .legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}

  /* recap */
  .recap-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;}
  .recap-row:last-of-type{border-bottom:none;}
  .recap-row .k{color:var(--text-dim);}
  .recap-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
  .recap-total .amt{font-family:'Anton',sans-serif;font-size:30px;color:var(--gold);}
  .tier-badge{font-size:11px;padding:2px 8px;border-radius:5px;background:rgba(217,169,78,0.14);color:var(--gold);}

  label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;}
  input{
    width:100%;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:9px;
    padding:11px 12px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;
  }
  input:focus{outline:none;border-color:var(--gold);}
  .pay-error{
    background:rgba(220,90,90,0.12);border:1px solid rgba(220,90,90,0.4);color:#F0A0A0;
    font-size:13px;padding:10px 12px;border-radius:8px;margin-bottom:16px;
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .form-grid.three{grid-template-columns:1fr 1fr 1fr;}

  .actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
  .btn{font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:9px;border:none;cursor:pointer;transition:opacity .15s;}
  .btn:disabled{opacity:.35;cursor:not-allowed;}
  .btn-primary{background:var(--gold);color:#1B1607;}
  .btn-primary:hover:not(:disabled){opacity:.88;}
  .btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border);}
  .btn-ghost:hover{color:var(--text);border-color:var(--text-dim);}

  .cart-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:16px 22px;border-color:var(--gold);
  }
  .cart-bar-title{font-size:14px;font-weight:600;}
  .cart-bar-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
  .cart-list{margin-top:4px;}
  .cart-item{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border);
  }
  .cart-item:last-child{border-bottom:none;}
  .cart-item-main{flex:1 1 180px;min-width:160px;}
  .cart-item-name{font-size:14px;font-weight:600;}
  .cart-item-meta{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
  .cart-item-price{font-family:'Anton',sans-serif;font-size:16px;color:var(--gold);white-space:nowrap;}
  .cart-item-remove{
    background:transparent;border:1px solid var(--border);color:var(--text-dimmer);
    width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:13px;flex-shrink:0;
  }
  .cart-item-remove:hover{color:var(--text);border-color:var(--text-dim);}
  .cart-item.checkin-done{background:rgba(111,207,151,0.06);border-radius:9px;}

  /* ---- Journal de caisse (patch 45) ---- */
  .caisselog-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .caisselog-tile{background:var(--bg-elev);border:1px solid var(--border);border-radius:11px;
    padding:13px 15px;display:flex;flex-direction:column;gap:3px;}
  .caisselog-tile .k{font-size:11.5px;color:var(--text-dim);}
  .caisselog-tile .v{font-size:20px;font-weight:700;font-family:'Anton',sans-serif;letter-spacing:.01em;}
  .caisselog-tile .s{font-size:11px;color:var(--text-dimmer);}
  .caisselog-tile-main{border-color:var(--gold);background:rgba(217,169,78,.08);}
  .caisselog-tile-main .v{color:var(--gold);font-size:26px;}
  .caisselog-tile-warn{border-color:rgba(232,185,90,.35);}
  .caisselog-tile-warn .v{color:var(--warn);font-size:17px;}

  /* ---- Paiement partagé en Caisse ---- */
  .split-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;}
  .split-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--bg-elev-2);
    border:1px solid var(--border);border-radius:11px;padding:10px 12px;}
  .split-row.collected{border-color:rgba(111,207,151,.45);background:rgba(111,207,151,.07);}
  .split-idx{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--text-dim);}
  .split-row.collected .split-idx{border-color:var(--ok);color:var(--ok);}
  .split-amount{position:relative;flex:0 0 132px;}
  .split-amount input{width:100%;padding:9px 26px 9px 11px;border-radius:9px;border:1px solid var(--border);
    background:var(--bg-elev);color:var(--text);font-size:15px;font-weight:600;font-family:inherit;text-align:right;}
  .split-amount input:focus{outline:none;border-color:var(--gold);}
  .split-amount input.input-invalid{border-color:#E07A5F;}
  .split-cur{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-dimmer);font-size:13px;}
  .split-rest{background:none;border:0;color:var(--text-dim);font-size:11.5px;text-decoration:underline;
    cursor:pointer;font-family:inherit;padding:0 2px;flex-shrink:0;}
  .split-rest:hover{color:var(--gold);}
  .split-methods{display:flex;gap:6px;flex-wrap:wrap;}
  .split-method{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:7px 10px;
    font-size:12px;color:var(--text-dim);cursor:pointer;font-family:inherit;white-space:nowrap;}
  .split-method.on{border-color:var(--gold);color:var(--gold);background:rgba(217,169,78,.1);}
  /* Trait discontinu et couleur d'accent tant que ce n'est pas fait : c'est
     ce qui distingue un bouton à presser d'une étiquette qui décrit un état.
     En gris, celui-ci se lisait « cette part est à encaisser » et personne ne
     pensait à cliquer — la vente restait bloquée sans raison visible. */
  .split-tick{margin-left:auto;background:rgba(217,169,78,.07);border:1px dashed rgba(217,169,78,.6);
    border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--gold);cursor:pointer;
    font-family:inherit;white-space:nowrap;}
  .split-tick:hover{background:rgba(217,169,78,.16);border-color:var(--gold);}
  .split-tick.on{border-style:solid;border-color:var(--ok);color:var(--ok);background:rgba(111,207,151,.12);}
  .split-tick:disabled{opacity:.4;cursor:not-allowed;border-style:solid;border-color:var(--border);
    color:var(--text-dim);background:var(--bg-elev);}
  /* Le raccourci du bas apparaît et disparaît sans redessiner la page : sa
     règle d'affichage doit battre celle de .btn. */
  #split-all-btn[hidden]{display:none !important;}
  .split-del{background:none;border:0;color:var(--text-dimmer);font-size:14px;cursor:pointer;
    padding:4px 2px;flex-shrink:0;}
  .split-del:hover{color:#E07A5F;}
  .split-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
  .split-total{margin-left:auto;color:var(--text-dim);font-size:13px;}
  .split-total b{color:var(--text);}
  .split-summary{border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:12px;}
  .split-summary.warn{background:rgba(232,185,90,.1);border:1px solid rgba(232,185,90,.35);color:var(--warn);}
  .split-summary.bad{background:rgba(224,122,95,.1);border:1px solid rgba(224,122,95,.4);color:#E07A5F;}
  .split-summary.good{background:rgba(111,207,151,.1);border:1px solid rgba(111,207,151,.35);color:var(--ok);}
  @media(max-width:560px){
    .split-amount{flex:1 1 110px;}
    .split-tick{margin-left:0;}
  }

  /* ---- Parcours d'un groupe : une carte, une frise d'étapes ----
     Une ligne de liste ne disait pas où en était le groupe : les trois
     boutons avaient le même poids, et rien ne signalait l'étape faite.
     Ici l'étape suivante est le seul bouton doré de la carte. */
  .g-card{display:flex;background:var(--bg-elev-2);border:1px solid var(--border);
    border-radius:13px;overflow:hidden;margin-bottom:12px;}
  .g-card.g-over{opacity:.72;}
  .g-accent{width:5px;flex:0 0 5px;}
  .g-body{flex:1;padding:15px 17px;min-width:0;}
  .g-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
  .g-time{font-family:'Anton',sans-serif;font-size:22px;line-height:1;letter-spacing:.01em;}
  .g-name{font-size:15.5px;font-weight:600;line-height:1.25;}
  .g-sub{color:var(--text-dim);font-size:12.5px;margin-top:3px;}
  .g-right{margin-left:auto;text-align:right;flex-shrink:0;}
  .g-eta{font-size:12.5px;font-weight:600;color:var(--text-dim);}
  .g-eta.soon{color:var(--warn);} .g-eta.now{color:var(--ok);} .g-eta.late{color:#E07A5F;}
  .g-arena{color:var(--text-dimmer);font-size:11.5px;margin-top:2px;}
  .g-gauge{display:flex;gap:3px;margin-top:9px;flex-wrap:wrap;}
  .g-gauge i{width:15px;height:6px;border-radius:2px;background:var(--border);display:block;}
  .g-gauge i.on{background:var(--gold);}
  .g-gauge i.other{background:var(--join,#6FA8DC);}
  .g-gauge-lbl{color:var(--text-dimmer);font-size:11.5px;margin-top:5px;}
  /* Bornée en largeur : étalée sur tout un écran de bureau, la frise s'étire
     au point qu'on ne lit plus une progression mais quatre îlots séparés. */
  /* Six étapes désormais, contre cinq : un peu plus de largeur pour que
     « Briefing » et « Accueil » ne se coupent pas. */
  .g-steps{display:flex;align-items:flex-start;margin:16px 0 4px;max-width:560px;}
  .g-step{flex:1;text-align:center;position:relative;min-width:0;background:none;border:0;padding:0;
    font-family:inherit;color:inherit;}
  .g-step.clickable{cursor:pointer;}
  .g-step .bar{position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0;}
  .g-step:first-child .bar{display:none;}
  .g-step.done .bar, .g-step.now .bar{background:var(--ok);}
  .g-step .dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;margin:0 auto;
    border:2px solid var(--border);background:var(--bg-elev-2);display:flex;align-items:center;
    justify-content:center;font-size:11px;color:var(--text-dimmer);font-weight:700;}
  .g-step.done .dot{border-color:var(--ok);background:var(--ok);color:#0F1B15;}
  .g-step.now .dot{border-color:var(--gold);background:var(--gold);color:#0F1B15;
    box-shadow:0 0 0 4px rgba(217,169,78,.18);}
  /* La partie tourne, mais l'étape à faire est ailleurs (le briefing n'a pas
     été saisi, par exemple) : on le signale sans voler le doré à l'action. */
  .g-step.running:not(.now):not(.done) .dot{border-color:var(--ok);color:var(--ok);}
  .g-step.running:not(.now):not(.done) .lbl{color:var(--text-dim);}
  /* Étape « Accueil » : commencée mais pas finie — il manque du monde. */
  .g-step.partiel .dot{border-color:#E8B95A;color:#E8B95A;}
  /* Le compte des arrivées, sous le libellé de l'étape. C'est le chiffre
     qu'on cherche des yeux avant de lancer un briefing. */
  .g-step-sub{display:block;font-weight:700;font-size:10.5px;margin-top:1px;color:var(--text-dim);}
  .g-step.done .g-step-sub{color:var(--ok);}
  .g-step.partiel .g-step-sub{color:#E8B95A;}
  .g-step .lbl{font-size:11px;margin-top:7px;color:var(--text-dimmer);line-height:1.3;}
  .g-step.done .lbl{color:var(--text-dim);}
  .g-step.now .lbl{color:var(--gold);font-weight:600;}
  .g-step.clickable:hover .dot{border-color:var(--gold);}
  .g-actions{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap;}
  .g-actions .g-spacer{margin-left:auto;}
  .g-thumb{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);object-fit:cover;cursor:pointer;}
  .g-done-tag{color:var(--ok);font-size:12.5px;font-weight:600;}
  @media(max-width:560px){
    .g-step .lbl{font-size:10px;}
    .g-right{margin-left:0;text-align:left;width:100%;}
  }
  .checkin-badge{
    display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--ok);
    background:rgba(111,207,151,0.14);border-radius:5px;padding:2px 8px;margin-left:8px;vertical-align:middle;
  }

  .video-fullpage{
    position:fixed;inset:0;z-index:100;background:#000;
    display:flex;align-items:center;justify-content:center;
  }
  .video-play-btn{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    background:rgba(217,169,78,0.95);color:#1B1607;border:none;border-radius:999px;
    padding:18px 30px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
    box-shadow:0 6px 20px rgba(0,0,0,0.4);transition:transform .15s, background .15s;
  }
  .video-play-btn:hover{background:var(--gold);transform:translate(-50%,-50%) scale(1.05);}
  .video-skip-btn{
    position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.08);color:var(--text-dim);
    border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:8px 16px;font-size:13px;
    cursor:pointer;font-family:'Inter',sans-serif;
  }
  .video-skip-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.4);}
  .video-done-btn{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    background:var(--gold);color:#1B1607;border:none;border-radius:999px;
    padding:14px 26px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
    box-shadow:0 6px 20px rgba(0,0,0,0.4);
  }
  .video-done-btn:hover{opacity:.9;}
  .video-end-message{
    position:absolute;inset:0;background:rgba(6,10,8,0.92);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    text-align:center;padding:20px;
  }
  .promo-box{margin:14px 0;}
  .promo-row{display:flex;gap:10px;}
  .promo-row input{flex:1;}
  .promo-applied{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:rgba(111,207,151,0.1);border:1px solid var(--ok);border-radius:9px;
    padding:10px 14px;font-size:13.5px;color:var(--text);
  }

  .confirm{text-align:center;padding:20px 10px;}
  .confirm-icon{width:56px;height:56px;border-radius:50%;background:rgba(111,207,151,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
  .confirm-ref{font-family:'Anton',sans-serif;font-size:14px;color:var(--text-dim);background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;display:inline-block;margin-top:14px;letter-spacing:0.04em;}

  .empty-note{color:var(--text-dimmer);font-size:13.5px;padding:20px 0;text-align:center;}

  .modal-overlay{
    position:fixed;inset:0;background:rgba(6,10,8,0.72);z-index:50;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .modal-panel{
    position:relative;background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;
    padding:28px;max-width:440px;width:100%;max-height:85vh;overflow-y:auto;
  }
  .modal-close{
    position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
    background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:14px;
  }
  .modal-close:hover{color:var(--text);border-color:var(--text-dim);}
  .spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:middle;}
  @keyframes sp{to{transform:rotate(360deg);}}

  /* --- Écran Caisse : deux colonnes fixes, pas de défilement de page (écran tactile) --- */
  body.caisse-view, body.caisse-view html{height:100%;overflow:hidden;}
  body.caisse-view #app.wrap{max-width:none;padding:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
  body.caisse-view .top{flex-shrink:0;padding:16px 20px;}
  .caisse-screen{flex:1;display:flex;min-height:0;overflow:hidden;gap:0;}
  .caisse-main{flex:1.3;overflow-y:auto;padding:16px 20px;min-height:0;}
  .caisse-sidebar{flex:1;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--border);background:var(--bg-elev);}
  .caisse-sidebar-scroll{flex:1;overflow-y:auto;padding:16px 20px;min-height:0;}
  .caisse-sidebar-footer{flex-shrink:0;padding:16px 20px;border-top:1px solid var(--border);}
  .caisse-tasks-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:10px;background:var(--bg-elev-2);border:1px solid var(--border);margin-bottom:14px;cursor:pointer;font-size:13px;}
  .caisse-scroll-page{flex:1;overflow-y:auto;padding:16px 20px;min-height:0;}

  /* --- Écrans plein écran (Caisse, Planning, Parcours client) ---
     Même principe que la Caisse : la page elle-même ne défile jamais, le
     contenu occupe toute la hauteur de la fenêtre et seule la zone centrale
     défile si nécessaire. Pensé pour les écrans tactiles du comptoir. */
  body.fullpage-view{height:100%;overflow:hidden;}
  body.fullpage-view #app.wrap{max-width:none;padding:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
  body.fullpage-view .top{flex-shrink:0;padding:16px 20px;}
  .fullpage-scroll{flex:1;min-height:0;overflow:auto;padding:16px 20px 24px;}
  .fullpage-scroll > .panel + .panel{margin-top:18px;}

  /* --- Parcours client : la barre de tête ne défile pas ---
     Au comptoir on scanne pendant qu'on cherche un groupe dans la liste.
     Si le champ de scan part vers le haut au premier défilement, il faut
     remonter à chaque billet — une fois par joueur, toute la soirée.
     Le champ, le résultat du dernier scan et la semaine restent donc collés
     en haut de la zone qui défile.
     Les marges négatives la font déborder dans le rembourrage du panneau,
     pour qu'elle en occupe toute la largeur et qu'aucune carte ne se voie
     glisser derrière un bord. */
  .checkin-sticky{
    position:sticky; top:0; z-index:30;
    background:var(--bg-elev);
    margin:-28px -28px 14px; padding:18px 28px 14px;
    border-bottom:1px solid var(--border);
    border-radius:13px 13px 0 0;
  }

  /* --- Navigation latérale (sessions du personnel uniquement) ---
     Le rail occupe 64 px dans la mise en page. Au survol, le panneau s'élargit
     à 236 px EN SE SUPERPOSANT au contenu : rien ne bouge derrière lui. C'est
     le point qui décide de tout — s'il poussait le contenu, chaque passage de
     souris recalculerait les 8 colonnes du Planning et les réservations
     sauteraient sous le curseur.
     Épinglé, en revanche, il pousse pour de bon : c'est un choix délibéré de
     l'utilisateur, pas un accident de trajectoire de souris. */
  body.rail-view, body.rail-view html{height:100%;overflow:hidden;}
  body.rail-view #app.wrap{max-width:none;padding:0;height:100vh;display:flex;flex-direction:row;overflow:hidden;}

  .rail-wrap{position:relative;width:64px;flex-shrink:0;z-index:60;transition:width .18s ease;}
  .rail-wrap.pinned{width:236px;}
  .rail{position:absolute;top:0;left:0;bottom:0;width:64px;background:var(--bg-elev);
        border-right:1px solid var(--border);display:flex;flex-direction:column;
        padding:14px 10px 10px;overflow:hidden;
        transition:width .18s ease, box-shadow .18s ease;}
  .rail-wrap.pinned .rail{width:236px;box-shadow:none;}

  /* Le survol n'existe que là où il y a un vrai pointeur. Sur une tablette
     tactile, :hover reste collé après un appui : le rail resterait ouvert
     indéfiniment. Là, c'est le bouton Épingler qui sert. */
  @media (hover: hover) and (pointer: fine){
    .rail-wrap:hover .rail{width:236px;box-shadow:18px 0 44px rgba(0,0,0,.5);}
    .rail-wrap:hover .rail-lbl{opacity:1;}
    .rail-wrap:hover .rail-group{opacity:1;}
    .rail-wrap:hover .rail-sep{opacity:0;}
  }

  .rail-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px;}
  .rail-scroll::-webkit-scrollbar{width:0;}
  .rail-item{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;margin-bottom:2px;
             border-radius:8px;font-size:13.5px;font-family:'Inter',sans-serif;cursor:pointer;
             white-space:nowrap;background:none;border:none;color:var(--text-dim);width:100%;
             text-align:left;position:relative;}
  .rail-item:hover{background:var(--bg-elev-2);color:var(--text);}
  .rail-item.active{background:rgba(217,169,78,0.12);color:var(--gold);font-weight:600;}
  .rail-item svg{width:20px;height:20px;flex-shrink:0;}
  .rail-lbl{opacity:0;transition:opacity .12s ease .04s;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .rail-wrap.pinned .rail-lbl{opacity:1;}
  .rail-group{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dimmer);
              padding:0 10px;margin:14px 0 4px;height:13px;white-space:nowrap;opacity:0;
              transition:opacity .12s ease;}
  .rail-wrap.pinned .rail-group{opacity:1;}
  /* Replié, les intitulés de groupe cèdent la place à un simple filet. */
  .rail-sep{height:1px;background:var(--border);margin:-9px 8px 10px;transition:opacity .12s ease;}
  .rail-wrap.pinned .rail-sep{opacity:0;}
  .rail-badge{background:#5A2D22;color:#FFD9C9;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;opacity:0;transition:opacity .12s ease .04s;}
  .rail-wrap.pinned .rail-badge{opacity:1;}
  @media (hover: hover) and (pointer: fine){ .rail-wrap:hover .rail-badge{opacity:1;} }
  /* Replié, l'alerte ne disparaît pas : elle devient un point sur l'icône. */
  .rail-dot{position:absolute;left:31px;top:6px;width:8px;height:8px;border-radius:50%;background:#E07A5F;}
  .rail-wrap.pinned .rail-dot{opacity:0;}
  @media (hover: hover) and (pointer: fine){ .rail-wrap:hover .rail-dot{opacity:0;} }
  /* Le logo occupe la colonne des icônes quand le rail est replié (il reste
     lisible à 22 px de haut), et retrouve sa taille normale une fois déployé. */
  .rail-brand{display:flex;align-items:center;height:42px;padding:0 6px;margin-bottom:8px;overflow:hidden;}
  .rail-brand img{height:19px;width:auto;display:block;transition:height .18s ease;}
  .rail-wrap.pinned .rail-brand img{height:34px;}
  @media (hover: hover) and (pointer: fine){ .rail-wrap:hover .rail-brand img{height:34px;} }
  .rail-foot{flex-shrink:0;border-top:1px solid var(--border);padding-top:8px;margin-top:6px;}
  /* Assez lisible pour être dictée au téléphone, assez discrète pour se
     faire oublier le reste du temps. */
  .app-version{font-size:9.5px;letter-spacing:.02em;color:var(--text-dimmer);
    text-align:center;padding:6px 2px 2px;user-select:all;cursor:text;}

  .page{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
  .page-head{flex-shrink:0;display:flex;align-items:baseline;gap:14px;
             padding:14px 22px;border-bottom:1px solid var(--border);}
  .page-head h1{margin:0;font-size:19px;font-weight:700;}
  .page-sub{color:var(--text-dim);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* L'action propre à l'écran, collée à droite. margin-left:auto la pousse
     au bout de la ligne sans toucher au titre ni au sous-titre ; align-self
     la recentre, l'en-tête alignant tout le reste sur la ligne de base. */
  .page-head-action{margin-left:auto;flex-shrink:0;align-self:center;}
  /* Sous 1150 px, le sous-titre prendrait la place du titre : on le retire. */
  @media (max-width: 1150px){ .page-sub{display:none;} }
  .page-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 26px;}
  .page-body > .panel + .panel{margin-top:18px;}
  /* Écran plein page : c'est la zone interne qui défile, pas celle-ci. */
  .page-body.is-full{overflow:hidden;padding:0;display:flex;flex-direction:column;}
  body.rail-view .fullpage-scroll{padding:16px 20px 24px;}