/* ========================================================================== INVprod — ESPACE CLIENT (/mon-espace) — feuille SUPPLÉMENTAIRE -------------------------------------------------------------------------- RÔLE : ce fichier habille le portail privé réservé aux clients du studio (tableau de bord client, projets, documents/devis, galerie de médias, messagerie…). Il est chargé par mon-espace/inc/top.php. IMPORTANT — c'est un SUPPLÉMENT, pas une feuille autonome : style.css (la charte graphique v9 du site public) est chargé AVANT celle-ci. style.css fournit déjà : - les tokens de couleur : --noir, --blanc, --gris-moyen, --gris-clair, --gris-fonce, --ligne, --ligne-forte… - la texture rayée du site, la typographie Montserrat, la variable d'accélération d'animation --ease, - les composants de base : .btn, .lead, les titres, etc. => On NE redéfinit RIEN de tout cela ici. On ajoute UNIQUEMENT les composants propres au portail, en réutilisant ces mêmes tokens, pour rester visuellement identique au reste du site. CHARTE v9 rappelée : noir/blanc/gris uniquement (AUCUN bleu ni accent coloré), coins DROITS (jamais d'arrondi), cadres blancs fins, pas d'ombre ni de dégradé, texture rayée pour les fonds « matière ». STRUCTURE GÉNÉRALE : une coque à deux colonnes (sidebar de catégories à gauche + zone de contenu à droite) qui, sur mobile, se transforme en une barre horizontale collante en haut de l'écran. ========================================================================== */ /* CHARTE « Paola » — espace client clair, doux et rassurant. Ce fichier étant chargé APRÈS le style.css public, on redéfinit ici, dans son propre :root, tous les tokens que l'espace client réutilise. Ainsi le portail passe en univers Paola (crème/bleu/olive/ocre) quelles que soient les valeurs du site public. Les NOMS des tokens sont conservés : seules les VALEURS changent. --raye = « texture matière » (rayures diagonales très discrètes). Elle passe d'un blanc sur noir à un bleu très léger sur clair. */ :root{ /* Palette Paola (tokens nommés) */ --creme:#F7F2EA; --bleu:#244F7A; --bleu-clair:#E8EEF3; --olive:#445D2A; --ocre:#C99A55; --rose:#E7A39A; /* Tokens historiques réaffectés (repris de style.css, ici repeints en clair) */ --noir:#F7F2EA; /* fond général → crème */ --panel:#FFFFFF; /* fond des blocs/cartes → blanc */ --gris-fonce:#E8EEF3; /* survols / zones secondaires → gris-bleu clair */ --gris-moyen:#5F574A; /* textes secondaires lisibles sur crème */ --gris-clair:#111111; /* texte principal (noir crayonné) */ --blanc:#244F7A; /* accent principal → bleu profond */ --ligne:rgba(17,17,17,.12); /* bordure fine douce */ --ligne-forte:rgba(17,17,17,.20); /* bordure plus marquée */ --ease:cubic-bezier(.4,0,.2,1); /* accélération d'animation (repli si absent) */ --ombre:0 2px 10px rgba(17,17,17,.06); --raye:repeating-linear-gradient(45deg,transparent 0 7px,rgba(36,79,122,.06) 7px 8px); } /* Corps en colonne pleine hauteur (pour coller le pied en bas). Fond crème et texte foncé imposés ici (le style.css public serait sinon prioritaire pour la couleur héritée). Typographie Paola : Nunito en texte courant. */ body{ min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden; background:var(--creme);color:var(--gris-clair); font-family:'Nunito','Lato',system-ui,Arial,sans-serif; } /* Titres en Poppins (repli Nunito puis système). */ h1,h2,h3,.eyebrow,.crm-wordmark{font-family:'Poppins','Nunito',system-ui,Arial,sans-serif} /* ========================================================================== COQUE — sidebar de gauche + zone de contenu à droite ========================================================================== */ /* Grille à deux colonnes : sidebar fixe de 250px + contenu élastique (1fr = « tout le reste »). align-items:stretch = les deux colonnes s'étirent à la même hauteur. flex:1 pour occuper la hauteur laissée par le corps flex. */ .esp-shell{flex:1;display:grid;grid-template-columns:250px 1fr;align-items:stretch;width:100%} /* Sidebar. position:sticky + top:0 + height:100vh = elle reste visible en permanence (collée en haut) et fait toute la hauteur de l'écran ; overflow-y:auto = si les liens dépassent, la sidebar défile seule sans bouger le reste. */ .esp-side{ border-right:1px solid var(--ligne); display:flex;flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto; background:var(--noir); } .esp-brand-row{padding:26px 26px 22px;border-bottom:1px solid var(--ligne)} /* bloc logo en tête */ .esp-logo{display:block} .esp-logo img{height:32px;width:auto;display:block} .esp-logo span{ display:block;margin-top:8px; font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gris-moyen); } /* Liste des liens de navigation. flex:1 = elle occupe toute la hauteur libre entre le logo (haut) et le bloc profil (bas), qui se retrouve ainsi poussé tout en bas de la sidebar. */ .esp-nav{display:flex;flex-direction:column;padding:14px 0;flex:1} /* Un lien : icône + libellé alignés (gap:13px). border-left transparent = réserve la place du filet blanc de l'état actif (évite un décalage au clic). transition = les changements de couleur/fond se font en douceur au survol. */ .esp-nav a{ display:flex;align-items:center;gap:13px; padding:13px 26px;border-left:2px solid transparent; color:var(--gris-moyen);font-size:.8rem;font-weight:700;letter-spacing:.06em; transition:color .2s var(--ease),background .2s var(--ease); } .esp-nav a:hover{color:var(--gris-clair);background:var(--panel)} .esp-nav a.on{color:var(--blanc);border-left-color:var(--blanc);background:var(--panel)} /* page en cours : filet blanc à gauche */ .esp-nav a svg{flex:0 0 auto} /* l'icône ne se compresse pas (garde sa taille) */ /* Pastille de compteur (ex. nombre de messages non lus). margin-left:auto la pousse tout à droite du lien, contre le bord. */ .esp-nav .pill{ margin-left:auto;background:var(--blanc);color:var(--noir); font-size:.62rem;font-weight:800;padding:1px 8px;letter-spacing:0; } /* Bloc « profil » en bas de la sidebar : avatar + nom + lien de déconnexion. */ .esp-me{ border-top:1px solid var(--ligne);padding:18px 26px 22px; display:flex;gap:13px;align-items:center; } /* Avatar carré (initiales du client). flex:0 0 auto = taille fixe, ne se déforme jamais même si le nom à côté est long. */ .esp-me .av{ flex:0 0 auto;width:36px;height:36px;border:1px solid var(--ligne-forte); display:flex;align-items:center;justify-content:center; font-size:.72rem;font-weight:800;color:var(--blanc);letter-spacing:.06em; } .esp-me div{min-width:0;font-size:.72rem;color:var(--gris-moyen)} /* min-width:0 autorise la troncature du nom ci-dessous */ /* Nom du client : white-space:nowrap + overflow:hidden + text-overflow:ellipsis = si le nom est trop long, il est coupé avec « … » au lieu de déborder. */ .esp-me b{display:block;color:var(--blanc);font-size:.8rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px} .esp-me a{color:var(--gris-moyen);font-weight:700} .esp-me a:hover,.esp-me a.on{color:var(--blanc)} /* Colonne de droite (le contenu). min-width:0 = astuce indispensable en grille flex/grid : sans elle, un contenu large (tableau, texte long) pourrait empêcher la colonne de se rétrécir et casserait la mise en page. */ .esp-content{display:flex;flex-direction:column;min-width:0} /* Zone principale, centrée et limitée à 1040px de large. clamp(min, idéal, max) = la valeur s'adapte à l'écran en restant bornée : ici le padding vertical varie entre 30px et 58px (selon 5% de la largeur), l'horizontal entre 20 et 44px — grand sur desktop, resserré sur mobile, sans palier brutal. */ .esp-content main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:clamp(30px,5vw,58px) clamp(20px,4vw,44px) 70px} /* ========================================================================== RESPONSIVE — MOBILE : la sidebar devient une barre collante en haut @media (max-width:860px) = ne s'applique que sous 860px de large. On passe d'une colonne latérale à une barre horizontale posée en haut de l'écran. ========================================================================== */ @media(max-width:860px){ .esp-shell{grid-template-columns:1fr} /* une seule colonne : plus de sidebar latérale */ /* La sidebar devient une barre horizontale (flex-direction:row) collée en haut (sticky, top:0). height:auto = elle ne fait plus toute la hauteur. flex-wrap:wrap = logo/profil sur une ligne, liens qui passent en dessous. */ .esp-side{ position:sticky;top:0;z-index:30;height:auto;overflow:visible; flex-direction:row;flex-wrap:wrap;align-items:center; border-right:0;border-bottom:1px solid var(--ligne); } .esp-brand-row{flex:1;border-bottom:0;padding:14px 18px;display:flex;align-items:center} .esp-logo img{height:26px} .esp-logo span{display:none} /* on masque le sous-titre du logo (place limitée) */ .esp-me{border-top:0;padding:10px 18px} .esp-me .av{display:none} /* avatar masqué sur mobile */ .esp-me b{display:none} /* nom masqué : on ne garde que le lien déconnexion */ /* La barre de liens passe sur toute la largeur, en 3e position (order:3, donc sous le logo/profil), et défile horizontalement si les liens dépassent. scrollbar-width:none (+ ::-webkit-scrollbar) = on masque la barre de défilement pour un rendu propre ; -webkit-overflow-scrolling:touch = défilement fluide « à l'inertie » sur iOS. */ .esp-nav{ order:3;flex-direction:row;width:100%;padding:0;flex:0 0 100%; overflow-x:auto;border-top:1px solid var(--ligne); -webkit-overflow-scrolling:touch;scrollbar-width:none; } .esp-nav::-webkit-scrollbar{display:none} /* masque la barre de défilement sous Chrome/Safari */ /* Les liens deviennent des onglets : le repère d'état actif passe du filet GAUCHE (desktop) à un soulignement du BAS (border-bottom). flex:0 0 auto = chaque onglet garde sa largeur naturelle et ne s'étire pas. */ .esp-nav a{ padding:11px 15px;border-left:0;border-bottom:2px solid transparent; white-space:nowrap;flex:0 0 auto; } .esp-nav a.on{border-bottom-color:var(--blanc)} .esp-nav a svg{display:none} /* icônes masquées : on ne garde que le texte */ .esp-nav .pill{margin-left:8px} } /* ========================================================================== TRAME COMMUNE — éléments réutilisés sur toutes les pages du portail (titre de page, lien retour, surtitre, cartes, grilles, badges) ========================================================================== */ .page-intro{margin-bottom:clamp(26px,4vw,42px)} /* en-tête de page (marge basse adaptative) */ .page-intro h1{margin-bottom:10px} .page-intro .muted{color:var(--gris-moyen)} /* Lien « retour ». inline-flex = flèche + texte alignés sur une ligne. */ .back{ display:inline-flex;align-items:center;gap:9px;color:var(--gris-moyen); font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:26px; } .back:hover{color:var(--blanc)} /* Surtitre = petite étiquette de section (reprend le style .section-label du site). ::after ajoute un court trait horizontal APRÈS le texte (content:"") : flex:0 0 48px lui donne une longueur fixe de 48px, height:1px en fait un filet fin. */ .eyebrow{ display:flex;align-items:center;gap:16px; font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase; color:var(--gris-moyen);margin-bottom:18px; } .eyebrow::after{content:"";flex:0 0 48px;height:1px;background:var(--ligne-forte)} /* ---- Cadres blancs (cartes) — coins droits, pas d'ombre (charte v9) ---- */ .card{border:1px solid var(--ligne);padding:clamp(24px,3vw,36px)} .card + .card{margin-top:clamp(20px,2.6vw,28px)} /* espace entre deux cartes qui se suivent */ .card > h2{margin-bottom:clamp(18px,2.4vw,26px)} .grid{display:grid;gap:clamp(20px,2.6vw,28px)} /* La variante .cols-2 ne passe à deux colonnes qu'à partir de 680px de large (min-width) : en dessous, tout reste empilé sur une seule colonne. */ @media(min-width:680px){.grid.cols-2{grid-template-columns:1fr 1fr}} .sec{margin-top:clamp(34px,4.6vw,52px)} /* bloc de section (grand espacement au-dessus) */ .sec > h2{margin-bottom:18px} .sec-link{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-moyen)} /* lien « voir tout » d'une section */ .sec-link:hover{color:var(--blanc)} /* ---- Badges de statut — nuances de gris différenciées par le TRAITEMENT ---- Rappel charte : pas de couleur. On distingue donc les états par le remplissage plutôt que par la teinte : contour gris (à venir), contour blanc (en cours), fond blanc plein (terminé/positif). */ .badge{ display:inline-block;padding:5px 12px;border:1px solid var(--ligne-forte); font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc); } .badge.devis{border-color:var(--ligne);color:var(--gris-moyen)} /* devis : discret, contour faible */ .badge.encours,.badge.tournage,.badge.montage{color:var(--blanc);border-color:var(--ligne-forte)} /* en cours : contour blanc marqué */ .badge.livre,.badge.termine,.badge.paye{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} /* abouti : plein blanc (inversé) */ .badge.act{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} /* actif : plein blanc également */ /* ========================================================================== ACCUEIL — liste « à traiter », chiffres-clés (KPI), aperçus de messages ========================================================================== */ .todo{border:1px solid var(--ligne-forte)} /* encadré des actions en attente */ /* En-tête de l'encadré : le fond utilise la texture rayée (var(--raye)) pour le distinguer visuellement du corps de la liste. */ .todo-head{ padding:13px 22px;border-bottom:1px solid var(--ligne-forte); font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blanc); background:var(--raye); } /* Une ligne d'action. flex-wrap:wrap = le bouton passe sous le texte si la largeur manque. */ .todo-item{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--ligne);flex-wrap:wrap} .todo-item:last-child{border-bottom:0} /* pas de trait sous la dernière ligne */ .todo-item .t{flex:1;min-width:230px} /* le texte occupe la place libre ; min-width évite qu'il ne soit trop écrasé */ .todo-item .t b{display:block;color:var(--blanc);font-size:.94rem;letter-spacing:.02em} .todo-item .t span{color:var(--gris-moyen);font-size:.8rem} .todo-ok{border:1px solid var(--ligne);padding:20px 22px;color:var(--gris-moyen);font-size:.9rem} /* état « rien à traiter » */ .todo-ok b{color:var(--blanc)} /* Bloc des chiffres-clés (KPI). Astuce visuelle : gap:1px + fond var(--ligne) sur la grille, mais fond noir sur chaque .kpi => les 1px d'écart laissent voir la « ligne » du fond et dessinent ainsi de fins séparateurs entre cellules, sans avoir à poser une bordure sur chacune. */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--ligne);border:1px solid var(--ligne);margin-top:clamp(20px,2.6vw,28px)} .kpi{background:var(--noir);padding:18px 20px} /* font-variant-numeric:tabular-nums = tous les chiffres ont la même largeur, pour que les nombres restent bien alignés en colonne (important pour des KPI). */ .kpi b{display:block;font-size:1.4rem;font-weight:800;color:var(--blanc);font-variant-numeric:tabular-nums;letter-spacing:.02em} .kpi span{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-moyen)} a.kpi{transition:background .2s var(--ease)} /* un KPI cliquable : léger fond au survol */ a.kpi:hover{background:var(--gris-fonce)} /* Aperçu d'un message récent. Filet blanc à gauche + léger fond laiteux. */ .mini-msg{border-left:2px solid var(--ligne-forte);padding:12px 16px;background:var(--panel);font-size:.88rem;line-height:1.55} .mini-msg .from{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-moyen);margin-bottom:5px} /* ========================================================================== PROJETS — cartes de projet avec barre de progression ========================================================================== */ /* Même astuce de séparateurs que .kpis (gap:1px sur fond var(--ligne)). */ .pcards{display:grid;gap:1px;background:var(--ligne);border:1px solid var(--ligne)} @media(min-width:680px){.pcards{grid-template-columns:1fr 1fr}} /* deux colonnes à partir de 680px */ /* Une carte de projet, en colonne. color:inherit = si la carte est un lien , le texte garde sa couleur normale au lieu du bleu de lien par défaut. */ .pcard{ display:flex;flex-direction:column;gap:13px;background:var(--noir); padding:clamp(22px,3vw,30px);color:inherit;transition:background .25s var(--ease); } .pcard:hover{background:var(--gris-fonce)} .pcard h3{margin:0} .pcard .meta{color:var(--gris-moyen);font-size:.8rem;letter-spacing:.02em} .pcard .next{font-size:.8rem;color:var(--gris-moyen)} /* prochaine étape du projet */ .pcard .next b{color:var(--gris-clair)} /* Flèche « voir le projet ». margin-top:auto la colle en bas de la carte (l'espace libre est repoussé au-dessus d'elle). L'animation sur gap fait « respirer » l'écart entre le texte et la flèche au survol (effet de poussée). */ .pcard .arrow{ color:var(--blanc);font-weight:700;margin-top:auto;font-size:.72rem; letter-spacing:.2em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;transition:gap .25s var(--ease); } .pcard:hover .arrow{gap:16px} /* au survol : la flèche s'éloigne un peu du texte */ /* Barre de progression. position:relative sert de repère pour le remplissage interne. Le fond rayé (var(--raye)) matérialise la partie « non faite ». */ .prog{height:6px;border:1px solid var(--ligne);position:relative;background:var(--raye)} /* La partie remplie : positionnée en absolu, calée à gauche et sur toute la hauteur ; sa largeur (le % d'avancement) est fixée en ligne dans le HTML. */ .prog i{position:absolute;top:0;bottom:0;left:0;background:var(--blanc)} .prog-lbl{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-moyen);margin-top:8px} /* libellé « 60 % » sous la barre */ .prog-lbl b{color:var(--blanc)} /* ========================================================================== DOCUMENTS — vue unifiée (devis + factures), résumé, filtres, lignes ========================================================================== */ .doc-sum{display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-bottom:22px;font-size:.82rem;color:var(--gris-moyen)} /* ligne de totaux en tête */ .doc-sum b{color:var(--blanc);font-variant-numeric:tabular-nums} /* montants alignés (chiffres de largeur fixe) */ /* Barre de filtres (segmentée). width:max-content = la barre ne fait que la largeur de ses boutons (pas toute la ligne). gap:1px sur fond var(--ligne) = fins séparateurs entre boutons (même astuce que .kpis / .pcards). */ .filters{display:flex;gap:1px;border:1px solid var(--ligne);background:var(--ligne);width:max-content;max-width:100%;margin-bottom:22px} .filters button{ background:var(--noir);border:0;color:var(--gris-moyen);cursor:pointer; font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:10px 20px;transition:color .2s var(--ease); } .filters button:hover{color:var(--blanc)} .filters button.on{background:var(--blanc);color:var(--noir)} /* filtre actif : plein blanc */ /* Tableau de documents (chaque ligne = un devis/une facture). */ .doc-table{border:1px solid var(--ligne)} .doc-table .doc-row{padding:16px 20px;border-top:1px solid var(--ligne);margin:0} /* trait de séparation entre lignes */ .doc-table .doc-row:first-child{border-top:0} /* sauf au-dessus de la première */ .doc-table .doc-row.urgent{border-left:2px solid var(--blanc);background:var(--panel)} /* document à traiter : filet blanc + fond marqué */ /* Une ligne de document : icône + infos + montant + actions, alignés. flex-wrap:wrap = passe à la ligne sur petit écran. */ .doc-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--ligne);flex-wrap:wrap} .doc-row:first-of-type{border-top:0} .doc-row .ico{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;color:var(--gris-moyen)} /* pastille d'icône (taille fixe) */ .doc-row .info{flex:1;min-width:200px} /* infos : occupent la place libre ; min-width évite l'écrasement */ .doc-row .info b{color:var(--blanc);font-weight:800;display:block;text-transform:uppercase;letter-spacing:.02em;font-size:.9rem} .doc-row .info span{color:var(--gris-moyen);font-size:.82rem} .doc-row .amt{font-weight:700;white-space:nowrap;letter-spacing:.02em;font-variant-numeric:tabular-nums} /* montant : jamais coupé, chiffres alignés */ .doc-row .acts{display:flex;gap:10px;flex-wrap:wrap} /* boutons d'action (télécharger, accepter…) */ /* ========================================================================== MÉDIAS — galerie globale des livrables, filtres par projet/type ========================================================================== */ /* « Chips » = petites puces de filtre arrondies-non (coins droits). */ .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .chips button{ background:transparent;border:1px solid var(--ligne);color:var(--gris-moyen);cursor:pointer; font-family:inherit;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:7px 15px;transition:color .2s var(--ease),border-color .2s var(--ease); } .chips button:hover{color:var(--blanc);border-color:var(--ligne-forte)} .chips button.on{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} /* filtre actif : plein blanc */ .media-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} /* barre au-dessus de la galerie (titre + actions) */ /* Grille de médias : colonnes automatiques de 220px min. Séparateurs 1px via l'astuce gap:1px sur fond var(--ligne). */ .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--ligne);border:1px solid var(--ligne)} .media-item{background:var(--noir);display:flex;flex-direction:column;min-width:0} /* min-width:0 permet la troncature des légendes */ /* Vignette. Selon le média, l'élément est soit un