/* Mobile first : 1 colonne → 2 colonnes (à la une en pleine largeur) à
   partir de 768px → 2fr 1fr 1fr (à la une sur 2 lignes) à partir de 1025px.
   Bloc de l'accueil (.actu-grid--4) : cartes identiques, 1 → 2 → 4 colonnes.
   NB : les cartes .actu-card sont aussi utilisées par la page Actualités
   (home.php), qui surcharge la grille dans style.css (ARCHIVE ACTUALITÉS). */
.actualites {padding: 5rem 0;}
.actualites .section-head {flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 3rem;}
.actualites .section-head h2 {margin-bottom: 0;}

.actu-grid {display: grid; grid-template-columns: 1fr; gap: 2rem;}
.actualites .actu-card {min-width: 0; background: #fff; border-radius: var(--border-radius, 1.4rem); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); border: .1rem solid #e5dfcf; text-decoration: none; color: inherit;}
.actualites .actu-img {aspect-ratio: 16 / 10; background-color: var(--couleur-principale); position: relative; display: block; overflow: hidden;}
.actu-img img {width: 100%; height: 100%; object-fit: cover;}
/* Image affichée en entier (contain) sur un fond flouté de la même image */
.actu-img img.vignette-img {position: relative; z-index: 1; object-fit: contain;}
.actu-img img.vignette-flou, .actu-card:hover .actu-img img.vignette-flou {position: absolute; inset: 0; z-index: 0; object-fit: cover; filter: blur(1.6rem); transform: scale(1.15);}
.actu-body {padding: 2rem 2rem 2.4rem; flex: 1; display: flex; flex-direction: column;}
.actualites .actu-meta {flex-wrap: wrap; gap: .8rem 1rem; align-items: center; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em;}
.actualites .actu-cat {background: var(--couleur-background-dark); color: var(--couleur-principale); font-weight: 600; border-radius: 99rem; padding: .5rem 1.4rem; opacity: .7; transition: var(--transition);}
.actualites .actu-cat.actu-cat--travaux {background-color: var(--couleur-travaux); color: #fff;}
.actualites .actu-cat.actu-cat--ecole {background-color: var(--couleur-vie-pratique); color: #fff;}
.actualites .actu-cat.actu-cat--vie-associative {background-color: var(--couleur-vie-associative); color: #fff;}
.actualites .actu-cat.actu-cat--vie-municipale {background-color: var(--couleur-principale); color: #fff;}

.actu-card h3 {font-size: 1.8rem; line-height: 1.25; margin-bottom: 1rem; overflow-wrap: anywhere;}
.actu-card h3 a {text-decoration: none;}
.actu-card p {font-size: 1.4rem; flex: 1; margin: 0;}
.actu-more {margin-top: auto; font-size: 1.3rem; font-weight: 600; text-decoration: none;}
.actu-more::after {content: " →";}

@media (hover: hover) {
    .actualites .actu-card:hover {transform: translateY(-.3rem); box-shadow: var(--box-shadow);}
    .actualites .actu-card:hover .actu-cat {opacity: 1;}
}

@media (min-width: 768px) {
    .actualites {padding: 6rem 0;}
    .actualites .section-head {margin-bottom: 4rem;}
    .actu-grid {grid-template-columns: 1fr 1fr; gap: 2.4rem;}
    .actu-body {padding: 2.2rem 2.2rem 2.6rem;}
    .actualites .actu-meta {font-size: 1.2rem;}
    .actu-card h3 {font-size: 2rem;}

    /* À la une : pleine largeur, image à gauche */
    .actu-card.featured {grid-column: 1 / -1; flex-direction: row;}
    .actu-card.featured .actu-img {flex: 0 0 50%; aspect-ratio: auto; min-height: 28rem;}
    .actu-card.featured .actu-body {justify-content: center; padding: 3rem;}
    .actu-card.featured h3 {font-size: 2.4rem;}
}

@media (min-width: 1025px) {
    .actualites {padding: 8rem 0;}
    .actualites .section-head {flex-wrap: nowrap; align-items: center;}
    .actu-grid {grid-template-columns: 2fr 1fr 1fr;}

    /* À la une : colonne de gauche sur 2 lignes, image au-dessus */
    .actu-card.featured {grid-column: auto; grid-row: span 2; flex-direction: column;}
    .actu-card.featured .actu-img {flex: 0 0 auto; aspect-ratio: 16 / 11; min-height: 0;}
    .actu-card.featured .actu-body {justify-content: flex-start; padding: 2.6rem 2.6rem 3rem;}
    .actu-card.featured h3 {font-size: 2.8rem;}

    /* Accueil : 4 colonnes égales */
    .actu-grid.actu-grid--4 {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;}
    .actu-grid--4 .actu-body {padding: 1.8rem 1.8rem 2.2rem;}
    .actu-grid--4 .actu-card h3 {font-size: 1.8rem;}
}