/*
  event-card-desktop.css
  Styles desktop pour cartes événements.
  Factorisation, optimisation, documentation complète.
*/

/* ===============================================
    STYLES DES FICHES
    =============================================== */
.fiche-event {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 260px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  max-width: 1190px;
  overflow: hidden;
  border-radius: 25px;
    background: #fff; 
  padding: 25px;
}
.fiche-event-home {
    border: 2px solid var(--color-green); /* Contour vert */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 311px;
    border-radius: 25px;
    background: var(--gradient-secondary-grey); /* Gradient now spans entire card */
    overflow: hidden;
    padding: 25px; /* Ajout du padding comme les fiches artistes */
}

/* Conteneur de la fiche */
.contener-display-event-card {
    width: 90%;
    max-width: 820px;
    margin: 25px 0;
    display: flex;
    justify-content: center;
    font-family: var(--font-heading-h1) !important;
    background-color: var(--color-white);
    border: 2px solid var(--color-purple); /* Bordure violette par défaut */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Variante pour la page événements */
.contener-display-event-card.event-page {
    border: 2px solid var(--color-purple);
}

/* Variante pour la page accueil */
.contener-display-event-card.home-page {
    border-color: var(--color-green); /* Surcharge en vert sur accueil */
}
.contener-display-event-card.home-page .fiche-event-title {
    color: var(--color-green);
}

/* ===============================================
    STYLES DES IMAGES - RESPECTANT LES RATIOS
    =============================================== */

/* Format A4 pour les événements (1:1.414) */
.fiche-event-img {
    width: 220px;
    min-width: 220px;
    height: 311px; /* Hauteur fixe pour garder le ratio A4 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0; /* Empêche l'image de se rétrécir */
    border-radius: 25px 0 0 25px; /* Arrondit uniquement les coins gauches */
    object-fit: cover; /* S'assure que l'image couvre l'espace sans déformation */
    align-self: center;
}

/* ===============================================
    CONTENU DES FICHES
    =============================================== */
.fiche-event-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 0 0 0; /* Aucun padding pour éliminer tout espace */
  background: none;
    font-family: var(--font-heading-h1) !important;
  padding-right: 5px;
}
.fiche-event-content-inner {
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 32px 0;
  background: var(--gradient-secondary-grey);
  border-radius: 0 25px 25px 0;
  gap: 0;
}

.fiche-event-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-purple);
    line-height: 1.2;
    width: 100%;
    text-align: center;
    font-family: var(--font-heading-h1) !important;
}
.fiche-event-date,
.fiche-event-time,
.fiche-event-city,
.fiche-event-address {
    margin-bottom: 8px;
    line-height: 1.3;
    font-size: 1rem;
    width: 100%;
    font-weight: 400;
    text-align: center;
    font-family: var(--font-heading-h1) !important;
}
.fiche-event-price {
    margin-bottom: 8px;
    line-height: 1.3;
    font-size: 1.2rem;
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-family: var(--font-heading-h1) !important;
}

/* Séparateurs */
.header-separation-purple,
.header-separation-green {
    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;
    width: 100% !important;
    display: block !important;
    align-self: stretch !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    z-index: 1;
}
.header-separation-purple {
    background: var(--gradient-secondary-purple) !important;
}
.header-separation-green {
    background: var(--gradient-secondary-green) !important;
}

/* ===============================================
    ÉLÉMENTS INTERACTIFS
    =============================================== */


/* Zone des boutons */
.fiche-event-link {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.btn-event-link,
.btn-event-link-home {
    display: inline-block;
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 25px;
    border: none;
    background: none;
    color: var(--color-green);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
    box-shadow: none;
    margin: 0 8px;
    text-decoration: none;
}
.btn-event-link:hover,
.btn-event-link-home:hover {
    transform: translateY(-2px);
    background: var(--color-green);
    color: var(--color-white);
}

/* Accueil : éléments en vert */
.contener-display-event-card.home-page .fiche-event-title,
.contener-display-event-card.home-page .fiche-event-price,
.contener-display-event-card.home-page .header-separation-green,
.contener-display-event-card.home-page .btn-event-link,
.contener-display-event-card.home-page .btn-event-link-home {
    color: var(--color-green);
    border-color: var(--color-green);
    background: none;
}
.contener-display-event-card.home-page .btn-event-link:hover,
.contener-display-event-card.home-page .btn-event-link-home:hover {
    background: var(--color-green);
    color: var(--color-white);
}
/* Page événements : éléments en violet */
.contener-display-event-card.event-page .fiche-event-title,
.contener-display-event-card.event-page .fiche-event-price,
.contener-display-event-card.event-page .header-separation-purple,
.contener-display-event-card.event-page .btn-event-link,
.contener-display-event-card.event-page .btn-event-link-home {
    color: var(--color-purple);
    border-color: var(--color-purple);
    background: none;
}
.contener-display-event-card.event-page .btn-event-link:hover,
.contener-display-event-card.event-page .btn-event-link-home:hover {
    background: var(--color-purple);
    color: var(--color-white);
}

/* Typo partie droite des fiches event */
.fiche-event-content,
.fiche-event-content-inner,
.fiche-event-title,
.fiche-event-date,
.fiche-event-time,
.fiche-event-city,
.fiche-event-address,
.fiche-event-price {
    font-family: var(--font-heading-h1) !important;
}

/* Séparation avant le bouton + d'infos */
.fiche-event-content-inner .header-separation-purple,
.fiche-event-content-inner .header-separation-green {
    margin: 18px 0 18px 0;
    height: 4px;
    width: 100%;
    display: block;
    align-self: stretch;
}
.header-separation-purple {
    background: var(--gradient-secondary-purple);
}
.header-separation-green {
    background: var(--gradient-secondary-green);
}

/* Ombre sur le bouton + d'infos page événements */
.contener-display-event-card.event-page .btn-event-link,
.contener-display-event-card.event-page .btn-event-link-home {
    box-shadow: 0 3px 6px rgba(149, 91, 217, 0.2);
}
.contener-display-event-card.event-page .btn-event-link:hover,
.contener-display-event-card.event-page .btn-event-link-home:hover {
    box-shadow: 0 4px 8px rgba(149, 91, 217, 0.5);
}

/* Ombre sur le bouton + d'infos page accueil (vert) */
.contener-display-event-card.home-page .btn-event-link,
.contener-display-event-card.home-page .btn-event-link-home {
    box-shadow: 0 3px 6px rgba(0, 180, 90, 0.2);
}
.contener-display-event-card.home-page .btn-event-link:hover,
.contener-display-event-card.home-page .btn-event-link-home:hover {
    box-shadow: 0 4px 8px rgba(0, 180, 90, 0.4);
}