/* ====================================================================
   Responsive Styles for A Propos Page
==================================================================== */

@media (max-width: 1400px) {
    .a-propos-bloc .a-propos-bloc-image{
        opacity: 0.5;
    }
}

/* ----- Ordinateurs de bureau (1200px - 1399px) ----- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .a-propos-intro {
        width: 55%; /* Ajuster la largeur si besoin */
    }
    .a-propos-intro::after {
        right: -20px; /* Ajuster la position de l'image */
        transform: scale(0.95);
    }
}
/* ----- Tablettes Paysage (992px - 1199px) ----- */
@media (max-width: 1199px) {
    .cms-7 h1 {
        font-size: 50px;
        line-height: 55px;
    }
    .a-propos-intro {
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .a-propos-intro img{
        margin-left: 50%;
        transform: translateX(-50%);
        max-width: 100%;
    }
    .a-propos-intro::after {
        display: none; /* Masquer l'image flottante */
    }
    .a-propos-explanation img{
        max-width: 100%;
    }  
    .a-propos-bloc.bloc_left .a-propos-bloc-image,
    .a-propos-bloc.bloc_right .a-propos-bloc-image {
      
        margin-top: 20px;
        display:none;
    }
    .a-propos-bloc.bloc_left .a-propos-bloc-texte,
    .a-propos-bloc.bloc_right .a-propos-bloc-texte {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .a-propos .title {
        font-size: 38px;
        text-align: center !important;
    }
    .a-propos .title::before {
        left:50%!important;
        right:inherit!important;
        transform: translateX(-50%)!important;
        -webkit-transform: translateX(-50%)!important;
        -moz-transform: translateX(-50%)!important;
        -ms-transform: translateX(-50%)!important;
        -o-transform: translateX(-50%)!important;
        width:60%!important;
    }
    .a-propos-engagements > p,
    .a-propos-engagements > .a-propos-engagements-images {
        width: 100%;
        text-align: center;
    }
    .a-propos-engagements-images {
        justify-content: center;
    }
    .a-propos-engagements-images > p {
        width: calc(33.33% - 15px); /* 3 images par ligne */
    }
    .bloc-item-texte, .sport .bloc-item{
        width: 100%;
        max-width:100%;
    }
    .sport a{
        margin-left: 50%;  
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }
       
    .a-propos .bloc-item img {
       width:50px;
       height:50px;
    }
    .conseil .bloc-item ul li img{
        height:auto;
    }
    .a-propos .sante .bloc-item:nth-child(3),
    .a-propos .sante .bloc-item:nth-child(4),
    .a-propos .chirurgie .bloc-item:nth-child(4),
    .a-propos .chirurgie .bloc-item:nth-child(3) {
        padding-left: 0;
    }
}

/* ----- Tablettes Portrait (768px - 991px) ----- */
@media (max-width: 991px) {
    .cms-7 h1 {
        font-size: 40px;
        line-height: 45px;
    }
    .a-propos .title {
        font-size: 32px;
    }
    .custom_cms p.key-dates-title {
        font-size: 26px;
        line-height: 30px;
    }
    .a-propos-engagements > p {
        font-size: 22px;
    }
    .a-propos-engagements-images > p {
        width: calc(50% - 10px); /* 2 images par ligne */
    }
    .a-propos a {
        font-size: 18px;
    }    
    .a-propos .conseil a span {
        padding: 12px 15px;
    }
}

/* ----- Mobiles Paysage (576px - 767px) ----- */
@media (max-width: 767px) {
    .cms-7 h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .a-propos .title {
        font-size: 28px;
    }
    .custom_cms p.key-dates-title {
        font-size: 22px;
        line-height: 26px;
    }
    .a-propos-engagements > p {
        font-size: 20px;
    }
    .a-propos-engagements-images > p {
        width: calc(50% - 10px); /* Garder 2 images par ligne ou passer à 1 ? */
    }   
    .cms-7 .a-propos a {
        font-size: 16px;
        margin-top: 10px;
        background-color: #fff!important;
        color:#fff;
        border-radius:30px;
    }    
    .cms-7 .a-propos .chirurgie a{
        background-color: #93ca15!important;
    }
    .cms-7 .a-propos .conseil a{
        background-color: #06afef!important;
    }
    .cms-7 .a-propos .sport a{
        background-color: #ef9700!important;
    }
    .cms-7 .a-propos .sante a{
        color: #25384A;
    }
    .a-propos .conseil a span {
        padding: 10px 15px;
    }
    .custom_cms table td {
        font-size: 14px;
    }
    .a-propos-engagements-images p span {
        font-size: 13px;
    }
    .a-propos .title::before {       
        width:75%!important;
    }
    .a-propos .bloc-item p{
        line-height:20px;
        margin-bottom:15px;
    }
    .a-propos a::before {
        display:none;
    }
}

/* ----- Mobiles Portrait (jusqu'à 575px) ----- */
@media (max-width: 575px) {
    .cms-7 h1 {
        font-size: 26px;
        line-height: 32px;
    }
    .a-propos .title {
        font-size: 24px;
    }
    .custom_cms p.key-dates-title {
        font-size: 20px;
        line-height: 24px;
        margin-top: 30px;
    }
    .a-propos-explanation img {
        margin-top: 20px;
    }
    .a-propos-engagements > p {
        font-size: 18px;
    }
    .a-propos-engagements-images > p {
        width: 100%; /* 1 image par ligne */
        margin-bottom: 15px;
    }
     .a-propos-engagements-images p img {
        max-height: 60px;
    }
    .a-propos-engagements-images p span {
        font-size: 12px;
        line-height: 14px;
    }
    .a-propos-bloc {
        margin-top: 30px;
    }   
     .a-propos a {
        font-size: 15px;
    }    
    .a-propos .conseil a span {
        padding: 8px 10px;
    }
    .custom_cms table td {
        font-size: 13px;
        padding: 5px;
    }
    .a-propos .title::before {       
        width:95%!important;
    }
}