/*

	Site internet JPA - POPUP RGPD
	Version : 1.1
	Site	: https://jpa.fr
	
	Theme 	: jpa 1.1
	Author	: Integration : Yann Lobry
	
*/


:root {
	--vert: #009ca3;
	--vert-fonce: #006468;
	--vert-hover: #00b7bf;
	--gris: #3e4e5e;
}


html.scroll-inactive { overflow-y: hidden; }

html.scroll-inactive.cc-masque-debloque {overflow: auto;}



#container-rgpd-fond {position: fixed;top:0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);z-index: 1200;display: none;}

#container-rgpd {width: 600px;height: 282px;position: fixed;top:50%;left: 50%;transform: translate(-50%,-50%);background-color: #fff;text-align: center;z-index: 1201;display: none;
-o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}

.rgpd-perso-open#container-rgpd {height: 482px;}

#sscontainer-rgpd {border: solid 1px rgba(0,0,0,0.12);
    position: absolute;
    top: 9px;
    left: 9px;
    right: 9px;
    bottom: 9px;
    padding: 37px 10px 0;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}
    
.rgpd-perso-open #sscontainer-rgpd {padding-top: 15px;}
    
#rgpd-part-un {margin-bottom: 20px;
-o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}

.rgpd-perso-open #rgpd-part-un {margin-bottom: 8px;}

#container-rgpd h2 {font-size: 2em;line-height: 1.2em;color: #1A1E23;font-weight: 300;margin-bottom: 10px;
-o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}

.rgpd-perso-open#container-rgpd h2 {margin-bottom: 1px;}

#container-rgpd p {font-size: 1.2em;line-height: 1.31em;color: #1A1E23;
-o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}
    
#container-rgpd p .note {font-size: 0.8em;    line-height: 1.2em;
    display: block;
    padding-top: 6px;}
    
#container-rgpd p .note a {-o-transition: all 0s;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;}

.rgpd-perso-open#container-rgpd #rgpd-part-un p {font-size: 1em;margin-bottom: 4px;}

.rgpd-perso-open#container-rgpd #rgpd-part-un p br.amodif {display: none;}

#container-bt-rgpd-first {padding-top: 19px;
-o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}

.rgpd-perso-open #container-bt-rgpd-first {padding-top: 3px;}

#container-rgpd button {    border: none;outline: none;
    background-color: #FBDE10;letter-spacing: 0.05em;
    color: #1A1E23;
    padding: 11px 9px 8px;
    font-size: 1.1em;
    margin: 0 5px;
    text-transform: uppercase;
    cursor: pointer;
    -o-transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
border-radius: 5px;}
    
#container-rgpd button:focus {outline: none;}

#container-rgpd button:hover {background-color: rgba(251,222,16,0.6);}

#container-rgpd button#rgpd-perso {background-color: #3e4e5e;color: #fff;}

#container-rgpd button#rgpd-perso:hover {background-color: #687d91;}

.rgpd-perso-open#container-rgpd button#rgpd-perso {opacity: 0.4;}



#container-rgpd .bt-fermer {    position: absolute;
    top: 0;
    right: 0;}

#container-rgpd .bt-fermer a:focus {border: none;outline:0;}

#container-rgpd .bt-fermer a {    height: 58px;
    width: 83px;
    display: inline-block;
    background-color: #fff;
    padding: 20px 0 0 52px;}

#container-rgpd .bt-fermer span.barre {width: 23px;
    height: 3px;
    background-color: #c2c7cb;
    transform: rotate(45deg);
    display: block;
    transform-origin: top center;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}

#container-rgpd .bt-fermer span.barre.deux {transform: rotate(-45deg);margin-top: -3px;
    margin-left: -1.5px;}

#container-rgpd .bt-fermer a:hover span.barre {transform: rotate(360deg);}


#rgpd-part-deux {    
    text-align: left;height: 0px;
    overflow: hidden;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;}
    
.rgpd-perso-open #rgpd-part-deux {height: 286px;}
    
#rgpd-part-deux ul {list-style-type: none;padding: 0;}

#rgpd-part-deux > ul {border: solid 1px rgba(0,0,0,0.12);padding: 5px 10px 7px;overflow-y: scroll;height: 244px;}

#rgpd-part-deux .cont-perso-un {float: left;width: 66%;padding-right: 10px;}

#rgpd-part-deux .cont-perso-deux {float: left;width: 34%;}

#rgpd-part-deux h3 {font-size: 1.5em;    border-bottom: solid 1px rgba(0,0,0,0.12);
    font-weight: 300;
    margin-bottom: 7px;padding-top: 15px;}
    
#rgpd-part-deux h3.first {padding-top: 0;}

#rgpd-part-deux h4 {font-size: 1.2em;    font-weight: 500;
    color: #3e4e5e;}
    
#rgpd-part-deux h4.avec-filet {    border-top: solid 1px rgba(0,0,0,0.12);
    margin-top: 7px;
    padding-top: 4px;}

