@import url(https://fonts.bunny.net/css?family=alumni-sans:300,700|poppins:500,700,900);

:root{
    --color-white: #ffffff;
    --color-blue: #000b6d;
    --color-lightblue: #00bdff;
    --color-middleblue: #499dda;
    --color-yellow: #ffcd6d;
    --color-red: #c70613;
    --color-grey: #a9acc3;
}

body{
    font-family: 'Alumni Sans', sans-serif;
}

.popup{
    display: none;
}

.page{
    position: relative;
	background-repeat: no-repeat;
	background-position: top center;
    display: none;    
    /*min-height: calc(100vh - 75px);*/
}

.page__inner{
	position: relative;
	width: 1170px;
    margin: auto;
}

.page--visible{
    display: block;
}

.logo{
	position: absolute;
}
.cta{
	font-family: 'Alumni Sans', sans-serif;
    display: inline-block;
    background-color: var(--color-red);
    color: var(--color-white);
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 700;
    padding: 0.2em 1em;
	transition: all 0.2s ease-in-out;
}

.cta:hover{
	transform: scale(1.15);
	transform-origin: center center;
}

.page--1{
    position: relative;    
    background-color: var(--color-blue);
    height: 810px;
    color: var(--color-white);
}

.slider {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 770px;
}

.slider::after{
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: top center no-repeat;
    background-image: url(../images/page-1_masque.png);
}

.slider-track {
    display: flex;
    width: 200%;
    animation: slide 10s ease-in-out infinite alternate;
}

.slider-track__image {
    background: top center no-repeat;
    height: 479px;
    width: 100%;
}

.slider-track__image--garcons {
    background-image: url('../images/slider_hommes_1170.jpg');
}

.slider-track__image--filles {
    background-image: url('../images/slider_femmes_1170.jpg');
}

/* Animation avec pauses */
@keyframes slide {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(0); }      /* Pause image 1 */
    60%  { transform: translateX(-50%); }   /* Transition */
    100% { transform: translateX(-50%); }   /* Pause image 2 */
}

.page--1__bloctitre{
    position: absolute;
    top: 400px;
    left: 344px;
    color: var(--color-blue);
    font-family: 'poppins', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.1rem;
    transform: rotate(-1deg);
    line-height: 1.25;
    letter-spacing: 0.5px;
}

.page--1__soustitre{
    font-weight: 500;
    font-size: 1.9rem;
    position: relative;
    left: 0.2rem;
}

