/* ==========================================================================
   ALIGNEMENT GLOBAL DES BLOCS (Suppression de l'effet escalier)
   ========================================================================== */

/* On cible les conteneurs principaux de tes sections pour les verrouiller à 1300px */
.ma-slide-inner,
.ma-carousel-section,
.ma-articles-section,
.ma-categories-grid {
    max-width: 1300px !important; 
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* On s'assure que les titres avec la barre orange n'ont pas de marge gauche parasite */
.ma-articles-header,
.ma-carousel-header,
.ma-marques-header {
    margin-left: 0 !important;
    padding-left: 15px !important; 
}





/* ==========================================================================
   GRILLE DES DERNIERS ARTICLES [ma_articles]
   ========================================================================== */
/* --- EN-TÊTE DE SECTION (Aligné à gauche avec encart) --- */
.ma-articles-header {
    text-align: left;
    margin-bottom: 40px;
    border-left: 5px solid #F16725; /* L'encart orange tactique */
    padding-left: 15px; /* Décolle le texte de la barre orange */
}

.ma-articles-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem; /* Aligné sur la taille du carrousel */
    font-weight: 900 !important;
    color: #000;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.ma-articles-title .ma-hl-orange {
    color: #F16725;
}

.ma-articles-section {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Grille adaptative : 4 colonnes sur PC, 1 sur mobile */
.ma-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Réduit de 350px à 280px pour forcer 4 colonnes */
    gap: 30px;
}

/* La carte article */
.ma-article-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}
.ma-article-card:hover {
    transform: translateY(-5px);
    border-color: #F16725; /* S'éclaire en orange au survol */
}

/* --- LE RATIO 16:9 STRICT POUR TES VIGNETTES --- */
.ma-article-img-wrap {
    display: block;
    width: 100%;
    padding-top: 56.25%; /* 56.25% force le ratio exact de 16/9 */
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid #F16725;
}

.ma-article-img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.ma-article-card:hover .ma-article-img {
    transform: scale(1.05); /* Zoom subtil au survol */
}

/* --- LE CONTENU SOUS L'IMAGE --- */
.ma-article-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ma-article-date {
    color: #F16725;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.ma-article-title {
    margin: 0 0 20px 0;
    line-height: 1.3;
}
.ma-article-title a {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.ma-article-card:hover .ma-article-title a {
    color: #F16725;
}

/* --- BOUTON LIRE LA SUITE --- */
.ma-article-readmore {
    margin-top: auto;
    color: #888;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.ma-article-readmore:hover {
    color: #fff;
}