/* ============================================================
   Custom styles PMI France
   Fichier dédié aux styles ajoutés en complément de style.css
   ============================================================ */

/* ----- Events hybrides liés ----------------------------------- */

/* Backoffice : ligne du tableau index pour les events liés */
.row-event-lie {
    background-color: #fff4e6 !important;
}

.row-event-lie:hover {
    background-color: #ffe8cc !important;
}

.icone-event-lie {
    color: #ff9800;
    margin-right: 4px;
}

/* Front : design dédié pour les events hybrides liés */
.event-hybride {
    position: relative;
}

.event-hybride .badge-hybride {
    display: inline-block;
}

.event-hybride .badge-hybride .badge {
    font-size: 0.85em;
    padding: 0.35em 0.7em;
    background-color: #ff9800 !important;
    color: #fff !important;
}

.event-hybride .badge-hybride .badge i,
.event-hybride .badge-hybride .badge [class^="icon-"],
.event-hybride .badge-hybride .badge [class*=" icon-"] {
    color: #fff !important;
}

.event-list-2.event-hybride {
    border-left: 4px solid #ff9800;
}

/* Front : encart sur la page détail pour pointer vers l'event lié */
.bandeau-event-lie {
    background-color: #fff4e6;
    border-left: 4px solid #ff9800;
    padding: 15px 20px;
    border-radius: 4px;
    margin: 20px 0;
}

.bandeau-event-lie .titre {
    color: #ff9800;
    font-weight: 600;
    margin-bottom: 5px;
}

.bandeau-event-lie a {
    color: #d97706;
    text-decoration: underline;
    font-weight: 500;
}

.bandeau-event-lie a:hover {
    color: #b45309;
}

/* ----- Affichage date/heure avec fuseau horaire --------------- */

.event-datetime {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.event-datetime.compact {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.event-datetime .event-datetime-original,
.event-datetime .event-datetime-local,
.event-datetime .event-duree {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-datetime .timezone-event {
    font-size: 0.85em;
    color: #6c757d;
    margin-left: 4px;
}

.event-datetime .event-datetime-local {
    color: #5b21b6;
    font-size: 0.9em;
}

.event-datetime .event-datetime-local .datetime-local {
    font-weight: 500;
}

.event-datetime .event-duree {
    color: #4b5563;
    font-size: 0.9em;
}

/* Page détail event : fond bleu → tout en blanc */
.detail-event .event-datetime,
.detail-event .event-datetime .timezone-event,
.detail-event .event-datetime .event-datetime-local,
.detail-event .event-datetime .event-datetime-local .datetime-local,
.detail-event .event-datetime .event-duree {
    color: #ffffff !important;
}