/* Couleurs : 

Voir commun.css

 */
 

/* PAGES PHASES --------------------------------------------------------------------- */

#cadre-zone-contextuelle{
	padding-left: 0;
	padding-right: 0;	
}

.div-title-zone-contextuelle{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	min-height: 3.75em;
}
.div-title-zone-contextuelle h2{
	font-family: inherit;
	font-size: 1.5em;
	font-weight: 700;
	color : #3d566e;
	width: 100%;
	margin-bottom: 0;
}

.div-title-zone-contextuelle button{
    min-width: 1.875em;
    height: 1.875em;
    background-image: url(../images/Pictogramme/picto-close.svg);
    background-size: 100% 100%;
    position: absolute;
    right: 1.25em;
    border: 0;
    background-color: transparent;
}

.div-title-zone-contextuelle button:hover{
    opacity: 0.8;
    transition: .3s;  
    cursor: pointer;
}

.button-video{
    background: 0;
    border: 0;
    color: #3D566E;
    font-weight: 700;
}

.button-video:hover{
    cursor: pointer;
}

#modal-video-parcoursup2 iframe,
#modal-video-parcoursup3 iframe {
    width: 100%;
    height: 29.375em;
    position: absolute;
    top: 0;
    left: 0;
}

/* MESSAGE FLASH ----------------------------------------------------------------------------- */

.div-message-flash{
	min-height : 40px;
	height: auto;
	padding-top: 0.3125em;
	padding-bottom: 0.3125em;
    display: flex;
    align-items: center;
}

.text-message-flash{
	color: white;
	font-size: 0.875em;
	font-weight: 600;
    margin: 0;
}
.text-message-flash a{
	color: white;
	text-decoration: underline;
}


/* BLOCS AFFICHAGE TEXTE ---------------------------------------------------------------------*/

.cadre-zone-blocs{
	padding-left: 0;
	padding-right: 0;
	height: auto;
}

.div-zone-blocs{
    color : #3D566E; /* blue */
    z-index: 100;
    padding-left: 0;
    padding-right: 0;
}

.bloc-phase{
	display: flex;
    position: relative;
    text-align: center;
    min-height: 20.625em;
}
#slider4 .bloc-phase{
	min-height: 25em;
}
#slider4 .bloc-phase:nth-child(1) .bloc-row{
	padding: 0 1.5625rem 0 1.5625rem;
}
#slider4 .bloc-phase:nth-child(2) .bloc-row{
	padding: 0 0.9375rem 0 0.9375rem;
}
#slider4 .bloc-phase:nth-child(3) .bloc-row{
	padding: 0 1.5625rem  0 1.5625rem ;
}
.bloc-phase .bloc-row ul {
    text-align: center;
    padding: 0;
    list-style: none;
}
.bloc-phase .bloc-row ul > li{
    margin: 0 0 0.4375em 0;
}
.bloc-phase .bloc-row > div:nth-child(1){
    margin-top: 0.3125em;
    line-height : 5;
    min-height : 5em;
}
.bloc-phase .bloc-row > div:nth-child(1) > img{
    min-height : 5em;
    min-width : 5.1875em;
}
.bloc-phase .bloc-row a:not(.btn-bloc-phase-couleur){
	padding-top: 1.25em;    
}
.bloc-phase .bloc-row a .lien-fond-bleu{
	padding: 0px 5px;
    box-shadow: inset 0 -2.5625em 0 0 #3d566e;
    color: white;
}

.bloc-phase .bloc-row .div-btn-bloc-phase-couleur{
	font-family : Arial !important;
    min-height: 4.0625em;
    line-height: 3.437;
    white-space: nowrap;
}
.bloc-phase h2{ 
	line-height: 1.25;
}
.bloc-phase p{
	font-weight: 700;
	font-size: 1.25em;
	line-height: 1.25;
}
.bloc-phase a{
	color : #3D566E;
	font-size: 1em;
	font-weight: 700;
}

.arrow-overlay{
 	position: absolute;
    left: 22.8125em;
    top: 7.5em;
    z-index: 10;
}

