/*
====================================
TRANSFORMATION SECTION 3
====================================
*/

/* Base styles - Little Mobile (0px) */
.transformation-section3 {
    width: 100%;
    background: #ffffff;
    max-width: none;
}

.transformation-section3__container {
    max-width: 100%;
    margin: 0 auto;
    width: 90%!important;
}

.transformation-section3__row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;
    background: linear-gradient(to bottom right, #a8203e, #a8203deb 10%,#de4163a4 20%, #e18ea0a4 30%, #e18ea0a4 50%, #e18ea0a4);
    padding: 40px 30px 20px;
    border-radius: 20px;
}

/* Colonne gauche */
.transformation-section3__col-left {
    width: 100% !important;
    flex-basis: 100% !important;
}

.transformation-section3__text-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1px; 
}

.transformation-section3__title-container {
    position: relative;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem!important;
}

.transformation-section3__title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
    color: #1a1a1a;
    position: relative;
    z-index: 2;
}

.transformation-section3__description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    text-align: justify;
}

/* Images décoratives du titre */
.transformation-section3__deco-top,
.transformation-section3__deco-bottom {
    position: absolute;
    z-index: 1;
    margin: 0;
}

.transformation-section3__deco-top {
    top: -25px;
    left: -10px;
    width: 65px;
}

.transformation-section3__deco-bottom {
    width: 60px;
    bottom: -20px;
    left: -5px;  
}

.transformation-section3__deco-top img,
.transformation-section3__deco-bottom img {
    width: 100px !important;
    height: auto;
}

/* Colonne droite */
.transformation-section3__col-right {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transformation-section3__image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
}

.transformation-section3__main-image {
    margin: 0;
    width: 93%;
    max-width: 700px;
    position: relative;
    z-index: 2;
}

.transformation-section3__main-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Images décoratives des coins */
.transformation-section3__corner-top-right,
.transformation-section3__corner-bottom-left {
    position: absolute;
    z-index: 1;
    margin: 0;
  }

.transformation-section3__corner-top-right {
    top: -35px;
    right: -9px;
    width: 46px;
    height: auto;
    z-index: 3;
}

.transformation-section3__corner-bottom-left {
    bottom: -10px;
    left: -3px;
    width: 75px;
    height: auto;
    z-index: 3;
}

.transformation-section3__corner-top-right img,
.transformation-section3__corner-bottom-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile - 350px */
@media (min-width: 350px) {
    .transformation-section3 {
      
    }
    
    .transformation-section3__deco-top {
       top: -22px;
       left: -18px;
       width: 79px;
    }

    .transformation-section3__deco-bottom {
      left: -12px;
      width: 70px;
    }
    
    .transformation-section3__deco-bottom img {
        width: 71px;
    }

     .transformation-section3__deco-top img {
       width: 79px;
    }
        
    .transformation-section3__corner-top-right {
       width: 55px;
       top: -47px;
       right: -18px;
    }
    
    .transformation-section3__corner-bottom-left {
       width: 73px;
       bottom: -10px;
       left: -2px;
    }
}

/* Tablet - 768px */
@media (min-width: 768px) {
    .transformation-section3__container {
          width: 80%!important;
    }
    
    .transformation-section3__row {
        flex-direction: row;
        gap: 3rem;
        align-items: center;  
        padding: 40px 20px 20px;     
    }

    .transformation-section3__text-wrapper {
        padding-right: 11px;
        padding-left: 10px;
        padding-bottom: 15px;
    }

    .transformation-section3__title {
        font-size: 2rem;
    }

    .transformation-section3__image-wrapper {	
	padding-top: 20px;
    }

        .transformation-section3__deco-top img, .transformation-section3__deco-bottom img {
    	width: 100px !important;
	  height: auto;
    }
    
    .transformation-section3__deco-top { 
        top: -22px;
        left: -15px;
    }
    
    .transformation-section3__deco-bottom {
        bottom: -26px;
        left: -8px;
    }
    
    .transformation-section3__main-image {
        max-width: 460px;
    }
    
    .transformation-section3__corner-top-right {
      width: 75px;
      top: -33px;
      right: -16px;
    }
    
    .transformation-section3__corner-bottom-left {
       width: 117px;
       bottom: -18px;
       left: 1px;
    }
}

