/* * Espace employé public — refonte « web app » mobile/tablette. * * Palette reprise À L'IDENTIQUE de l'admin (public/admin/assets/css/admin.css) : * mêmes bleus/gris (#111827, #1f2937, #2563eb…), déclinés en thème clair et * sombre via l'attribut data-bs-theme. On reste sur Bootstrap : les tokens * --app-* sont aussi câblés sur les variables --bs-* pour que les composants * Bootstrap existants (cartes, champs, boutons, badges) adoptent la palette * sans réécrire chaque vue. */ /* ------------------------------------------------------------------ Tokens */ :root, [data-bs-theme="light"] { color-scheme: light; --app-bg: #f3f4f6; --app-surface: #ffffff; --app-surface-soft: #f8fafc; --app-text: #111827; --app-muted: #6b7280; --app-primary: #2563eb; --app-primary-rgb: 37, 99, 235; --app-primary-hover: #1d4ed8; --app-primary-soft: #e9f2ff; --app-border: #e5e7eb; --app-success: #16a34a; --app-danger: #dc2626; --app-warning: #d97706; --app-input: #ffffff; --app-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .06); --app-shadow-strong: 0 .75rem 2rem rgba(15, 23, 42, .14); --app-radius: 1rem; --app-radius-sm: .65rem; } [data-bs-theme="dark"] { color-scheme: dark; --app-bg: #111827; --app-surface: #1f2937; --app-surface-soft: #172132; --app-text: #e5e7eb; --app-muted: #9ca3af; --app-primary: #3b82f6; --app-primary-rgb: 59, 130, 246; --app-primary-hover: #2563eb; --app-primary-soft: rgba(59, 130, 246, .16); --app-border: #334155; --app-success: #22c55e; --app-danger: #ef4444; --app-warning: #f59e0b; --app-input: #111827; --app-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); --app-shadow-strong: 0 .75rem 2rem rgba(0, 0, 0, .38); } /* ----------------------------------------- Pont vers les variables Bootstrap */ .public-body { --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-emphasis-color: var(--app-text); --bs-secondary-color: var(--app-muted); --bs-tertiary-bg: var(--app-surface-soft); --bs-border-color: var(--app-border); --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-hover); --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border); --bs-border-radius: var(--app-radius-sm); --bs-border-radius-lg: var(--app-radius); } /* ------------------------------------------------------------------- Layout */ .public-body { min-height: 100vh; background: var(--app-bg); color: var(--app-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* Masque la barre de défilement sur mobile/tablette (le défilement reste actif). La barre du viewport est portée par : app.css n'étant chargé que sur l'espace employé, on peut cibler html/body sans impacter l'admin. */ @media (max-width: 1024px) { html, body, .public-body * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, .public-body *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } } /* Conteneur de contenu : colonne centrée qui s'adapte à l'écran. La marge basse dégage l'espace du menu flottant. */ .app-main { flex: 1 0 auto; width: 100%; max-width: 720px; margin-inline: auto; padding: .9rem 1rem calc(6.5rem + env(safe-area-inset-bottom, 0px)); } /* Pages où le contenu doit rester proche du header (vue active, planning). */ .app-main--tight { padding-top: .25rem; } /* Indicateur « tirer pour rafraîchir » (PWA installée). Position/opacité pilotées en JS pendant le geste ; .is-animated active la transition de retour/lancement. */ .app-ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .5rem); left: 50%; z-index: 1080; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--app-surface); color: var(--app-primary); border: 1px solid var(--app-border); box-shadow: 0 6px 16px rgba(15, 23, 42, .18); transform: translate(-50%, -52px); opacity: 0; pointer-events: none; } .app-ptr.is-animated { transition: transform .25s ease, opacity .25s ease; } .app-ptr i { font-size: .95rem; transition: transform .2s ease; } .app-ptr.is-armed i { transform: rotate(180deg); } .app-ptr.is-refreshing i { animation: app-ptr-spin .8s linear infinite; } @keyframes app-ptr-spin { to { transform: rotate(360deg); } } /* Loader de changement de page : spinner centré, léger voile, court fondu (calqué sur .admin-ajax-overlay). Affiché quand porte .app-loading. */ .app-loader { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .6); backdrop-filter: blur(1px); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; } body.app-loading .app-loader { opacity: 1; visibility: visible; } /* Notices flottantes : placées sous la cloche de notification (à peu près à la hauteur du bouton retour), pour ne pas recouvrir la barre d'état / la cloche. Le padding p-3 du conteneur ajoute encore ~1rem au-dessus du toast. */ .app-toast-container { top: calc(env(safe-area-inset-top, 0px) + 2.75rem) !important; } /* Écran d'accueil animé (web app) : logo + salutation, au premier lancement ou après une longue absence. Masqué par défaut ; affiché quand porte .app-splash-active (décidé en synchrone dans le , sans clignotement). */ .app-splash { display: none; } html.app-splash-active { overflow: hidden; } html.app-splash-active .app-splash { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem calc(2rem + env(safe-area-inset-right, 0px)) 2rem calc(2rem + env(safe-area-inset-left, 0px)); background: var(--app-bg); transition: opacity .5s ease; } .app-splash.is-leaving { opacity: 0; pointer-events: none; } .app-splash-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .app-splash-logo { width: 4.75rem; height: 4.75rem; font-size: 2.1rem; box-shadow: var(--app-shadow-strong); opacity: 0; transform: scale(.82); animation: splash-pop .7s cubic-bezier(.2, .7, .3, 1) forwards; } .app-splash-title { margin: 1.4rem 0 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; color: var(--app-text); opacity: 0; transform: translateY(12px); animation: splash-rise .6s ease forwards .45s; } .app-splash-tagline { margin: .5rem 0 0; color: var(--app-muted); font-size: .98rem; opacity: 0; transform: translateY(12px); animation: splash-rise .6s ease forwards .8s; } .app-splash-loader { display: inline-flex; gap: .45rem; margin-top: 2.2rem; opacity: 0; animation: splash-fade .5s ease forwards 1.15s; } .app-splash-loader span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--app-primary); animation: splash-bounce 1s ease-in-out infinite; } .app-splash-loader span:nth-child(2) { animation-delay: .15s; } .app-splash-loader span:nth-child(3) { animation-delay: .3s; } @keyframes splash-pop { to { opacity: 1; transform: scale(1); } } @keyframes splash-rise { to { opacity: 1; transform: translateY(0); } } @keyframes splash-fade { to { opacity: 1; } } @keyframes splash-bounce { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-.35rem); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .app-splash-logo, .app-splash-title, .app-splash-tagline, .app-splash-loader { animation: none; opacity: 1; transform: none; } .app-splash-loader span { animation: none; } } /* ------------------------------------------------------------------- Top bar */ /* La barre n'est PAS fixe : le titre défile avec le contenu. Seule la cloche de notification reste visible (positionnée en fixed, voir .app-topbar-actions). */ .app-topbar { position: relative; display: flex; align-items: flex-start; gap: .75rem; width: 100%; max-width: 720px; margin-inline: auto; padding: max(.85rem, env(safe-area-inset-top, 0px)) 1rem .35rem; } .app-topbar-back { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .25rem; color: var(--app-primary); font-weight: 600; font-size: .9rem; text-decoration: none; } /* Réserve la place de la cloche fixe (en haut à droite). */ .app-topbar-titles { min-width: 0; flex: 1; padding-right: 3.25rem; } .app-topbar-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; } .app-topbar-sub { margin: .1rem 0 0; color: var(--app-muted); font-size: .85rem; } /* Cloche de notification : toujours visible (fixe en haut à droite), alignée sur le bord droit de la colonne de contenu (max-width 720px) sur grand écran. */ .app-topbar-actions { position: fixed; top: max(.85rem, env(safe-area-inset-top, 0px)); right: max(1rem, calc((100% - 720px) / 2 + 1rem)); z-index: 1035; display: flex; align-items: center; gap: .4rem; } /* Bouton rond neutre de la barre (cloche…). */ .app-iconbtn { position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--app-border); border-radius: 50%; background: var(--app-surface); color: var(--app-text); font-size: 1.05rem; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .app-iconbtn:hover { background: var(--app-surface-soft); } .app-iconbtn .badge { position: absolute; top: -.2rem; right: -.2rem; } /* ----------------------------------------------- Menu central flottant (nav) */ .app-bottom-nav { position: fixed; left: 50%; bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1030; display: flex; align-items: stretch; justify-content: space-between; gap: .25rem; width: min(28rem, calc(100% - 1.5rem)); padding: .5rem .6rem; border: 1px solid var(--app-border); border-radius: 1.6rem; background: var(--app-surface); box-shadow: var(--app-shadow-strong); } .app-nav-item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; padding: .2rem .1rem; border: 0; border-radius: .85rem; background: transparent; color: var(--app-muted); font-size: .68rem; font-weight: 600; text-decoration: none; text-align: center; } .app-nav-item i { font-size: 1.15rem; line-height: 1.5; } .app-nav-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } .app-nav-item.is-active { color: var(--app-primary); } .app-nav-item:not(.app-nav-item--primary):hover { color: var(--app-text); } /* Élément central mis en avant (« Vue active »). */ .app-nav-item--primary { color: var(--app-muted); } .app-nav-item--primary .app-nav-fab { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-top: -1.7rem; border-radius: 50%; background: var(--app-primary); color: #fff; font-size: 1.25rem; box-shadow: 0 .4rem 1rem rgba(var(--app-primary-rgb), .45); border: 3px solid var(--app-surface); } /* Variante « logo » du bouton central : pastille claire (app icon) contenant le logo de marque plutôt qu'une icône Font Awesome. */ .app-nav-item--primary .app-nav-fab--logo { background: #fff; padding: .4rem; } .app-nav-item--primary .app-nav-fab--logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .app-nav-item--primary.is-active { color: var(--app-primary); } /* Voile « journée terminée » : couvre la vue active en plein écran, sous la barre de navigation (z-index < 1030) et sous la barre supérieure, qui restent donc accessibles (le calendrier reste atteignable). */ .app-alldone { position: fixed; inset: 0; z-index: 1020; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--app-bg); } .app-alldone-inner { text-align: center; max-width: 22rem; } .app-alldone-icon { font-size: 3rem; color: var(--app-primary); margin-bottom: 1rem; } .app-alldone-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; } .app-alldone-text { color: var(--app-muted); font-size: 1.05rem; line-height: 1.4; } /* ----------------------------------------------------------------- Surfaces */ .public-body .card { border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); } .public-body .card-header { background: transparent; border-bottom-color: var(--app-border); font-weight: 700; } /* Carte « panneau » réutilisable. */ .app-card { border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); padding: 1rem 1.1rem; } .app-card + .app-card { margin-top: 1rem; } /* Consultation du calendrier d'un autre employé : mise en évidence de la carte (contour ambré + halo) pour signaler qu'on ne regarde pas son propre planning. */ .app-card.is-viewing-other { border-color: #d97706; box-shadow: 0 0 0 2px rgba(217, 119, 6, .28); } .calendar-viewing-note { color: #d97706; font-weight: 600; } /* Outils du planning : carte repliable (recherche d'un autre employé + ajout). overflow:visible (et non hidden) pour que le menu du champ de recherche (search-select, position:absolute sous le champ) puisse DÉBORDER de la carte au lieu d'être rogné — sans recourir à un position:fixed en JS (peu fiable sur mobile avec le clavier). */ .planning-tools { overflow: visible; } .planning-tools-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .7rem .95rem; background: transparent; border: 0; color: inherit; font-weight: 600; font-size: .95rem; } .planning-tools-label { display: inline-flex; align-items: center; gap: .55rem; } .planning-tools-label i { color: var(--bs-secondary-color, #6c757d); } .planning-tools-caret { color: var(--bs-secondary-color, #6c757d); transition: transform .2s ease; } .planning-tools-toggle[aria-expanded="true"] .planning-tools-caret { transform: rotate(180deg); } .planning-tools-body { padding: 0 .95rem .95rem; } /* Champ de recherche « voir un autre employé » : l'icône et le champ forment un seul bloc arrondi, avec un anneau de focus net autour de l'ensemble. */ .calendar-employe-search { border: 1px solid var(--app-border); border-radius: .5rem; background: var(--app-surface); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .calendar-employe-search .input-group-text, .calendar-employe-search .form-control { border: 0; background: transparent; } .calendar-employe-search .input-group-text { color: var(--bs-secondary-color, #6c757d); padding-right: .35rem; } .calendar-employe-search .form-control { padding-left: .35rem; } .calendar-employe-search .form-control:focus { box-shadow: none; } .calendar-employe-search:focus-within { border-color: var(--bs-primary, #2563eb); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .25); } .app-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; } .app-card-head .app-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; } /* Libellé de section (« Réglages », « Application », « Canaux »…). */ .app-section-label { margin: 1.5rem .25rem .5rem; color: var(--app-muted); font-size: .8rem; font-weight: 600; letter-spacing: .02em; } /* Pastille d'icône ronde (bleu doux). */ .app-icon-badge { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1rem; } .app-icon-badge.is-lg { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; } /* Icône PDF « classique » (rouge, hors pastille) pour les documents. */ .doc-lead-pdf { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; color: var(--app-danger); font-size: 1.7rem; } /* Liste de réglages cliquables (hub Compte). */ .app-list { display: flex; flex-direction: column; } .app-list-row { display: flex; align-items: center; gap: .85rem; padding: .85rem .25rem; color: var(--app-text); text-decoration: none; border: 0; background: transparent; text-align: left; width: 100%; } .app-list-row + .app-list-row { border-top: 1px solid var(--app-border); } .app-list-row .app-list-body { min-width: 0; flex: 1; } .app-list-row .app-list-title { display: block; font-weight: 600; } .app-list-row .app-list-sub { display: block; color: var(--app-muted); font-size: .82rem; overflow-wrap: anywhere; } .app-list-row .app-list-chevron { color: var(--app-muted); font-size: .85rem; } .app-list-row:hover { color: var(--app-text); } .app-list-row:hover .app-list-title { color: var(--app-primary); } /* ---- Compte / Heures ------------------------------------------------- */ /* Carte statistique (heures nettes / pauses) : pastille + grand chiffre. */ .hours-stat { display: flex; flex-direction: row; align-items: center; gap: .65rem; height: 100%; } .hours-stat .app-icon-badge { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .hours-stat-body { min-width: 0; } .hours-stat-value { font-size: 1.35rem; font-weight: 800; line-height: 1.15; } .hours-stat-label { color: var(--app-muted); font-size: .78rem; font-weight: 500; } /* Ligne « mois » : barre de proportion (heures nettes rel. au mois le plus chargé) sous le libellé, valeur + nb d'interventions à droite. */ .hours-bar { display: block; height: 4px; border-radius: 999px; background: var(--app-border); margin-top: .45rem; overflow: hidden; } .hours-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--app-primary); } .hours-month-value { display: block; font-weight: 700; color: var(--app-primary); white-space: nowrap; } .hours-month-count { display: block; color: var(--app-muted); font-size: .78rem; white-space: nowrap; } /* Mois en cours : fond doux + libellé bleu. Mois sans heures : atténué. */ .app-list-row.is-current { background: var(--app-primary-soft); border-radius: var(--app-radius-sm); padding-left: .55rem; padding-right: .55rem; } .app-list-row.is-current + .app-list-row, .app-list-row.is-current { border-top-color: transparent; } .app-list-row.is-empty { opacity: .6; } .app-list-row.is-empty .app-list-title { color: var(--app-muted); } /* Ligne d'information étiquetée (icône + libellé + valeur). */ .app-info { display: flex; flex-direction: column; } .app-info-row { display: flex; align-items: flex-start; gap: .85rem; padding: .8rem 0; } .app-info-row + .app-info-row { border-top: 1px solid var(--app-border); } .app-info-row > i, .app-info-row > .app-icon-badge { margin-top: .1rem; } .app-info-body { min-width: 0; flex: 1; } .app-info-label { display: block; color: var(--app-muted); font-size: .8rem; } .app-info-value { display: block; font-weight: 600; overflow-wrap: anywhere; } /* Puce d'équipe / valeur compacte. */ .app-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface-soft); font-size: .85rem; font-weight: 500; } /* Chip d'état coloré (statut, progression). */ .app-status { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 600; } .app-status--neutral { background: var(--app-surface-soft); color: var(--app-muted); border: 1px solid var(--app-border); } .app-status--primary { background: var(--app-primary-soft); color: var(--app-primary); } .app-status--success { background: rgba(34, 197, 94, .16); color: var(--app-success); } .app-status--danger { background: rgba(239, 68, 68, .16); color: var(--app-danger); } .app-status--warning { background: rgba(245, 158, 11, .16); color: var(--app-warning); } /* Notice multi-lignes (pavé d'info) : contrairement à .app-status (pastille arrondie), gère proprement le passage à la ligne — icône alignée en haut, texte à côté, coins doux. */ .app-notice { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem .75rem; border-radius: var(--app-radius-sm); font-size: .88rem; line-height: 1.35; } .app-notice > i { margin-top: .12rem; flex-shrink: 0; } .app-notice--primary { background: var(--app-primary-soft); color: var(--app-primary); } .app-notice--neutral { background: var(--app-surface-soft); color: var(--app-muted); border: 1px solid var(--app-border); } /* Avatar à initiales (profil). */ .app-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1.25rem; background: linear-gradient(135deg, #2563eb, #06b6d4); } /* --------------------------------------------------------------- Boutons */ .public-body .btn { --bs-btn-border-radius: .7rem; font-weight: 600; } .public-body .btn-lg { --bs-btn-border-radius: .85rem; } .public-body .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; } .public-body .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-bg: var(--app-primary); --bs-btn-active-border-color: var(--app-primary); } .public-body .btn-outline-secondary { --bs-btn-color: var(--app-text); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-surface-soft); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-border-color: var(--app-border); --bs-btn-active-bg: var(--app-surface-soft); --bs-btn-active-color: var(--app-text); } .public-body .btn-outline-danger { --bs-btn-color: var(--app-danger); --bs-btn-border-color: var(--app-danger); --bs-btn-hover-bg: var(--app-danger); --bs-btn-hover-border-color: var(--app-danger); } /* Champs de formulaire alignés sur la palette. */ .public-body .form-control, .public-body .form-select { background-color: var(--app-input); border-color: var(--app-border); color: var(--app-text); } .public-body .form-control:focus, .public-body .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .25); } .public-body .form-switch .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .public-body .form-check-input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .25); } /* Champ avec icône en tête (input-group) aligné sur la palette. */ .public-body .input-group-text { background: var(--app-input); border-color: var(--app-border); color: var(--app-muted); } /* Séparateur « ou … » entre deux blocs. */ .app-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--app-muted); font-size: .85rem; } .app-divider::before, .app-divider::after { content: ""; flex: 1; height: 1px; background: var(--app-border); } /* Page d'authentification (invité) : carte centrée sur fond foncé. */ .public-auth { background: var(--app-bg); } .public-auth .app-card { box-shadow: var(--app-shadow-strong); } /* Crédit « Site by Monkeys of Switzerland » : logo noir, éclairci en thème sombre. */ .mink-credit img { max-height: 18px; width: auto; display: block; } /* Connexion : la carte est centrée verticalement ; marque/crédit dans deux zones d'égale hauteur de part et d'autre. */ .login-layout { display: flex; flex-direction: column; min-height: calc(100dvh - 2rem); } .login-top, .login-bottom { flex: 1 1 0; display: flex; justify-content: center; } .login-top { align-items: flex-end; padding-bottom: 1.5rem; } .login-bottom { align-items: flex-start; padding-top: 1.5rem; } /* ---------------------------------------------- Dropzone (rapport) */ .media-dz.dropzone { background: transparent; border: 2px dashed var(--app-border); border-radius: var(--app-radius-sm); min-height: 140px; cursor: pointer; } .media-dz.dropzone:hover, .media-dz.dropzone.dz-drag-hover { border-color: var(--app-primary); } .media-dz.dropzone .dz-message { color: var(--app-muted); margin: 2.25rem 0; } .media-dz.dropzone .dz-preview .dz-image { border-radius: var(--app-radius-sm); } [data-report].dz-active .fallback, [data-report].dz-active [data-fallback-only] { display: none; } /* ----------------------------------------------------- Calendrier (Planning) */ #week-calendar { height: 72vh; } /* La hauteur vient d'une classe (pas d'un style inline) : la librairie ne la détecte pas comme « contrainte » et plafonne la vue semaine/jour à 650px. On lève le plafond pour occuper toute la hauteur (comme sur l'admin). */ #week-calendar .uc-week-view, #week-calendar .uc-day-view { max-height: none !important; } /* Décalage en haut pour ne pas rogner le premier libellé d'heure (05). */ #week-calendar .uc-time-gutter .uc-hour-cell:first-child .uc-hour-label { transform: translateY(0); } /* Sur mobile, la lib masque les libellés d'heures impaires (nth-child odd) ; la 1re cellule (05) étant impaire, on la force visible pour voir le début de journée. */ #week-calendar .uc-hour-cell:first-child .uc-hour-label { visibility: visible !important; } /* Vue liste : la colonne heure a un min-width de 80px trop large pour « 14 h », d'où un grand vide avant le titre. On la réduit au contenu. */ #week-calendar .uc-list-event-time { min-width: 2.75rem; } /* Barre d'outils du calendrier employé, réagencée : ligne 1 → [Aujourd'hui] [‹] date [›] (flèches autour de la date) ligne 2 → boutons de vue (Mois/Semaine/Jour/Liste) pleine largeur. On aplatit les 3 sections (display:contents) pour ré-ordonner leurs boutons. */ #week-calendar .uc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; row-gap: 8px; } #week-calendar .uc-toolbar-left, #week-calendar .uc-toolbar-center, #week-calendar .uc-toolbar-right { display: contents; } #week-calendar .uc-today-btn { display: inline-flex !important; order: 1; } #week-calendar .uc-nav-btn[data-action="prev"] { order: 2; } #week-calendar .uc-toolbar-center, #week-calendar .uc-title { order: 3; } #week-calendar .uc-nav-btn[data-action="next"] { order: 4; } /* Vues : barre segmentée pleine largeur sur sa propre ligne (au lieu du menu ⊞). */ #week-calendar .uc-view-dropdown { display: none !important; } #week-calendar .uc-view-switcher { order: 5; display: flex !important; width: 100%; } #week-calendar .uc-view-switcher .uc-view-btn { flex: 1 1 0; } /* Utilitaires flex manquants (utilisés par les en-têtes de cartes) : sans eux, la colonne titre ne grandit pas et le badge d'état n'est pas poussé à droite. */ .flex-1 { flex: 1 1 0%; min-width: 0; } .min-w-0 { min-width: 0; } /* Sessions : sur mobile, « Déconnecter les autres appareils » passe sur sa propre ligne pleine largeur, sous le titre et au-dessus de la liste. */ @media (max-width: 640px) { .sessions-head { flex-wrap: wrap; } .sessions-head > form { flex-basis: 100%; margin-top: .5rem; } .sessions-head > form .btn { width: 100%; } } .uc-list-event-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } /* --------------------------------------------- Notifications (cloche + feed) */ .notif-menu [data-notification-list] .fw-semibold, .notif-menu [data-notification-list] .small { white-space: normal; overflow-wrap: anywhere; } .notif-preview-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); color: inherit; text-decoration: none; cursor: pointer; transition: background-color .15s ease; } a.notif-preview-item:hover, a.notif-preview-item:focus { background: var(--app-surface-soft); color: inherit; } .notif-preview-item:last-child { border-bottom: 0; } .notif-preview-item.is-unread { background: rgba(var(--app-primary-rgb), .08); } a.notif-preview-item.is-unread:hover, a.notif-preview-item.is-unread:focus { background: rgba(var(--app-primary-rgb), .14); } .notif-preview-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--app-primary); background: var(--app-surface-soft); } .notif-preview-copy strong { display: block; font-size: .9rem; overflow-wrap: anywhere; } .notif-preview-copy p { display: -webkit-box; margin: .25rem 0; overflow: hidden; color: var(--app-muted); font-size: .82rem; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-preview-copy small { display: block; color: var(--app-muted); font-size: .72rem; } @media (max-width: 575.98px) { .notif-menu.dropdown-menu { position: fixed !important; inset: auto !important; top: 4.5rem !important; left: 50% !important; transform: translateX(-50%) !important; width: 92vw; max-width: 92vw; } } /* Thème sombre du calendrier : SimpleCalendarJs lit des variables --cal-*. */ [data-bs-theme="dark"] { --cal-bg: #1f2937; --cal-bg-secondary: #111827; --cal-text: #e5e7eb; --cal-text-subtle: #9ca3af; --cal-text-muted: #6b7280; --cal-border: #374151; --cal-border-strong: #4b5563; --cal-primary: #3b82f6; --cal-primary-dark: #2563eb; --cal-primary-light: #1e3a8a; --cal-today-bg: #1e3a8a; --cal-hover: #273244; --cal-hover-strong: #374151; --cal-selected-bg: #1d4ed8; --cal-toolbar-bg: #1f2937; --cal-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --cal-tooltip-bg: #f9fafb; --cal-tooltip-text: #111827; --cal-tooltip-border: #d1d5db; --cal-loading-bg: rgba(17, 24, 39, .7); } /* ------------------------------------------------------------------ Steppers Champs « verrouillés » du modal de clôture d'intervention : la valeur est en lecture seule, pilotée par les boutons +/−. Heure de début / de fin : deux colonnes (heure, minute) avec + au-dessus et − en dessous. Temps de pause : boutons −/+ de part et d'autre du nombre. */ .report-stepper-group { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem 0; border-bottom: 1px solid var(--app-border); } .report-stepper-group:last-of-type { border-bottom: 0; } .report-stepper-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--app-muted); } .report-stepper { display: flex; align-items: center; justify-content: center; gap: .5rem; } .report-stepper-col { display: flex; flex-direction: column; align-items: center; gap: .35rem; } .report-stepper-value { min-width: 2.6rem; text-align: center; font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--app-text); padding: .2rem .3rem; } .report-stepper-sep { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--app-muted); } .report-stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); background: var(--app-surface-soft); color: var(--app-primary); font-size: 1rem; cursor: pointer; transition: background .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; /* Supprime le délai de tap 300 ms / le zoom double-tap (source de double déclenchement sur mobile). */ touch-action: manipulation; user-select: none; } .report-stepper-btn:hover { background: var(--app-primary-soft); border-color: var(--app-primary); } .report-stepper-btn:active { transform: translateY(1px); } .report-stepper--pause { gap: 1rem; } .report-stepper--pause .report-stepper-value { min-width: 5.5rem; font-size: 1.5rem; } /* Le modal d'ajout d'intervention réutilise les steppers du modal de clôture (.report-stepper*) : colonnes à boutons chevron ▲/▼, aspect identique. */ /* Durée calculée (pause déduite), en bas du modal de clôture. */ .report-net-group { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1rem 0; border-top: 2px solid var(--app-border); } .report-net-value { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--app-primary); } /* ------------------------------------------------------------------ Searchbar */ /* Champ de recherche à menu déroulant (remplace les natifs, incohérents entre périphériques). Le menu s'affiche sous le champ, façon « select ». */ .search-select { position: relative; } .search-select-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1085; max-height: 15rem; overflow-y: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); padding: .25rem; } .search-select-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: .5rem .625rem; border-radius: .375rem; font-size: .95rem; line-height: 1.2; cursor: pointer; } .search-select-item:hover, .search-select-item.active { background: var(--app-primary, #2563eb); color: #fff; } [data-bs-theme="dark"] .search-select-menu { background: #1f2937; border-color: #374151; }