/*DEBUT global -----------------------------------------------------*/
main {
    background: white;
}
.container {
    width: 60%;
    flex-direction: column;
}
h2 {
    padding-left: 28px;
    text-indent: -24px;
}
/*FIN global*/


/*DEBUT actualites -----------------------------------------------------*/
.actu {
    margin-bottom: 5%; 
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.actu:hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.22),
        0 12px 20px rgba(0, 0, 0, 0.15),
        0 6px 10px rgba(0, 0, 0, 0.10);
    transform: translateY(-4px); /* Élévation plus marquée */
}
#dynaxis{
    background-color: rgb(187, 65, 68, 0.7);
}
#techno {
    background-color: rgba(197, 197, 197, 0.8);
}
.actu-content {
    width: 75%;
    padding: 3%; 
    box-sizing: border-box;
}
.para1 {
    position: relative;
    left: 5%;
}
.para2 {
    position: relative;
    left: 3.5%;
}
.actu-img {
    width: 25%;
}
.actu-img img {
    position: relative;
    max-height: 100% ;
    max-width: 65% ;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    
}
/*FIN actualites*/


/*DEBUT responsive -----------------------------------------------------*/
@media screen and (max-width: 768px) {
    .container {
        width: 90%;
    }
    .actu {
        flex-direction: column;
    }
    .actu-content {
        width: 100%;
    }
    h2 {
        margin-bottom: 15px;
        width: 90%;
    }
    .actu-img {
        width: 100%;
        height: auto;
        order: 2; 
        text-align: center;
        padding: 10px 0;
    }
    .actu-img img {
        max-width: 60%; 
        max-height: 150px; 
        width: auto;
        height: auto;
        position: relative;
        left: 0;
        top: 0;
        transform: none; 
    }
    li {
        margin-right: 15px;
    }
    .para1, .para2 {
        left: 0;
        margin-bottom: 10px;
        margin-right: 15px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .container {
        width: 85%;
    }
}
/*FIN responsive*/