#rgpd-part-deux p {font-size: 1.03em;color: #3e4e5e;}

#rgpd-part-deux p a,
#rgpd-part-deux p .txt-petit {font-size: 0.9em;}

#container-rgpd #rgpd-part-deux ul button {    font-size: 0.9em;
    margin: 0 0 0 6px;padding: 6px 9px 4px;opacity: 0.4;}
    
#container-rgpd #rgpd-part-deux ul button:hover {background-color: #FBDE10;opacity: 1;}
    
#container-rgpd #rgpd-part-deux ul button.thechoice {opacity: 1;cursor: default;}

#container-rgpd #rgpd-part-deux ul button.thechoice:hover {background-color: #FBDE10;}


#container-rgpd button#rgpd-perso-validation {float: right;
    margin: 8px 0 0 0;
    letter-spacing: 0.03em;}








.video-embed-field-responsive-video {position:static;}

.video-embed-field-responsive-video:after {
    display: none;
}

.video-embed-field-responsive-video .cookie-video-embed {position: relative;}

.video-embed-field-responsive-video .cookie-video-embed:after {
    content: '';
    display: block;
    padding-bottom: 56.25%;
}

body.sscookiesvideo-youtube .cookie-video-embed.youtube,
body.sscookiesvideo-vimeo .cookie-video-embed.vimeo {display: none;}


.lien-video-sscookies {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 12px;
    position: relative;
    padding-left: 1.5vw;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none !important;
}
.lien-video-sscookies:hover {}

.lien-video-sscookies:before {
    content: '';
    display: block;
    width: 0.8vw;
    height: 1vw;
    position: absolute;
    top: 0.2vw;
    left: 0;
    background: url(/themes/jpawg/images/bt-play.svg) no-repeat center center;
    background-size: contain;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.lien-video-sscookies:hover:before {left: 2px;}



body.sans-twitter .pave-twitter .container-timeline-twitter,
body.sans-twitter .pave-twitter h2,
body.sans-twitter .pave-twitter .icone-twitter {
    display: none;
}

#sans-cookie-twitter-autre-contenu {
    display: none;
}

body.sans-twitter #sans-cookie-twitter-autre-contenu {
    display: block;
}

body.sans-twitter #sans-cookie-twitter-autre-contenu > img {
    width: 100%;
}

body.sans-twitter .pave-twitter .sspave {
    padding: 0;
    background-color: #FBDE10;
}

#sans-cookie-twitter-autre-contenu > div {overflow: hidden;}

#sans-cookie-twitter-autre-contenu a {
    display: block;
    cursor: pointer;
    font-size: 23px;
    color: #1A1E23;
    letter-spacing: 0;
    line-height: 30px;
    font-weight: 600;
    font-size: 1.66em;
    line-height: 1.35em;
    padding: 2vw 2vw 1.9vw 9.3vw;
    position: relative;
}

#sans-cookie-twitter-autre-contenu a:before {
    left: 1.9vw;
    top: 1vw;
    content: '';
    display: block;
    position: absolute;
    background: transparent url(/themes/jpawg/images/logo-jpa-international-et-twitter.png) no-repeat center center;
    background-size: contain;
    width: 5.5vw;
    height: 10vw;
}

#sans-cookie-twitter-autre-contenu a:visited {
    color: #1A1E23;
}

#sans-cookie-twitter-autre-contenu a:hover {
    color: #1A1E23;
}

#sans-cookie-twitter-autre-contenu a span {
    position: relative;
}

#sans-cookie-twitter-autre-contenu a span:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0.4vw;
    right: -2.2vw;
    width: 1.3vw;
    height: 1.4vw;
    background: transparent url(/themes/jpawg/images/chevron-double-noir.svg) no-repeat center center;
    background-size: contain;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

#sans-cookie-twitter-autre-contenu a:hover span:after {
      right: -2.8vw;
}






@media screen and (min-width: 1315px) {
    
    body.sans-twitter .pave-twitter .sspave {
        padding: 0;
    }
    
    #sans-cookie-twitter-autre-contenu a {
        padding: 26px 26px 25px 122px;
    }
    
    #sans-cookie-twitter-autre-contenu a:before {
        left: 25px;
        top: 13px;
        width: 72px;
        height: 131px;
    }
    
    #sans-cookie-twitter-autre-contenu a span:after {
        bottom: 5px;
        right: -29px;
        width: 17px;
        height: 18px;
    }
    
    #sans-cookie-twitter-autre-contenu a:hover span:after {
          right: -37px;
    }
    
    .lien-video-sscookies {
        padding-left: 20px;
    }
    
    .lien-video-sscookies:before {
        width: 10px;
        height: 13px;
        top: 3px;
    }
    
}






@media screen and (max-width: 1314px) {
    
    .lien-video-sscookies {
        padding-left: 20px;
        font-size: 16px;
    }
    
    .lien-video-sscookies:before {
        width: 10px;
        height: 13px;
        top: 3px;
    }
    
}





