/* ========================================================= DASHBOARD-PRO.CSS — espace professionnel Chargé uniquement par le gabarit tpl-pro ========================================================= */ /* Sidebar TOUJOURS statique, identique quelle que soit la section affichée (Tableau de bord, Opportunités, Agenda, Messages, Factures…) — pas de comportement qui change selon la page. Le shell est calé sur la hauteur de l'écran en permanence ; c'est .pro-main (à droite) qui défile en interne si son contenu dépasse, jamais la sidebar ni la page entière. height:100vh (pas calc(100vh - 64px)) : le tableau de bord pro n'a pas de .gnav (bandeau public 64px) au-dessus de lui — chaque template de page est injecté seul dans #app, sans en-tête persistant (voir index.html). Le -64px était un reliquat sans élément correspondant à soustraire : il laissait une bande blanche vide de 64px tout en bas de l'écran, sous le graphique du tableau de bord — c'est le "réajustement de la page" signalé par capture d'écran. Aligné sur .dash-shell (espace client), qui utilise déjà 100vh sans soustraction. */ /* 100dvh plutôt que 100vh : sur mobile, 100vh compte la barre d'adresse même quand elle est repliée, ce qui pousse le bas du menu hors de l'écran. Le repli 100vh reste déclaré juste avant pour les navigateurs anciens. */ .pro-dash-shell { display: grid; grid-template-columns: 230px 1fr; height: 100vh; height: 100dvh; overflow: hidden; } /* overflow:hidden sur .pro-sidebar elle-même (PAS overflow-y:auto) : un essai précédent avait mis overflow-y:auto directement ici pour que le bouton "Se déconnecter" reste atteignable malgré la section "Gestion" qui allonge la liste — mais ça provoquait un bug de rendu Chromium/Edge (fond navy qui ne se peint plus du tout, sidebar totalement blanche/vide) sur overflow:auto + contenu rempli par JS après le premier paint (proLoadProfile/proLoadSettings), signalé par captures d'écran + confirmé en navigation privée (donc pas un cache ni une extension). Le scroll est maintenant isolé sur .prs-nav-scroll (juste la liste de nav), PAS sur le conteneur qui porte le fond navy : logo/profil et bouton déconnexion restent fixes en haut/bas, seule la liste du milieu défile si elle dépasse. */ /* ── TROIS ZONES, UNE SEULE QUI PEUT BOUGER ──────────────────────────── profil en haut · navigation au centre · déconnexion en bas. La colonne est un flex vertical : seules les zones du haut et du bas ont une hauteur naturelle, le centre absorbe le reste. « Se déconnecter » reste donc collé au bas de la fenêtre quelle qu'en soit la hauteur. Les espacements ont été resserrés (1,25rem → 0,875rem, 9px → 7px) pour que les douze entrées tiennent SANS défilement sur les hauteurs courantes : 1080, 900 et 768 pixels. En dessous, un défilement reste possible — mais sa barre est VISIBLE (voir plus bas). Masquer un menu qui déborde revient à supprimer des rubriques sans le dire. */ #pg-pro .pro-sidebar, #pg-admin .pro-sidebar { background: var(--navy); display: flex; flex-direction: column; overflow: hidden; } .prs-nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 2px; } /* Barre fine mais présente : elle n'apparaît que si le menu déborde vraiment, et alors elle se voit. */ .prs-nav-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; } .prs-nav-scroll::-webkit-scrollbar { width: 8px; } .prs-nav-scroll::-webkit-scrollbar-track { background: transparent; } .prs-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 100px; } .prs-nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); } .prs-logo { flex: 0 0 auto; padding: .875rem 1.25rem; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 900; color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); } .prs-logo span { color: var(--teal); } .prs-logo, .prs-logo:hover, .prs-logo:visited { text-decoration: none; } .prs-logo-badge { font-size: 13px; background: var(--orange); color: #fff; border-radius: 6px; padding: 1px 6px; margin-left: 4px; } .prs-logo .prs-logo-badge { color: #fff; } .prs-user { flex: 0 0 auto; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); } .prs-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; margin-bottom: 5px; border: 2px solid rgba(255,255,255,.1); } .prs-av img { width: 100%; height: 100%; object-fit: cover; } .prs-name { font-size: 15px; font-weight: 700; color: #fff; } /* Zone du bas : hauteur naturelle, jamais comprimée par la navigation. */ .prs-pied { flex: 0 0 auto; padding: .625rem 1.25rem; border-top: 1px solid rgba(255,255,255,.06); } .prs-job { font-size: 13px; color: rgba(255,255,255,.35); margin-bottom: 4px; } .prs-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--teal); } .prs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 1.5s infinite; } .prs-sec { padding: .375rem 1rem .2rem; font-size: 13px; color: rgba(255,255,255,.2); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } /* 5 px de rembourrage vertical : douze entrées, trois intertitres, le profil et la déconnexion tiennent alors dans les ~658 px utiles d'un écran 1366×768, SANS toucher à la taille du texte (13 px, inchangée). Une ligne fait 5 + 18 + 5 = 28 px : confortable à la souris. ⚠️ Au doigt, 28 px serait trop petit : la règle mobile plus bas rend aux entrées leur hauteur tactile. La densité sert l'écran, pas le pouce. */ .prs-item { display: flex; align-items: center; gap: 10px; padding: 5px 1.25rem; font-size: 15px; color: rgba(255,255,255,.45); cursor: pointer; border-left: 2px solid transparent; transition: all .15s; } .prs-item:hover { background: rgba(255,255,255,.05); color: #fff; } .prs-item.on { color: var(--teal); border-left-color: var(--teal); background: rgba(78,205,196,.08); } .prs-badge { margin-left: auto; background: var(--orange); color: #fff; font-size: 13px; padding: 2px 6px; border-radius: 100px; } /* Bouton ☰ + fond assombri du tiroir mobile — cachés en desktop, activés uniquement sous 768px (voir media query plus bas). Avant cet ajout, .pro-sidebar passait juste à display:none sous 768px SANS aucun moyen de rouvrir le menu : la navigation devenait totalement inaccessible (signalé par capture d'écran + inspection DevTools par l'utilisateur). */ .pro-mobile-toggle { display: none; background: #f7f8fa; color: var(--navy); border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 9px 12px; font-size: 16px; cursor: pointer; font-family: inherit; margin-right: 10px; } .pro-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,15,35,.5); z-index: 890; } .pro-mobile-backdrop.show { display: block; } .pro-main { background: var(--gray-50); display: flex; flex-direction: column; overflow-y: auto; min-height: 0; } /* Le style de la scrollbar de #proConvMessages est centralisé dans base.css (bloc "SCROLLBAR PREMIUM") pour éviter les doublons — ne pas réintroduire de règles ::-webkit-scrollbar* ici. */ .pro-topbar { background: #fff; border-bottom: 1px solid var(--gray-100); padding: .875rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } /* min-height:0 : .pro-content est un flex item de .pro-main (colonne) ; sans ça, sa taille minimale automatique se base sur son contenu, ce qui empêchait #pro-panel-messages (height:100%) de se caler exactement sur l'espace réellement disponible et faisait déborder .pro-main puis la page entière (barre de défilement parasite signalée par l'utilisateur sur "Messages" côté pro). */ .pro-content { padding: 1.5rem; flex: 1; min-height: 0; } .pro-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.25rem; } .pkpi { background: #fff; border: none; border-radius: 14px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); border-left: 3px solid transparent; transition: transform .15s, box-shadow .15s; } .pkpi:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.09); } /* Accents distincts par carte KPI — reprend la palette existante du site (teal/orange/navy/amber) plutôt qu'une seule couleur pour les 4 cartes. */ .pkpi.accent-teal { border-left-color: var(--teal); } .pkpi.accent-orange { border-left-color: var(--orange); } .pkpi.accent-navy { border-left-color: var(--navy); } .pkpi.accent-amber { border-left-color: #f59e0b; } .pkpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pkpi-icon { font-size: 15px; line-height: 1; } .pkpi-label { font-size: 14px; color: var(--gray-400); margin-bottom: 0; } .pkpi-val { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 900; } .pkpi-delta { font-size: 13px; margin-top: 4px; } .pro-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.25rem; } .pro-panel { background: #fff; border: none; border-radius: 16px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); } .pp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } /* .opp-card est utilisée à 2 endroits : (1) la liste complète "Demandes de devis reçues" (Opportunités, proLoadDevisRecus — carte empilée verticalement : titre, statut, localisation, description, actions) et (2) le mini-aperçu "Demandes de devis récentes" du tableau de bord (proOppPreview — avatar + contenu côte à côte). Ces deux mises en page sont incompatibles ; le mode avatar/côte-à-côte est donc isolé dans le modificateur .opp-card-mini pour ne pas casser la liste complète (bug remonté par l'utilisateur : toutes les lignes de la liste complète s'écrasaient sur une seule ligne car .opp-card était en display:flex partout). */ .opp-card { border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; cursor: pointer; transition: all .15s; } .opp-card:hover { border-color: #6366f1; background: #f2f2fe; } .opp-card.opp-card-mini { display: flex; gap: 10px; } .opp-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--navy) 0%, #2d2d5e 100%); color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .opp-body { flex: 1; min-width: 0; } .opp-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .opp-title { font-size: 14px; font-weight: 700; } .opp-loc { font-size: 13px; color: var(--gray-400); margin-top: 2px; } .opp-desc { font-size: 15px; color: var(--gray-600); line-height: 1.5; margin-bottom: 8px; } /* Uniquement sur le mini-aperçu du tableau de bord (place limitée) — la liste complète des Opportunités affiche la description en entier. */ .opp-desc.clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .opp-foot { display: flex; align-items: center; gap: 8px; } .opp-budget { font-size: 15px; font-weight: 700; color: var(--teal); } .opp-date { font-size: 13px; color: var(--gray-400); margin-left: auto; } .opp-reply { background: var(--teal); color: #fff; border: none; border-radius: 7px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; } /* Barre de défilement de la liste "Demandes de devis reçues" : la hauteur est bornée ici, mais le STYLE de la scrollbar (couleurs, épaisseur, fondu au survol) vit uniquement dans base.css (bloc "SCROLLBAR PREMIUM") — ne pas dupliquer de règles ::-webkit-scrollbar* ici, c'est exactement ce qui avait causé un bug silencieux par le passé (règle fantôme qui écrasait le fix). */ #proOppList { max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 4px; } /* Listes bornées (défilement interne) — "Mes avis" pro, même logique que #proOppList : reste consultable sans allonger toute la page. */ #proAvisList { max-height: 60vh; overflow-y: auto; } .agenda-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--gray-50); } .agenda-row:last-child { border: none; } .ag-date { background: #dc2626; color: #fff; border-radius: 9px; padding: 6px 10px; text-align: center; min-width: 46px; } .ag-day-num { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 900; line-height: 1; } .ag-month { font-size: 14px; color: rgba(255,255,255,.7); text-transform: uppercase; } .ag-title { font-size: 15px; font-weight: 700; } .ag-client { font-size: 14px; color: var(--gray-400); } .ag-time { font-size: 14px; color: #dc2626; font-weight: 700; margin-top: 2px; } /* Calendrier mensuel "Jours de fermeture exceptionnels" (vue sur l'année, navigation mois par mois, clic direct sur une date) */ .ag-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ag-cal-title { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 900; color: var(--navy); text-transform: capitalize; } .ag-cal-nav-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--navy); font-family: inherit; line-height: 1; transition: all .12s; } .ag-cal-nav-btn:hover { background: var(--gray-50); border-color: var(--orange); color: var(--orange); } .ag-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ag-cal-dows { margin-bottom: 4px; } .ag-cal-dow { font-size: 13px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; text-align: center; padding: 4px 0; } .ag-cal-day { position: relative; aspect-ratio: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; border: 1.5px solid var(--gray-100); transition: all .12s; } .ag-cal-day:hover { background: var(--gray-50); border-color: var(--orange); } .ag-cal-day.ag-cal-empty { border: none; cursor: default; } .ag-cal-day.ag-cal-empty:hover { background: none; } .ag-cal-day.ag-cal-past { color: var(--gray-300, #d1d5db); cursor: default; } .ag-cal-day.ag-cal-past:hover { background: none; border-color: var(--gray-100); } .ag-cal-day.ag-cal-today { border-color: var(--orange); border-width: 2px; } .ag-cal-day.ag-cal-selected { background: var(--navy); color: #fff; border-color: var(--navy); } .ag-cal-day.ag-cal-closed { background: #fee2e2; color: #dc2626; border-color: #fca5a5; } .ag-cal-day.ag-cal-custom { background: #fef9c3; color: #a16207; border-color: #fde047; } .ag-cal-dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); } .ag-cal-day.ag-cal-selected .ag-cal-dot { background: #fff; } .ag-cal-legend-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } .ag-cal-legend-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-right: 7px; vertical-align: middle; } @media (max-width: 640px) { .ag-cal-day { min-height: 36px; font-size: 13px; } } /* Place "Mes horaires habituels" et "Jours de fermeture exceptionnels" (calendrier) côte à côte au lieu d'empiler le calendrier tout en bas de la page — utilise l'espace resté vide à droite des horaires, qui sont nettement plus courts (7 lignes) que le calendrier + sa légende + son formulaire. align-items:start évite que le panneau des horaires (plus court) soit étiré à la hauteur du panneau calendrier (plus grand). */ .ag-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 1.25rem; } @media (max-width: 900px) { .ag-2col { grid-template-columns: 1fr; } } .rev-bars { display: flex; flex-direction: column; gap: 8px; } .revbar-row { display: flex; align-items: center; gap: 8px; } .revbar-month { font-size: 13px; color: var(--gray-400); width: 28px; } .revbar-track { flex: 1; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; } .revbar-fill { height: 100%; background: var(--teal); border-radius: 4px; } .revbar-val { font-size: 13px; font-weight: 700; width: 60px; text-align: right; } .pro-panel-section { display: none; } @media (max-width: 768px) { .pro-dash-shell { grid-template-columns: 1fr; } /* Tiroir mobile : la sidebar reste dans le DOM (plus de display:none) mais glisse hors écran par défaut (transform, pas de saut brutal) ; .pro-mobile-toggle (☰ dans .pro-topbar) et proToggleMobileSidebar() (js/dashboard-pro.js) la font apparaître en overlay par-dessus le contenu, avec un fond assombri cliquable pour la refermer. */ .pro-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 230px; z-index: 900; transform: translateX(-100%); transition: transform .25s ease; } .pro-sidebar.mobile-open { transform: translateX(0); } /* Le tiroir mobile n'a AUCUNE contrainte de hauteur : on y restaure des zones tactiles de 44 px, conformément à la règle du projet. La compacité du bureau ne doit pas se payer au doigt. */ .prs-item { padding: 12px 1.25rem; } .prs-sec { padding: .75rem 1rem .35rem; } .pro-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; } .pro-kpis { grid-template-columns: repeat(2,1fr); } .pro-2col { grid-template-columns: 1fr; } } /* ── Choix de l'image de couverture (Mon profil public) ── Vignettes cliquables sur toute leur surface : un