.link-bloc-phase{
	color : #3d566e; /*blue*/
	font-size: 0.8125em;
	font-weight: 700;
}

.btn-bloc-phase-couleur{
	color : #3d566e; /*blue*/
	font-size: 1em;
	font-weight: 700;
	border: 0.25em solid #E36A4C;
	border-radius: 0.3125em;
	padding: 0.5em;
}

.img-arrow{
	position: absolute;
    right: 0;
    top: 36%;
}

.div-arrow-img{
	display: flex;
	min-width: 100%;
	min-height:auto;
	justify-content: flex-end;
}

.picto{
    min-width: 3.125em;
    margin-bottom: 1em; 
}

.picto2{
    min-width: 3.125em;
    margin-bottom: 1em;
}

.div-zone-blocs-full-width{
	min-height : 22.125em;
	padding : 0.9375em 0.9375em 0 0.9375em;
	text-align: center;
	background-color: #FDEAE6 ; /*orange clair*/
	position:relative;
}
.div-zone-blocs-full-width a{
	color : #3D566E;
	text-decoration: underline;
	cursor: pointer;
}

.div-zone-blocs-full-width ul{
	list-style: none ;
}

.div-zone-blocs-full-width > div:nth-child(1){
	padding-top : 0;
}
.div-zone-blocs-full-width ul li{
	font-weight: 500;
	line-height: 1.25;
	margin-top: 0.75rem;
}
.div-zone-blocs-full-width ul li.font-weight-bold{
	font-weight: 800;
}

.size-20{
    font-size: 	1.25em;
}

#slider1, #slider2, #slider3, #slider4{
    width: 100%;
    background: #F2F6F7;
}

/** RESPONSIVE PAGES PHASES -------------------------------------------------------------------------**/

@media (max-width: 1283px) {
	.bloc-phase{
		min-height: 22.8125em;
	}
}

@media (max-width: 1266px) {
	.bloc-phase{
		min-height: 22.5em;
	}
	.bloc-phase .bloc-row > div:nth-child(1){
	    margin-top: 1.875em;
	}
	.arrow-overlay{
	 	position: absolute;
	    left: 22.8125em;
	    top: 5.9375em;
	    z-index: 10;
	}
	.div-zone-blocs-full-width{
		min-height: 23.75em;
	}
}
@media (max-width: 1210px) {
	.bloc-phase{
		min-height: 23.75em;
	}
}
@media (max-width: 1150px) {
	.bloc-phase {
		min-height : 24.375em;
	}
	.bloc-phase .small-text{
	   font-size: 0.9375em;
	}
}
@media (max-width: 1085px) {
	.bloc-phase {
		min-height : 25em;
	}
}

@media (max-width: 1029px) {
	.bloc-row{
		padding-right: 0.1875em;
	}
	.bloc-phase{
		min-height: 25.625em;
	}
}
@media (max-width: 991px) {
    #main{
    	padding-bottom: 0;
    }
    #slider4, #slider3, #slider2, #slider1{
        margin-bottom: 0.9375em;    
    }
    #div-zone-contextuelle-cadre{
    	padding-bottom: 0;
    	margin-left: 0;
    	margin-right: 0;
    	min-width: 100%;
    }
    #div-zone-contextuelle-gauche{
    	padding-left: 1.25em;
    }
    .div-title-zone-contextuelle h2{
    	font-size: 1em;
    }
    .bloc-phase{
		padding-top: 0;
		padding-left : 0;
		padding-right : 0;
		min-height: 21.875em;
	}
	.bloc-row{
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	.bloc-phase .bloc-row > div:nth-child(1){
	    margin-top: 0 !important;
	}
	.bloc-phase .bloc-row > div:nth-child(1) > img{
	    min-height : 2.1875em;
	    min-width : 2.25em;
	}
	.bloc-phase .bloc-row > div:nth-child(3){
	    margin-bottom: 0 !important;
	}
	.bloc-phase p{
		font-weight: 700;
		font-size: 0.75em;
		line-height: normal;
	}
	.bloc-phase p.small-text{
		font-size: 0.75em !important;
	}
	.bloc-phase a{
		color : #3D566E;
		font-size: 0.875em;
		font-weight: 700;
	}
	.bloc-phase a.btn-bloc-phase-couleur{
		font-size: 0.875em !important;
	}
	.bloc-phase ul > li{
		font-size: 0.75em;
	}
    .div-zone-blocs-full-width{
		min-height: 26.25em;
	}
	.div-zone-blocs-full-width{
    	min-height: 19.25em !important;
    }
    .div-zone-blocs-full-width p{
    	font-size: 0.8125em;
    }
    .div-zone-blocs-full-width ul > li{
    	font-size: 0.75em;
    }
	.img-arrow{
		top: 29%;
		right : -12px;
	}
    #slider3 .img-arrow{
        top: 26%;
    }
    #slider4 .img-arrow{
        top: 38%;
        right: -6%;
    }
	.div-tuile-cadre span{
		font-size: 1.25em;
	}
	.div-tuile-cadre-overlay-arrow{
		height: 40px;
		width: 40px;
		line-height: 40px;
		right: 4%;
	}
    #slider4 .bloc-phase:nth-of-type(2){
        padding-left: 1.875em;
        padding-right: 1.875em;
    }
    
}

