/* ----------------------------------------------
                     Initialise 
-------------------------------------------------*/
.ro-lp-body{
    display: flex;
    flex-direction: column;
    margin: var(--ro-space-120);
    gap: var(--ro-space-120);  
}


/* --- Tablette : jusqu'à 1024px --- */
@media (max-width: 1024px) {

    .ro-lp-body{
        margin: var(--ro-space-32);
        gap: var(--ro-space-56);  
    }

}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {

    .ro-lp-body{
        
        margin: var(--ro-space-16);
        gap: var(--ro-space-48);  
    }
}



/* ----------------------------------------------
                    z - index 
-------------------------------------------------*/

/* --- all containers --*/
.ro-lp-section{
    position: relative;
    gap: var(--ro-space-32);
}

/* --- all bubbles bg --*/
.ro-bg-position{
    position: absolute;
    z-index:0;
    pointer-events: none;
}

.ro-top-position figure{
    margin: 0;
}
    

/* --- all containts --*/
.ro-top-position{
    position: relative;
    z-index:1;
}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {

    .ro-lp-section{
    gap: var(--ro-space-12);
    }
}

/* ----------------------------------------------
                   BUBBLE BG 
-------------------------------------------------*/

/* hero */
.ro-bubble-yellow{
    height:auto;
    right:0; /* right */ 
    top:0;
    width: 85%;
}

/* benefice */
.ro-bubble-green{
    inset: 0; /* center */
    height:auto;
    top:350px;
    width: 100%;
}

/* exp bottle */
.ro-bubble-bottle{
    inset: 0; /* center */
    height:auto;
    top:150px;
    width: 100%;
}

/* exp check */
.ro-bubble-check{
    right:0; /* right */ 
    height:auto;
    top:650px;
    width: 100%;
}

/* ----------------------------------------------
                   Hero 
-------------------------------------------------*/

.ro-lp-hero-full-container{
    display: flex;
    align-items: stretch;
}

/*left*/
.ro-lp-hero-container_left{
    width:70%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap:var(--ro-space-36);
}

h1.ro-lp-h1{
    font-family: var(--ro-font-body);
    font-size: var(--ro-font-size-head-hero);
    font-weight: var(--ro-font-weight-semB);
}

p.ro-lp-hero-subtitle{
    font-family: var(--ro-font-heading);
    font-size: var(--ro-font-size-head-M);
    font-weight: var(--ro-font-weight-semB);
}

p.ro-lp-p{
    font-size: var(--ro-font-size-l);
    font-weight: var(--ro-font-weight-regular);
    line-height: var(--ro-line-height-l);
}

p.ro-lp-p-s{
    font-size: var(--ro-font-size-m);
    font-weight: var(--ro-font-weight-regular);
    line-height: var(--ro-line-height-base);
}

p.ro-lp-p > span, p.ro-lp-s > span{
    font-weight: var(--ro-font-weight-semB);
}


.ro-lp-cta-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--ro-space-36);
}

/*right*/

.ro-lp-hero-container_right{
    width:30%;
    display: flex !important;
    align-items: flex-end !important;
    
}

.ro-lp-hero-ringo img{
    
    height: 80% !important;
    width: auto;
    /* max-width: 100%; */
    object-fit: contain;
    /* display: block; */
}

/* --- Tablette : jusqu'à 1024px --- */
@media (max-width: 1024px) {
    h1.ro-lp-h1{
        font-size: var(--ro-font-size-head-L);
    }

    p.ro-lp-hero-subtitle{
        font-size: var(--ro-font-size-head-S);
    }

    p.ro-lp-p{
        font-size: var(--ro-font-size-m);
    }

    p.ro-lp-p-s{
        font-size: var(--ro-font-size-s);
    }

}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {

    h1.ro-lp-h1{
        font-size: var(--ro-font-size-head-M);
    }
    p.ro-lp-hero-subtitle{
        font-size: var(--ro-font-size-l);
    }

    p.ro-lp-p{
        font-size: var(--ro-font-size-m);
    }

    p.ro-lp-p-s{
        font-size: var(--ro-font-size-s);
    }

}

/* --- Mobile : jusqu'à 425px --- */
@media (max-width: 425px) {

     h1.ro-lp-h1{
        font-size: var(--ro-font-size-head-S);
    }
    p.ro-lp-hero-subtitle{
        font-size: var(--ro-font-size-md);
    }

    p.ro-lp-p{
        font-size: var(--ro-font-size-s);
    }

    p.ro-lp-p-s{
        font-size: var(--ro-font-size-xs);
    }

    .ro-lp-hero-full-container{
        flex-direction: column;
    }

    .ro-lp-hero-container_left{
        width:100%;
    }

    .ro-lp-hero-container_right{
        justify-content: center;
        align-items: center !important;
        width:100%;
    }

    .ro-lp-hero-ringo{
        width: 50% ;
    }

    .ro-lp-cta-container{
        flex-direction: column;
        justify-content: center;
        width: 100%;
        gap: var(--ro-space-12);
    }
}

/* ----------------------------------------------
                   Problematique 
-------------------------------------------------*/
/* ----------------------------------------------
                   Card 
-------------------------------------------------*/

/* section */
.ro-quote > img{
    height: var(--ro-size-20);
    width: auto;
}


/* section */

.ro-cards-group{
    display: flex; 
    align-items: stretch;
    gap : clamp(24px, 4vw, 60px);
}

/* element */

.ro-card-bg{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 0; /* grow shrink basis */
    padding: var(--ro-space-24);
    border-radius: var(--ro-radius-8);
    min-width: 0;     
    min-height: 0; 
    overflow: hidden; 
} 


/* card content */

.ro-card-bg figure{
    display: flex;
    justify-content: center;
}

