/* ==========================================================================
AMÉLIORATION DE LA MARQUE & THÈMES – LaGraceAM
========================================================================== */
/* --- 1. Typographie de marque (Google Fonts) --- */
/* Ajoutez dans :
*/
.brand .app-name,
.main-header .app-name {
font-family: 'Montserrat', var(--font-primary);
font-weight: 700;
letter-spacing: -0.5px;
}
/* --- 2. Transition de thème douce --- */
body,
.dashboard,
.main-nav,
.main-header,
.main-content,
.card,
.table-container,
.modal-content,
.dropdown-menu,
.footer,
.terminal-container {
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
/* Force la transition sur le fond de page lors du changement de thème */
html {
transition: background-color 0.4s ease;
}
/* --- 3. En-tête et pied de page avec dégradé de marque --- */
.main-header {
background: var(--gradient-bg);
border-bottom: var(--border-solid-1) var(--color-border-1);
}
.main-footer {
position: relative;
margin-top: var(--space-8);
padding-top: var(--space-8);
}
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent-purple));
}
/* --- 4. Animation du spinner de chargement --- */
.loading-spinner .spinner {
animation: spin 1s linear infinite;
}
/* --- 5. Bouton flottant "Voir les produits" (terminal mobile) --- */
.toggle-panel {
display: none;
/* seulement en responsive */
/* width: 56px; */
/* height: 56px; */
/* border-radius: 50%; */
box-shadow: var(--shadow-xl);
background: var(--color-primary);
color: var(--color-primary-contrast);
/* align-items: center; */
/* justify-content: center; */
/* font-size: 1.5em; */
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 50;
}
.toggle-panel i {
transition: transform 0.3s ease;
}
/* Quand on affiche la liste des produits, on pourrait faire pivoter l'icône */
.toggle-panel.active i {
transform: rotate(180deg);
}
.toggle-panel:hover {
transform: scale(1.1);
box-shadow: 0 8px 24px var(--color-primary-shadow);
}
/* --- 6. Badge de filtre actif --- */
.filter-num {
display: inline-flex;
/* affiché lorsque pas .hidden */
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 4px;
background: var(--color-danger);
color: var(--color-danger-contrast);
border-radius: 12px;
font-size: 0.7em;
font-weight: 700;
position: absolute;
top: -8px;
right: -8px;
}