/*@font-face { font-family: "Nunito" ; src: url("../fonts/Nunito-Regular.ttf"); font-display:swap;  format("opentype")  }*/
:root {
  --main-green: #6fc56d; --main-orange: #ed8858; --main-red: #ed5858;
  --color-footer: #FFD000;  --color-txt-footer: black; 
  --color-txt: white;  --color-txt-secondary: #FFD000; --color-fond-zone: #1A1A1A;  --color-fond-card: #141414;
  --width-fond: 1728;  --height-fond: 8099;
  --font-title: "Bowlby One", cursive, monospace, sans-serif; --font-subtitle: "K2D", cursive, monospace, sans-serif;
  --font-txt: "Nunito", cursive, monospace, sans-serif;
}
/*LIBRARY*/
html { height: 100%; font-size: 100%;  }
body { height: 100%; max-width: 100%; background: black; color: var(--color-txt); overflow-y: scroll; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
* {position: relative;list-style: none; text-decoration: none; border: none; }
*, *::before, *::after {box-sizing: border-box; margin:0; padding:0;}
#containerMain { 
    background: url(../../ged/img/On_soccupe_de_tout.svg) 10% 90%, url(../../ged/img/fondStar.svg) left top; 
    background-size: 25%, cover; background-repeat: no-repeat, no-repeat; background-attachment: scroll, fixed;/* min-height: calc(100vw * var(--height-fond) / var(--width-fond) );*/ }
/*@media screen and (max-width: 1400px){ #containerMain { background-repeat: no-repeat, repeat;  } }*/
#accueil { background: url(../../ged/img/courbeHaut.svg) left 75%; 
           background-size: 100%; background-repeat: no-repeat; }
#section { background:  url(../../ged/img/instaWhite.svg) 5% 25%, url(../../ged/img/youtubeWhite.svg) 90% 30%, url(../../ged/img/tiktok.svg) 5% 72%, url(../../ged/img/twitterWhite.svg) 90% 80%, url(../../ged/img/fbWhite.svg) 5% 99%, url(../../ged/img/Tube1.svg) right 20%, url(../../ged/img/Tube2.svg) right 100%, url(../../ged/img/TubeGauche.svg) left 85%; 
           background-size: 100px, 100px, 90px, 70px, 70px, 40%, 30%, 40%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;  }
#page_PRIVATEACCESS  { min-height: 100vh; }
.formMsgEnd { position: fixed; margin-top: -50px; text-align: center; top: 0; left: 0; width: 100%; padding: 10px; z-index: 999; justify-content: center; animation: messageEphemere 5s linear 1; }
#mailOk, #msgOk{ background: var(--main-green);}#mailErreur, #msgErreur{ background: var(--main-red); }#mailNOk, #msgNOk{ background: var(--main-orange);}
@keyframes messageEphemere { from { margin-top: -50px; } 10% { margin-top: 0; } 90% { margin-top: 0; } to { margin-top: -50px;  }}
@-webkit-keyframes messageEphemere {from { margin-top: -50px; } 10% { margin-top: 0; } 90% { margin-top: 0; } to { margin-top: -50px;  }}
.etiquette { border: solid 1px white; padding: 2px 15px; margin: 0 5px; }
.invisibleHr { width: 100%; color: transparent; background: transparent; border: none; }

body, a, input, h3, h4, h5, h6 { font-family: var(--font-txt); color: white; }
h1 { font-family: var(--font-title); }
h2 { font-family: var(--font-subtitle); font-size: 250%; }
h3 { font-family: var(--font-subtitle); font-size: 220%; }
h4 { font-weight: bold; font-size: 120%; }
p, span { font-size: 20px; }
img { max-width: 94%; }
h1 b, h2 b, h3 b {color: var(--color-txt-secondary); } 
h1 i, h2 i, h3 i {color: var(--color-txt-secondary); font-size: 180%; font-style: normal; font-family: var(--font-title); } 

