@media all and (max-height: 899px) and (min-width: 768px){
	.page--1 {
		background-image: url("../img/page1_750.jpg");
	}
	
	.envoyez {
	  font-size: 1.5rem;
	  margin-bottom: 1em;
	}

	.envoyez span {
	  font-size: 1rem;	  
	}

	.tentez {
	  font-size: 1.5rem;
	  margin-bottom: 1em;
	}

	.tentez span {
	  font-size: 1.9rem;
	  top: 0.10rem;
	}

	.bloc-participe {	  
	  margin-bottom: 1em;
	}

	.participe {
	  border-radius: 1em;
	  font-size: 1.1rem;
	  padding: 0.25em 1.5em;	  
	}

	.participe span {
	  font-size: 0.7rem;
	}

	.obligation {
	  font-size: 0.6rem;
	  margin-bottom: 1em;

	}
	
	.page--2 {
	  background-image: url("../img/page2_750.jpg");
	}
	
	
	.jecris {
	  padding-top: 1em;	  
	  font-size: 1.4rem;
	  margin-bottom: 0.5em;
	}

	.decouvrez {
	  font-size: 1rem;	  
	  margin-bottom: 3em;
	}
	
	.eleveur {
	  width: 270px;
	  height: 360px;
	}
	
	.eleveurs__choisi.eleveurs__choisi--herve .eleveurs__inner{
		animation: none;
		transform: translateX(-1490px);
	}

	.eleveurs__choisi.eleveurs__choisi--jeanlouis .eleveurs__inner{
		animation: none;
		transform: translateX(-1774px);
	}

	.eleveurs__choisi.eleveurs__choisi--charlesedouard .eleveurs__inner{
		animation: none;
		transform: translateX(-680px);
	}

	.eleveurs__choisi.eleveurs__choisi--quentin .eleveurs__inner{
		animation: none;
		transform: translateX(-954px);
	}

	.eleveurs__choisi.eleveurs__choisi--guillaume .eleveurs__inner{
		animation: none;
		transform: translateX(-1222px);
	}
	
	.bloc-jedecouvre {	  
	  position: absolute;
	  bottom: 3rem;
	  width: 100%;
	}
	
	.bloc-passer {
		position: absolute;
		bottom: 1rem;
		width: 100%;
	}

	.jedecouvre {
	  font-size: 1.5rem;	  
	}

	.jedecouvre span {
	  font-size: 1rem;
	}
	
	.passer {
	  font-size: 0.8rem;
	}	
	
	
	.dialog{
		width: 750px;
		padding-bottom: 9em;
	}
	
	.dialog .nom-eleveur{
		font-size: 1.8rem;
		line-height: 60px;
	}
	
	.histoire-histoire, .histoire-lettre{
		font-size: 0.9rem;
	}
		
	.choisissez{
		font-size: 1rem;		
	}
	
	.modele, .ajouter, .upload-filefield__button {
		font-size: 1rem;		
	}
	
	.dialog__jecris, .dialog__jenvoie{
		font-size: 1rem;		
	}
	
	.dialog__jecris span, .dialog__jenvoie span {
		font-size: 1.8rem;		
	}
	
	.page3-content.form{
		width: 750px;
	}
	
	.moment {
		padding-top: 1em;
	}
	
	.champs {
		width: 750px;
	}
	
	.page--perdu {
		background-image: url("../img/pageperdu_750.jpg");
	}
	
	.page--gain {
		background-image: url("../img/pagegain_750.jpg");
	}
	
	.perdu {
		font-size: 2.4rem;
	}

	.retenter {
		font-size: 1.7rem;
		line-height: 1.1;
	}

	.rejouer {
		font-size: 1.4rem;
		padding: 0.25em 1.5em;
	 }
	 
	.merci{
		width: 440px;
		height: 102px;
		padding-left: 128px;
		padding-top: 51px;
        font-size: 1rem;
	}

	.felicitations {
		font-size: 2.3rem;
		margin-bottom: 0.3em;
	}
	
	.remporter {
		font-size: 1.2rem;
	}
	
	.reserve {
		font-size: 0.9rem;
		margin-bottom: 1.8em;
	}
	
	.confirmation {
		margin-bottom: 0;
		font-size: 0.6rem;
	}

}

