@font-face { font-family:"Comfortaa"; src:url('Comfortaa-Regular.ttf') }
@font-face { font-family:"Comfortaa"; font-weight:bold; src:url('Comfortaa-Bold.ttf') }


body { background-image:url("fond.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; font-family:"Comfortaa"; }
br { margin:2% }
select option:checked { font-weight:bold; }


/*   ***    Présentation visuelle PAYSAGE    ***   */

@media all and (orientation:landscape)
	{ 
  	#esite { display:grid; flex:none; text-align:center; vertical-align:center; grid-template-rows:24vh 11vh 39vh 17vh 4vh 4vh; grid-template-columns:17vw 83vw; grid-template-areas:"a b" "c b" "d b" "e b" "f b" "g b" }
		#esite > e_logo { background-image:url("LOGO.png"); background-repeat:no-repeat; background-position:center; background-size:11vw; grid-area:a }
		#esite > e_affichage { align-self:center; grid-area:b }
		#esite > e_date { vertical-align:center; align-self:center; grid-area:c }
		#esite > e_choix { align-self:center; grid-area:d }
		#esite > e_courriel { align-self:center; grid-area:e }
		#esite > e_info_1 { align-self:center; grid-area:f }
		#esite > e_info_2 { align-self:center; grid-area:g }
		select { vertical-align:center; align-self:center; background:Black; border-radius:15px; border:0.2vh solid Red; font-size:1vw }
		option { text-align:left; font-weight:bold; color:Red; padding:0.6vh; font-size:1vw }
		.po0 { font-size:1.2vw; color:White }
		.po1 { font-size:0.8vw; color:Black }
		.po2 { font-size:5vw }
		.af1 { height:96vh }
	}


/*   ***    Présentation visuelle PORTRAIT    ***   */

@media all and (orientation:portrait)
	{ 
  	#esite { display:grid; flex:none; text-align:center; grid-template-rows:12vh 1.5vh 85.5vh; grid-template-columns:18vw 20vw 20vw 39vw 3vw; grid-template-areas:" a b c d e" "f f c g e" "h h h h e" }
		#esite > e_date { text-align:center; grid-area:b }
		#esite > e_logo { background-image:url("LOGO.png"); background-repeat:no-repeat; background-size:20vw; background-position: center; background-color:rgb(255 255 255/0.5); grid-area:c }
		#esite > e_choix { grid-area:d }
		#esite > e_info_1 { background-color:rgb(255 255 255/0.5); align-self:center; grid-area:f }
		#esite > e_info_2 { background-color:rgb(255 255 255/0.5); align-self:center; grid-area:g }
		#esite > e_affichage { align-self:center; grid-area:h }
		#esite > e_marge_droite { grid-area:e }
		#esite > e_courriel { align-self:center; grid-area:a }
		select { background:Black; border-radius:8px; border:0.2vh solid Red; text-align:left; font-size:1.9vw }
		option { text-align:left; font-weight:bold; color:White; padding:0.4vh 0.4vh 0.4vh 0.4vh; font-size:1.9vw }
		.po0 { font-size:1.8vw }
		.po1 { font-size:1.4vw; color:Black }
		.po2 { font-size:8vw }
    .af1 { width:100vw }
  }


/****    Clignotement & format du contact courriel    ****/

.cligno { text-decoration:none; color:Red; background:None; animation:clignote 5s linear infinite } @keyframes clignote {50% {opacity:0} }