/* ========================================================= DASHBOARD-CLIENT.CSS — espace client (style Planity) Chargé uniquement par le gabarit tpl-client ========================================================= */ /* Sidebar TOUJOURS statique, identique quelle que soit la section affichée (Tableau de bord, Mes devis, Messages…) — pas de comportement qui change selon la page. Le shell est calé sur la hauteur de l'écran en permanence ; c'est .dash-main (à droite) qui défile en interne si son contenu dépasse, jamais la sidebar ni la page entière. */ .dash-shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden; background: #f7f8fa; } .dash-sidebar { background: #fff; border-right: 1px solid #ebebf0; display: flex; flex-direction: column; width: 240px; position: sticky; top: 0; height: 100vh; overflow: hidden; } /* Scroll isolé sur .ds-nav-scroll (juste la liste de nav), pas sur .dash-sidebar elle-même — même correctif que .prs-nav-scroll dans css/dashboard-pro.css (bug de peinture Chromium/Edge sur overflow:auto + contenu rempli par JS après le premier paint ; invisible ici car le fond de .dash-sidebar est blanc, mais le même risque existe). */ .ds-nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Hauteur fixée en dur (73px, box-sizing:border-box) + centrage flex : avant, la hauteur dépendait des métriques de police (padding + line-height du texte "MonArtisan.fr") et ne tombait jamais exactement sur la même valeur que .dash-topbar (qui a 2 lignes de texte, donc un contenu plus haut) — les deux traits border-bottom (fin de logo / fin de topbar) n'étaient donc jamais alignés. Fixer une hauteur identique aux deux éléments est la seule façon fiable de garantir l'alignement, quel que soit le rendu réel des polices. */ .ds-logo { height: 73px; box-sizing: border-box; display: flex; align-items: center; padding: 0 1.5rem; font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 900; color: var(--navy); border-bottom: 1px solid #f0f0f5; letter-spacing: -.01em; } .ds-logo span { color: var(--orange); } .ds-logo, .ds-logo:hover, .ds-logo:visited { text-decoration: none; } .ds-user { padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f5; display: flex; align-items: center; gap: 12px; } .ds-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; } .ds-av img { width: 100%; height: 100%; object-fit: cover; } .ds-name { font-size: 15px; font-weight: 700; color: var(--navy); } .ds-email { font-size: 13px; color: #9ca3af; margin-top: 1px; } .ds-sec { padding: 8px 1.5rem 4px; font-size: 13px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; } .ds-item { display: flex; align-items: center; gap: 10px; padding: 10px 1.5rem; font-size: 15px; font-weight: 500; color: #6b7280; cursor: pointer; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; margin: 1px 8px 1px 0; transition: all .15s; } .ds-item:hover { background: #f7f8fa; color: var(--navy); border-left-color: #e5e7eb; } .ds-item.on { color: var(--orange); border-left-color: var(--orange); background: #fff7f4; font-weight: 700; } .ds-badge { background: var(--orange); color: #fff; border-radius: 100px; font-size: 13px; font-weight: 800; padding: 2px 7px; margin-left: auto; } .ds-logout { margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid #f0f0f5; } .ds-logout-btn { width: 100%; background: none; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 9px; font-size: 14px; font-weight: 600; color: #6b7280; cursor: pointer; font-family: inherit; transition: all .15s; } .ds-logout-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; } /* Bouton ☰ + fond assombri du tiroir mobile — cachés en desktop, activés sous 768px (même bug/même correctif que .pro-sidebar : display:none sans repli laissait la navigation totalement inaccessible). */ .dash-mobile-toggle { display: none; background: #f7f8fa; color: var(--navy); border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 9px 12px; font-size: 16px; cursor: pointer; font-family: inherit; margin-right: 10px; } .dash-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,15,35,.5); z-index: 890; } .dash-mobile-backdrop.show { display: block; } .dash-main { display: flex; flex-direction: column; background: #f7f8fa; flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; } /* position:sticky : .dash-topbar est un enfant de .dash-main, qui porte overflow-y:auto. Sans cela le bandeau defile avec le contenu et la recherche sort de l'ecran des qu'on descend un peu. z-index 20 : au-dessus du contenu des panneaux, mais tres en dessous du voile du menu mobile (890), de la barre laterale (900) et des fenetres modales (2000+). Aucun risque de recouvrement. */ .dash-topbar { height: 73px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #ebebf0; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20; flex-shrink: 0; gap: 1rem; } .dt-title { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 900; color: var(--navy); } .dt-btn { border: none; border-radius: 12px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; transition: all .15s; box-shadow: 0 4px 14px rgba(255,107,53,.3); white-space: nowrap; } /* Les trois boutons clairs du bandeau. Ces valeurs etaient repetees en style="" sur chaque bouton ; les regrouper ici permet d'avoir un survol et un focus coherents, qui manquaient. L'apparence est identique. */ .dt-btn-clair { background: #f7f8fa; color: var(--navy); border: 1.5px solid #e5e7eb; box-shadow: none; } .dt-btn-clair:hover { background: #fff; border-color: var(--orange); color: var(--orange); } .dt-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .dt-btn-icone { position: relative; padding: 9px 12px; } .dt-btn-zone { align-items: center; } .dash-content { padding: 2rem; flex: 1; overflow-y: auto; background: #f7f8fa; } .welcome-banner { background: linear-gradient(135deg, var(--navy) 0%, #2d2d5e 60%, #1a1a4e 100%); border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(15,15,35,.15); } /* pointer-events:none est essentiel ici : ces deux pseudo-éléments sont position:absolute et couvrent une zone qui chevauche le bouton ".wb-cta" (right:-30px/top:-30px, 180x180 — juste sous "Voir mes devis"). Un élément positionné passe toujours au-dessus d'un élément en flux normal à la peinture, même sans z-index explicite : sans pointer-events:none, ce cercle décoratif (transparent en apparence, mais bien présent comme boîte cliquable) interceptait les clics destinés au bouton — d'où le bouton visible mais impossible à cliquer, avec un rendu orange "bizarre" là où le dégradé du cercle se superposait au bouton orange. */ .welcome-banner::before { content: ''; position: absolute; right: -30px; top: -30px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 70%); pointer-events: none; } .welcome-banner::after { content: ''; position: absolute; left: -10px; bottom: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(13,148,136,.1) 0%, transparent 70%); pointer-events: none; } .wb-hi { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 900; color: #fff; margin-bottom: 4px; } .wb-sub { font-size: 15px; color: rgba(255,255,255,.4); } .wb-cta { background: var(--orange); color: #fff; border: none; border-radius: 9px; padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.25rem; } .kpi-card { background: #fff; border: none; border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.09); } .kpi-label { font-size: 14px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .kpi-value { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 4px; } .kpi-sub { font-size: 13px; color: #9ca3af; margin-top: 2px; } .dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.25rem; } .dash-panel { background: #fff; border: none; border-radius: 16px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); } .dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .dp-title { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 900; color: var(--navy); } .dp-link { font-size: 14px; font-weight: 700; color: var(--orange); cursor: pointer; transition: opacity .15s; } .devis-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f7f8fa; transition: background .12s; cursor: pointer; } .devis-row:last-child { border: none; } .devis-row:hover { background: #fafafa; margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; border-radius: 10px; } .dr-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .dr-title { font-size: 15px; font-weight: 700; color: var(--navy); } .dr-date { font-size: 13px; color: var(--gray-400); margin-top: 2px; } .dr-right { margin-left: auto; text-align: right; } .dr-amount { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; } .pill { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 13px; font-weight: 700; } .p-green { background: #dcfce7; color: #15803d; } .p-amber { background: #fef9c3; color: #a16207; } .p-blue { background: #dbeafe; color: #1d4ed8; } .p-red { background: #fee2e2; color: #dc2626; border: 1.5px solid #fca5a5; } .pro-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f7f8fa; } .pro-row:last-child { border: none; } .pr-av { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .pr-av img { width: 100%; height: 100%; object-fit: cover; } .pr-name { font-size: 15px; font-weight: 700; } .pr-meta { font-size: 13px; color: var(--gray-400); } .pr-stars { font-size: 13px; color: var(--amber); margin-top: 2px; } .pr-right { margin-left: auto; } .contact-sm-btn { background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; } .contact-sm-btn:hover { border-color: var(--orange); color: var(--orange); } /* Panneaux (devis / chantiers / messages / favoris / avis / abonnement / paramètres) */ .dash-main { flex: 1 !important; min-width: 0; overflow-y: auto; } .client-panel { display: none; flex: 1; overflow-y: auto; width: 100%; min-width: 0; box-sizing: border-box; min-height: 0; } .client-panel.dash-content { padding: 2rem; display: block; } /* Le style de la scrollbar de #clConvMessages est centralisé dans base.css (bloc "SCROLLBAR PREMIUM") pour éviter les doublons — ne pas réintroduire de règles ::-webkit-scrollbar* ici. */ /* Panneaux "Mes avis / Professionnels favoris / Mes chantiers" : même patron pour les 3 — le panneau se passe en colonne flex, son en-tête (titre + boutons) reste à taille fixe, et la liste/grille absorbe tout l'espace restant avec son propre scroll interne. overflow-y:scroll (pas auto) : la barre reste TOUJOURS visible même quand le contenu ne déborde pas encore (ex. 7 avis qui tiennent déjà à l'écran) — même convention que .conv-side/#clConvMessages/#proConvMessages, déjà réglée ainsi après retour utilisateur ("je veux des barres toujours visibles, pas juste au survol/si besoin"). overflow-x:hidden pour ne pas faire apparaître une barre horizontale parasite. Avant ce correctif, ces listes étaient plafonnées à max-height:60vh : avec peu d'éléments, un grand vide gris apparaissait sous la liste. Le style visuel de la scrollbar elle-même reste centralisé dans base.css. ⚠️ "Mes devis" (#client-panel-devis/#clientDevisList) N'EST PLUS dans ce groupe : retiré à la demande de l'utilisateur, qui trouvait cette barre interne redondante avec le scroll normal de la page (retour direct sur la liste "Mes demandes de devis"). Elle retombe donc sur le comportement par défaut de .client-panel.dash-content (bloc normal, scroll géré par .client-panel lui-même — voir plus haut). Les 3 autres panneaux ne sont pas concernés par ce changement. */ /* .client-panel (règle générique ligne ~105) est en overflow-y:auto, donc sa propre barre (déjà stylée "premium" par le sélecteur partagé de base.css, qui inclut .client-panel) ne s'affiche QUE si le contenu déborde ET reste invisible tant qu'on ne survole pas sur certains systèmes (barres "overlay" macOS/Windows en mode auto-masquage) — remarqué par l'utilisateur juste après le retrait du scroll interne de "Mes devis" ci-dessus. On force ici la même convention "toujours visible" que les autres panneaux, mais seulement pour #client-panel-devis (pas .client-panel en général, qui reste overflow-y:auto partout ailleurs — dashboard pro/admin compris). */ #client-panel-devis.client-panel.dash-content { overflow-y: scroll; } #client-panel-favoris.client-panel.dash-content, #client-panel-avis.client-panel.dash-content, #client-panel-chantiers.client-panel.dash-content { display: flex; flex-direction: column; } #client-panel-chantiers .dash-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } #client-panel-avis .dp-head, #client-panel-favoris > div:first-child { flex-shrink: 0; } #clientFavGrid, #clientAvisList { flex: 1; overflow-y: scroll; overflow-x: hidden; min-height: 0; min-width: 0; } /* Mes chantiers : état vide actuel (pas de liste), mais si du contenu dépasse un jour la hauteur disponible, la carte défile elle-même au lieu de pousser la page. */ #client-panel-chantiers .dash-panel { overflow-y: scroll; } @media (max-width: 1100px) { /* On resserre avant de tronquer : sur tablette les quatre libelles tiennent encore, il suffit de reduire les marges. */ .dash-topbar { padding: 0 1.25rem; gap: .75rem; } .dt-btn { padding: 9px 14px; } .dt-btn-zone { gap: 8px !important; } } @media (max-width: 860px) { /* Le texte des boutons disparait, l'icone reste : la recherche est toujours accessible en UN clic, jamais reléguée dans un menu. aria-label="Rechercher un professionnel" est pose dans le balisage, donc le bouton reste annonce correctement par un lecteur d'ecran meme sans texte visible. */ .dt-btn-texte { display: none; } .dt-btn { padding: 9px 12px; font-size: 15px; line-height: 1; } .dt-sub { display: none; } /* la date sous le titre */ .dt-title { font-size: 15px; } } @media (max-width: 768px) { .dash-shell { grid-template-columns: 1fr; } .dash-topbar { padding: 0 .875rem; } /* Le bandeau ne doit jamais provoquer de barre horizontale : le titre accepte de retrecir, les boutons gardent leur taille. */ .dash-topbar > div:first-child { min-width: 0; overflow: hidden; } .dt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-btn-zone { flex-shrink: 0; } /* Tiroir mobile : voir .pro-sidebar dans css/dashboard-pro.css pour le même principe et le même historique de bug (display:none sans repli rendait la navigation totalement inaccessible sous 768px). */ .dash-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 240px; z-index: 900; transform: translateX(-100%); transition: transform .25s ease; } .dash-sidebar.mobile-open { transform: translateX(0); } .dash-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; } .kpi-row { grid-template-columns: repeat(2,1fr); } .dash-2col { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ FENETRE « DEMANDER UN DEVIS » — choix du professionnel destinataire ═══════════════════════════════════════════════════════════════════ */ /* Hauteur plafonnee a environ quatre cartes, puis defilement PROPRE a la liste : on ne fait plus defiler toute la fenetre pour choisir. La barre est en overflow-y:scroll et non auto — meme convention que le reste du site : toujours visible, jamais decouverte au survol. */ .dm-pro-liste { max-height: 232px; overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; scrollbar-gutter: stable; } .dm-pro-liste:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* Rail et curseur explicitement visibles, comme demande. */ .dm-pro-liste::-webkit-scrollbar { width: 9px; } .dm-pro-liste::-webkit-scrollbar-track { background: var(--gray-100, #f3f4f6); border-radius: 100px; } .dm-pro-liste::-webkit-scrollbar-thumb { background: var(--navy, #0f0f23); border-radius: 100px; border: 2px solid var(--gray-100, #f3f4f6); min-height: 30px; } .dm-pro-liste::-webkit-scrollbar-thumb:hover { background: var(--orange); } .dm-pro-liste { scrollbar-width: thin; scrollbar-color: var(--navy, #0f0f23) var(--gray-100, #f3f4f6); } /* Une carte = un