#splash {
    display: flex; align-items: center; justify-content: center;
    padding: 1em 3em;
}
#splash div { display: flex;
    width: 100%; aspect-ratio: 2.75/1;
    background: url(images/splash.jpg) center center no-repeat; background-size: cover; border-radius: 4em; 
}

.mainBlock { padding: 0 24em; }
#qui h2, #orga h2, #sites h2 { padding: 0 0.5em;}
.mainBlock .border-section { padding: 0 0 6em 2em; border-left: 3px solid var(--main-color); }

#qui { color: var(--main-color); padding: 0 8em 0 24em; }
#qui h2 { margin: 0 0 1.5em 0; }
#qui-content {
    gap: 2em;
}
#qui p { width: 30em; color: var(--main-text) }
#qui p.intro { width: 27em; color: var(--main-color); font-weight:500; margin-bottom: 1em; }
#qui a { text-decoration: none; font-weight: bold; color: inherit; }
#qui a:hover { text-decoration: underline; text-decoration-thickness: 3px; font-weight: bold; color: inherit; }
#qui a:before { display: inline-block; margin-right: 0.25em; }



#chiffrescle { background: var(--fifth-color-grad0); z-index: 0; }
.chiffre-title { width: 50%; text-align: center; margin: 0 auto; padding: 1em 0; }
#chiffrescle .figures {
    display: flex; flex: none; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    padding: 4em 8em 4em 6em;
}
#chiffrescle .figures.cajou-stat { background-color: var(--fifth-color-grad1); }
#chiffrescle .figures.cacao-stat { background-color: var(--fifth-color-grad2); }
#chiffrescle .figures .figure-row-name {
    align-items: center;
    font-weight: 500; line-height: 1; text-align: center;
    padding: .25em .6em;
    background-color: var(--fifth-color-grad0); border-radius: 1em;
}
#chiffrescle .figures .figure { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; }
#chiffrescle .figures .figure .chiffre { font-size: 8em; font-weight: 800; }
#chiffrescle .figures .figure .label { padding: 0 3em; }



#mission { position: relative; }
#mission .background {
    display: flex; flex: none; align-items: center; justify-content: space-between;
    height: 165em; overflow: hidden; z-index: -10; position: absolute; /*padding-top: 20em; left: 25%;*/
}
#mission .background span { width: 30%; transform: translateY(100%); }
#mission .background span img { width: 100%; transform-origin: center; }
#mission .background .left { margin-left: -4%; }
#mission .background .right { margin-right: -8%; }

#mission .foreground {
    /*display: flex; flex-direction: column;*/ align-items: center; gap: 5em;
    position: relative;
    min-width: 800px; width: 40%; padding: 4em 0; margin: 0 auto;
    text-align: center; 
}

#mission .foreground h2 { font-weight: 100; }
#mission .foreground .heavy-texts { color: var(--main-color); }

#mission .foreground #mission-description {
    /*display: flex; flex-direction: column;*/ gap: 2em;
}

#mission .foreground p {
    text-align: left;
}
#mission .foreground p.intro {
    font-weight: 500;
}

#mission .foreground #mission-kps {
    position: relative;
    margin-top: 5em;
    gap: 5em;
}

#mission .foreground #mission-kps .mission-kps-arrow {
    position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
    width: 2em;
}

#mission .foreground .mission-kp {
    position: relative;
    display: flex; justify-content: space-between;
    height: 18em;
}

#mission .foreground .mission-kp .icon-kps {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: 11em; max-height: 10em;
    transition: 0.2s;
}

#mission .foreground .mission-kp .icon-kps:hover {
    transform: translateX(-50%) scale(1.2);
    transform-origin: center center;
    transition: 0.2s;
}

#mission .foreground .mission-kp .icon-kps {
    transition: 0.2s;
    --svg-fill: var(--main-text);
}
#mission .foreground .mission-kp .icon-kps:hover {
    transition: 0.2s;
    --svg-fill: var(--main-color);
}

#mission .foreground .mission-kp p {
    width: 45%;
    padding-right: 4em;
}

#mission .foreground .mission-kp-title { align-self: flex-start; font-weight:500; }
#mission .foreground .mission-kp-desc { align-self: end; }







#transfo {
    overflow: visible;
    padding: 0 23em;
    background: var(--sixth-color-grad0); color: var(--reverse-text); 
}


#transfo .border-container {
    position: relative; 
    /*gap: 2em;*/
    padding: 0 2em 5em; margin-top: 5em;
    border-left: 3px solid var(--reverse-text);
}

#transfo .sticky-header {
    gap: 1em;
    width: 80%; padding-bottom: 20em;
    position: relative; top: unset; z-index: 0;
}
#transfo .sticky-header.is-sticky {
    position: sticky; top: 150px; z-index: 10;
}

#transfo .border-container .large-texts,
#transfo .border-container .medium-texts { font-weight: 500; }


#transfo .transfo-row {
    display: flex; gap: 2em;
    transform-origin: top left;
    transition: ease-in;
}

#transfo .transfo-row .transfo-item {
    position: relative; z-index: 0;
    width: 30em; height: 20em;
    align-items: center; justify-content: end;
    text-align: center;
}

#transfo .transfo-row .transfo-item img {
    position: absolute; bottom: 15%; z-index: -5;
    max-width: 20em; max-height: 15em; object-fit: scale-down;
}

