.crvi-hub-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; } .crvi-hub-block { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 2rem 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .crvi-hub-block h2 { margin-top: 0; font-size: 1.1em; margin-bottom: 1em; } .crvi-hub-block .button { width: 100%; margin-bottom: 0.5em; } .crvi-hub-block form { width: 100%; text-align: center; } /* Styles pour l'agenda */ .agenda-container { margin-top: 2rem; } .filters-container { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end; } .filter { display: flex; flex-direction: column; } .filter label { font-weight: 500; margin-bottom: 0.5rem; color: #333; } .filter input, .filter select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; } .filter button { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; } .filter button[type="submit"] { background-color: #0073aa; color: white; } .filter button[type="submit"]:hover { background-color: #005a87; } /* Boutons de filtres */ .filter button.btn-primary { background-color: #0073aa; color: white; } .filter button.btn-primary:hover { background-color: #005a87; transform: translateY(-1px); } .filter button.btn-secondary { background-color: #6c757d; color: white; } .filter button.btn-secondary:hover { background-color: #545b62; transform: translateY(-1px); } /* Indicateur de chargement des filtres */ #loading-indicator { display: none; text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.9); border-radius: 4px; margin: 10px 0; } #loading-indicator p { margin: 0; color: #666; font-style: italic; } /* Animation de chargement */ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } #loading-indicator p { animation: pulse 1.5s infinite; } /* Bouton "Ajouter un RDV" */ #addEventBtn { background-color: #28a745 !important; color: white !important; border: none !important; padding: 0.5rem 1rem !important; border-radius: 4px !important; font-size: 0.9rem !important; cursor: pointer !important; transition: background-color 0.2s !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } #addEventBtn:hover { background-color: #218838 !important; } #addEventBtn i { font-size: 0.8rem; } /* Responsive */ @media (max-width: 768px) { .filters { grid-template-columns: 1fr; } .filter button { width: 100%; } } /* Styles pour le bloc de vue avec grille Bootstrap en 2 colonnes */ #eventViewBlock .event-grid { margin: 0; } #eventViewBlock .event-grid > .row { margin-bottom: 1rem; } #eventViewBlock .event-grid .row .row { margin-bottom: 0.5rem; align-items: center; min-height: 2.5rem; border-bottom: 1px solid #f8f9fa; padding: 0.5rem 0; } #eventViewBlock .event-grid .row .row:last-child { border-bottom: none; } #eventViewBlock .event-label { font-weight: 600; color: #495057; display: flex; align-items: center; margin: 0; font-size: 0.9rem; } /* Icônes :before commentées - on utilise maintenant les balises */ /* #eventViewBlock .event-label::before { margin-right: 0.5rem; font-size: 1rem; opacity: 0.8; width: 16px; text-align: center; font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro"; } #eventViewBlock .event-label.date::before { content: "\f073"; font-weight: 900; } #eventViewBlock .event-label.time::before { content: "\f017"; font-weight: 900; } #eventViewBlock .event-label.type::before { content: "\f007"; font-weight: 900; } #eventViewBlock .event-label.language::before { content: "\f1ab"; font-weight: 900; } #eventViewBlock .event-label.beneficiary::before { content: "\f0c0"; font-weight: 900; } #eventViewBlock .event-label.intervenant::before { content: "\f0f0"; font-weight: 900; } #eventViewBlock .event-label.translator::before { content: "\f1e0"; font-weight: 900; } #eventViewBlock .event-label.location::before { content: "\f015"; font-weight: 900; } #eventViewBlock .event-label.participants::before { content: "\f0c0"; font-weight: 900; } #eventViewBlock .event-label.men::before { content: "\f183"; font-weight: 900; } #eventViewBlock .event-label.women::before { content: "\f182"; font-weight: 900; } #eventViewBlock .event-label.comment::before { content: "\f075"; font-weight: 900; } #eventViewBlock .event-label.has-dept-icon::before { content: var(--dept-icon); font-weight: normal; } */ #eventViewBlock .event-value { font-size: 0.9rem; margin: 0; color: #212529; } /* Pastille de statut dans le header du modal */ #eventModal .modal-header { position: relative; } #eventModal .statut-badge { position: absolute; top: 10px; right: 50px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; } .event-status { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: #fff; background-color: #6c757d; } /* Styles pour les liens "+ Ajouter" */ .crvi-add-link { font-size: 0.8rem; color: #6b7c93; text-decoration: none; font-weight: 400; transition: color 0.2s ease; float: right; } .crvi-add-link:hover { color: #4a5a6b; text-decoration: underline; } /* Augmentation de la taille des icônes FontAwesome de 25% pour l'ensemble de l'agenda */ .agenda-container .fas, .agenda-container .far, .agenda-container .fab, .agenda-container .fal, #eventModal .fas, #eventModal .far, #eventModal .fab, #eventModal .fal, .crvi-add-link .fas, .crvi-add-link .far, .crvi-add-link .fab, .crvi-add-link .fal { font-size: 1.25em !important; } .plus-label { display: flex; justify-content: space-between; } .plus-label a { color: #0097e6; font-size: 0.9rem; } .plus-label a:hover { color: #0073aa; } .plus-label a i { font-size: 0.8rem; } .modal .select2-container { z-index: 2000!important; width: 100% } .modal .select2-dropdown,.modal .select2-results,.modal.show .select2-container--open .select2-dropdown,.entity-create-modal .select2-container,.entity-create-modal .select2-dropdown,.entity-create-modal .select2-results { z-index: 2000!important; } .entity-create-modal .select2-container,.entity-create-modal .select2-dropdown,.entity-create-modal .select2-results { width: 100% !important; } body>.select2-container { z-index: 2000!important } body>.select2-dropdown { z-index: 2000!important } .modal.show~.select2-container,.modal.show~.select2-dropdown { z-index: 2000!important } /* Contexte front uniquement (shortcode agenda intervenant) : Forcer le Select2 à passer au-dessus du modal Avada (z-index modal ~ 99999) */ .crvi-intervenant-agenda #eventModal .select2-container, .crvi-intervenant-agenda #eventModal .select2-dropdown, .crvi-intervenant-agenda #eventModal .select2-results { z-index: 100002 !important; } /* Contexte front: forcer affichage et largeur des conteneurs Select2 */ .crvi-intervenant-agenda .select2-container { display: block !important; width: 100% !important; } /* Contexte front: couleur de police foncée pour la grille du modal */ .crvi-intervenant-agenda #eventModal .event-grid { color: #333 !important; } .crvi-intervenant-agenda #eventModal .event-grid .event-label, .crvi-intervenant-agenda #eventModal .event-grid .event-value { color: #333 !important; } /* Correction du z-index de TOUTES les modales et backdrop SOLUTION : Combinaison JavaScript + CSS - JavaScript force toutes les modales et backdrop à être enfants directs du - JavaScript réordonne : backdrop PUIS modal dans le DOM - CSS force des z-index élevés pour passer au-dessus d'Avada Avec cette approche, les stacking contexts sont correctement gérés pour : - eventModal (modal principale) - createBeneficiaireModal, createIntervenantModal, createTraducteurModal, createLocalModal - declarationIncidentModal - beneficiaireHistoriqueModal - rdvModal */ /* Backdrop : sous toutes les modales, au-dessus d'Avada */ body.modal-open .modal-backdrop { z-index: 99999 !important; } /* TOUTES les modales : au-dessus du backdrop et d'Avada */ .modal { z-index: 100000 !important; position: fixed !important; }