.w100 { width: 100%; max-width: 100%; }.w80 { width: 80%; max-width: 92vw; }.w60 { width: 60%; max-width: 92vw; }.w50 { width: 46%; max-width: 92vw; }.w40{ width: 40%; max-width: 92vw; min-width: 300px; }.w30{ width: 30%; max-width: 92vw; }
.w800px { width: 800px; max-width: 92vw; }.w700px { width: 700px; max-width: 92vw; }.w300px { width: 300px; max-width: 92vw; }.w500px { width: 500px; max-width: 92vw; }
.minw100 { min-width: 100%; }
.maxw900 { max-width: 900px; } @media (max-width: 1240px){ .maxw900 { width: 92vw; max-width: 92vw; } }
.maxw1200 { max-width: 1200px; } @media (max-width: 1240px){ .maxw1200 { width: 92vw; max-width: 92vw; } }
.minh700px { min-height: 700px; }
.margintb15px { margin: 15px 0; }
.marginl5px { margin-left: 5px; } .marginl5 { margin-left: 5vw; }
.margint10px { margin-top: 10px; } .margint30px { margin-top: 30px; }
.marginb15px { margin-bottom: 15px; } .marginb30px { margin-bottom: 30px; } .marginb5vh { margin-bottom: 5vh; } .marginb10vh { margin-bottom: 10vh; }
.margint50px { margin-top: 50px; } .margint100px { margin-top: 100px; } .margint10vh { margin-top: 10vh; }
.padding10vh { padding: 10vh 0; } .padding20vh { padding: 20vh 0; } .paddingCard { padding: 10px 2%; } .paddingb15vh { padding-bottom: 15vh; } .paddingb20vh { padding-bottom: 20vh; } .paddingb40vh { padding-bottom: 40vh; }
.paddingr30px { padding-right: 30px; }
.textalignr { text-align: right; } .txtcenter{ text-align: center;} .bold { font-weight: bold; }.autosautligne { white-space: pre-line; }
.footer { position:relative;text-align:center;margin:auto;background: var(--color-footer);padding: 10vh 0;color: var(--color-txt-footer);}.footer a { color: var(--color-txt-footer); font-weight:bold; }
.arrowReturn { position: absolute; bottom: 15px; right: 15px; padding-top: 4px; font-size: 90%; border-radius: 15px; background: var(--color-txt-footer); z-index: 9999; width: 40px; height: 40px; }.arrowReturn a { margin: 0; padding: 0; color: var(--color-txt); }.iArrowReturn {font-size: 180%; }
.slick-prev, .slick-next { width: 60px; height: 60px; z-index: 999999; }
.slick-prev { left: 0; } .slick-next { right: 0; }
.slick-prev:before {
    content: url('../../assets/pics/Fleche_Gauche.png'); border: none; opacity: 1;
}
.slick-next:before {
    content: url('../../assets/pics/Fleche_Droite.png'); border: none; opacity: 1;
}
#containerGalerieCPX { background:#189a41; padding: 5vh 5vw; max-width: 89vw; }
#sliderCPXSlider { max-width: 80vw; padding: 5vh 0; margin: auto; }
#sliderCPXSlider .slider { margin: 0 auto; }
#sliderCPXSlider .slick-slide > div { background: white; padding: 5px; box-shadow: 1px 1px 10px black; }
.slick-dots li button::before { color: #189a41 !important; }
input[type=text], input[type=number], input[type=date], input[type=tel], input[type=email], .input {
    height: 40px;    padding-left: 15px; border: 2px solid #1992BA; border-radius: 4px; 
}
video { height: auto; max-width: 100%; }
.imgPlay { all: unset;    cursor: pointer;    margin: auto;    margin-top: 16%;    width: 175px;}

/* OPTIONS FLEXBOX */
.flex{ display: flex; margin: auto;}.flexnoauto{ display: flex;}
.flexremplissage > div, .flexremplissage > a, .flexremplissage > label{ flex: 1 1 auto;}
.flexinput > label { width : 30%; min-width: 400px;}.flexinput > .control {width: 70%; min-width: 400px;}
.flexinput > .control > .color { }
.flexligne{flex-flow: row wrap;}.flexwrap{flex-wrap: wrap;}.flexlignenowrap{flex-direction: row;}
.flexcolonne{flex-flow: column wrap;}.flexcolonnenowrap{flex-direction: column;}
.flexauto > div{  margin: auto; }
.flexend{ justify-content: flex-end;}.flexcenter{justify-content: center;}.flexbetween{justify-content: space-between;}.flexaround{justify-content: space-around;}.flexeven{justify-content: space-evenly;}
.flexalignstart{ align-items: flex-start;}.flexalignend{align-items: flex-end;}.flexaligncenter{align-items: center;}
.itemflexalignstart{align-self: flex-start;}.itemflexalignend{align-self: flex-end;}.itemflexaligncenter{align-self: center;}.itemflexremplissage{align-self: stretch;}
/* FIN FLEX */
/* MODULE BUILDING */
.boxbuilding > div { overflow: hidden; margin: 5vh 15px; }
.boxbuilding h3 { font-size: 135%; }
.boxbuilding .w300 { width: 400px; }
.boxbuilding > div:first-child h3, .boxbuilding > div:nth-child(4) h3 { color: #189a41; }
.boxbuilding .building0 { }
.boxbuilding .building1 { margin-left: 5px; }
.boxbuilding .building2 { margin-left: 5px; }
.boxbuilding .building3 { margin-left: 5px; }
.boxbuilding .building4 { margin-left: 5px; }
.buildingPIC, .buildingPIC img { max-width: 100%; }
.buildingPIC img { width: 95%; }
.buildingTXT, .buildingH { text-align: left; margin-left: 15%; }
.building0 .buildingH, .building0 .buildingTXT  { width: 70%; }
.building1 .buildingH, .building1 .buildingTXT  { width: 70%; }
.building2 .buildingH, .building2 .buildingTXT  { width: 70%; }
.building3 .buildingH, .building3 .buildingTXT  { width: 70%; }
.building4 .buildingH, .building4 .buildingTXT  { width: 70%; }
@media (max-width: 830px){  
    .building0 .buildingH, .building0 .buildingTXT, .building1 .buildingH, .building1 .buildingTXT, .building2 .buildingH, .building2 .buildingTXT, .building3 .buildingH, .building3 .buildingTXT, .building4 .buildingH, .building4 .buildingTXT {  margin: auto; width: 100%; }
    .boxbuilding .building0, .boxbuilding .building1, .boxbuilding .building2, .boxbuilding .building3, .boxbuilding .building4 { margin-left: 0; width: 92%; }
    .buildingPIC, .buildingPIC img { margin: 5vh auto 5vh auto; }
    .boxbuilding .building4, .boxbuilding .building0 { margin-top: 0; }
}
/* FIN BUILDING */


/* CODE SPECIFIQUE */
#logo { height: 75px; }
#navsc_navprimary { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 5vh 3vw 0 3vw; }
#navsc_navprimary a:last-of-type { padding: 5px 15px; border: solid 2px white; border-radius: 15px; font-family: var(--font-title); }
#divh1a { width: 500px; max-width: 90%; }
#imgHeader { max-height: 80vh; transform: rotate(20deg); }
@media screen and (max-width: 830px){ #imgHeader { max-height: 60vh; width: auto; } }
#titleHeader { width: 870px; max-width: 94%; font-size: 330%; }
#divh1b { margin-top: 5vh; }
#intro p, #s1 p, #s2 p, #s3 p, #s4 p {display: flex; flex-flow: row wrap; } 
#intro span, #s1 span, #s2 span, #s3 span, #s4 span { margin-bottom: 15px; } #intro h2 { display: flex; flex-flow: column wrap; max-width: 94%; }
#s1 { margin-bottom: 10vh; }
#s1a h3, #s1a h4 { font-size: 120%; }
#s2Container::after { content: ''; position: absolute; top:0; left:0; background: url(../../ged/img/inWhite.svg) 95% 75%, url(../../ged/img/courbe_yellow.svg); background-repeat: no-repeat, no-repeat; background-size: 80px, 100%; background-position-y: 75%, 110%; min-height:100%; min-width:100%; }
#s2 { background: var(--color-fond-zone); box-shadow: 0px 0px 22px 1px rgba(255, 208, 0, 0.71); }
#s1a, #s1b, #s1c { width: 310px; min-height: 300px; max-width: 92%; margin: 2vh 2%; padding: 2px; border-radius: 25px; background: var(--color-fond-card); z-index: 99; box-shadow: 0 15px 25px 2px black; }
#s1a::before, #s1a::after, #s1b::before, #s1b::after, #s1c::before, #s1c::after { content: ''; position: absolute; top: 0; left: 0;  border-radius: 25px;
    background: linear-gradient(180deg, var(--color-txt-secondary) 0%, var(--color-fond-card) 85%, var(--color-fond-card) 100%);
    width: 100%;    height: 100%; 
    transform: scale(1.01);
    z-index: -1; }
#s1a h3, #s1b h4, #s1c h4 { border-top-left-radius: 25px; border-top-right-radius: 25px; background: var(--color-fond-card); padding: 45px 6% 0 6%;  }
#s1a p, #s1b p, #s1c p { background: var(--color-fond-card); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; padding: 0 6%; }
#s3, #s4 { margin-left: 15%; }
aside { min-height: 100vh; }
#sectionFoot { background: linear-gradient(180deg, rgba(255, 208, 0, 0) 0%, rgba(255, 208, 0, 0.5) 30%,  var(--color-footer) 100%); }
#sectionFoot h2 { font-size: 350%; }
#lien_linkCTA, #lien_linkCTAGO { font-size: 250%; padding: 5px 35px; border: solid 4px white; border-radius: 35px; font-weight: bold; z-index: 99; }
@media (min-width: 1436px){  
        #titleHeader { width: 870px; max-width: 94%; font-size: 270%; }                 
}
@media (max-width: 1385px){
    #s3, #s4 { margin: auto; }
    #titleHeader { text-align: center;    font-size: 230%;    width: 94%;    margin: -15px auto 10vh auto; }
    #s2Container::after {background-position-y: 80%, 100%; }
}
@media (max-width: 1229px), (orientation:portrait){  
    .w300px { max-width: 100%; }  
    .centerTxt { order: 99; padding-top: 10px; max-width: 90%; }
    #divh1a { order: 1; } #divh1b { order: 0; margin-top: 10vh; }
    .title h2 {color: rgb(215, 18, 18);}
    #s2Container::after { background-position-y: 88%, 95%; }
    #h3go { margin: 0 10%;}
    #section { background-position-y: 25%, 30%, 72%, 85%, 87%, 20%, 100%, 85%; }
    .padding10vh { padding: 5vh 0;} .padding20vh { padding: 10vh 0;}
}
@media (min-width: 1220px) and (max-width: 1500px){ 
    
}
@media (min-width: 1220px) { 
    
}
@media (min-width: 831px) and (max-width: 1300px){  
   
}
@media (max-width: 830px), (orientation:portrait){ 
    .w50, .w40 { width: 100%; } 
    .w50, .w80, #titlez3, #titlez4a, #titlez4b { margin: auto; }
    #imgHeader { transform: rotate(10deg); max-height: 50vh; width: auto; margin-bottom: 10vh; }
}
@media (max-width: 740px){ 
    a { text-align: center !important; }
    p, h2, h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 90% !important; min-width: 0 !important; }
    #s2Container::after { background-position-y: 95%, 95%; }
    
}
@media (max-width: 540px){ 
    #section { background-position-y: 25%, 30%, 10.8%, 85%, 87%, 20%, 100%, 85%; }
    #s2Container::after { background: none; }    
}

@media (max-width: 350px){ 
    #section { background-position-y: 25%, 30%, 120%, 85%, 87%, 20%, 100%, 85%; }
    #s2Container::after { background: none; }    
}

.navCPX { width: 100%; z-index: 99999; }
/*.navCPX a:last-child, .linkDiapo  { background: linear-gradient(90deg, #189a41 0%, #f1d075 30%, #f6de94 45%, #ffefd3 60%, #f6de94 75%, #f1d075 90%, #189a41 100%); border-radius: 10px; color: black;  }
.navCPX a:last-child:hover, .linkDiapo:hover { background: white; color: black; border:none; }*/
.navCPX img { width: auto; height: 150px;  }
.navCPX #navsc_navCPX83Team {     display: flex;    justify-content: center;    align-items: center; color: white; background: #189a41; }
.navCPX #navsc_navCPX83Team img { width: 20px; height: auto; margin-right: 20px;  }
.navCPX #navsc_navCPX83Team .social:first-of-type { margin-left: 3vw; }
.navCPX #navsc_navCPX83Team .social img { width: 50px; height: auto; margin: 5px; }
.navCPX #navsc_navCPX83Team a { color: white; }
.navCPX #navsc_navCPX83Team a:hover { color: black; }

.pushNavMobile, .pushUpMobile { display: none; }
@media (max-width: 1300px){    
    .pushNavMobile, .pushUpMobile { display: flex; position: fixed; top: 15px; left: 15px; cursor: pointer; z-index: 999999; }
    .navprimary { display: none; width: 100vw; height: 100vh; position: absolute;    padding: 10vh 2vw;    top: 0;    left: 0;    background: black;    z-index: 99999;    overflow-y: auto; }
    .navprimary ul { justify-content: center; }
    .navprimary ul li { width: 80% !important; margin: auto !important; text-align: center; margin: 15px auto !important; border: none;  }
    .navprimary ul li:last-of-type {margin: 0; }
    #navs_navCPX ul > a { display: block; text-align: center; }
}


/* LIBRARY FORMULAIRE */
.radioCaseV1 input[type=radio] { visibility: hidden; display: none; }
.radioCaseV1 input[type=radio]:checked + label,
.radioCaseV1 input[type=radio]:not(:checked) + label{
	padding: 20px;	letter-spacing: 1px;	margin: 5px 5px; text-align: left;
	border-radius: 4px;	overflow: hidden;	cursor: pointer;	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.radioCaseV1 input[type=radio]:not(:checked) + label{
	background-color: #e7e7e7;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.radioCaseV1 input[type=radio]:checked + label{
    background-color: #003333; color: white;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.radioCaseV1 input[type=radio]:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

#temoins { display: none; }