.page--1__bloctexte{
    position: absolute;
    top: 551px;
    left: 0;
    right: 0;
    font-weight: 700;
    font-size: 1.7rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.page--1__texte--gros{
    font-size: 2.1rem;
    letter-spacing: 1.5px;
    position: relative;
    top: -4px;
    left: -5px;
}

.page--1__texte--tresgros{
    color: var(--color-yellow);
    font-size: 3.2rem;
    letter-spacing: 2.5px;
}

.page--1__texte--tresgros sup {
	vertical-align: text-top;
	font-size: 2rem; }

.page--1__reglement{
    position: absolute;
    top: 40px;
    right: 110px;
    font-size: 1.2rem;
}

.page--1__cta-outer{
	position: absolute;
	left: 0;
	right: 0;
    top: 660px;
	text-align: center;
	
}

.page--1__cta{
	margin: auto;
    font-size: 2rem;    
}

.page--1__organisateur{
    position: absolute;
    top: 750px;
    left: 0;
    right: 0;
    font-family: 'poppins', sans-serif;
    text-align: center;
    font-size: 0.7rem;
}

.page--2{
    background-image: url(../images/page-2.jpg);
    background-color: var(--color-lightblue);
    height: 750px;
    padding-top: 75px;
    text-align: center;
}

.page--2__titre{
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-white);
    border-top: solid 1px var(--color-white);
    border-bottom: solid 1px var(--color-white);
    width: 710px;
    margin: 0 auto 0.5rem;
    padding: 0.3em 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.page--2__texte{
    color: var(--color-blue);
    font-family: 'poppins', sans-serif;
    font-weight: 500;    
    width: 710px;
    margin: 0 auto 50px;
    line-height: 1.2;
}

.page--2__etapes{
    display: flex;
    justify-content: space-around;
    padding: 220px 47px 80px;
}

.etape{
    width: 30%;
}

.etape__titre{
    color: var(--color-white);
    font-weight: 700;    
    text-transform: uppercase;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1.5px;
}

.etape__texte{
    color: var(--color-blue);
    font-family: 'poppins', sans-serif;
    font-weight: 500;    
    font-size: 0.7rem;
}

.page--2__cta{
    font-size: 1.8rem;
    text-transform: uppercase;
}

.page--3{
    background-image: url(../images/page-3.jpg);
    background-color: var(--color-blue);
    padding: 40px 0 80px;
    color: var(--color-white);
}

.coquillette{
	position: absolute;
}

.visu_appareil,
.visu_ballon,
.visu_drapeau {
	position: absolute;
}



.page--3__titre{
    text-align: center;
    font-weight:700;
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page--3__soustitre{
    text-align: center;
    font-weight:700;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

.page--3__grossoustitre{
    color: var(--color-yellow);
    font-size: 4rem;
    position: relative;
    top: 0.25rem;
    
}

.form{
    font-family: 'poppins', sans-serif;
}

.form__bloc{
    width: 370px;
    margin-left: 620px;
}

.form__titre{
    font-family: 'Alumni Sans', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.form__field{
    top:2px;
    position: relative;
    height: 40px;
    margin-bottom: 10px;
}

.form__input{
    font-family: 'poppins', sans-serif;
    color: var(--color-blue);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    border:none;
    padding:0 1rem;
}

.form__label{    
    left: 1rem;
    top: 10px;
    position: absolute;
    color: var(--color-blue);
    transition: 0.2s ease;
}

.form__input:focus + .form__label,
.form__input:not(:placeholder-shown) + .form__label {
  top: 3px;
  font-size: 0.5rem;  
}

.form__field--fichier{
    margin-bottom: 90px;
}

.form__label--fichier{    
    top:0;
    left:0;
    bottom: 0;
    padding: 0.4rem 40px 0.5rem 0.5rem;
    border-radius: 5px;
    background-color: var(--color-white);    
    color: var(--color-grey);
    font-size: 12px;
    background-image: url(../images/upload.png);
    background-repeat: no-repeat;
    background-position: 115px center;
    line-height: 1.2;
}

.form__input--fichier{
    opacity: 0;
}

.state--before__block, .state--while__block, .state--after__block{
    display: none;
    height: 30px;
}

.state--before .state--before__block{
    display: block;
}

.state--while .state--while__block{
    display: block;
}

.state--after .state--after__block{
    display: block;
}

.state--while__progress, .state--after__filename{
    background-color: var(--color-white);
    color: var(--color-blue);
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    min-width: 20%;
    padding: 0 1rem;
    overflow: hidden;
}

.state--after__filename{
    width: 100%;
}

.state--after__close{
    background-image: url(../images/close.png);
    width: 14px;
    height: 14px;
    position: absolute;
    right: 1rem;
    top: 13px;
    border: none;
    cursor: pointer;
}

.form__fieldinfo{
    position: absolute;
    top: 50px;
    color: var(--color-yellow);
    font-size: 11px;
    list-style-type: disc;
    list-style-position: inside;
    line-height: 1.3;
}

.form__field--checkbox{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: auto;
    width: 960px;
    margin: 0 auto 1rem;
}

.form__input--checkbox{
    position: relative;    
    top: -4px;
}

.form__field--checkbox .form__label.form__label--checkbox{
    position: static;
    line-height: 1.2;
    color: var(--color-white);
    font-size: 0.8rem;
}

.form__infos{
    line-height: 1.2;
    width: 960px;
    margin: 0 auto 1rem;
    font-size: 0.6rem;
}

.form__bottom{
    padding-top: 20px;
    text-align: center;    
}

.form__cta{
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    cursor: pointer;
}

.footer{
    height: 75px;
    padding-top: 20px;
    
    background-color: var(--color-middleblue);
    color: var(--color-white);
    font-family: 'poppins', sans-serif;
    font-weight: 700;    
    text-align: center;
    text-transform: uppercase;    
}

.footer__text{
    margin-bottom: 0.5em;
}



.footer__link{
    font-size: 0.7rem;
    color: var(--color-white);
    text-decoration: none;
}

.popup{
    display: none;
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    justify-content: center;
    align-items: center;
	
}

.popup--visible{
	background: rgba(0, 0, 0, 0.2);
    display: flex;	
	
}

.popup--visible .popup__inner{
	animation: 0.5s ease-in-out popupscale;	
}

@keyframes popupscale {
  0% {
    transform: scale(0.5);
  }  
  70%{
	  transform: scale(1.05);
  }  
  100% {
    transform: scale(1);
  }
}

.popup__inner{
    position: relative;
    background-color: var(--color-white);
    padding: 5rem;
    border-radius: 1rem;
    text-align: center;
}

.popup__close{
    background-image: url(../images/close.png);
    width: 14px;
    height: 14px;
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: none;
    cursor: pointer;
}

.popup__titre{
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 2rem;
}

.popup__majuscule{
    text-transform: uppercase;
}

.popup__date{
    color: var(--color-red);
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.popup__texte{    
    font-family: 'poppins', sans-serif;
    font-size: 1.2rem;
    color: var(--color-blue);
    margin-bottom: 2rem;
}

.popup__texte ul{
    text-align: left;
    list-style-type: disc;
}

.popup__texte li{
    line-height: 1.2;
}

.popup__signature{
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-blue);
}


@media all and (max-width: 1300px){
	.page__inner{
		width: 980px;
	}
	
	.form__bloc {
		width: 370px;
		margin-left: 510px;
	}
	
    .slider::after{
        background-image: url(../images/page-1_masque_980.png);
    }

    .slider-track__image {
        height: 429px;
    }

    .slider-track__image--garcons {
        background-image: url('../images/slider_hommes_980.jpg');
    }

    .slider-track__image--filles {
        background-image: url('../images/slider_femmes_980.jpg');
    }
	
	.page--1__reglement {
		top: 25px;
		right: 50px;
	}
	
	.page--1__bloctitre {
		left: 247px;
	}
	
	.page--2 {
		background-image: url(../images/page-2_980.jpg);
	}
}

@media all and (max-width: 1000px){
	.page__inner{
		width: 750px;
	}

    .page--1{
        height: 830px;
    }
	
    .slider::after{     
        background-image: url(../images/page-1_masque_750.png);
    }

    .slider-track__image {
        height: 328px;
    }

    .slider-track__image--garcons {
        background-image: url('../images/slider_hommes_750.jpg');
    }

    .slider-track__image--filles {
        background-image: url('../images/slider_femmes_750.jpg');
    }
	
    .page--1__bloctitre {
        left: 194px;
	    top: 289px;
		font-size: 1.7rem;
    }
	
	.page--1__soustitre {
		font-size: 1.4rem;
		position: relative;
		position: relative;
		top: -0.2rem;
	}

	.page--1__organisateur {
		top: 780px;
		font-size: 0.6rem;
	}
	
	.page--1__bloctexte {
        top: 460px;
	}
	
	.page--1__texte--gros {
		font-size: 2.1rem;
		top: -2px;
	}
	
	.page--1__texte--tresgros {
		font-size: 2.7rem;
	}
	
	.page--1__reglement {
		right: 40px;
		font-size: 0.8rem;
	}
		
	.page--2 {
		background-image: url(../images/page-2_750.jpg);
	}
	
	.page--2__etapes{
		padding: 160px 0 50px;
	}
	
	.page--2__titre {
		font-size: 2.6rem;
		width: 610px;
	}
	
	.etape__titre {
		font-size: 1.4rem;
		letter-spacing: 1px;
	}
	
	.etape__texte br{
		display: none;
	}
	
	
	.page--3 {
		background-image: url(../images/page-3_750.jpg);
	}
	
	.page--3__soustitre{
		font-size: 2.7rem;
	}
	
	.page--3__grossoustitre{
		font-size: 2.7rem;
		position: static;
	}
	
	.form__titre {
        font-size: 2.2rem;
	}
	
	
	.form__bloc {
        width: 331px;
        margin-left: 377px;
    }
	
	.form__field--checkbox .form__label.form__label--checkbox{
		font-size: 0.7rem;
	}
		
	.form__input--checkbox {
		top: -3px;
		left: 6px;
		
	}
	
	.form__field--checkbox {
		width: 720px;
	}
	
	.form__infos {
		width: 720px;
	}	
	
	.popup__inner{
		margin: 10px;
	}
	
	.popup__titre {
		font-size: 2rem;
	}
	
}

@media all and (max-width: 767px){		
	.page__inner{
		width: 320px;
	}
	
	.logo{		
		background-image: url('../images/logo_320.png');
		background-size:contain;
		width: 150px;
		height: 74px;
		top: 0px;
		left: 8px;
	}
	
    .page--1{
        height: 680px;
    }
	
    .slider {
        height: 660px;
    }

    .slider::after{        
        background-image: url(../images/page-1_masque_320.png);
    }

    .slider-track__image {
        height: 180px;
    }

    .slider-track__image--garcons {
        background-image: url('../images/slider_hommes_320.jpg');
    }

    .slider-track__image--filles {
        background-image: url('../images/slider_femmes_320.jpg');
    }
	
	.page--1__reglement {
        top: 10px;
        right: 15px;
    }
	
	.page--1__bloctitre {
        left: 0;
        right: 0;
        top: 187px;
        font-size: 1.2rem;
        line-height: 1.3;
    }
	.page--1__soustitre {
        font-size: 1.1rem;
        top: -0.1rem;
        letter-spacing: 0px;
    }	

	.page--1__bloctexte {
        top: 290px;
    }
	
	.page--1__cta-outer {
		top: 534px;
	}
	
    .page--1__organisateur {
        top: 608px;
        font-size: 0.6rem;
    }


	.page--2 {
		background-image: url(../images/page-2_320.jpg);
		padding-top: 40px;
		height: auto;
	}
	
	.page--2__titre {
        font-size: 1.7rem;
        width: auto;
        margin: 0 40px 1rem;
    }
	.page--2__texte {
		width: auto;
	    line-height: 1.4;
		font-size: 0.8rem;
	}
	
	.page--2__texte br{
		display: none;
	}
	
	.page--2__etapes{
		padding: 85px 0 35px;
		flex-direction: column;
	}
	
	.etape {
		width: auto;
	}
	
	.etape:nth-child(1) {
	    height: 190px;
	}
	
	.etape:nth-child(2) {
	    height: 235px;
	}
	
	.page--2__cta {
		margin-bottom: 35px;
	}
	
	.page--3 {
		background-image: none;		
	}
	
	
	
	.visu_appareil {
		top: 171px;
        left: 86px;
		background-image: url(../images/appareil_320.png);
		background-size: contain;
		width: 154px;
		height: 107px;
	}

	.visu_ballon {
		top: 367px;
        left: 86px;
		background-image: url(../images/ballon_320.png);
		background-size: contain;
		width: 154px;
		height: 98px;
	}
	.visu_drapeau {
		top: 553px;
        left: 86px;
		background-image: url(../images/drapeau_320.png);
		background-size: contain;
		width: 154px;
		height: 143px;
	}
	
	
	
	
	.coquillette{		
		top: 109px;
        left: 42px;
		background-image: url(../images/coquillette_320.png);
		background-size: contain;
		width: 240px;
		height: 96px;
	}
	
	.page--3__titre {
		font-size: 2.1rem;
		letter-spacing: 1px;
	}
	
	.page--3__soustitre {
        font-size: 2rem;
		margin-bottom: 128px;
	}
	
	.page--3__grossoustitre {
        font-size: 2rem;
	}
		
	.form__bloc {
        width: 320px;
        margin-left: 0;
    }
	
	.form__titre {
        font-size: 2rem;
    }
	
	.form__field--checkbox {
        width: 100%;
		text-align: justify;
    }
	
	.form__infos {
        width: 100%;
		text-align: justify;
    }
	
	.form__cta {
	    font-size: 1.9rem;
	}
	
	.popup__inner {
        width: 310px;
        margin: 0;
		padding: 3rem 1.5rem;		
    }
	
	.popup__titre {
        font-size: 2rem;
    }
	
	.popup__majuscule {
        font-size: 1.3rem;
	}
	
	.popup__texte {    
		font-size: 0.8rem;
	}
	
	.footer{
		padding-top: 8px;
	}
	
	.footer__text {
		line-height: 1.2;
	}
}