/* Desktop - 782px */
@media (min-width: 782px) {
    .transformation-section3__row {  
        flex-wrap: wrap !important;    
    }
} 

/* Desktop - 1024px */
@media (min-width: 1024px) {
    .transformation-section3 {
       
    }
    
    .transformation-section3__row {
        gap: 4rem;
        background: linear-gradient(to right, #a8203e, #a8203e 30%,#de4163a4 40%, #e18ea0a4 50%, transparent 70%, transparent);
        padding: 30px 32px 40px 10px;
         flex-wrap: nowrap !important;   
}

    .transformation-section3__col-left,
    .transformation-section3__col-right {
        width: 50% !important;
        flex-basis: 50% !important;
    }
    
    .transformation-section3__title {
        font-size: 2.25rem;
    }
    
    .transformation-section3__deco-top {
        top: -25px;
        left: -18px;
    }
    
    .transformation-section3__deco-bottom {
        bottom: -18px;
        left: -10px;
    }
    
    .transformation-section3__main-image {
        max-width: 400px;
    }
    
    .transformation-section3__corner-top-right {
      width: 87px;
      top: -42px;
      right: -16px;
    }
    
    .transformation-section3__corner-bottom-left {
        width: 135px;
        bottom: -19px;
        left: 13px;
    }
}

/* Large Desktop - 1200px */
@media (min-width: 1200px) {
    .transformation-section3 {
        
    }
    
    .transformation-section3__row {
        gap: 5rem;
        padding: 60px;
    }
        
    .transformation-section3__deco-top {
        top: -30px;
        left: -20px;
    }
    
    .transformation-section3__deco-bottom {
        bottom: -20px;
        left: -12px;
    }
    
    .transformation-section3__main-image {
        max-width: 450px;
    }
    
    .transformation-section3__corner-top-right {
        width: 90px;
        top: -46px;
        right: -10px;
    }
    
    .transformation-section3__corner-bottom-left {
       width: 135px;
       bottom: -19px;
       left: 3px;
    }

    .transformation-section3__image-wrapper {
	    margin-top: -150px!important;
    } 
}

/* Extra Desktop - 1400px */
@media (min-width: 1400px) {
    .transformation-section3 {
        margin: 150px 0;
        
    }
        .transformation-section3__container {
        width: 100%!important;   

    }

    .transformation-section3__row {
        gap: 2rem;
        padding: 50px 50px 90px;
    }

    .transformation-section3__text-wrapper {
        padding-right: 100px; 
    }
   

    .transformation-section3__col-right {
        margin-top: -75px!important;
    }
    
    .transformation-section3__title {
        font-size: 2.75rem;
    }
   
    .transformation-section3__description {
       margin-top: 25px;
        font-size: 1rem;
    }
    
    .transformation-section3__deco-top {
      width: 150px;
      top: -39px;
      left: -33px;
    }
    
    .transformation-section3__deco-bottom {
      width: 114px;
      bottom: -42px;
      left: -15px;
    }
    
    .transformation-section3__main-image {
        max-width: 500px;
    }
    
    .transformation-section3__corner-top-right {
       width: 113px;
       top: -95px;
       right: -43px;
    }
    
    .transformation-section3__corner-bottom-left {
        width: 152px;
        bottom: -23px;
        left: -27px;
    }

    .transformation-section3__image-wrapper {
	    margin-top: -87px!important;
    } 
}

/* Extra extra Desktop - 1600px */
@media (min-width: 1600px) {
    .transformation-section3__text-wrapper {
        padding-right: 140px; 
    }

    .transformation-section3__row {
	gap: 2rem;
	padding: 83px 50px 68px;
}

    .transformation-section3__corner-top-right {
        width: 101px;
        top: -64px;
       right: -25px;
    }
    
    .transformation-section3__corner-bottom-left {
        width: 152px;
        bottom: -23px;
        left: -8px;
    }
}    


/* Extra extra Desktop - 1900px */
@media (min-width: 1900px) {
    .transformation-section3__image-wrapper {
	    margin-top: -150px!important;
    }
}    

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .transformation-section3__deco-top,
    .transformation-section3__deco-bottom,
    .transformation-section3__corner-top-right,
    .transformation-section3__corner-bottom-left {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
}


/* Focus pour accessibilité */
.transformation-section3 *:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}