@media (max-width: 767px) {
    .bloc-phase{
	    min-height: 17.5em;
	}
	#slider4 .bloc-phase{
		min-height: 25em;
	}
	.bloc-phase .bloc-row > div:nth-child(1) > img{
	    min-height : 2.5em;
	    min-width : 2.5625em;
	}
	.bloc-phase p,
	.bloc-phase p.small-text,
	.bloc-phase a,
	.bloc-phase a.btn-bloc-phase-couleur{
		font-size: 1em;
	}
	.div-zone-blocs-full-width{
		min-height: 21rem !important;
	}
	.img-arrow{
        top: auto;
		bottom: 10;
        right: 0;
        left: 0;
        transform: rotate(90deg);
	}
    #slider1 .img-arrow{
        bottom: 0;
    }
    #slider2 .img-arrow{
        bottom: 3%;
    }
     #slider3 .img-arrow{
     	top : auto;
        bottom: 8%;
    }
     #slider3 .bloc-phase:nth-of-type(2) .img-arrow{
     	top : auto;
     	bottom: -20%;
    }
    #slider3 .bloc-phase:nth-of-type(3){
       padding-top: 7.1875em;
    }
    #slider4 .img-arrow{
     	top : auto;
        bottom: 15%;
        right: 2%;
    }
	.div-tuile-cadre span{
		font-size: 	1.25em;
	}
	.div-tuile-cadre-overlay-arrow{
		min-height: 40px;
		min-width: 40px;
		line-height: 40px;
		right: 4%;
	}
	
}

@media (max-width: 599px) {
    .bloc-phase{
	    min-height: 19.375em !important;
	    padding-top: 0.625em;
	}
	.bloc-phase p{
		font-size: 	1.25em;
	}
	.bloc-phase a{
		ffont-size: 1em;
	}
	 .div-zone-blocs-full-width{
		height: 100% !important;
	}
	.div-zone-blocs-full-width .font-weight-bold{
		font-size: 0.875rem;
	}
	.div-zone-blocs-full-width ul{
		padding-left: 0;
	}
	.div-zone-blocs-full-width li{
		font-size: 0.875em;
	}
	
    #slider4 .img-arrow{
        bottom: -4%;
    }
	 #slider4 .bloc-phase:nth-of-type(2) .img-arrow{
     	bottom: -6%;
    }
}

@media (max-width: 435px) {
	.div-title-zone-contextuelle h2.title-zone-contextuelle-left{
		text-align: left;
		padding-left: 10%;
	}
	 #slider4 .bloc-phase:nth-of-type(1) .img-arrow{
     	bottom: -6%;
    }
}
@media (max-width: 415px) {
	.div-title-zone-contextuelle h2.title-zone-contextuelle-left{
		text-align: left;
		padding-left: 6%;
	}
}
@media (max-width: 400px) {
	.div-title-zone-contextuelle h2.title-zone-contextuelle-left{
		text-align: left;
		padding-left: 3%;
	}
}