#transfo .transfo-row .num {
    font-family: 'Corbert ExtraBold Wide', sans-serif; font-size: 6em; letter-spacing: -0.02em; line-height: 1;
 }
#transfo .transfo-row .num::after {
    font-size: 0.65em;
    content: "%";
    letter-spacing: initial;
}

#transfo .transfo-row .transfo-arrow {
    /*padding: 0 5em;*/
}
#transfo .transfo-row .transfo-arrow.reverse {
    transform: scaleX(-1);
}
#transfo .transfo-row .transfo-arrow img {
    width: 40em; height: 20em; margin: 0 10em;
    object-fit: scale-down;
}


#orga { background: var(--fourth-color); padding: 0 2em 0 24em; }
#orga h2 { margin: 1em 0 1.5em; }
#orga-content { /*display:flex; flex-direction:column;*/ gap:3em; }
#orga article { display: flex; flex: none; gap: 1em; margin-bottom: 6em; }
#orga article .num { width: 16em;; }
#orga article .num img { width: 100%; }
#orga article .logo { width: 20em; }
#orga article .logo img { width: 16em; filter: grayscale(0.3); opacity: 0.7;}
#orga article .texte { width: 24em; font-weight: 500; padding-left: 4em; }
#orga article:last-child { margin-bottom: 2em; }




#sites { background: var(--sec-color-grad2); padding: 8em 12em 0 24em; }
#sites h2 { margin-bottom: 1.5em;}
#sites .mapmonde { 
    display: flex; flex: none; height: 72em; width: calc( 100% + 10em ); margin-left: -15em; transform: translateY(-5em); 
    background: url(images/mapmonde/terre.png) left center no-repeat; background-size: contain; 
}
#sites .mapmonde .pins { flex: 1; position: relative; }
#sites .mapmonde .pins a { display: inline-block; width: 8em; aspect-ratio: 563/809; position: absolute; }
#sites .mapmonde .pins a img {
    content: url("images/mapmonde/pin_dark.svg");
    width: 100%; transform-origin:bottom center;
}
#sites .mapmonde .pins a img:hover {
    transform:scale(1.2);
    transition:0.2s ease;
}
#sites .mapmonde .pins a.clicked {
    content: url("images/mapmonde/pin_white.svg");
    transform:scale(1.2); transform-origin: bottom center;
}
#sites .mapmonde .pins a#france { top: 2.5em;  left: 27em; }
#sites .mapmonde .pins a#afrique { top: 22em; left: 23em; }
#sites .mapmonde .nfo { width: 40%; position: relative; }
#sites .mapmonde .nfo article { display: none; width: 100%; position: absolute; }
#sites .mapmonde .nfo article in {
    display: flex; flex: none; align-items: stretch;
    padding: 2em;
    background: var(--reverse-text);
    border-radius: 1em; gap: 4em;
}
#sites .mapmonde .nfo article .map { width: 17em; padding-left:1em; }
#sites .mapmonde .nfo article .map img { width: 100%; }
#sites .mapmonde .nfo article .texte { flex: 1; /*display: flex; flex-direction: column;*/ gap: 1.5em; }
#sites .mapmonde .nfo article .hide { display: none; }
#sites .mapmonde .nfo #site_france { top: 2.5em; }
#sites .mapmonde .nfo .pays, #sites .mapmonde .nfo .ville { font-weight:bold; }
#sites .mapmonde .nfo #site_afrique { top: 15em; }
#sites .mapmonde .nfo .close { text-align: right; width: 3em; padding-left: 0.5em; }
#sites .mapmonde .nfo .close a { display: inline-block; width: 1.5em; }
#sites .mapmonde .nfo .close img { width: 100%; }






#contactForm {
    display: flex; flex: none; justify-content: space-around;
    padding: 8em 12em 8em 22.5em;
    color: var(--reverse-text); background: var(--seventh-color-grad0);
    z-index: 0;
}
#contactForm .texte {
   /* display: flex; flex-direction: column; */gap: 2em;
    width: 40%;
}


#contactForm .form { width: 45%; /*font-size: 1.25em;*/ }

#contactForm .contactForm input:not([type="checkbox"]),
#contactForm .contactForm select,
#contactForm .contactForm textarea {
    border-bottom: 3px solid var(--reverse-text); color: var(--reverse-text);
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    /*font-size: 1.25em;*/
}

#contactForm .contactForm textarea {
    height: 7em;
}

#contactForm .contactForm input::placeholder,
#contactForm .contactForm textarea::placeholder {
    opacity: 1;
}

#contactForm .contactForm input:focus,
#contactForm .contactForm textarea:focus {
    outline: none;
    background-color: var(--reverse-text);
    color: var(--seventh-color-grad0);
}

#contactForm .contactForm option { color: var(--main-text); }
#contactForm .contactForm .accept dom a { border: 3px solid var(--reverse-text); }
#contactForm .contactForm .accept dom a.checked {
  background: var(--reverse-text);
}
#contactForm .contactForm .inline { color: var(--third-color); }

.send-button { margin-top: 0.5em; padding: .25em .75em; }



#partners { padding: 6em 12em 6em 24em; background: var(--main-color); color: var(--reverse-text); }
#partners h2 { margin-bottom: 1em; }
#partners .logos { display: flex; flex: none; align-items: center; justify-content: start; flex-wrap:wrap; row-gap: 1.5em; }
#partners .logos span { flex-basis: 13%; text-align: center; }
#partners .logos img { height: 5em; max-width: 9em; text-align: center; object-fit: scale-down; }