@media all and (max-width: 767px){
	
	#message_erreur {
		width: 320px;
		margin-left: -160px;
		top: 50px;		
	}

	.lien-reglement{
		display: none;
	}
	
	.page{
		background-position: top center;
		min-height: 100vh;
		height: auto;
	}
	.page--1 {
		background-image: url("../img/page1_320.jpg");
	}
	
	.page1-content{
		width: 320px;
		margin: auto;
		position: static;
	}
	
	.envoyez {
		padding-top: 330px;
		font-size: 1.5rem;
		line-height: 0.9;
		margin-bottom: 1em;
	}
	
	.envoyez span{
		font-size: 1rem;
	}
	
	.tentez {
		font-size: 1.2rem;
		margin-bottom: 1.2rem;
	}
	
	.tentez span {
		display: block;
		font-size: 1.4rem;
		top: 0.25rem;
	}
	
	.participe {
		font-size: 1rem;
		padding: 0.25em 0.4em;
	}
	
	.participe span {
		font-size: 0.6rem;
	}
	
	.obligation {
		font-size: 0.7rem;
		line-height: 1.2;
		margin-bottom: 1em;
	}	
		
	.page--2 {
		background-image: url("../img/page2_320.jpg");
		background-position: bottom center;
	}
	
	.jecris {
		padding-top: 0.5em;
		font-size: 1.5rem;
		width: 320px;
		margin: 0 auto 0.5em;
	}
	
	.decouvrez {
		font-size: 1rem;
		margin: 0 5px 1em;		
	}
	
	.eleveur {
	  width: 135px;
	  height: 180px;
	}
	
	.bloc-jedecouvre {
		margin-top: 1em;
	}
	
	.fleche {
		width: 35px;
		height: 33px;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.jedecouvre{
		width: 13rem;
		font-size: 1.3rem;
	}
	
	.jedecouvre span{
		font-size: 0.9rem;
	}
	
	.eleveurs__choisi.eleveurs__choisi--herve .eleveurs__inner{
		animation: none;
		transform: translateX(-748px);
	}

	.eleveurs__choisi.eleveurs__choisi--jeanlouis .eleveurs__inner{
		animation: none;
		transform: translateX(-890px);
	}

	.eleveurs__choisi.eleveurs__choisi--charlesedouard .eleveurs__inner{
		animation: none;
		transform: translateX(-339px);
	}

	.eleveurs__choisi.eleveurs__choisi--quentin .eleveurs__inner{
		animation: none;
		transform: translateX(-480px);
	}

	.eleveurs__choisi.eleveurs__choisi--guillaume .eleveurs__inner{
		animation: none;
		transform: translateX(-613px);
	}
		
	.dialog {
		width: 320px;
		padding-bottom: 8em;
	}
	
	.dialog__inner {
		height: 450px;
	}
	
	.dialog__inner-inner {
		height: 442px;
	}
	
	.dialog__droite {
		width: 100%;
	}
	
	.dialog__gauche{
		display: none;
	}
	
	.dialog .nom-eleveur {
		height: 50px;
		line-height: 50px;
		font-size: 1.4rem;
	}
	
	.reponse{
		font-size: 0.7rem;
	}
	
	.dialog__droite {		
		background-repeat: no-repeat;
		background-position: calc(100% - 1em) 0.75em;	
		background-size: 50px 50px;
	}

	[data-eleveur="guillaume"] .dialog__droite {
		background-image: url("../img/eleveur-guillaume3.jpg");
	}

	[data-eleveur="herve"] .dialog__droite {
		background-image: url("../img/eleveur-herve3.jpg");
	}

	[data-eleveur="quentin"] .dialog__droite {
		background-image: url("../img/eleveur-quentin3.jpg");
	}

	[data-eleveur="charlesedouard"] .dialog__droite {
		background-image: url("../img/eleveur-charlesedouard3.jpg");
	}

	[data-eleveur="jeanlouis"] .dialog__droite {
		background-image: url("../img/eleveur-jeanlouis3.jpg");
	}
	
	.dialog__droite.dialog__droite--lettre{
		background-image: none;
	}
	.dialog__jecris, .dialog__jenvoie {
		transform: none;
		left: 1em;
		right: 1em;
		bottom: 0.8rem;
		font-size: 0.8rem;
	}
	
	.dialog__jecris span, .dialog__jenvoie span {
		font-size: 1.2rem;
	}
	
	.choisissez {
		font-size: 0.8rem;
	}
	
	.modele, .ajouter, .upload-filefield__button {
		font-size: 0.8rem;
	}
	
	.lettre{ 
		flex-grow: 0;
		height: 280px;
	}
	
	.page3-content {
		width: 320px;
	}
	
	.moment{
		padding-top: 1em;
		font-size: 1.5rem;
		margin-bottom: 0.5em;
	}
	
	.tentez {
        font-size: 1.2rem;
	}
	
	.tentez span{	
		font-size: 1.4rem;
	}
	
	.jecomplete {
		line-height: 1.2;
		font-size: 1.5rem;
	}
	
	.champs {
		width: 320px;
	}
	
	.input, .input--cp {
        width: 100%;
	}
	
	.input--espace, .input--cp {
		margin-right: 0;
	}
	
	.champs--upload {
		display: block;
	}
	
	.upload-container--ticket {
		width: 100%;
		margin-right: 0;
	}
	
	.upload-container--ticket .upload-filefield {
		width: 100%;
		margin-right: 0;
	}
	
	.upload-container--ticket .upload-filefield__button {
		width: 100%;
	}
	
	.telecharge {
		margin-top: 0.5em;
		font-size: 0.8rem;
	}
	
	.jevalide {
		margin-bottom: 1em;
	}
	
	.cooperative{
		font-size: 0.7rem;
		margin-bottom: 1em;
	}
	
	.page--perdu {
		background-image: url("../img/pageperdu_320.jpg");
	}
	
	.pageperdu-content {
	    top: 0;
		bottom: auto;
	}
	
	.perdu {
        max-width: 320px;
        margin: auto;
        padding-top: 315px;
        font-size: 1.8rem;
        margin-bottom: 0.3em;
    }
	
	.retenter {
        font-size: 0.9rem;
	}
	
	.rejouer {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	
	.page--gain {
		background-image: url("../img/pagegain_320.jpg");
	}
	
	.pagegain-content {
	    top: 0;
		bottom: auto;
	}
	
	.felicitations {
		padding-top: 330px;
		font-size: 2rem;
		margin-bottom: 0.3em;
	}
	
	.remporter {
		font-size: 0.9rem;
		margin-bottom: 1em;
		line-height: 1.2;
	}
	
	.reserve {
		font-size: 0.7rem;
	}
	
	.confirmation{
		font-size: 0.5rem;
		margin-bottom: 1em;
	}
	
	.merci{
		width: 270px;
		height: 98px;
		padding-left: 67px;
        padding-top: 23px;        
        font-size: 0.7rem;
	}
	
	
	.page--merci-guillaume .merci {
		background-image: url("../img/eleveur-guillaume4_320.png");
	}

	.page--merci-herve .merci {
		background-image: url("../img/eleveur-herve4_320.png");
	}

	.page--merci-quentin .merci {
		background-image: url("../img/eleveur-quentin4_320.png");
	}

	.page--merci-charlesedouard .merci {
		background-image: url("../img/eleveur-charlesedouard4_320.png");
	}

	.page--merci-jeanlouis .merci {
		background-image: url("../img/eleveur-jeanlouis4_320.png");
	}


	
    
}