.ro-card-bg.is-layout-flex{
  
  align-items: stretch !important;
}

.ro-card-bg > figure,
.ro-card-bg > .ro-card-info-container{
  min-width: 0;
}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {
    .ro-cards-group{
        flex-direction: row !important;
        padding: 0;
    }

    .ro-card-bg{
    flex: 0 0 auto;
    align-items: center;
    padding: var(--ro-space-24);
    width: 30%;
    }

    .ro-card-bg > figure{
    flex: 0 0 30%;
    margin: 0;
    }

    .ro-card-bg > .ro-card-info-container{
        flex: 1 1 auto;
        justify-content: center;
    }

}

/* --- Mobile : jusqu'à 425px --- */
@media (max-width: 425px) {
    .ro-card-bg{
        width: 100%;
        padding: var(--ro-space-12);
    }

    .ro-card-bg.is-layout-flex{
        align-items: center !important;
    }

     .ro-lp-card-img{
        justify-content: center;
        width: 60%;
    }

}



/* ----------------------------------------------
                   Citation 
-------------------------------------------------*/
.ro-citation-group{
    width:60%;
    gap: var(--ro-space-12);
    justify-content: center;

}

.ro-citation-img-contenair{
    width:20%;
}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {
    .ro-citation-container{
        flex-direction: row;
        gap: var(--ro-space-0);
    }

    .ro-citation-group{
        width:60%;
    }

}

/* --- Mobile : jusqu'à 425px --- */
@media (max-width: 425px) {
    .ro-citation-container{
        flex-direction: column;
    }

    .ro-citation-img-contenair{
        width:40%;
    }

}


/* ----------------------------------------------
                   BENEFICES 
-------------------------------------------------*/

.ro-screen-graphite{
    height : auto;
    width: 75%;
}

.ro-card-benef-container{
    gap: var(--ro-space-24);
}

.ro-card-benef{
    padding: var(--ro-space-24);
    border-radius: var(--ro-radius-8);
    width: fit-content;
}

.ro-cards-benef-group{
    display: flex; 
    gap : clamp(24px, 4vw, 60px);
    padding: 0 var(--ro-space-48);
}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {

    .ro-card-benef-container{
    gap: var(--ro-space-12);
    }

    .ro-cards-benef-group{
        padding: 0 var(--ro-space-24);
    }

}

/* --- Mobile : jusqu'à 425px --- */
@media (max-width: 425px) {
    .ro-screen-graphite{
        width: 100%;
    }

    .ro-cards-benef-group{
        padding: var(--ro-space-12);
        flex-direction: column;
    }

    .ro-card-benef-container{
        flex-direction: row !important;
    }

    .ro-benef-text-group  {
        width : 100%;
        justify-content: space-between;
        gap: var(--ro-space-12);
        align-items: flex-start !important;
    }


    .ro-benef-text-group > .ro-lp-p {
        text-align: start;
    }

}

/* ----------------------------------------------
                   EXPERIENCES 
-------------------------------------------------*/
.ro-section-exp-group{
    display: flex !important; 
    gap : clamp(0px, 4vw, 0px);
    padding: 0 var(--ro-space-48);
}

.ro-bloc-exp{
    padding: var(--ro-space-24);
    width: 80%; 
    gap : var(--ro-space-24);
}


.ro-exp-text-group{
    display: flex;
    justify-content: center;
    padding:var(--ro-space-24);
    width: 40%;
    border-radius: var(--ro-radius-8);
    aspect-ratio: 1/1;
}

.ro-exp-text-bloc{
    justify-content: space-between;
}

.ro-exp-text-bloc > .wp-block-columns{
    width: 100% ;
}
    
.ro-exp-text-bloc > .wp-block-column{
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.ro-screen-mobil{
    display: flex;
    justify-content: center;
    width: 30%;
}



.ro-lp-icon{
    display: flex;
    justify-content: center;
    font-size: var(--ro-size-40) !important;
}

.ro-lp-icon-papaw{
    color: var(--ro-papaw-300) !important;
}

.ro-lp-icon-champ{
    color: var(--ro-champ-300) !important;
}

.ro-lp-icon-timb{
    color: var(--ro-timb-300) !important;
}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {
    .ro-section-exp-group{
        display: flex !important; 
        gap : clamp(0px, 4vw, 0px);
        padding: 0 ;
    }

    .ro-bloc-exp{
        width: 100%; 
        gap : var(--ro-space-24);
        padding: 0;
    }

    .ro-exp-text-group{
        padding:var(--ro-space-12);
        width: 30%;
    }
}

/* --- Mobile : jusqu'à 425px --- */
@media (max-width: 425px) {

    .ro-exp-text-group{
        width: 50%;
    }

}

/* --- Mobile : jusqu'à 375px --- */
@media (max-width: 375px) {
    .ro-section-exp-group{
        padding: 0 ;
        gap:var(--ro-space-12);
    }

   

    .ro-exp-text-group{
        width: 50%;
        aspect-ratio: auto;
    }
    .ro-lp-icon{
        font-size: var(--ro-size-24) !important;
    }

}

/* ----------------------------------------------
                   Join us
-------------------------------------------------*/

.ro-lp-granny-ringo {
    width: 50%;
    height: auto;
}





/* ----------------------------------------------
                   Footer 
-------------------------------------------------*/

/* Footer Blocksy visible UNIQUEMENT sur la landing */
body:not(.page-slug-landing-page) #footer,
body:not(.page-slug-landing-page) footer.ct-footer,
body:not(.page-slug-landing-page) .ct-footer {
  display: none !important;
}

/* Si bloc en bas de page uniquement sinon code mort à supprimer

body:not(.page-slug-landing-page) #main-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
} */