/* public/css/design/components.css * Bibliotheque de composants neuve (Phase 4, 20/07/2026) — boutons, pastilles, tableaux, * modales, champs, menus deroulants. Classes ssm-* stylees ici pour de vrai (pas de * surcharge de styles AdminLTE existants) ; .modal-content/.form-control/table.dataTable * restent les noms de classe hérités (necessaires au JS Bootstrap/DataTables et presents * dans ~130 vues), mais leur CSS ci-dessous est ecrit de zero, pas une teinte d'AdminLTE. * S'applique partout ou est present — desormais toujours vrai * (voir vendor/function.php::style()). */ /* --accent-soft n'existe pas dans tokens.css (uniquement bg/surface/accent/ok/warn/bad par direction) : calcule ici une seule fois a partir de --accent, pour tous les halos de focus/ glow (filtres, icones de modale...). Corrige un bug ou var(--accent-soft, var(--warn-bg)) retombait silencieusement sur le jaune d'avertissement faute de variable definie. 20/07/2026 : retour utilisateur "j'ai pas aime le principe d'opacity" -> --accent-soft ne melange plus l'accent avec du transparent (color-mix(...,transparent), une vraie translucidite qui change de rendu selon ce qu'il y a derriere et peut produire des zones "sales"/imprevisibles, cf. le bug modal Irise). Il melange desormais l'accent avec --surface (couleur opaque, deterministe) : le resultat est une teinte pleine et stable, pas un calque transparent. Meme nom de variable (pour ne pas retoucher tous les usages), mecanisme different. */ body[data-design] { --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-family: var(--font-ui); } body[data-design] h1, body[data-design] h2, body[data-design] h3, body[data-design] h4, body[data-design] h5, body[data-design] h6 { font-family: var(--font-display); color: var(--ink); } body[data-design] a { color: var(--accent); } body[data-design] a:hover { color: var(--accent-hover); } body[data-design] .content-wrapper, body[data-design] .container-fluid { background: transparent; } /* ================= Boutons ================= */ .ssm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 700 12.5px var(--font-ui); padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.2; transition: background .12s, border-color .12s, color .12s; } .ssm-btn:hover { border-color: var(--accent); color: var(--accent); } .ssm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ssm-btn:disabled { opacity: .45; cursor: not-allowed; } .ssm-btn-primary, .ssm-btn.bg-gradient-success, .ssm-btn.bg-success { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .ssm-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .ssm-btn-danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); } .ssm-btn-danger:hover { background: var(--bad); color: #fff; } /* `` (ex. bouton Retour navigable en data-ssm-nav) : sans ceci, la regle generale `body[data-design] a { color: var(--accent) }` (specificite superieure a .ssm-btn-primary seule) rend le texte de la meme couleur que le fond accent -> bouton visuellement vide. */ body[data-design] a.ssm-btn-primary, body[data-design] a.ssm-btn-primary:hover { color: var(--accent-ink); } body[data-design] a.ssm-btn-danger { color: var(--bad); } body[data-design] a.ssm-btn-danger:hover { color: #fff; } .ssm-btn-block { width: 100%; } .ssm-btn-group { display: inline-flex; gap: 4px; align-items: center; } .ssm-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius); } .ssm-btn-icon i { font-size: 13px; } /* Emplacement conventionnel des actions d'un panel (Ajouter/Imprimer/Exporter/...) : toujours a l'extreme droite de la barre de filtres, boutons icone+texte regroupes, jamais un bouton isole au milieu des filtres ni positionne via un decoupage col-md-x/col-md-y fragile (retour utilisateur : mal place). .ssm-panel-toolbar est un conteneur flex simple ; .ssm-panel-actions prend margin-left:auto pour etre pousse a l'extreme droite quel que soit ce qu'il y a a cote (filtre present ou pas, largeur variable) — meme principe que le ":has(> .float-right)" deja utilise ailleurs pour le meme besoin. */ .ssm-panel-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } /* Pas de flex-basis/max-width force ici : chaque .input-group doit garder la taille dictee par son propre contenu (le select2 nested a deja son propre min/max-width, cf. plus haut). Une largeur imposee au niveau du wrapper avait agrandi le filtre "Groupe" au-dela de ce que son select2 remplissait vraiment -> case trop large avec la fleche collee au texte au lieu d'etre a l'extremite (signale par l'utilisateur). 21/07/2026 : Bootstrap donne a .input-group un width:100% en dur (bootstrap.css). Quand flex-basis vaut "auto" (ce que fait "flex: 0 0 auto"), la spec flexbox dit que le width explicite du champ devient le flex-basis effectif -> chaque filtre prenait 100% de la largeur de la rangee et passait donc a la ligne (Grand Livre : "chaque input dans une ligne", chaque image visible etait a 100%). Il faut neutraliser width en plus de flex pour que le dimensionnement au contenu fonctionne reellement. */ .ssm-panel-toolbar .input-group { flex: 0 0 auto; width: auto; } /* Version portable : cote a cote au contenu au-dela de 768px, mais empiles en pleine largeur (et donc tous a la MEME largeur) en dessous - au lieu de rester chacun a sa largeur de contenu (donnait des filtres mal alignes / de largeurs differentes une fois empiles, signale sur Grand Livre). !important necessaire : body[data-design] .input-group.input-group-sm (plus bas dans ce fichier) est plus specifique (une classe + un attribut en plus) et fixe width:auto en dur, donc gagne sur cette regle malgre la media query et l'ordre des regles. */ @media (max-width: 768px) { .ssm-panel-toolbar .input-group { flex: 1 1 100% !important; width: 100% !important; } .ssm-panel-actions { width: 100% !important; margin-left: 0 !important; justify-content: flex-start !important; } } /* 21/07/2026 : la rangee dediee .ssm-panel-header-top (a l'interieur du card-header) prenait de la hauteur meme resserree, et n'etait pas "attachee au card" comme demande. Le bouton plein ecran est desormais en position absolute, attache directement a .ssm-panel/.card (qui doit donc etre position:relative), colle au coin haut-droit EXACT du card - aucun espace de mise en page consomme, plus jamais "trop de hauteur". Avec texte visible (plus un simple icone rond). */ /* Scope volontairement etroit (:has(> bouton)) plutot que tous les .card de l'appli : position: relative sur .card change potentiellement le contexte de positionnement d'enfants absolus ailleurs dans les ~100 vues non concernees par le plein ecran. */ body[data-design] .ssm-panel:has(> .ssm-panel-fullscreen-btn), body[data-design] .card:has(> .ssm-panel-fullscreen-btn), body[data-design] .ssm-panel:has(> .ssm-panel-toolbelt), body[data-design] .card:has(> .ssm-panel-toolbelt) { position: relative; } /* Le bouton absolu ne reserve pas d'espace tout seul : sans cette marge haute supplementaire, il se superposerait au contenu du card-header (ex. le bouton "Ajouter", qui vise le meme coin droit dans la rangee de filtres juste en dessous). */ body[data-design] .ssm-panel:has(> .ssm-panel-fullscreen-btn) > .ssm-panel-header, body[data-design] .card:has(> .ssm-panel-fullscreen-btn) > .card-header, body[data-design] .ssm-panel:has(> .ssm-panel-toolbelt) > .ssm-panel-header, body[data-design] .card:has(> .ssm-panel-toolbelt) > .card-header { padding-top: 42px; } .ssm-panel-fullscreen-btn { position: absolute; top: 10px; right: 14px; z-index: 5; font-size: 11px; padding: 5px 11px; gap: 6px; } .ssm-panel-fullscreen-btn i { font-size: 11px; } /* Regroupe le bouton reglage + le bouton plein ecran (21/07/2026) : desormais le seul point d'ancrage absolu dans le coin haut-droit du panel - le plein ecran devient un enfant normal (position statique) de ce groupe, plus la peine de recalculer sa position independamment. Coexiste avec .ssm-panel-fullscreen-btn seul (sans toolbelt) pour les panels pas encore repris. */ .ssm-panel-toolbelt { position: absolute; top: 10px; right: 14px; z-index: 5; display: flex; align-items: center; gap: 6px; } .ssm-panel-toolbelt > .ssm-panel-fullscreen-btn { position: static; top: auto; right: auto; } .ssm-panel-settings-btn { font-size: 11px; padding: 5px 9px; } .ssm-panel-settings-btn i { font-size: 12px; } /* Repere "ou on est" affiche uniquement en plein ecran (sidebar/topbar recouvertes, donc plus de fil d'Ariane visible sans ca) - injecte/retire par ssm_panel_fullscreen() (ajax.js). */ body[data-design] .ssm-panel-fullscreen-crumb { position: absolute; top: 10px; left: 14px; z-index: 5; display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 14px 6px 12px; font: 700 11.5px var(--font-ui); color: var(--ink-2); } body[data-design] .ssm-panel-fullscreen-crumb i { color: var(--accent); font-size: 11px; } .ssm-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .ssm-panel-actions .ssm-btn i { font-size: 12px; } /* ================= Plein ecran d'un panel (carte filtre + tableau) ================= Le panel vise (.ssm-panel ou .card, selon la vue) est deplace comme enfant direct de en JS (ssm_panel_fullscreen(), ajax.js) avant de recevoir cette classe : plus fiable qu'un simple position:fixed laisse a sa place (la sidebar/topbar restaient visibles par-dessus, un ancetre du panel plafonnant probablement son empilement). Une fois enfant de , top/right/bottom/ left explicites (plus robuste qu'inset pour la compatibilite) + z-index tres au-dessus de la sidebar (40) et du panneau de reglages (50) suffisent. Fond force en --bg (toujours opaque) plutot que d'heriter du fond normal de la carte : --surface est intentionnellement translucide sur la direction Irise (effet verre depoli pense pour une petite carte sur fond de page), ce qui devient genant en plein ecran ou toute la fenetre derriere transparaissait. */ body[data-design] .ssm-panel--fullscreen { /* !important necessaire sur position/inset : le panel garde sa classe .ssm-panel/.card en plein ecran (JS ne fait qu'ajouter .ssm-panel--fullscreen, pas de switch de classe), et la regle :has(> .ssm-panel-fullscreen-btn) qui met position:relative (plus haut) est PLUS specifique (attribut+classe+pseudo-classe) que .ssm-panel--fullscreen seule -> sans !important elle gagnait et le panel restait position:relative, donc rendu a sa place dans le (tout en bas, apres appendTo) au lieu de recouvrir l'ecran : "disparaissait" litteralement de la vue au lieu de passer en plein ecran. */ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; /* 100 (pas 2000/2147483647) : doit rester au-dessus de la sidebar/topbar/panneau reglages (40/20/50) mais EN DESSOUS des modales Bootstrap (~1040-1050 par defaut), sinon toute modale ouverte en plein ecran (ex. options d'impression/export) reste invisible derriere le panel. */ z-index: 100; margin: 0 !important; border-radius: 0; border: none !important; box-shadow: none !important; display: flex; flex-direction: column; animation: none !important; overflow: auto; background: var(--bg) !important; backdrop-filter: none !important; } body[data-design] .ssm-panel--fullscreen > .ssm-panel-body, body[data-design] .ssm-panel--fullscreen > .card-body { flex: 1 1 auto; overflow: auto; } body[data-design].ssm-body-locked { overflow: hidden; } .ssm-ic-primary { color: var(--accent); } .ssm-ic-success { color: var(--ok); } .ssm-ic-danger { color: var(--bad); } .ssm-ic-warning { color: var(--warn); } .ssm-ic-secondary, .ssm-ic-gray { color: var(--ink-2); } /* ================= Menus deroulants (dropdown JS de Bootstrap conserve) ================= */ .ssm-dropdown { position: relative; display: inline-block; } .ssm-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; min-width: 180px; font: 500 13px var(--font-ui); } .ssm-menu-pad { padding: 12px; } .ssm-menu-item { display: block; padding: 8px 10px; border-radius: calc(var(--radius) - 2px); color: var(--ink); text-decoration: none; cursor: pointer; } .ssm-menu-item:hover { background: var(--surface-2); color: var(--accent); } .dropdown-toggle::after { display: none; } /* ================= Pastilles de statut ================= */ .ssm-pill { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px var(--font-ui); padding: 3px 10px; border-radius: 999px; } .ssm-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ssm-pill-success { background: var(--ok-bg); color: var(--ok); } .ssm-pill-danger { background: var(--bad-bg); color: var(--bad); } .ssm-pill-warning { background: var(--warn-bg); color: var(--warn); } .ssm-pill-primary, .ssm-pill-info { background: var(--accent); color: var(--accent-ink); } .ssm-pill-secondary, .ssm-pill-gray { background: var(--surface-2); color: var(--ink-2); } /* ================= Cartes / panneaux ================= V2 (20/07/2026) : la V1 (accent-bar sur l'en-tete + display:flex) a casse la position du bouton Ajouter (le display:flex sur .card-header perturbait la mise en page interne en .row/.col- existante) et n'a pas plu visuellement — abandonnee. On revient a un traitement minimal (uniquement couleurs/bordure/rayon/ombre, jamais de display sur un conteneur qui a deja des enfants en .row Bootstrap) + on regle le vrai probleme signale : les cartes imbriquees (carte dans une carte, ex. Clients.php) sont maintenant APLATIES — la carte interne perd son propre cadre/ombre/fond et devient une simple section de contenu. */ body[data-design] .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow); color: var(--ink); } body[data-design] .card-header, body[data-design] .card-footer { background: var(--surface-2); border-color: var(--line-soft); color: var(--ink); } body[data-design] .card-title, body[data-design] .card-header h1, body[data-design] .card-header h2, body[data-design] .card-header h3, body[data-design] .card-header h4, body[data-design] .card-header h5, body[data-design] .card-header h6 { font-family: var(--font-display); font-weight: 700; margin: 0; } body[data-design] .card-body { padding: 18px; } body[data-design] .card-tools .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: transparent; border: none; color: var(--ink-2); transition: background .15s, color .15s; } body[data-design] .card-tools .btn:hover { background: var(--surface); color: var(--accent); } /* Carte dans une carte : on aplatit l'interieure au lieu d'empiler deux cadres/ombres. */ body[data-design] .card .card { border: none; box-shadow: none; background: transparent; border-radius: 0; } body[data-design] .card .card > .card-header, body[data-design] .card .card > .card-body, body[data-design] .card .card > .card-footer { background: transparent; padding-left: 0; padding-right: 0; } body[data-design] .card .card > .card-header { border-bottom: 1px solid var(--line-soft); } /* ================= .ssm-widget-card : petites cartes de tableau de bord (Compte Journalier, 26/07/2026) — retour utilisateur : "les cards encaissement pompiste consommation citerne et vente, et sortie espece mal designe" (compte/portion/Principal.php). Cause : ces 5 cartes AdminLTE (`card collapsed-card border border-{primary,success,info,warning,danger}`) vivent DANS le `.card` panel de la page - la regle "carte dans une carte" ci-dessus (voulue pour Clients.php etc) les aplatit completement (plus de bordure/ombre/fond), donc les classes `border-*` Bootstrap n'ont plus aucun effet visuel : 5 blocs de texte empiles sans separation ni code couleur. Nouvelle classe DEDIEE (pas `.card`) pour echapper a cet aplatissement tout en gardant `data-card-widget="collapse"` (AdminLTE JS, comportement conserve). Code couleur repris de l'original via 5 modificateurs, mappe sur les tokens de palette existants (pas de nouvelle couleur inventee). */ /* !important partout ci-dessous : ces cartes gardent la classe `.card` (pour le JS AdminLTE `data-card-widget="collapse"` qui cherche `.closest('.card')`), donc la regle "carte dans une carte" juste au-dessus (`.card .card { border:none; box-shadow:none; background:transparent }`, 3 classes = plus specifique que `.ssm-widget-card` seule, 2 classes) continuait a gagner et annulait silencieusement tout ce bloc - constat fait sur capture d'ecran fournie par l'utilisateur (aucune bordure/ombre visible, juste un filet de separation residuel). */ body[data-design] .ssm-widget-card { background: var(--surface) !important; border: 1px solid var(--line-soft) !important; border-left: 4px solid var(--accent) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow) !important; margin-bottom: 18px; overflow: hidden; /* Cartes appairees (Pompiste/Citerne, Encaissement/Vente - meme hauteur demandee) : place dans une colonne `d-flex`, la carte doit elle-meme etre flex (width 100%, colonne verticale) pour s'etirer jusqu'en bas de la colonne (rendue egale a sa voisine par le comportement standard Bootstrap "colonnes egales" d'une `.row` flex) - sans ca, une simple div block ne s'etire jamais toute seule meme si son conteneur est plus haut. */ display: flex; flex-direction: column; width: 100%; } body[data-design] .ssm-widget-card.collapsed-card { margin-bottom: 14px; } body[data-design] .ssm-widget-card--success { border-left-color: var(--ok) !important; } body[data-design] .ssm-widget-card--info { border-left-color: var(--accent-hover) !important; } body[data-design] .ssm-widget-card--warning { border-left-color: var(--warn) !important; } body[data-design] .ssm-widget-card--danger { border-left-color: var(--bad) !important; } body[data-design] .ssm-widget-card > .card-header { background: var(--surface-2) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 12px 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } body[data-design] .ssm-widget-card.collapsed-card > .card-header { border-bottom: none !important; } body[data-design] .ssm-widget-card > .card-header .card-title { font: 700 14.5px var(--font-display); margin: 0; display: flex; align-items: center; } /* Boutons d'ouverture/ajout (card-tools) toujours colles a l'extreme droite de l'en-tete - retour utilisateur : ils flottaient au milieu. Cause : AdminLTE positionne `.card-tools` en `float:right` dans son propre CSS, ignore une fois le parent passe en `display:flex` (les floats n'ont aucun effet sur un enfant flex) - le bloc retombait a sa largeur naturelle sans etre pousse au bord. `margin-left:auto` force explicitement la butee a droite, independamment de tout float residuel. */ body[data-design] .ssm-widget-card > .card-header .card-tools { margin-left: auto !important; float: none !important; display: flex; align-items: center; gap: 4px; } /* Carte Archive (compte/Comptes.php, 28/07/2026, retour utilisateur : "bouton Agrandir/Reduire masque derriere le bouton Plein ecran") : le bouton collapse de .card-tools est pousse a l'extreme droite de l'en-tete (regle ci-dessus) - EXACTEMENT sous .ssm-panel-toolbelt (position:absolute, top:10px, right:14px, z-index:5). La compensation generique `.card:has(> .ssm-panel-toolbelt) > .card-header { padding-top:42px }` (plus haut dans ce fichier) est sans !important, donc ecrasee par le `padding:12px 16px !important` de `.ssm-widget-card > .card-header` ci-dessus : l'en-tete ne descend jamais, les deux boutons se superposent. Selecteur plus specifique (3 vs 2 classes/pseudo) + !important pour regagner la priorite, quel que soit l'ordre des regles dans ce fichier. */ body[data-design] .ssm-widget-card:has(> .ssm-panel-toolbelt) > .card-header, body[data-design] .ssm-widget-card:has(> .ssm-panel-fullscreen-btn) > .card-header { padding-top: 42px !important; } body[data-design] .ssm-widget-card > .card-body { padding: 14px 16px !important; flex: 1 1 auto; } body[data-design] .ssm-widget-card table { margin-bottom: 0; } body[data-design] .ssm-widget-card .card-tools .btn { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: transparent; border: none; color: var(--ink-2); transition: background .15s, color .15s; } body[data-design] .ssm-widget-card .card-tools .btn:hover { background: var(--surface); color: var(--accent); } /* Icone en pastille ronde devant le titre - meme principe que .ssm-modal-icon (modales), decline sur les 5 couleurs de carte ci-dessus. */ body[data-design] .ssm-widget-icon { width: 30px; height: 30px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft, var(--surface-2)); color: var(--accent); font-size: 13px; flex: none; margin-right: 10px; } body[data-design] .ssm-widget-card--success .ssm-widget-icon { background: var(--ok-bg); color: var(--ok); } body[data-design] .ssm-widget-card--info .ssm-widget-icon { background: var(--accent-soft, var(--surface-2)); color: var(--accent-hover); } body[data-design] .ssm-widget-card--warning .ssm-widget-icon { background: var(--warn-bg); color: var(--warn); } body[data-design] .ssm-widget-card--danger .ssm-widget-icon { background: var(--bad-bg); color: var(--bad); } /* ================= .ssm-kpi-tile : tuile chiffre-cle (page d'accueil, 27/07/2026) — remplace les `small-box` AdminLTE (fond degrade plein, icone en filigrane) des cartes Achats/Ventes et Caisse/Banque du tableau de bord. Meme famille de couleurs que .ssm-widget-card (succes/danger/ info/warning), mais forme "tuile" (icone a gauche, libelle+valeur a droite, lien pied de tuile) plutot que carte a en-tete. */ .ssm-kpi-tile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--accent); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 16px; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none !important; color: inherit; } .ssm-kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); color: inherit; } .ssm-kpi-tile--success { border-left-color: var(--ok); } .ssm-kpi-tile--danger { border-left-color: var(--bad); } .ssm-kpi-tile--info { border-left-color: var(--accent-hover); } .ssm-kpi-tile--warning { border-left-color: var(--warn); } .ssm-kpi-tile-icon { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--accent-soft, var(--surface-2)); color: var(--accent); font-size: 17px; flex: none; } .ssm-kpi-tile--success .ssm-kpi-tile-icon { background: var(--ok-bg); color: var(--ok); } .ssm-kpi-tile--danger .ssm-kpi-tile-icon { background: var(--bad-bg); color: var(--bad); } .ssm-kpi-tile--info .ssm-kpi-tile-icon { background: var(--accent-soft, var(--surface-2)); color: var(--accent-hover); } .ssm-kpi-tile--warning .ssm-kpi-tile-icon { background: var(--warn-bg); color: var(--warn); } .ssm-kpi-tile-body { min-width: 0; flex: 1 1 auto; } .ssm-kpi-tile-label { font: 600 12px var(--font-ui); color: var(--ink-2); margin: 0 0 2px; } .ssm-kpi-tile-value { font: 700 17px var(--font-display); color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssm-kpi-tile-arrow { flex: none; color: var(--ink-2); font-size: 13px; } .ssm-kpi-tile:hover .ssm-kpi-tile-arrow { color: var(--accent); } /* ================= .ssm-vente-tuile : tuile produit de l'ecran de vente Shop & Cafe (27/07/2026) ================= - grille visuelle avec photo, cliquable pour ajouter au ticket en cours. */ .ssm-vente-tuile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 10px; text-align: center; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; user-select: none; } .ssm-vente-tuile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); border-color: var(--accent); } .ssm-vente-tuile:active { transform: translateY(0); } .ssm-vente-tuile img { width: 100%; height: 84px; object-fit: cover; border-radius: var(--radius); margin-bottom: 8px; background: var(--surface-2); } .ssm-vente-tuile-nom { font: 700 12.5px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssm-vente-tuile-prix { font: 700 13px var(--font-display); color: var(--accent); margin-top: 2px; } .ssm-panier-ligne { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; } .ssm-panier-ligne:last-child { border-bottom: none; } .ssm-panier-qte { display: inline-flex; align-items: center; gap: 6px; } .ssm-panier-qte button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; line-height: 1; } .ssm-panier-total { display: flex; justify-content: space-between; font: 700 16px var(--font-display); padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--line); color: var(--accent); } /* ================= .ssm-shop-compte-header : bandeau d'entete de la page Compte (resultat), avec ================= nom du point de vente + statut (ouvert/cloture) + acces direct a la caisse ================= (retour utilisateur 27/07/2026 : design a travailler, acces caisse/resultat peu ================= clairs). Meme famille visuelle que .ssm-widget-card (bordure gauche accent). */ .ssm-shop-compte-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--accent); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 16px; } .ssm-shop-compte-header-info { display: flex; align-items: center; gap: 14px; } .ssm-shop-compte-header-info .ssm-widget-icon { width: 48px; height: 48px; font-size: 19px; } .ssm-shop-compte-header-info h2 { font: 700 19px var(--font-display); color: var(--ink); margin: 0 0 4px; } .ssm-shop-resultat-detail { border-top: 1px solid var(--line-soft); padding-top: 10px; } .ssm-shop-resultat-detail-line { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font: 600 13px var(--font-ui); color: var(--ink-2); } .ssm-shop-resultat-detail-line strong { color: var(--ink); font-family: var(--font-display); } /* ================= .ssm-ticket-recu : card "reçu imprimé" d'un ticket en attente (ecran de vente ================= Shop & Cafe, 27/07/2026) - meme principe que les tickets ouverts de compte_pv ================= (un ticket reste "en cours" tant qu'il n'est pas encaisse, voir ================= SKILL_MODULE_VENTE.md), affiche en page (vue "Tickets en attente") avec toutes ================= les informations, police monospace pour rappeler un ticket de caisse. */ .ssm-ticket-recu { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px 16px; height: 100%; display: flex; flex-direction: column; font-family: ui-monospace, 'Courier New', monospace; font-size: 12.5px; } .ssm-ticket-recu-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 13.5px var(--font-ui); color: var(--ink); padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 8px; } .ssm-ticket-recu-head span { font: 600 11.5px ui-monospace, monospace; color: var(--ink-2); } .ssm-ticket-recu-employe { color: var(--ink-2); margin-bottom: 8px; } .ssm-ticket-recu-lignes { flex: 1 1 auto; } .ssm-ticket-recu-ligne { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--ink); } .ssm-ticket-recu-ligne span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssm-ticket-recu-total { display: flex; justify-content: space-between; font: 700 14px var(--font-display); color: var(--accent); border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; } .ssm-ticket-recu-actions { display: flex; gap: 8px; margin-top: 12px; } .ssm-ticket-recu-actions .ssm-btn { flex: 1 1 auto; font-family: var(--font-ui); } /* ================= .ssm-icon-picker : grille d'icones cliquables (27/07/2026) - remplace un champ texte "classe FontAwesome" (retour utilisateur : un utilisateur ne connait pas le nom de la classe d'une icone), utilisee pour les categories du catalogue Shop & Cafe. */ .ssm-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .ssm-icon-picker-item { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 16px; transition: background .12s, color .12s, border-color .12s; } .ssm-icon-picker-item:hover { border-color: var(--accent); color: var(--accent); } .ssm-icon-picker-item.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ================= .ssm-panel : conteneur unique (filtre + tableau), sans carte imbriquee ===== 20/07/2026 : le motif "onglets (nav-tabs) dans une carte + une 2e carte a l'interieur pour le filtre/tableau" (Clients.php) a ete juge "pas une bonne idee". Nouveau motif de reference pour tout module a onglets : .ssm-tabs est une bande independante au-dessus (pas dans un card-header), et chaque panneau d'onglet contient UN SEUL conteneur .ssm-panel (filtre + tableau), jamais deux cadres empiles. Meme habillage visuel que .card (memes tokens) mais nom de classe distinct pour ne pas re-declencher le style "carte dans une carte" si un .card apparaissait par erreur autour. */ body[data-design] .ssm-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow); color: var(--ink); } /* Pas d'overflow:hidden sur .ssm-panel (utilise avant pour clipper les coins carres du header/body contre le cadre arrondi) : ca cassait le header de table "sticky" (position:sticky ne peut "coller" que dans le scroll-port du plus proche ancetre a overflow != visible - .ssm-panel n'en a pas besoin, mais devenait ce scroll-port par accident et, comme il ne defile jamais lui-meme, annulait tout effet sticky). Le clipping des coins se fait desormais directement sur le header/body (rayon explicite), pas par overflow. */ body[data-design] .ssm-panel-header { padding: 16px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-card) var(--radius-card) 0 0; } body[data-design] .ssm-panel-body { padding: 18px; border-radius: 0 0 var(--radius-card) var(--radius-card); } /* Barre Imprimer/Exporter statique, juste au-dessus du tableau (donc avant la recherche DataTables qui se rend juste en dessous) - rendue cote serveur, ne depend d'aucun DOM genere dynamiquement par DataTables (l'injection dans .dataTables_filter s'est averee peu fiable : boutons disparus). */ body[data-design] .ssm-table-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; } /* ================= .ssm-filtres-toolbar : barre de filtres INDEPENDANTE du card-header (29/07/2026, retour utilisateur : "je souhaite qu'ils soient detaches du header de la carte et positionnes independamment"). Contrairement au placement filtres-dans-le-header (col-3/col-3... avec largeurs Bootstrap fixes qui se desalignent des que le contenu d'un label differe en longueur d'un filtre a l'autre), ce composant vit dans le .card-body, sous le titre, et utilise un flex-wrap ou chaque filtre garde une largeur minimale coherente (flex-basis) au lieu de largeurs de colonne rigides - alignement stable quel que soit le nombre/libelle des filtres. */ body[data-design] .ssm-filtres-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); } body[data-design] .ssm-filtres-toolbar .ssm-filtre-item { flex: 1 1 200px; min-width: 180px; } body[data-design] .ssm-filtres-toolbar .ssm-filtre-item .input-group { width: 100%; } /* ================= Reglages d'affichage par tableau (21/07/2026, v2 alignement par colonne) ===== Presets entete/bordure FERMES appliques par ssm_panel_settings() (ajax.js) via une classe sur le panel lui-meme (.ssm-panel OU .card selon la vue - jamais de couleur libre, voir app/models/parametre/AffichageTable.php pour la liste des valeurs possibles). L'alignement et la couleur de texte, eux, sont DESORMAIS par colonne : appliques via un