/* ==========================================================================
   prop_list — Style de carte : carte_horizontale
   Carte pleine largeur sur une seule ligne horizontale avec 5 colonnes :
     pictogramme (5%) | titre (35%) | lieu (20%) | dates (20%) | état (20%).
   Les surcharges par variation de style utilisent la classe ajoutée sur
   <main id="page"> par index.php (ex: main.cana, main[class*="14-18"]).
   ========================================================================== */

/* --- Variables — thème base --- */
.prop-card.carte_horizontale {
    --cch-bg:           #ffffff;
    --cch-bg-active:    var(--almost-white-for-base, #dddddd);
    --cch-radius:       12px;
    --cch-title-color:  var(--dark-grey-for-base, #222222);
    --cch-text-color:   var(--medium-grey-for-base, #555555);
    --cch-meta-color:   var(--light-grey-for-base, #777777);
}

/* --- Variables — variation cana --- */
main.cana .prop-card.carte_horizontale {
    --cch-title-color: var(--red-for-cana, #bb2018);
}

/* --- Variables — variation 14-18 --- */
main[class*="14-18"] .prop-card.carte_horizontale {
    --cch-bg:        var(--yellow-for-14-18, #ffd016);
    --cch-bg-active: var(--red-for-14-18, #e83c26);
}

main[class*="14-18"] .prop-card.carte_horizontale:hover,
main[class*="14-18"] .prop-card.carte_horizontale.active {
    --cch-title-color: #ffffff;
    --cch-text-color:  #ffffff;
    --cch-meta-color:  var(--almost-white-for-14-18, #dddddd);
}

/* --- Carte : pleine largeur --- */
.prop-card.carte_horizontale {
    width: 100%;
    background-color: var(--cch-bg);
    border-radius: var(--cch-radius);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: block;
    transition: background-color 0.25s ease;
}

/* :hover maintenu comme fallback si JS désactivé ; .active géré par carte_horizontale.js */
.prop-card.carte_horizontale:hover,
.prop-card.carte_horizontale.active {
    background-color: var(--cch-bg-active);
}

.prop-card.carte_horizontale.inactive {
    background-color: var(--cch-bg);
}

/* --- Lien englobant — flex ligne pour les 5 colonnes --- */
.prop-card.carte_horizontale > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    text-decoration: none;
    color: inherit;
    padding: 10px 16px;
    box-sizing: border-box;
}

/* --- Colonne pictogramme (5%) --- */
.prop-card.carte_horizontale .cch-icon {
    flex: 0 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* --- Colonne titre (35%) --- */
.prop-card.carte_horizontale .cch-title-col {
    flex: 0 0 35%;
    min-width: 0;
    padding: 0 12px 0 8px;
    box-sizing: border-box;
}

.prop-card.carte_horizontale .cch-title {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: Spartan, sans-serif;
    color: var(--cch-title-color);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

/* --- Colonne lieu (20%) --- */
.prop-card.carte_horizontale .cch-place-col {
    flex: 0 0 20%;
    min-width: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.prop-card.carte_horizontale .cch-place {
    font-size: 0.85rem;
    color: var(--cch-text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Colonne dates (20%) — empilées verticalement --- */
.prop-card.carte_horizontale .cch-dates-col {
    flex: 0 0 20%;
    min-width: 0;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prop-card.carte_horizontale .cch-date {
    font-size: 0.8rem;
    color: var(--cch-meta-color);
    font-family: Spartan, sans-serif;
    white-space: nowrap;
}

/* --- Colonne état des inscriptions — texte (20%) --- */
.prop-card.carte_horizontale .cch-inscription-col {
    flex: 0 0 20%;
    min-width: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.prop-card.carte_horizontale .cch-inscription {
    font-size: 0.85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Couleurs selon l'état des inscriptions — icône et texte --- */
.prop-card.carte_horizontale .cch-status--open,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--open .cch-inscription     { color: #27ae60; }

.prop-card.carte_horizontale .cch-status--preinscr,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--preinscr .cch-inscription { color: #e67e22; }

.prop-card.carte_horizontale .cch-status--waiting,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--waiting .cch-inscription  { color: #7f8c8d; }

.prop-card.carte_horizontale .cch-status--closed,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--closed .cch-inscription   { color: #e74c3c; }

.prop-card.carte_horizontale .cch-status--free,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--free .cch-inscription     { color: #27ae60; }

.prop-card.carte_horizontale .cch-status--passed,
.prop-card.carte_horizontale .cch-inscription-col.cch-status--passed .cch-inscription   { color: #707070; }