/* ===================================================== garage-extra.css Styles additionnels pour les fonctionnalités ajoutées : photo véhicule, statut dynamique, couleur, drag & drop, liste d'outils. À charger APRÈS style.css dans le . ===================================================== */ /* ---- Cartes véhicule avec photo de fond (dashboard) ---- */ .bento-card { position: relative; background-size: cover; background-position: center; } .bento-card.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1)); border-radius: inherit; z-index: 0; } .bento-card>* { position: relative; z-index: 1; } /* ---- Badge de statut dynamique ---- */ .status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .status-operationnel { background: rgba(16, 185, 129, 0.13); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); } .status-en_revision { background: rgba(245, 158, 11, 0.13); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); } .status-en_panne { background: rgba(239, 68, 68, 0.13); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35); } /* ---- Pastille de couleur véhicule ---- */ .color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); vertical-align: middle; margin-right: 8px; } /* ---- Champ de sélection couleur dans les formulaires ---- */ input[type="color"].form-control { height: 44px; padding: 4px; cursor: pointer; } /* ---- Bandeau photo (page détail véhicule) ---- */ .vehicle-photo-banner { position: relative; background-size: cover; background-position: center; border-radius: 16px; height: 260px; margin-bottom: 24px; display: flex; align-items: flex-end; padding: 24px; } .vehicle-photo-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.1)); border-radius: inherit; } /* ---- Aperçu photo dans le formulaire d'édition ---- */ .photo-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; } /* ---- Texte d'aide sous un champ ---- */ .form-hint { font-size: 12px; margin-top: 4px; } /* ---- Boutons icône (suppression, actions discrètes) ---- */ .btn-icon-danger:hover { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; } .btn-icon-plain { background: none; border: none; cursor: pointer; padding: 0; } /* ---- Footer (public et privé) ---- */ .site-footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; } .site-footer.private { margin-left: 100px; margin-top: auto; } .site-footer a { color: var(--text-muted); text-decoration: none; } /* .main-content : centre symétriquement le contenu (le CSS d'origine fixait margin-left à 100px sans compenser à droite, créant un vide asymétrique sur grand écran), ET pousse le footer tout en bas de l'écran même quand le contenu est court. */ .main-content { margin-left: calc(100px + (100% - 100px - 1600px) / 2); margin-right: auto; min-height: 100vh; display: flex; flex-direction: column; } /* ---- Drag & drop (SortableJS) ---- */ .bento-card-ghost { opacity: 0.4; } .bento-card.bento-link { cursor: grab; } .bento-card.bento-link:active { cursor: grabbing; } /* ---- Correctif : le hover de style.css (règle .bento-link:hover) utilise le raccourci "background", qui réinitialise silencieusement background-size et background-position à leurs valeurs par défaut. On les réaffirme ici avec une sélectivité plus forte pour que la photo garde son cadrage "cover" même au survol. ---- */ .bento-card.has-photo:hover { background-size: cover; background-position: center; } /* ---- Ligne inférieure des cartes véhicule : titre/specs à gauche, plaque à droite, dans le flux normal (plus de position absolute qui pouvait chevaucher le texte sur les petites cartes). ---- */ .card-bottom-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; z-index: 2; } .plate-minimal { position: static; flex-shrink: 0; }