@media screen and (max-width: 920px) {
    
    body.sans-twitter .pave-twitter .sspave {
        padding: 0;
    }
    
    #sans-cookie-twitter-autre-contenu a {
        font-size: 19px;
        padding: 18px 18px 17px 86px;
    }
    
    #sans-cookie-twitter-autre-contenu a:before {
        left: 17px;
        top:9px;
        width: 51px;
        height: 92px;
    }
    
    #sans-cookie-twitter-autre-contenu a span:after {
        bottom: 4px;
        right: -20px;
        width: 12px;
        height: 13px;
    }
    
}





@media screen and (max-width: 12px) {
    
    body.sans-twitter .pave-twitter .sspave {
        padding: 0;
    }
    
    #sans-cookie-twitter-autre-contenu a {
        font-size: 22px;
        padding: 26px 26px 25px 120px;
    }
    
    #sans-cookie-twitter-autre-contenu a:before {
        left: 25px;
        top:13px;
        width: 71px;
        height: 126px;
    }
    
    #sans-cookie-twitter-autre-contenu a span:after {
        bottom: 5px;
        right: -28px;
        width: 17px;
        height: 18px;
    }
    
}














@media screen and (max-width: 710px){
	#rgpd-part-deux .cont-perso-un {float: none;
    width: auto;
    padding-right: 0;
    margin-bottom: 5px;}
	#rgpd-part-deux .cont-perso-deux {float: right;width: auto;}
}

@media screen and (max-width: 675px) {
	#container-rgpd {width: 90%;}
}

@media screen and (max-width: 600px) {
	.rgpd-perso-open#container-rgpd h2 {z-index: 10;
    position: absolute;
    width: 100%;}
	.rgpd-perso-open#container-rgpd #rgpd-part-un p {padding-top: 34px;}
}

@media screen and (max-width: 600px) {
	#container-rgpd p .note br {display: none;}
}

@media screen and (max-width: 595px) {
	#container-rgpd {height: 338px;}
	#container-rgpd button#rgpd-perso {display: block;margin: 12px auto 0;}
	.rgpd-perso-open#container-rgpd {height: 528px;}
}

@media screen and (max-width: 585px) {
    
    #sans-cookie-twitter-autre-contenu a {
        font-size: 5em;
        padding: 4.6vw 1vw 4.6vw 24vw;
    }
    
    #sans-cookie-twitter-autre-contenu a:before {
        left: 5.5vw;
        top: 4vw;
        width: 13vw;
        height: 22vw;
    }
    
    #sans-cookie-twitter-autre-contenu a span:after {
        bottom: 0.6vw;
        right: -6.5vw;
        width: 4vw;
        height: 5vw;
    }
    
    #sans-cookie-twitter-autre-contenu a:hover span:after {
        right: -8vw;
    }
    
}

@media screen and (max-width: 560px) {
	.rgpd-perso-open#container-rgpd {height: 546px;}
}


#container-rgpd h2 br {display: none;}



@media screen and (max-width: 520px) {
	.rgpd-perso-open#container-rgpd h2 {line-height: 1.0em;}
	.rgpd-perso-open#container-rgpd h2 br {display: inline;}
	.rgpd-perso-open#container-rgpd #rgpd-part-un p {padding-top: 58px;}
	.rgpd-perso-open#container-rgpd {height: 570px;}
}

@media screen and (max-width: 500px) {
	#container-rgpd {height: 366px;}
	.rgpd-perso-open#container-rgpd {height: 570px;}
}

@media screen and (max-width: 490px) {
	#container-rgpd {height: 398px;}
	#container-rgpd button#rgpd-perso-validation {float: none;width: 100%;}
	.rgpd-perso-open#container-rgpd {height: 496px;}
	.rgpd-perso-open #rgpd-part-deux {height: 212px;}
	#rgpd-part-deux > ul {height: 170px;}
}

@media screen and (max-width: 450px) {
	#container-rgpd button#rgpd-perso-validation {letter-spacing: 0;
    font-size: 1em;}
}

@media screen and (max-width: 420px) {
	#container-rgpd {height: 456px;}
	.rgpd-perso-open#container-rgpd {height: 558px;}
	#container-rgpd #container-bt-rgpd-first button {display: block;margin: 0 auto 10px;width: 200px;}
	#container-rgpd button#rgpd-perso-validation {font-size: 0.9em;letter-spacing: -0.02em;}
	.rgpd-perso-open#container-rgpd #container-bt-rgpd-first button {margin-bottom: 5px;}
}






/*.sans-addtoany .container-bt-partage {left: -6.5vw;}
.sans-addtoany .container-bt-partage.clicked {left: 0;}
.sans-addtoany .resp980 .container-bt-partage {left: -64px;}
.sans-addtoany .resp980 .container-bt-partage.clicked {left: 0;}*/










