/* Styles pour le shortcode [all_actualites]
   - Lead en grand + grille 3 colonnes pour les autres
   - La grille est shrink-wrapped et alignée à droite
   - Responsive : 3 -> 2 -> 1 colonnes
*/

.all-actualites-shortcode { box-sizing: border-box; margin: 0; padding: 0 12px; }

/* --- Lead (première publication) --- */
.actualite-row.actualite-lead { margin-bottom: 28px; }

.actualite.lead { display: flex; gap: 0; align-items: stretch; }

/* Forcer deux colonnes côte à côte sur écrans larges */
.actualite.lead { flex-direction: row; flex-wrap: nowrap; }

.actualite.lead > .actualite-content-wrapper,
.actualite.lead > .actualite-thumb-lead { box-sizing: border-box; }

.actualite.lead .actualite-content,
.actualite.lead .actualite-link,
.actualite.lead .actualite-excerpt { order: 1; }

.actualite.lead .actualite-content-wrapper { 
    flex: 0 0 50%;
    max-width: 50%;
    background: #dff6fb; 
    padding: 28px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; /* aligner le contenu horizontalement à gauche */
    text-align: left; /* aligner le texte à gauche */
    border-radius: 40px; 
}

.actualite.lead .actualite-content-wrapper .actualite-title { margin: 0 0 12px; line-height: 1.2; }
.actualite.lead .actualite-content-wrapper .actualite-excerpt { margin: 0 0 18px; }

.actualite-content-inner { padding: 4% 4% 6% 7%; box-sizing: border-box; }
/* bouton du lead aligné à gauche */
.actualite-content-inner a.btn-lire-plus { align-self: flex-start; }

a.btn-lire-plus { display: inline-block; background: var(--e-global-color-text, #111); padding: 0.25px 40px; border-radius: 40px; text-decoration: none; font-family: 'Shantell Sans', sans-serif; font-size: 1.4rem; transition: background 0.3s ease; }
a.btn-lire-plus:hover { background: var(--e-global-color-secondary, #666); }

/* Colonne droite du lead : image */
.actualite-thumb-lead { order: 2; flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; }

/* Si malgré tout le container est trop petit, empêcher le thumb de descendre sous le contenu */
.actualite-thumb-lead img { display: block; width: 100%; height: auto; }
.actualite-thumb-lead img { width: 100%; height: auto; display: block; border-radius: 40px; }

.actualites-grid { margin-top: 18px; width: 100%; margin-left: 0; }
.grid-row { display: flex; gap: 18px; margin-bottom: 18px; justify-content: space-between; align-items: stretch; }
.grid-row.items-2, .grid-row.items-1 { justify-content: center; }
.actualite-col { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); min-width: 0; box-sizing: border-box; }
.actualite { background: #dff6fb; border-radius: 40px; display: flex; flex-direction: column; height: 100%; }
.actualites-grid .actualite .actualite-thumb { height: 250px; overflow: hidden; border-top-left-radius: 40px; border-top-right-radius: 40px; }
.actualites-grid .actualite .actualite-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 40px; }
.actualite .actualite-title { margin: 8px 0 30px 0; font-weight: bold; }
.actualite .actualite-excerpt { margin: 3% 0; }
.actualites-grid .actualite .actualite-content-inner { padding: 10px 30px; height: 200px;display: flex;align-items: center;flex-wrap: wrap;}

/* Placeholder pour colonnes vides : garde l'espace mais n'affiche rien */
.actualite-col.actualite-placeholder { visibility: visible; }
.actualite-col.actualite-placeholder .actualite { visibility: hidden; height: 100%; }

/* Responsive : passe à 2 colonnes puis 1 colonne */
@media (max-width: 1024px) {
    .grid-row { flex-wrap: wrap; justify-content: flex-start; }
    .actualite-col { flex: 0 0 50%; max-width: none; }
    .actualite-thumb-lead { flex: 0 0 100%; max-width: none; order: 2; }
    .actualite.lead { flex-direction: column; }
    .actualite.lead .actualite-content-wrapper { order: 1; }
}

@media (max-width: 768px) {
    .actualite-col { flex: 0 0 100%; }
    .actualites-grid .actualite .actualite-thumb { height: 180px; }
    .actualite.lead .actualite-content-wrapper { border-radius: 40px; order: 2; }
    .actualite-thumb-lead { flex: 0 0 100%; max-width: none; order: 1; margin-bottom: 12px; }
}

@media (max-width: 600px) {
    .actualite-col { flex: 1 1 100%; }
    .actualites-grid .actualite .actualite-thumb img { height: 180px; }
}

/* Bouton "Lire plus" */
a.btn-lire-plus {
    display: inline-block;
    background: var(--e-global-color-text);
    padding: 0.25px 40px;
    border-radius: 40px;
    text-decoration: none;
    font-family: 'Shantell Sans';
    font-size: 1.4rem;
    transition: background 0.3s ease;
}

a.btn-lire-plus:hover {
    background: var(--e-global-color-secondary);
}