/* Chrome partagé pl-* — commun aux pages /planning/ ET /tasks/. Navbar, modale, récurrence, boutons, flash… chargé par lib/planning/render.php et lib/tasks/render.php AVANT le CSS propre à chaque page (tasks-page.css). Utilise EXCLUSIVEMENT les tokens --ba-* déclarés dans badgeuse-app.css (chargé avant ce fichier). Aucun hardcoding de couleur. */ /* Body BLEU comme les autres pages (badgeuse-app.css : html,body{background:--ba-primary}). En PWA viewport-fit=cover, le descend sous l'encoche (caméra frontale) : c'est SON fond qui colore la safe-area. Le gris du contenu vit donc sur .pl-app (pleine largeur, sous la navbar), pas sur le body — sinon la safe-area redevient grise. */ .pl-body{background:var(--ba-primary);color:var(--ba-text-strong);margin:0} /* margin-top compensatoire : la navbar étant position:fixed (hors flux), le contenu démarrerait sous elle. On le décale de la hauteur navbar (80px) + la safe-area du haut, exactement ce que la navbar occupe. Total page inchangé : margin-top + min-height = 100dvh. */ .pl-app{background:var(--ba-bg-subtle);padding:0 0 64px; margin-top:calc(80px + env(safe-area-inset-top)); min-height:calc(100vh - 80px - env(safe-area-inset-top)); min-height:calc(100dvh - 80px - env(safe-area-inset-top))} /* Navbar — alignée 1:1 sur la navbar badgeuse (index-page.css). La BARRE fait 80px = hauteur réelle de la navbar UIkit de l'index (.uk-navbar-nav>li>a a min-height:80px, non overridé). La boîte wordmark 520x70 desktop / 360x58 mobile est centrée dedans, exactement comme .navbar-title (70/58px) l'est dans l'ancre 80px de l'index. Même object-fit contain + transform pour que "le planning" tombe au MÊME NIVEAU que "la badgeuse". (Avant : barre 70/58px → 10px/22px plus courte que l'index.) */ /* padding-top safe-area : le bleu remonte dans l'encoche (caméra frontale iPhone), comme la navbar standard (.app-navbar-shell .uk-navbar-container). box-sizing content-box explicite : la barre garde ses 80px visibles + l'inset au-dessus. */ /* position:fixed : la barre reste collée en haut du viewport pendant le scroll (mobile ET desktop). On NE peut PAS utiliser position:sticky ici : badgeuse-app.css pose `html,body{overflow-x:hidden}`, ce qui force overflow-y à `auto` et fait du un conteneur de défilement — sticky se collerait alors au body (qui ne défile pas, c'est le viewport qui scrolle) et la navbar suivrait le contenu. fixed est immunisé contre l'overflow des ancêtres. .pl-app porte un margin-top compensatoire (= hauteur navbar + safe-area) pour que le contenu démarre dessous. La navbar reste le bloc conteneur de .pl-back (position:absolute). */ .pl-navbar{background:var(--ba-primary);height:80px;box-sizing:content-box; padding-top:env(safe-area-inset-top);display:flex;align-items:center; justify-content:center;position:fixed;top:0;left:0;right:0;z-index:var(--ba-z-navbar); color:var(--ba-bg-white);box-shadow:var(--ba-shadow-soft)} /* Lockup de marque : pictogramme mini-agenda + wordmark "la badgeuse". Le wordmark doit rester EXACTEMENT au même endroit que sur l'index (aucun déplacement du logo au passage index <-> planning). Pour ça : un spacer invisible (::after) de la même largeur que l'icône est ajouté À DROITE du wordmark. Le lockup [icône|gap|wordmark| gap|spacer] est symétrique → le wordmark tombe pile au centre de la navbar, comme .navbar-title centré sur l'index. Le wordmark garde sa taille (boîte 70/58px). */ .pl-navbar .pl-wordmark{display:flex;align-items:center;justify-content:center;gap:var(--ba-space-3); max-width:calc(100vw - 120px);height:70px;overflow:hidden;line-height:0} .pl-navbar .pl-brand-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center} .pl-navbar .pl-brand-icon svg{width:36px;height:36px;display:block;color:var(--ba-bg-white); transform:translateY(1px)} .pl-navbar .pl-wordmark::after{content:"";flex:0 0 auto;width:36px;height:1px} .pl-navbar .pl-wordmark-image{flex:0 0 auto;height:100%;width:auto;display:block; object-fit:contain;object-position:center; transform:translateY(-1px) scale(1.08);transform-origin:center center} /* Bouton retour : identique à .app-navbar-back-button (badgeuse-app.css) — pastille transparente, flèche arrow-left UIkit, opacity .92 + hover. */ .pl-navbar .pl-back{position:absolute;left:max(14px, env(safe-area-inset-left)); top:calc(env(safe-area-inset-top) + 40px); transform:translateY(-50%);width:42px;height:42px;padding:0;border:0;border-radius:var(--ba-radius-pill); background:transparent;color:var(--ba-bg-white);text-decoration:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;opacity:.92; transition:opacity .18s ease, filter .18s ease, transform .18s ease} .pl-navbar .pl-back:hover{opacity:1;color:var(--ba-bg-white); filter:drop-shadow(0 6px 12px rgba(0,0,0,.24));transform:translateY(-50%) scale(1.06)} .pl-navbar .pl-back:focus-visible{opacity:1;color:var(--ba-bg-white);outline:2px solid rgba(255,255,255,.86); outline-offset:3px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.24));transform:translateY(-50%) scale(1.06)} .pl-navbar .pl-back svg{width:20px;height:20px;display:block} /* Bascules rapides à droite, en miroir de .pl-back : cluster de pictogrammes vers les autres modules du salarié — check-list = Tâches, agenda = Le Planning, livre = Historique, engrenage = Administration. Pictogrammes repris à l'identique de la page de badge (index.php). Jusqu'à deux icônes côte à côte (module + historique/admin) tenues par un conteneur flex absolu ; les liens sont donc en flux (pas de position:absolute individuelle). */ .pl-navbar .pl-navquick{position:absolute;right:max(8px, env(safe-area-inset-right)); top:calc(env(safe-area-inset-top) + 40px);transform:translateY(-50%); display:flex;align-items:center;gap:2px} .pl-navbar .pl-history, .pl-navbar .pl-admin, .pl-navbar .pl-planning, .pl-navbar .pl-tasks{width:40px;height:42px;padding:0;border:0;border-radius:var(--ba-radius-pill); background:transparent;color:var(--ba-bg-white);text-decoration:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;opacity:.92; transition:opacity .18s ease, filter .18s ease, transform .18s ease} .pl-navbar .pl-history:hover, .pl-navbar .pl-admin:hover, .pl-navbar .pl-planning:hover, .pl-navbar .pl-tasks:hover{opacity:1;color:var(--ba-bg-white); filter:drop-shadow(0 6px 12px rgba(0,0,0,.24));transform:scale(1.06)} .pl-navbar .pl-history:focus-visible, .pl-navbar .pl-admin:focus-visible, .pl-navbar .pl-planning:focus-visible, .pl-navbar .pl-tasks:focus-visible{opacity:1;color:var(--ba-bg-white);outline:2px solid rgba(255,255,255,.86); outline-offset:3px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.24));transform:scale(1.06)} .pl-navbar .pl-history svg, .pl-navbar .pl-admin svg, .pl-navbar .pl-planning svg, .pl-navbar .pl-tasks svg{height:23px;width:auto;display:block} @media (max-width: 640px){ /* La barre reste à 80px (l'index ne réduit pas : UIkit garde min-height:80px en mobile) ; seule la boîte wordmark passe à 58px, centrée — comme .navbar-title de l'index. */ .pl-navbar .pl-wordmark{gap:11px;max-width:calc(100vw - 96px);height:58px} .pl-navbar .pl-brand-icon svg{width:30px;height:30px} .pl-navbar .pl-wordmark::after{width:30px} .pl-navbar .pl-wordmark-image{transform:translateY(-1px) scale(1.06)} } /* Centrage du contenu déplacé de .pl-app vers .pl-wrap (.pl-app est désormais pleine largeur pour porter le fond gris jusqu'aux bords). Rendu identique. */ /* padding-top compensatoire : la barre d'outils d'édition (.pl-toolbar--edit) est épinglée en position:fixed (hors flux) ; --pl-toolbar-offset (posé en JS = sa hauteur réelle, qui varie au wrap mobile) pousse la grille sous la barre. Vaut 0 hors vue d'édition (variable absente -> repli). */ .pl-wrap{max-width:1280px;margin:0 auto;padding:calc(22px + var(--pl-toolbar-offset,0px)) 16px 22px} .pl-phone .pl-wrap{max-width:480px} .pl-h{font-size:var(--ba-font-4xl);font-weight:800;margin:0 0 2px} .pl-sub{color:var(--ba-text-muted);font-size:var(--ba-font-base);margin:0 0 18px} .pl-card{background:var(--ba-surface);border:1px solid var(--ba-border); border-radius:var(--ba-radius-card);box-shadow:var(--ba-shadow-card);padding:20px;margin:0 0 18px} .pl-card h2{font-size:var(--ba-font-xl);margin:0 0 4px} .pl-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ba-space-3)} .pl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .pl-weekpick{display:flex;align-items:center;gap:8px;background:var(--ba-surface);border:1px solid var(--ba-border); border-radius:var(--ba-radius-pill);padding:6px 8px;margin-left:auto} .pl-weekpick a{width:32px;height:32px;border-radius:50%;border:1px solid var(--ba-border); background:var(--ba-surface);color:var(--ba-primary);font-size:var(--ba-font-xl);text-decoration:none; display:flex;align-items:center;justify-content:center} .pl-weekpick .pl-week-label{font-weight:700;font-size:var(--ba-font-base);padding:0 6px} /* Toolbar d'édition admin (desktop) : 3 enfants (groupe boutons · Dupliquer S-1 · sélecteur de semaine). On neutralise le margin-left:auto du sélecteur pour laisser justify-content:space-between répartir l'espace → Dupliquer à équidistance du groupe de boutons (gauche) et du sélecteur (droite). Scopé desktop : en mobile, le sélecteur reste centré sur sa propre ligne (cf. @media max-width:640px). */ @media (min-width: 641px){ .pl-toolbar--edit .pl-weekpick{margin-left:0} } /* Barre d'outils d'édition épinglée pendant le scroll (mobile ET desktop) : de « Pré-réglages » jusqu'au sélecteur « Semaine … ». Même contrainte que la navbar (cf. .pl-navbar) : badgeuse-app.css pose `html,body{overflow-x:hidden}`, ce qui fait du un conteneur de défilement non défilant -> position:sticky se collerait au body et suivrait le contenu. On reprend donc position:fixed, calée juste sous la navbar (top = sa hauteur + safe-area, comme le margin-top de .pl-app). La barre wrap sur mobile : sa hauteur réelle est mesurée en JS (planning-page.js) et reportée en --pl-toolbar-offset, que .pl-wrap ajoute à son padding-top pour que la grille démarre dessous. Contenu centré sur 1280 comme .pl-wrap via un padding latéral calculé (100% = largeur du viewport, hors scrollbar, car left/right:0). */ .pl-toolbar--edit{position:fixed;top:calc(80px + env(safe-area-inset-top));left:0;right:0; z-index:calc(var(--ba-z-navbar) - 1);margin:0; padding:12px max(16px, calc((100% - 1280px) / 2 + 16px)); background:var(--ba-bg-subtle);border-bottom:1px solid var(--ba-border); box-shadow:var(--ba-shadow-soft)} /* Stats */ /* Pills */ /* Legal box */ /* Grid */ .pl-scroll{overflow-x:auto} .pl-grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--ba-surface); border:1px solid var(--ba-border);border-radius:var(--ba-radius-card);overflow:hidden; box-shadow:var(--ba-shadow-card)} /* Largeur plancher des colonnes de jours (vue étendue) : sans ça, en layout auto, une colonne ne contenant que des présences vierges (texte masqué, donc contenu plus étroit) se rétrécit et ses encadrés sont plus étroits que ceux des colonnes horodatées du même rang. Un min-width calé sur la largeur naturelle d'un créneau horodaté aligne toutes les colonnes sans imposer une largeur fixe qui ferait wrapper les horaires (≠ table-layout:fixed). */ .pl-grid:not(.pl-compact) td:not(.pl-emp):not(.pl-colsum), .pl-grid:not(.pl-compact) thead th:not(.pl-emp):not(.pl-colsum){min-width:104px} /* Protège la colonne Salarié : sans min-width strict, le min-width des jours lui volait de l'espace (nom du salarié replié sur 2 lignes). */ .pl-grid:not(.pl-compact) .pl-emp{min-width:185px} /* Ordinateur : la grille étendue tient TOUJOURS dans la largeur de l'écran — aucune barre de défilement horizontale, le week-end (sam./dim.) et la colonne « Semaine » restent visibles sans défiler à droite. table-layout:fixed répartit la largeur disponible entre les 7 jours (colonnes égales, ce qui aligne aussi les colonnes vierges sans le min-width plancher) ; on neutralise donc les min-width plancher qui, sur une fenêtre plus étroite que la grille naturelle (~1060px), forçaient le débordement. Salarié/Semaine gardent leur largeur préférée (width:185/148) mais peuvent se compresser si la fenêtre l'exige (min-width:0). Sous 641px, la vue compacte (pastilles) prend le relais. */ @media (min-width: 641px){ .pl-grid:not(.pl-compact){table-layout:fixed} .pl-grid:not(.pl-compact) td:not(.pl-emp):not(.pl-colsum), .pl-grid:not(.pl-compact) thead th:not(.pl-emp):not(.pl-colsum){min-width:0} .pl-grid:not(.pl-compact) .pl-emp{min-width:0} } .pl-grid th,.pl-grid td{padding:0;text-align:left;vertical-align:top; border-bottom:1px solid var(--ba-border-light);border-right:1px solid var(--ba-border-light)} .pl-grid thead th{background:var(--ba-surface-subtle);font-size:var(--ba-font-xs);color:var(--ba-text-muted); font-weight:700;padding:10px 12px;text-align:center} .pl-grid thead th .pl-dnum{display:block;font-size:var(--ba-font-xl);color:var(--ba-text-strong);font-weight:800} .pl-grid thead th.pl-today{color:var(--ba-primary)} .pl-grid thead th.pl-today .pl-dnum{color:var(--ba-primary)} .pl-grid .pl-emp{width:185px;padding:12px 14px;background:var(--ba-surface);text-align:center} .pl-emp .pl-nm{font-weight:700;font-size:var(--ba-font-base)} .pl-emp .pl-rl{font-size:var(--ba-font-xs);color:var(--ba-text-muted)} .pl-av{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--ba-bg-info); color:var(--ba-primary);align-items:center;justify-content:center;font-weight:800;font-size:var(--ba-font-xs);margin-right:8px} .pl-av.pl-admin{background:var(--ba-warning-bg);color:var(--ba-warning-text)} .pl-cell{min-height:72px;padding:8px} /* Vue étendue : on centre verticalement l'encadré du créneau dans la case (un créneau court ne flotte plus en haut quand la ligne est plus haute). Le .pl-dot est display:none ici, donc hors flux flex. Le mode compact redéfinit .pl-cell (centrage de la pastille) plus bas. */ .pl-grid:not(.pl-compact) .pl-cell{display:flex;flex-direction:column;justify-content:center} /* idem pour les colonnes « Salarié » (.pl-emp) et « Semaine » (.pl-colsum) : leur contenu (td à contenu direct) est centré verticalement dans la ligne, au lieu de coller en haut via le vertical-align:top générique de la grille. */ .pl-grid:not(.pl-compact) .pl-emp, .pl-grid:not(.pl-compact) .pl-colsum{vertical-align:middle} .pl-shift{background:var(--ba-bg-info);border:1px solid #cfe0ef;border-left:3px solid var(--ba-primary); border-radius:10px;padding:6px 8px;font-size:var(--ba-font-xs);margin-bottom:var(--ba-space-1);text-align:center} .pl-shift .pl-t{font-weight:800;color:var(--ba-primary-dark)} .pl-shift .pl-br{color:var(--ba-text-muted);font-size:var(--ba-font-2xs);margin-top:1px} .pl-shift.pl-done{background:var(--ba-success-bg);border-color:#bfe3cc;border-left-color:var(--ba-success-text)} .pl-shift.pl-done .pl-t{color:var(--ba-success-text)} /* Poste affecté à un créneau : étiquette colorée (background/color inline, posés au rendu depuis les pré-réglages). Reste visible sur une présence sans horaire (où .pl-t/.pl-br sont masqués) : le poste y est l'info utile. */ .pl-pos{display:inline-block;max-width:100%;box-sizing:border-box; font-size:var(--ba-font-3xs);font-weight:800;line-height:1.35; padding:1px 8px;border-radius:var(--ba-radius-pill);margin-bottom:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em} .pl-day-shift .pl-pos{font-size:var(--ba-font-2xs);padding:2px 9px;margin-bottom:4px} .pl-empty{color:#aab6c3;font-size:var(--ba-font-2xl);text-align:center;padding:18px 0} /* Présence sans horaire (mode non compact) : encadré PLEIN de même dimension qu'un créneau horodaté, mais VIERGE. On réutilise tel quel le style .pl-shift (couleur selon l'état : bleu = à venir, vert .pl-done = jour réalisé) et on masque seulement le texte « Prévu / horaires libres » en conservant la hauteur des deux lignes (visibility:hidden, pas display:none). En vue compacte, ce sont les pastilles .pl-dot qui priment : ce style ne s'y applique pas. */ .pl-grid:not(.pl-compact) .pl-shift--presence .pl-t, .pl-grid:not(.pl-compact) .pl-shift--presence .pl-br{visibility:hidden;white-space:nowrap} /* Absence typée (CP, RTT, arrêt…) : pastille pleine à la couleur du type (background/color inline, posés au rendu depuis le catalogue fixe de lib/planning/absences.php — même pattern que la couleur des postes). PAS un créneau éditable : jamais de .pl-shift-edit ni de drag ; côté admin le clic ouvre la modale pl-absence-modal (consultation / suppression). */ .pl-shift--absence{border:none} .pl-cell-edit .pl-shift--absence{cursor:pointer} .pl-cell-edit .pl-shift--absence:hover{filter:brightness(.94)} .pl-shift--absence .pl-abs-abbr{font-weight:800;font-size:var(--ba-font-sm);letter-spacing:.04em;line-height:1.3} .pl-shift--absence .pl-abs-label{font-size:var(--ba-font-3xs);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-grid:not(.pl-compact) .pl-cell-multi .pl-shift--absence .pl-abs-label{display:none} /* Modale absence : puces de choix du type (radio-like, couleur du type inline). Sélection SANS AMBIGUÏTÉ : coche « ✓ » + anneau primaire + pleine opacité — les puces non retenues restent estompées. */ .pl-abs-types{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px} .pl-abs-type{border:2px solid transparent;border-radius:var(--ba-radius-pill); font-size:var(--ba-font-xs);font-weight:700;padding:6px 12px;cursor:pointer;opacity:.5} .pl-abs-type:hover{opacity:.85} .pl-abs-type.is-selected{opacity:1;border-color:var(--ba-bg-white); box-shadow:0 0 0 2px var(--ba-primary-dark)} .pl-abs-type.is-selected::before{content:"✓ ";font-weight:800} /* CTA « Poser une absence » des modales créneau (création + édition) : bouton pleine largeur en teinte warning, repérable au premier regard. */ .pl-absence-cta{display:block;width:100%;box-sizing:border-box;margin:-2px 0 14px; padding:9px 12px;border:1px solid var(--ba-warning-text);border-radius:var(--ba-radius-control); background:var(--ba-warning-bg);color:var(--ba-warning-text); font-size:var(--ba-font-sm);font-weight:700;cursor:pointer;text-align:center} .pl-absence-cta:hover{filter:brightness(.97)} /* Appui long mobile (menu contextuel) : pas de sélection de texte ni de callout iOS pendant la pression sur une case. */ .pl-cell-edit{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} /* Case « pleine » (>= 2 créneaux), vue étendue : on condense chaque créneau à « poste + horaires seuls » pour que 2-3 bandeaux tiennent sans gonfler la case. La ligne détail pause·net (.pl-br) est masquée (le détail complet reste visible à l'édition du créneau). Empilement depuis le haut (liste) plutôt que centré. La classe est posée au rendu (render.php) et resynchronisée côté client après les mutations AJAX (planning-page.js : syncCellMulti). Ne s'applique pas en vue compacte (pastilles), qui montre 1 seul voyant par jour. */ .pl-grid:not(.pl-compact) .pl-cell-multi{justify-content:flex-start;gap:4px} .pl-grid:not(.pl-compact) .pl-cell-multi .pl-shift{margin-bottom:0;padding:4px 8px} .pl-grid:not(.pl-compact) .pl-cell-multi .pl-shift .pl-br{display:none} .pl-grid:not(.pl-compact) .pl-cell-multi .pl-shift .pl-t{font-size:var(--ba-font-2xs);white-space:nowrap} .pl-grid:not(.pl-compact) .pl-cell-multi .pl-pos{margin-bottom:1px} .pl-colsum{width:148px;background:var(--ba-surface-subtle)} .pl-colsum .pl-box{padding:8px 12px} .pl-colsum .pl-line{display:flex;justify-content:space-between;font-size:var(--ba-font-xs);padding:2px 0} .pl-colsum .pl-line .pl-lab{color:var(--ba-text-muted)} .pl-colsum .pl-line .pl-val{font-weight:700} .pl-colsum .pl-line.pl-sup .pl-val{color:var(--ba-warning-text)} /* List rows (employee) */ .pl-muted{color:var(--ba-text-muted)} .pl-legend{font-size:var(--ba-font-xs);color:var(--ba-text-muted);margin-top:12px} /* Gate */ .pl-gate{max-width:420px;margin:60px auto;text-align:center;padding:0 16px} .pl-gate .pl-card{padding:28px} .pl-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--ba-radius-control); font-weight:700;font-size:var(--ba-font-base);padding:12px 20px;cursor:pointer;text-decoration:none; background:var(--ba-primary);border:1px solid var(--ba-primary);color:var(--ba-bg-white)} .pl-btn:hover{background:var(--ba-primary-dark)} /* ---- Édition de créneaux (grille admin) ---- */ .pl-flash{background:var(--ba-success-bg);color:var(--ba-success-text);border:1px solid #bfe3cc; border-radius:var(--ba-radius-panel);padding:10px 14px;font-size:var(--ba-font-sm);font-weight:600;margin-bottom:var(--ba-space-3)} .pl-cell-edit{cursor:pointer;transition:background .12s} .pl-cell-edit:hover{background:var(--ba-surface-subtle)} .pl-cell-edit:focus{outline:2px solid var(--ba-primary);outline-offset:-2px} .pl-emp-edit{cursor:pointer;transition:background .12s} .pl-emp-edit:hover{background:var(--ba-surface-subtle)} .pl-emp-edit:focus{outline:2px solid var(--ba-primary);outline-offset:-2px} .pl-shift-edit{cursor:pointer} .pl-shift-edit:hover{filter:brightness(.97)} /* Glisser-déposer d'un créneau (vue étendue uniquement) : poignée de saisie sur un créneau déplaçable (ponctuel), case-cible mise en évidence au survol pendant le glisser, créneau en cours de déplacement estompé. */ .pl-grid:not(.pl-compact) .pl-shift-edit[draggable="true"]{cursor:grab} .pl-grid:not(.pl-compact) .pl-shift-edit[draggable="true"]:active{cursor:grabbing} .pl-shift-dragging{opacity:.4} .pl-cell-edit.pl-cell-drop{background:var(--ba-bg-info);box-shadow:inset 0 0 0 2px var(--ba-primary)} /* Menu contextuel (clic droit) : copier un créneau, le coller dans une autre case (vue étendue uniquement — cf. planning-page.js). Flotte au-dessus de la grille. */ .pl-ctx{position:fixed;z-index:var(--ba-z-popover);min-width:172px; background:var(--ba-surface);border:1px solid var(--ba-border); border-radius:var(--ba-radius-control);box-shadow:var(--ba-shadow-card); padding:5px;display:flex;flex-direction:column;gap:2px} .pl-ctx[hidden]{display:none} .pl-ctx-item{appearance:none;-webkit-appearance:none;border:0;background:transparent; text-align:left;font:inherit;color:var(--ba-text-strong);padding:9px 12px; border-radius:var(--ba-radius-control);cursor:pointer;white-space:nowrap} .pl-ctx-item:hover,.pl-ctx-item:focus{background:var(--ba-bg-info);outline:none} .pl-ctx-item[hidden]{display:none} /* Action destructive (supprimer) : couleur danger + léger trait de séparation quand elle suit une autre entrée visible. */ .pl-ctx-danger{color:var(--ba-danger-text)} .pl-ctx-danger:hover,.pl-ctx-danger:focus{background:var(--ba-danger-bg)} .pl-ctx-item:not([hidden])~.pl-ctx-danger{margin-top:4px;border-top:1px solid var(--ba-border-light);padding-top:11px} .pl-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center; justify-content:center;padding:20px;z-index:1000} .pl-modal-bg[hidden]{display:none} /* box-sizing:border-box sur la modale et TOUS ses enfants : sans ça, les champs en width:100% + padding débordaient à droite (Début/Fin/Pause/Note). */ .pl-modal, .pl-modal *{box-sizing:border-box} /* overflow-x:hidden : la modale ne scrolle QUE verticalement. Sans ça, sur mobile, la grille « Modèles de créneau » (colonnes fixes) débordait et autorisait un scroll horizontal gauche/droite parasite. */ .pl-modal{position:relative;background:var(--ba-surface);border-radius:var(--ba-radius-card);box-shadow:0 24px 60px rgba(15,23,42,.3); width:100%;max-width:420px;padding:22px;max-height:92vh;overflow-y:auto;overflow-x:hidden} .pl-modal h3{margin:0 0 16px;padding-right:30px;font-size:17px} /* Petite croix de fermeture en coin (comme les autres pop-up La Badgeuse). position:sticky (et NON absolute) : .pl-modal est le conteneur de scroll (overflow-y:auto), donc une croix en absolute défilerait avec le contenu et sortirait du cadre quand la modale (ex. Pré-réglages) est plus haute que l'écran. En sticky + top:10px, elle reste collée en haut à droite pendant le scroll. margin-left:auto la pousse à droite ; margin-bottom:-32px annule sa hauteur dans le flux pour que le

(padding-right:30px) reste calé dessous. Fond pilule + ombre pour rester lisible au-dessus du contenu qui défile — même pattern que .admin-recap-detail-modal .uk-modal-close-default. / .pl-modal-x{position:sticky;top:10px;z-index:var(--ba-z-notification); margin:0 -12px -32px auto;width:32px;height:32px;display:flex; align-items:center;justify-content:center;padding:0;border:1px solid var(--ba-border); border-radius:50%;background:rgba(255,255,255,.92);color:var(--ba-text-muted); cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.1);backdrop-filter:blur(6px)} .pl-modal-x:hover,.pl-modal-x:focus-visible{background:var(--ba-surface-subtle);color:var(--ba-text-strong)} .pl-modal-x svg{display:block} .pl-field{display:block;font-size:var(--ba-font-xs);font-weight:700;color:var(--ba-text-muted);margin-bottom:var(--ba-space-3)} / font-size:var(--ba-font-xl) (et pas 14px) sur les champs : en dessous de 16px, Safari iOS zoome automatiquement sur le champ au focus — ce qui donnait l'effet « zoom » à l'ouverture du pop-up (le champ Début est focus auto). Même parade que les modales admin (admin-page.css). / / min-width:0 : input[type=time]/[number] ont une largeur intrinsèque minimale élevée (widget natif heure + flèches du spinner). Sans ça, dans une grille .pl-field-2/.pl-field-3, la piste refuse de rétrécir sous cette largeur et le champ déborde à droite de l'encadré (Début/Fin par défaut). Même parade que .pl-tpl-row input. Couplé aux pistes minmax(0,1fr) ci-dessous. / .pl-field input,.pl-field select{display:block;width:100%;min-width:0;margin-top:5px;padding:10px 12px; border:1px solid var(--ba-border);border-radius:var(--ba-radius-control);font-size:var(--ba-font-xl); background:var(--ba-surface);color:var(--ba-text-strong);font-weight:600} / -webkit-appearance:none : sur iOS Safari, le widget natif heure/spinner garde une largeur intrinsèque que min-width:0 ne contraint PAS (ça marche en émulation Chrome, mais sur un vrai iPhone l'encadré Début/Fin déborde à droite de la grille .pl-field-2). Le neutraliser fait respecter width:100% + box-sizing ; le picker natif reste accessible au tap. SURTOUT pas sur