/* ==========================================================================
   Style de carte : grande_carte
   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 --- */
.card.grande_carte {
    --card-bg:             #ffffff;
    --card-bg-hover:       #f5f5f5;
    --card-shadow-color:   rgba(0, 0, 0, 0.07);
    --card-radius:         10px;
    --card-title-color:    #222222;
    --card-subtitle-color: #555555;
    --card-date-color:     #555555;
}

/* --- Variables — variation cana --- */
main.cana .card.grande_carte {
    --card-title-color:    #bb2018;
    --card-subtitle-color: #000000;
    --card-date-color:     #000000;
}

/* --- Variables — variation 14-18 --- */
/* Note : le sélecteur [class*="14-18"] est utilisé car un nom de classe
   commençant par un chiffre nécessite un échappement CSS complexe. */
main[class*="14-18"] .card.grande_carte {
    --card-bg:             #ffdd00;
    --card-bg-hover:       #cc0000;
    --card-title-color:    #000000;
    --card-subtitle-color: #000000;
    --card-date-color:     #000000;
}

/* Carte active (= hover sur desktop, première visible sur mobile) */
main[class*="14-18"] .card.grande_carte:hover,
main[class*="14-18"] .card.grande_carte.active {
    --card-title-color:    #ffffff;
    --card-subtitle-color: #ffffff;
    --card-date-color:     #ffffff;
}

/* --- Structure de la carte --- */
.card.grande_carte {
    width: 400px;
    max-width: 100%;
    background-color: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 4px var(--card-shadow-color);
    overflow: hidden;
    transition: background-color 0.25s ease;
}

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

/* Lien englobant — flex colonne pour aligner titre et sous-titre entre cartes */
.card.grande_carte > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* --- Image : 16/9 --- */
.card.grande_carte .card-image {
    margin: 20px 20px 0 20px;
    width: calc(100% - 40px);
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--card-radius);
    background-color: #e0e0e0;
    background-attachment: scroll;
    flex-shrink: 0;
}

/* --- Titre : max 2 lignes, hauteur fixe pour aligner entre cartes --- */
.card.grande_carte .card-title-container {
    padding: 12px 20px 0;
    height: calc(2 * 1.35em);
    overflow: hidden;
}

.card.grande_carte .card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--card-title-color);
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

/* --- Sous-titre : max 3 lignes, hauteur fixe pour aligner entre cartes --- */
.card.grande_carte .card-subtitle-container {
    padding: 6px 20px 0;
    height: calc(3 * 1.4em);
    overflow: hidden;
}

.card.grande_carte .card-subtitle {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--card-subtitle-color);
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

/* --- Dates : poussées en bas de la carte, italique, alignées à droite --- */
.card.grande_carte .card-date-container {
    padding: 5px 20px 16px;
    margin-top: auto;
}

.card.grande_carte .card-date {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--card-date-color);
    margin: 0;
    text-align: right;
    transition: color 0.25s ease;
}