/* Styles pour le popover des événements */ .event-popover { max-width: 300px; font-size: 0.875rem; } .event-popover .popover-header { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; font-weight: 600; padding: 0.5rem 0.75rem; } .event-popover .popover-body { padding: 0.75rem; } .event-popover h6 { color: #495057; font-weight: 600; margin-bottom: 0.5rem; } .event-popover .mb-1 { margin-bottom: 0.25rem; } .event-popover .mb-2 { margin-bottom: 0.5rem; } .event-popover .mt-2 { margin-top: 0.5rem; } .event-popover strong { color: #495057; font-weight: 600; } .event-popover .text-muted { color: #6c757d !important; font-size: 0.75rem; } /* Animation du popover */ .popover { animation: fadeIn 0.2s ease-in-out; } .fade.show { opacity: 1; } /* Forcer l'opacité du popover d'événement en front, même si une règle .fade externe met opacity:0 */ .popover.event-popover.fade, .popover.event-popover.fade.show { opacity: 1 !important; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Styles pour le lien "plus" des événements */ .fc-daygrid-more-link { background-color: #007bff !important; color: white !important; border-radius: 3px !important; padding: 2px 6px !important; font-size: 0.75rem !important; font-weight: 500 !important; text-decoration: none !important; display: inline-block !important; margin-top: 2px !important; transition: background-color 0.2s ease !important; } .fc-daygrid-more-link:hover { background-color: #0056b3 !important; color: white !important; text-decoration: none !important; } /* Style pour le popover des événements cachés */ .fc-more-popover { max-width: 400px !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .fc-more-popover .fc-popover-header { background-color: #f8f9fa !important; border-bottom: 1px solid #dee2e6 !important; padding: 0.75rem 1rem !important; font-weight: 600 !important; color: #495057 !important; } .fc-more-popover .fc-popover-body { padding: 0.75rem 1rem !important; max-height: 300px !important; overflow-y: auto !important; } .fc-more-popover .fc-event { margin-bottom: 0.5rem !important; padding: 0.5rem !important; border-radius: 4px !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } .fc-more-popover .fc-event:hover { opacity: 0.8 !important; } .fc-more-popover .fc-event:last-child { margin-bottom: 0 !important; } /* Responsive pour les petits écrans */ @media (max-width: 768px) { .event-popover { max-width: 250px; font-size: 0.8rem; } .fc-daygrid-more-link { font-size: 0.7rem !important; padding: 1px 4px !important; } .fc-more-popover { max-width: 300px !important; } } /* ======================================== Timeline pour historique bénéficiaire ======================================== */ .crvi-timeline { display: flex; flex-direction: column; margin: 20px auto; padding-left: 80px; position: relative; } .crvi-timeline__event { background: #f8f9fa; margin-bottom: 30px; position: relative; display: flex; border-radius: 8px; box-shadow: 0 15px 30px -6px rgba(50, 50, 93, 0.15), 0 9px 18px -9px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; } .crvi-timeline__event:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -8px rgba(50, 50, 93, 0.2), 0 12px 24px -12px rgba(0, 0, 0, 0.25); } /* Ligne verticale qui connecte les événements */ .crvi-timeline__event:after { content: ""; width: 3px; height: 100%; background: #dee2e6; position: absolute; top: 50%; left: -57px; z-index: 0; } /* Cercle sur la ligne pour chaque événement */ .crvi-timeline__event:before { content: ""; width: 50px; height: 50px; position: absolute; background: #fff; border-radius: 100%; left: -82px; top: 50%; transform: translateY(-50%); border: 3px solid #dee2e6; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 1; } /* Masquer la ligne après le dernier élément */ .crvi-timeline__event--last:after { content: none; } /* Section icône/date à gauche */ .crvi-timeline__event__icon { border-radius: 8px 0 0 8px; background: #e9ecef; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 20px; position: relative; } .crvi-timeline__event__icon i { font-size: 2rem; margin-bottom: 10px; color: #6c757d; } .crvi-timeline__event__date { color: #495057; font-size: 0.85rem; font-weight: 600; text-align: center; line-height: 1.4; } /* Contenu de l'événement */ .crvi-timeline__event__content { padding: 20px; flex-grow: 1; background: #fff; border-radius: 0 8px 8px 0; } .crvi-timeline__event__title { font-size: 1.1rem; line-height: 1.4; text-transform: uppercase; font-weight: 600; color: #495057; letter-spacing: 0.5px; margin-bottom: 15px; } .crvi-timeline__event__description { color: #525f7f; font-size: 0.9rem; line-height: 1.6; } /* Type d'événement : Par défaut (gris clair) */ .crvi-timeline__event--default { background: #f8f9fa; } .crvi-timeline__event--default:before { background: #e9ecef; border-color: #adb5bd; } .crvi-timeline__event--default:after { background: #adb5bd; } .crvi-timeline__event--default .crvi-timeline__event__icon { background: #e9ecef; } .crvi-timeline__event--default .crvi-timeline__event__icon i { color: #6c757d; } .crvi-timeline__event--default .crvi-timeline__event__date { color: #495057; } .crvi-timeline__event--default .crvi-timeline__event__title { color: #495057; } /* Type d'événement : Prévu (bleu) */ .crvi-timeline__event--prevu { background: #e7f1ff; } .crvi-timeline__event--prevu:before { background: #cfe2ff; border-color: #0d6efd; } .crvi-timeline__event--prevu:after { background: #0d6efd; } .crvi-timeline__event--prevu .crvi-timeline__event__icon { background: #0d6efd; } .crvi-timeline__event--prevu .crvi-timeline__event__icon i { color: #fff; } .crvi-timeline__event--prevu .crvi-timeline__event__date { color: #fff; } .crvi-timeline__event--prevu .crvi-timeline__event__title { color: #0d6efd; } /* Type d'événement : Présent (vert) */ .crvi-timeline__event--present { background: #d1f4e0; } .crvi-timeline__event--present:before { background: #a3e7c2; border-color: #198754; } .crvi-timeline__event--present:after { background: #198754; } .crvi-timeline__event--present .crvi-timeline__event__icon { background: #198754; } .crvi-timeline__event--present .crvi-timeline__event__icon i { color: #fff; } .crvi-timeline__event--present .crvi-timeline__event__date { color: #fff; } .crvi-timeline__event--present .crvi-timeline__event__title { color: #198754; } /* Type d'événement : Incident/Absence (rouge) */ .crvi-timeline__event--incident { background: #ffe5e5; } .crvi-timeline__event--incident:before { background: #ffccd5; border-color: #dc3545; } .crvi-timeline__event--incident:after { background: #dc3545; } .crvi-timeline__event--incident .crvi-timeline__event__icon { background: #dc3545; } .crvi-timeline__event--incident .crvi-timeline__event__icon i { color: #fff; } .crvi-timeline__event--incident .crvi-timeline__event__date { color: #fff; } .crvi-timeline__event--incident .crvi-timeline__event__title { color: #dc3545; } /* Responsive */ @media (max-width: 768px) { .crvi-timeline { padding-left: 40px; } .crvi-timeline__event { flex-direction: column; } .crvi-timeline__event__icon { border-radius: 8px 8px 0 0; min-width: auto; } .crvi-timeline__event__content { border-radius: 0 0 8px 8px; } .crvi-timeline__event:before { width: 30px; height: 30px; left: -42px; } .crvi-timeline__event:after { left: -27px; width: 2px; } }