/* ========================================================================= Suite Projet — compléments au Kit de style QVCT (docs/Kit_Style_QVCT/) theme.css (copie non modifiée du kit) fixe l'apparence de tout ce qui a un équivalent dans la Suite QVCT (coque, boutons, badges, cartes, formulaires, tableaux, tiroir/modale, filtres, onglets). Ce fichier ne contient QUE la mise en page des familles de composants propres à la gestion de projet que le kit ne couvre pas (GANTT, calendrier, Kanban, matrice de risques, barre de filtres globale, palette de commandes, menus de la coque) — voir CONSIGNES-NOUVEAUX-SITES.md §3 : accord explicite obtenu pour ce fichier, à la condition qu'il n'emploie QUE des variables déjà définies par theme.css (aucune couleur, police, ombre ou arrondi en dur). Quelques compositions génériques manquantes au kit (paire clé/valeur .kv, mention de champ .form-hint, pastille lecture seule .readonly-note, point de légende .dot-lg) sont ajoutées ici pour la même raison : rôle réel dans l'outil, aucune valeur nouvelle, uniquement des var(--…) du kit. ========================================================================= */ /* ======================= Utilitaires de mise en page ======================= */ /* Bascule des 9 panneaux de premier niveau (un par onglet de la barre latérale) : pas de composant du kit pour ça (QVCT n'a qu'une page) — mise en page pure. */ .panel { display: none; } .panel.is-active { display: block; animation: fade 0.16s ease; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .nowrap { white-space: nowrap; } .mono { font-variant-numeric: tabular-nums; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; font-size: 0.84rem; } .kv dt { color: var(--text-tertiary); } .kv dd { margin: 0; } .form-hint { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; } .readonly-note { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-tertiary); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-well); } .readonly-note .nav-ic { width: 12px; height: 12px; } .dot-lg { width: 9px; height: 9px; border-radius: var(--radius-round); display: inline-block; flex-shrink: 0; } /* Le badge neutre du kit (.badge seul) porte une ombre interne (rôle « catégorie, dimension »). Utilisé comme 4e valeur d'un jeu de statuts à côté de .badge-accent/ -ok/-warn/-danger (toutes plates), cette ombre le fait ressortir à tort. Même couleur, juste l'ombre en moins pour rester au même niveau que ses 3 voisins. */ .badge-neutral { box-shadow: none; } /* Petit avatar (liste, tableau, carte Kanban) : le kit ne définit que 28px (identité) et 40px (photo) ; 22px est une variante de taille, mêmes couleurs. */ .avatar.avatar-sm { width: 22px; height: 22px; font-size: 0.6rem; } /* Photo dans un avatar 22/28px (le kit ne prévoit la photo qu'à 40px, .avatar-photo) : même traitement (couverture, cadrage) à nos deux autres tailles existantes. */ .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } hr.sep { border: none; box-shadow: inset 0 1px 0 var(--hairline); margin: 16px 0; height: 0; } .multi-add { display: flex; gap: 6px; } .multi-add select, .multi-add input { flex: 1; } /* icônes inline (mêmes proportions que .nav-ic du kit, hors barre latérale) */ .nav-ic { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; } .nav-ic svg { width: 100%; height: 100%; } /* ======================= En-tête du tableau de bord ======================= */ /* Composition propre à Suite Projet (objectif du projet, méta-données, état déclaré) : QVCT n'a pas cet en-tête. Card standard du kit + rôles de texte du kit (.card-label, .text-intro, .text-fine) pour tout ce qui est nommé ; seul .dash-meta (ligne de mini-stats) est une mise en page ajoutée ici. */ .dash-meta { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 12px; margin-top: 10px; box-shadow: inset 0 1px 0 var(--hairline); } .dm-item { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; } .dm-item small { font-size: 0.68rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; } /* ======================= Cartes cliquables (décisions, équipe) ======================= */ .card-clickable { cursor: pointer; transition: box-shadow 0.2s var(--ease-soft); } .card-clickable:hover { box-shadow: var(--shadow-control); } .team-card { padding: 16px; } .team-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 6px; } .team-metrics > div { background: var(--surface-well); border-radius: var(--radius-card-compact); padding: 9px 11px; box-shadow: var(--shadow-inset); } .team-metrics b { display: block; font-size: 1rem; margin: 2px 0; } .team-metrics small { font-size: 0.68rem; color: var(--text-tertiary); } .team-note { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--status-warn); margin-top: 6px; } .team-note .nav-ic { width: 13px; height: 13px; flex-shrink: 0; } @media (max-width: 700px) { .team-metrics { grid-template-columns: 1fr; } } /* ======================= Barre de filtres globale ======================= */ /* Composition propre à Suite Projet (Horizon / Lot / Service / Responsable), sous le bandeau. Surface « en relief » comme la barre latérale : c'est une commande, pas un bloc de contenu. Les