/* ==========================================================================
   prop_list — Style de carte : carte_complete_grande
   Carte verticale avec dates, état d'inscription, titre, extrait, lieu,
   catégorie et photo principale à bords arrondis.
   Les états actif/inactif sont gérés par carte_complete_grande.js.
   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_complete_grande {
    --ccg-bg:          #ffffff;
    --ccg-bg-active:   #f5f5f5;
    --ccg-radius:      12px;
    --ccg-shadow:      rgba(0, 0, 0, 0.08);
    --ccg-title-color: #222222;
    --ccg-text-color:  #555555;
    --ccg-meta-color:  #777777;
}

/* --- Variables — variation cana --- */
main.cana .prop-card.carte_complete_grande {
    --ccg-title-color: #bb2018;
}

/* --- Variables — variation 14-18 --- */
main[class*="14-18"] .prop-card.carte_complete_grande {
    --ccg-bg:        #ffd016;
    --ccg-bg-active: #e83c26;
}

main[class*="14-18"] .prop-card.carte_complete_grande:hover,
main[class*="14-18"] .prop-card.carte_complete_grande.active {
    --ccg-title-color: #ffffff;
    --ccg-text-color:  #ffffff;
    --ccg-meta-color:  #dddddd;
}

/* --- Structure de la carte --- */
.prop-card.carte_complete_grande {
    width: 300px;
    max-width: 100%;
    background-color: var(--ccg-bg);
    border-radius: var(--ccg-radius);
    box-shadow: 0 2px 8px var(--ccg-shadow);
    overflow: hidden;
    position: relative;
    display: block;
    transition: background-color 0.25s ease;
}

/* Lien englobant — flex colonne */
.prop-card.carte_complete_grande > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* --- États actif / inactif --- */
/* :hover maintenu comme fallback si JS désactivé ; .active géré par carte_complete_grande.js */
.prop-card.carte_complete_grande:hover,
.prop-card.carte_complete_grande.active {
    background-color: var(--ccg-bg-active);
}

/* --- En-tête : dates + icône d'état --- */
/* min-height = hauteur du bloc dates (day + month) pour aligner les cartes avec et sans dates */
.prop-card.carte_complete_grande .ccg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 10px;
    min-height: 2.3rem;
}

/* Bloc dates */
.prop-card.carte_complete_grande .ccg-dates {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.prop-card.carte_complete_grande .ccg-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 22px;
}

.prop-card.carte_complete_grande .ccg-day {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: Spartan, sans-serif;
    line-height: 1;
    color: #333333;
}

.prop-card.carte_complete_grande .ccg-month {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--ccg-meta-color);
    font-family: Spartan, sans-serif;
    line-height: 1.4;
}

/* Séparateur vertical entre les deux dates */
.prop-card.carte_complete_grande .ccg-date-sep {
    width: 1px;
    align-self: stretch;
    background-color: #dddddd;
    margin: 2px 0;
}

/* Icône d'état des inscriptions */
.prop-card.carte_complete_grande .ccg-status {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.prop-card.carte_complete_grande .ccg-status--open     { color: #27ae60; }
.prop-card.carte_complete_grande .ccg-status--preinscr { color: #e67e22; }
.prop-card.carte_complete_grande .ccg-status--waiting  { color: #7f8c8d; }
.prop-card.carte_complete_grande .ccg-status--closed   { color: #e74c3c; }
.prop-card.carte_complete_grande .ccg-status--free     { color: #27ae60; }
.prop-card.carte_complete_grande .ccg-status--passed   { color: #707070; }

/* --- Titre : max 2 lignes, hauteur fixe pour aligner les cartes entre elles --- */
.prop-card.carte_complete_grande .ccg-title-container {
    box-sizing: border-box;
    padding: 0 16px 6px;
    height: calc(2 * 1.15rem * 1.3 + 6px); /* 2 lignes + padding bas */
    overflow: hidden;
}

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

/* --- Extrait : max 3 lignes, hauteur fixe pour aligner les cartes entre elles --- */
.prop-card.carte_complete_grande .ccg-excerpt {
    box-sizing: border-box;
    padding: 0 16px 10px;
    height: calc(3 * 0.78rem * 1.45 + 10px); /* 3 lignes + padding bas */
    overflow: hidden;
}

.prop-card.carte_complete_grande .ccg-excerpt p {
    font-size: 0.78rem;
    color: var(--ccg-text-color);
    margin: 0;
    line-height: 1.45;
    transition: color 0.25s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Lieu : hauteur fixe pour aligner les cartes entre elles (spacer invisible si absent) --- */
.prop-card.carte_complete_grande .ccg-place {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0 16px 5px;
    height: calc(1.15rem + 5px); /* ligne unique + padding bas */
    overflow: hidden;
    font-size: 0.82rem;
    color: var(--ccg-meta-color);
    transition: color 0.25s ease;
}

.prop-card.carte_complete_grande .ccg-place > i {
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* --- Catégorie : hauteur fixe pour aligner les cartes entre elles (spacer invisible si absente) --- */
.prop-card.carte_complete_grande .ccg-category {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0 16px 14px;
    height: calc(1.1rem + 14px); /* icône image (1.3em ≈ 1.066rem) + padding bas */
    overflow: hidden;
    font-size: 0.82rem;
    color: var(--ccg-meta-color);
    transition: color 0.25s ease;
}

.prop-card.carte_complete_grande .ccg-cat-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.prop-card.carte_complete_grande .ccg-cat-icon img {
    height: 1.3em;
    width: auto;
    display: block;
}

/* --- Photo principale --- */
.prop-card.carte_complete_grande .ccg-image {
    margin: 0 12px 12px;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e0e0e0;
    overflow: hidden;
    flex-shrink: 0;
}

.prop-card.carte_complete_grande .ccg-image--empty {
    background-color: #eeeeee;
}