/*
STYLE LANDING PAGE MADA
SPKTR
*/
@import url(style-base.css);

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Plage de poids disponibles */
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #0A3970;
}
.page{
    margin: 0;
}

.site-title, h1, h2, h3, h4, h5, h6 {
  font-family: "adrianna-condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  margin: 0;
}
h2{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 54px;
    line-height: 59px;
    strong{
        font-weight: 800;
        font-size: 72px;
        font-family: 'adrianna-condensed';
    }
}
a{
    text-decoration: none;
    color: #FFFFFF;
    &:hover{
        color: #FFFFFF;
        text-decoration: underline;
    }
    &:visited{
        color: #FFFFFF;
    }
}
section {
    padding: 0 20px;
}
.container {
    max-width: 1060px;
    margin: 0 auto;
}

.cta-button{
    background-color: #2AB3A4;
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 500;
    line-height: 100%;
    font-size: 14px;
    transition: all ease 0.3s;
    opacity: 1;
	z-index:1000;
    &:hover{
        background-color: #E7570F;
        color: #FFFFFF;
        font-weight: 700;
		text-decoration:none;
    }
}

/* Section Header */
.header-section{
    background-image: url('./assets/bg-intro-2k.webp');
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 2400px;
    position: relative;
    overflow: hidden;
    max-width: 2440px;
    margin: auto;
    width: 100%;

    .header-boat {
        position: absolute;
        top: 967px;
        left: 22%;
        width: 60px;
        height: auto;
        z-index: 3;
        /* backdrop-filter: blur(659px); */
        opacity: 0.8;
        mix-blend-mode: plus-lighter;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 718px;
        background-image: url("data:image/svg+xml,%3Csvg width='1440' height='718' viewBox='0 0 1440 718' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1102.79 577C1071.72 577 1043.06 592.203 1020.16 613.207C950.637 676.974 842.037 718 720 718C597.963 718 489.363 676.974 419.837 613.207C396.937 592.204 368.282 577 337.209 577L100 577C44.7716 577 -1.62407e-05 532.229 -2.10689e-05 477L-5.40273e-05 100C-5.88555e-05 44.7717 44.7714 0.000121975 99.9999 0.000117147L1340 8.74227e-06C1395.23 3.91405e-06 1440 44.7715 1440 100L1440 477C1440 532.229 1395.23 577 1340 577L1102.79 577Z' fill='%23002B5E'/%3E%3C/svg%3E");
        background-size: 100% 50vw;
		background-repeat: no-repeat;
        background-position: bottom;
        z-index: -1;
    }

    /* Style pour le soleil qui se couche */
    .setting-sun {
        position: absolute;
        top: 100px;
        right: 600px;
        width: 120px;
        height: 120px;
        background-color: #FFFFFF;
        border-radius: 50%;
        box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.5);
        z-index: 1;
        will-change: transform;
    }

    .setting-sun::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 600%;
        height: 600%;
        border-radius: 50%;
        transform: translate(-50%, -33%);
        z-index: -1;
        /* Ellipse 2 */

        background: #F57412;
        mix-blend-mode: color;
        opacity: 0.79;
        filter: blur(190px);

    }

    /* Conteneur pour le soleil et l'obstacle avec masque */
    .sun-container {
        position: absolute;
        top: 0;
        right: -65%;
        width: 200%;
        height: 994px;
        overflow: hidden;
        z-index: 1;
    }

    /* Quatrième nuage en miroir dans le conteneur du soleil */
    .sun-container .header-cloud-mirror {
        position: absolute;
        top: 78%;
        left: 55%;
        width: 30%!important;
        height: auto;
        transform: scaleX(-1) ;
        z-index: 5;
        mix-blend-mode: plus-lighter;
    }

    /* Conteneur pour le reflet du soleil */
    .sun-reflection-container {
        position: absolute;
        top: 994px; /* Position juste en dessous du premier conteneur */
        right: -65%;
        width: 200%;
        height: 800px; /* Hauteur pour permettre l'animation du reflet */
        overflow: hidden; /* Permet au reflet d'être visible en dehors du conteneur */
    }

    .header-content{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        text-align: center;
        gap:32px;
        padding-top: 100px;
        

        .header-cloud {
            position: absolute;
            width: 200%;
            z-index: 1;
            mix-blend-mode: plus-lighter;
        }

        .header-cloud-left {
            top: -10%;
            left: -50%;
        }

        .header-cloud-right {
            top: 10%;
            right: -50%;
            width: 70%;
            height: auto;
            z-index: 10;
        }

        .header-cloud-center {
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: auto;
        }

        .logo-container{
            margin-bottom: 60px;
			z-index:20;
        }
        .main-title{
            font-size: 100px;
            line-height: 90px;
            opacity: .7;
            z-index: 10;
        }
        .subtitle{
            color: #002B5E;
            max-width: 420px;
            z-index: 10;
        }
        .container-shrimp{
            margin: 60px 0 200px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .img-shrimp{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 200%;
            }
        }

        .container-treasure{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            text-align: left;
            gap: 20px;
        }
        .treasure-title{
            opacity: .7;
        }
        .treasure-content {
            
            p:first-child {
                margin-top: 0;
            }
            p:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/* Media Queries pour le responsive */
@media (max-width: 768px) {
    .header-section .header-content .container-treasure {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    
    .header-section .header-content .treasure-title {
        font-size: 42px;
        line-height: 48px;
    }
    
    .header-section .header-content .treasure-content {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Masquer le soleil et son reflet en mobile */
    .sun-container,
    .sun-reflection-container {
        display: none !important;
    }
    
    /* Suppression de l'élément ::after en responsive */
    .header-section::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-section .header-content .container-treasure {
        gap: 20px;
    }
    
    .header-section .header-content .treasure-title {
        font-size: 36px;
        line-height: 42px;
    }
}

/* Section Pourquoi */
.text-center {
    text-align: center;
}

.why-section {
    padding: 120px 0;
    position: relative;
    overflow-y: visible;
    
    .why-section-before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-56%, -40%);
        width: 615px;
        height: 380px;
        background-image: url('./assets/la-mada-full.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
        pointer-events: none;
        clip-path: circle(0% at center);
    }
}

/* Styles pour les bulles */
.why-section .bubble {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    opacity: .6;
}

/* Style pour le thon */
.why-section .tuna-decoration {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 300px;
    height: auto;
    top: 0%;
    right: 50%;
}

.why-section .bubble-1 {
    top: -50px;
    left: 10%;
    width: 70px;
    height: auto;
    transform-origin: center center;
}

.why-section .bubble-2 {
    top: 100px;
    right: 15%;
    width: 60px;
    height: auto;
    transform-origin: center center;
}

.why-section .bubble-3 {
    top: 500px;
    left: 65%;
    width: 50px;
    height: auto;
    transform: rotate(180deg);
    transform-origin: center center;
}

.why-container{
    transform: translateY(80px);
}

.why-reasons-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: center;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.why-reasons-left, .why-reasons-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.why-reasons-center {
    padding: 0;
    position: relative;
    z-index: 2;
}

.img-shrimp-center {
    max-width: 400px;
    height: auto;
    transform: scaleX(-1.1) rotate(15deg) scale(1.2);
    display: block;
}

.reason-item {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 30px;
}

.reason-item .reason-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
    transform: scaleX(0);
}

/* Direction pour les items de gauche */
.why-reasons-left .reason-item .reason-border {
    transform-origin: left;
}

/* Direction pour les items de droite */
.why-reasons-right .reason-item .reason-border {
    transform-origin: right;
}

.reason-title {
    color: #E7570F;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.reason-description {
    font-size: 20px;
    line-height: 1.2;
    font-family: 'adrianna-condensed';
    text-transform: uppercase;
}

/* Traits de connexion */
.why-reasons-left .reason-item,
.why-reasons-right .reason-item {
/*     border-bottom: 1px solid #FFFFFF;
 */}

.why-reasons-left {
    padding-right: 0;
}

.why-reasons-right {
    padding-left: 0;
    padding-top: 50px;
}

.why-reasons-left .reason-item {

}

.why-reasons-right .reason-item {
    text-align: right;
}

.reason-item-0 .reason-border{
    width:170%;
}
.reason-item-1 .reason-border{
    width:131%;
}
.reason-item-3 .reason-border{
    width:150%;
    left: unset;
    right: 0;
}
.reason-item-4 .reason-border{
    width:182%;
    left: unset;
    right: 0;
}

.why-texte{
    max-width: 410px;
    text-align: center;
    margin: auto;
}

/* Media Queries pour le responsive de la section Pourquoi */
@media (max-width: 992px) {
    .why-section-before{
        top:25%!important;
    }
    .why-reasons-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .why-reasons-center {
        order: -1;
        margin-bottom: 20px;
    }
    
    .img-shrimp-center {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .why-reasons-left, .why-reasons-right {
        gap: 20px;
    }
    
    .reason-item {
        margin-bottom: 20px;
    }
    
    .reason-title {
        font-size: 18px;
    }
    
    .reason-description {
        font-size: 16px;
    }
    
    .why-reasons-right{
        padding-top: 0!important;
    }
    .why-reasons-right .reason-item {
        text-align: left;
    }

    .reason-border{
        width: 100%!important;
    }
}

@media (max-width: 576px) {
    .why-section {
        padding: 80px 0;
    }
    
    .why-container {
        transform: translateY(40px);
    }
    
    .why-reasons-container {
        gap: 20px;
    }
    
    .img-shrimp-center {
        max-width: 250px;
    }
    
    .reason-title {
        font-size: 16px;
    }
    
    .reason-description {
        font-size: 14px;
    }
}

/* Section Shrimp */
.shrimp-section {
    padding: 80px 0;
    .container{
        margin: auto;
        max-width: 1060px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
    }
}

.shrimp-image {
    height: 630px;
    width: auto;
    object-fit: cover;
    display: flex;
    margin-right: -100px;
    position: relative;
    padding: 20px;
}

.shrimp-img-trigger {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}




.shrimp-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-image: url('./assets/play.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 12;
    pointer-events: none;
}

.shrimp-image:hover {
    .shrimp-img-trigger {
        transform: scale(1.02);
    }
    

    
    &::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.triple-wave {
    position: absolute;
    top: -60px;
    left: -80px;
    width: 299px;
    height: 124px;
    background-image: url('./assets/triple-wave.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 1;
    will-change: transform;
}

.shrimp-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    z-index: 10;
    padding: 20px;
}

.shrimp-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 30;
}

.shrimp-title {
    font-size: 54px;
    line-height: 63px;
    text-transform: uppercase;
    width: 100%;
}

.shrimp-title strong {
    line-height: 1.4;
    display: inline-block;
}

.shrimp-text {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
}

/* Styles pour la lightbox vidéo */
.video-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.video-lightbox.active {
    display: flex;
}

.video-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: #000;
    padding: 20px;
    border-radius: 10px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.video-lightbox-close {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    
    &:hover {
        color: #E7570F;
    }
}

/* Responsive pour la lightbox vidéo */
@media (max-width: 768px) {
    .video-lightbox-content {
        width: 95%;
        padding: 15px;
    }

    .video-lightbox-close {
        top: auto;
        bottom: -50px;
        right: 50%;
        transform: translateX(50%);
        font-size: 40px;
    }
}

/* Media Queries pour le responsive de la section Shrimp */
@media (max-width: 992px) {
    .shrimp-section .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .shrimp-image {
        height: 500px;
        margin-right: 0;
        order: 2;
    }
    
    .shrimp-content {
        order: 1;
        padding: 0 20px;
    }
    
    .shrimp-title {
        font-size: 42px;
        line-height: 48px;
    }
    
    .triple-wave {
        width: 200px;
        height: 83px;
        top: -40px;
        left: -40px;
    }
}

@media (max-width: 576px) {
    .shrimp-section {
        padding: 60px 0;
    }
    
    .shrimp-image {
        height: 400px;
    }
    
    .shrimp-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .shrimp-text {
        font-size: 14px;
    }
    
    .triple-wave {
        width: 150px;
        height: 62px;
        top: -30px;
        left: -20px;
    }
}

/* Section MADA Scrolling */
.mada-scroll-section {
    overflow: hidden;
    position: relative;
    padding: 40px 0;
    background-color: #0A3970;
}

.mada-scroll-swiper {
    width: 100%;
    height: auto;
}

.mada-scroll-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.mada-scroll-swiper .swiper-slide {
    width: auto;
    display: flex;
    align-items: center;
}

.mada-scroll-text {
    font-family: "adrianna-condensed", sans-serif;
    font-size: 360px;
    line-height: 1;
    color: #FFFFFF;
    opacity: 0.3;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 50px;
}

@media (max-width: 991px) {
    .mada-scroll-text {
        font-size: 200px;
    }
    .why-section .tuna-decoration {
        right: 0;
        top:-5%;
    }
}

/* Section Témoignages - Slider */
.testimonials-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    .container{
        max-width: 1280px;
    }
}

.testimonials-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.testimonials-title {
    text-align: left;
    margin: 0;
    flex: 1;
}

.testimonials-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    .swiper{
        overflow: visible;
    }
}

/* Swiper Styles */
.testimonials-swiper {
    width: 100%;
    padding: 20px 0;
    .swiper-slide {
        height: auto;
      }
}

.testimonial-item {
    background-color: #002B5E;
    padding: 24px 24px 24px 64px;
    border-radius: 10px;
    color: #fff;
    height: calc(100% - 48px);
    blockquote {
        margin: 0;
    }  
    position: relative;
}

/* Guillemet ouvrant en très gros */
.testimonial-item::before {
    content: "\201C";
    position: absolute;
    top: 16px;
    left: -10px;
    font-family: "adrianna-condensed", sans-serif;
    font-size: 100px;
    font-weight: 800;
    color: #E7570F;
    line-height: 1;
    z-index: 1;
}

.testimonial-quote {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
    font-style: italic;
    position: relative;
    z-index: 2;
}

.testimonial-author {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    margin-top: 24px;
}

.testimonial-author em {
    font-style: italic;
}

.testimonials-slider-arrows {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.testimonial-arrow {
    background: none;
    border: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonial-arrow:hover {
    transform: scale(1.1);
}

.testimonial-arrow svg {
    width: 100%;
    height: 100%;
}

.testimonial-prev {
    margin: 0;
}

.testimonial-next {
    margin: 0;
}

/* Swiper Navigation Customization */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
    display: none; /* Hide default Swiper navigation */
}

/* Responsive */
@media (max-width: 992px) {
    .testimonials-swiper .swiper-slide {
        width: 50%;
    }
    
    .testimonial-arrow {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .testimonials-swiper .swiper-slide {
        width: 100%;
    }
    
    .testimonial-arrow {
        width: 40px;
        height: 40px;
    }
    
    .testimonials-title-container {
        flex-direction: column;
    }
    
    .testimonials-slider-arrows {
        position: relative;
        margin-right: auto;
        top: 0;
        transform: none;
        margin-top: 20px;
        justify-content: center;
    }
}

.order-section{
    background-color: #FFFFFF;
    margin-top: -160px;
    padding-top: 240px;
    padding-bottom: 160px;
    color: #002B5E;
    position: relative;
    overflow: hidden;
    .container{
        max-width: 1160px;
    }
}

/* Ajout du SVG en arrière-plan */
.order-section::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 0;
    width: 500px;
    height: 550px;
    background-image: url('./assets/shrimp.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

/* Nouvelle structure de la section commande */
.order-columns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.order-text-column {
    flex: 1;
    min-width: 300px;
}

.order-image-column {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.order-meal-image-container {
    position: relative;
    width: 90%;
    aspect-ratio: 1/1;
    overflow: hidden;
    margin-left: auto;
    border-radius: 50%;
}

.order-meal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(0% at center);
    will-change: clip-path;
}

.order-title {
    font-size: 54px;
    line-height: 63px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.order-content {
    margin-bottom: 30px;
    p:first-child {
        margin-top: 0;
    }
    p:last-child {
        margin-bottom: 0;
    }
}

.order-product-image-container {
    position: absolute;
    bottom: -170px;
    right: 300px;
    width: 300px;
    /* height: 520px; */
    z-index: 2;
    transform: translate(0, 0);
}

.order-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Styles responsifs pour la section commande */
@media (max-width: 768px) {
    .order-columns {
        flex-direction: column;
    }
    .order-meal-image-container{
        margin: auto;
    }
    
    .order-text-column, 
    .order-image-column {
        width: 100%;
    }
    
    .order-product-image-container {
        width: 180px;
        height: 200px;
        left: 50%;
        top: 70%;
        transform: translate(-50%, 0);
    }
}

/* Séparateur sinusoïdal */
.wave-separator {
    position: relative;
    width: 100%;
    z-index: 10;
    background-color: #0A3970;
    display: flex;
    padding: 0!important;
}

.wave-svg {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover; /* Assure que l'image couvre toute la zone */
}

@media (max-width: 999px){
    .wave-separator{
        height: 20px!important;
        overflow: hidden!important;
    }
    .wave-svg {
        position: absolute!important;
        width: 100%!important;
        min-width: 600px!important;
        height: auto!important;
        /* object-fit: cover; */
        left: 50%!important;
        transform: translateX(-50%)!important;
    }
}

/* Ajustement pour la section FAQ qui a un fond bleu */
.faq-section {
    position: relative;
    z-index: 5;
    padding: 240px 0 0px 0;
    .container{
        max-width: 100%;
    }
}

/* Styles pour les colonnes de la section FAQ */
.faq-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 120px;
}

/* Colonne de gauche avec image en arrière-plan */
.faq-image-column {
    flex: 1;
    min-width: 300px;
    min-height: 500px;
    padding-top: 130px;
    background-size: 300%;
    background-position-x:-850px;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    max-width: calc(50% - 60px);
    overflow: visible;
    border-top-right-radius: 40px;
}

/* Mot MADA en très gros et transparent par-dessus l'image */
/* Suppression du ::before */

/* Titre dans la colonne de gauche */
.faq-image-column .faq-title {
    color: white;
    text-align: left;
    font-size: 60px;
    font-weight: 600;
    z-index: 2;
    line-height: 1;
}

/* Colonne de droite avec questions et réponses */
.faq-content-column {
    flex: 1;
    min-width: 300px;

    max-width: 640px;
    margin-bottom: 200px;
    padding-right: 20px;
}

/* Conteneur des questions et réponses */
.faqs-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Style pour chaque élément FAQ */
.faq-item {
    margin-bottom: 24px;
    padding-bottom: 24px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.faq-item .faq-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E7570F;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* Style pour les questions */
.faq-question {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Style pour les réponses */
.faq-answer {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

/* Responsive pour les colonnes FAQ */
@media (max-width: 1200px){
    .faq-columns {
        gap: 40px;
    }
}
@media (max-width: 768px) {
    .faq-columns {
        flex-direction: column;
        gap: 40px;
    }
    
    .faq-image-column {
        min-height: 100px;
        max-width: 100%;
        border-top-right-radius: 0;
        padding-top: 60px;
        background-image: none !important;
        justify-content: flex-start;
        padding: 0 20px;
    }
    
    .faq-image-column::before {
        display: none;
    }
    
    .faq-content-column {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .faq-section {
        padding: 120px 0 0px 0;
    }
    
    .faq-columns {
        gap: 20px;
    }
    
    .faq-image-column {
        padding-top: 30px;
    }
}

/* Footer */
.footer {
    background-color: #002B5E;
    padding: 60px 0;
    color: #FFFFFF;
    position: relative;
    --footer-image-opacity: 0; /* Variable CSS pour l'opacité de l'image */
}

.footer::after {
    content: "";
    position: absolute;
    top: -70px;
    right: 0;
    width: 500px;
    height: 400px;
    background-image: url('./assets/la-mada.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    z-index: 1;
    pointer-events: none;
    opacity: var(--footer-image-opacity); /* Utilisation de la variable CSS */
}

.footer-container {
    display: flex;
    align-items: flex-start;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.footer-logo-column {
    flex: 1;
    max-width: 200px;
    margin-right: 130px;
}

.footer-logo {
    max-width: 100%;
    height: auto;
}

.footer-text-column {
    padding-right: 40px;
    border-right: 1px solid #FFFFFF20;
    margin-right: 40px;
    display: flex;
    flex-direction: column;
}

.footer-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1.5em;
    p:first-child{
        margin-top: 0;
    }
    p:last-child{
        margin-bottom: 0;
    }
}
.footer-cta-button{
    width: fit-content;
}

.footer-social-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-social-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.footer-social-links {
    display: flex;
    gap: 15px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
}

.footer-social-icon {

}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer{
        overflow: hidden;
    }
    .footer-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-logo-column,
    .footer-text-column,
    .footer-social-column {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .footer-social-column {
        align-items: center;
        margin-top: 40px;
    }
    
    .footer-social-links {
        justify-content: center;
    }
    .footer:after{
        top: unset;
        bottom: -100px;
    }
    .footer-text-column{
        border-right: none;
    }
}

/* Footer Banner */
.footer-banner {
    background-color: #E7570F;
    padding: 24px 0;
    width: 100%;
    position: relative;
    z-index: 30;
}

.footer-banner-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-banner-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0;
}

/* Responsive Footer Banner */
@media (max-width: 768px) {
    .footer-banner {
        padding: 16px 0;
    }
    
    .footer-banner-text {
        font-size: 12px;
    }
}

/* Reflet du soleil qui remonte en symétrie */
.sun-reflection {
    position: absolute;
    bottom: -20px; /* Position initiale en haut du conteneur */
    right: 600px;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.4); /* Opacité réduite */
    border-radius: 50%;
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.2);
    z-index: 1;
    will-change: transform;
    filter: blur(10px); /* Effet de flou */
}

.sun-reflection::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600%;
    height: 600%;
    border-radius: 50%;
    transform: translate(-33%, -33%);
    z-index: -1;
    background: #F57412;
    mix-blend-mode: color;
    opacity: 0.4; /* Opacité réduite */
    filter: blur(193.4px);
}

/* Responsive global pour les titres */
@media (max-width: 1200px) {
    h2 {
        font-size: 42px;
        line-height: 48px;
        
        strong {
            font-size: 58px;
        }
    }

    .main-title {
        font-size: 72px !important;
        line-height: 66px !important;
    }

    .treasure-title,
    .why-title,
    .shrimp-title,
    .testimonials-title,
    .order-title,
    .faq-title {
        font-size: 42px;
        line-height: 48px;
    }

    /* Réduction des textes */
    .subtitle,
    .treasure-content,
    .shrimp-text,
    .order-content,
    .testimonial-quote,
    .faq-answer {
        font-size: 15px;
        line-height: 1.4;
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 32px;
        line-height: 38px;
        
        strong {
            font-size: 46px;
        }
    }

    .main-title {
        font-size: 48px !important;
        line-height: 50px !important;
    }

    .treasure-title,
    .why-title,
    .shrimp-title,
    .testimonials-title,
    .order-title,
    .faq-title {
        font-size: 32px!important;
        line-height: 38px;
    }

    .reason-title {
        font-size: 18px;
    }

    .reason-description {
        font-size: 16px;
    }

    .faq-question {
        font-size: 18px;
    }

    /* Réduction des textes */
    .subtitle,
    .treasure-content,
    .shrimp-text,
    .order-content,
    .testimonial-quote,
    .faq-answer {
        font-size: 14px;
        line-height: 1.4;
    }

    .testimonial-quote {
        font-size: 16px;
    }

    .testimonial-author {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 28px;
        line-height: 34px;
        
        strong {
            font-size: 38px;
        }
    }

    .main-title {
        font-size: 45px !important;
        line-height: 50px !important;
    }

    .treasure-title,
    .why-title,
    .shrimp-title,
    .testimonials-title,
    .order-title,
    .faq-title {
        font-size: 28px!important;
        line-height: 34px;
    }

    .reason-title {
        font-size: 20px;
    }

    .reason-description {
        font-size: 16px;
    }

    .faq-question {
        font-size: 20px;
    }

    /* Réduction des textes */
    .subtitle,
    .treasure-content,
    .shrimp-text,
    .order-content,
    .testimonial-quote,
    .faq-answer,
    .why-texte {
        font-size: 15px;
        line-height: 1.3;
    }

    .testimonial-quote {
        font-size: 15px;
    }

    .testimonial-author {
        font-size: 13px;
    }
}

/* Style pour les pages simples */
.site-main .contenu {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.site-main .contenu .entry-content {
    width: 100%;
}

.site-main .contenu h1 {
    margin-bottom: 2rem;
}

.site-main .contenu p {
    margin-bottom: 1rem;
    line-height: 1.6;
}