/*
	CSS Communauté Thorgal - Inscription
	Stéphane Hardy
	2026
*/

#entre-deux-mondes { width: 900px; max-width: 100%; margin-left: 5%; }
#alayin { position: absolute; max-width: 90%; bottom: 0px; left: calc(50% - 300px); transform: translateX(-50%); }
.dit-mamie { position: absolute; width: 240px; font-family: Rosinski; font-size: 24px; bottom: 340px; left: calc(50% - 110px); transform: translateX(-50%); }
.dit-mamie:after { content: ""; position: absolute; width: 110px; height: 50px; left: 0; top: -5px; background: url('../images/bulle2.png') left center / contain no-repeat; transform: rotate(90deg); transform-origin: left top; }
@media (max-width: 848px) {
	#alayin { left: -100px; transform: translateX(0%); }
	.dit-mamie { width: 200px; top: -50px; left: 50%; font-size: 20px; }
	.dit-mamie:after { width: 90px; height: 40px; }}
@media (max-width: 648px) {
	.dit-mamie { width: 140px; top: -40px; font-size: 14px; }
	.dit-mamie:after { width: 70px; height: 30px; }}

#formulaire-inscription input {width: 240px; max-width: 100%; height: 30px; margin-top: 115px; border-radius: 3px; font-family: 'Mulish', sans-serif; font-size: 15px; border:2px solid #1a1a1a; background:#efeeed; color:#1a1a1a; transition:border .2s;}
#formulaire-inscription input:focus {outline:none; border-color:#d8af30; background:#efeeed url('../images/input.png') no-repeat bottom right;}
#formulaire-inscription img {max-width: 100%; padding: 10px 0px;}
.barre1 {position: absolute; background: #1a1a1a; width: 5px; height: 40px; right: 3px; bottom: 4px;}
.barre2 {position: absolute; background: #1a1a1a; width: 10px; height: 40px; right: 15px; bottom: 4px;}

#message-erreur {color:#d8af30; font-weight:bold; margin-top:10px; transition: 0.5s ease; min-height: 50px; display: flex; align-items: flex-end; justify-content: center;}
#formulaire-inscription input.champ-erreur {background:#efeeed; border-color:#d8af30;}

.item {width: 250px; max-width: 100%; height: 160px; position: relative; display: inline-block; margin: 15px; box-sizing: border-box;}
.item label {width: 104px; height: 77px; display: block; position: absolute; left: 90px; text-align: center; font-family: Rosinski; letter-spacing: -1px; font-weight: bold; font-size: 22px; transform: scaleX(1.1); text-transform: uppercase;}
.item.pseudo label {background: url('../images/bulle-1.png') center center no-repeat; padding: 35px 20px 20px;}
.item.prenom label, .item.date_naissance label, .item.mot_de_passe label {background: url('../images/bulle-2.png') center center no-repeat; padding: 28px 20px 20px;}
.item.nom label, .item.email label {background: url('../images/bulle-3.png') center center no-repeat; padding: 55px 20px 18px;}
.item.confirmation_mot_de_passe label {background: url('../images/bulle-3.png') center center no-repeat; padding: 40px 20px 35px;}

#formulaire_cases {padding: 30px 0 80px 0; background: url('../images/inscription-runes.png') center top repeat; width:100%; transition: 0.5s ease; opacity: 0; display: none;}

#validation {z-index: 10; position: relative; margin-top: 20px; display: inline-block; width: 600px; font-size: 14px; max-width: 100%; opacity: 0; transition: 0.5s ease; display: none;}
#validation .checkboxes {text-align: left; padding: 20px 0px 0px 50px;}

#validation button, #entree {cursor: pointer; border:none; border-radius: 3px; align-content: center; display: inline-block; text-align: center; font-family: Artifex; font-size: calc(10px + .8vw); padding: 10px; border: 0; transition: 0.5s ease; text-transform: uppercase; max-width: 100%; min-height: 50px;}
#validation button {color: #efeeed; background: #1a1a1a; margin: 10px; position: relative;}
#entree {color: #1a1a1a; background: #efeeed; min-height: 60px; margin: 0 auto; position: relative; z-index: 1;}
#validation button:hover, #entree:hover {background: #666; color: orange;}
#validation button:focus {outline:2px solid #d8af30; outline-offset:2px;}

#fond-entree, #fond-sortie {width: 100%; text-align: center; height: 80px; position: relative; transition: 0.5s ease;}
#fond-entree:hover::before {opacity: .35;}
#fond-sortie:hover::before {opacity: .65;}
#fond-entree::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%); width: 696px; max-width: 100%; height: 80px; background: url('../images/nuage-points.png') center / contain no-repeat; transition: 0.5s ease; z-index: 0; animation: ca_flotte 6s ease-in-out infinite;}
#fond-sortie::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%); width: 580px; max-width: 100%; height: 80px; background: url('../images/nuage-points2.png') center / contain no-repeat; transition: 0.5s ease; z-index: 0; animation: ca_flotte2 6s ease-in-out infinite;}
@keyframes ca_flotte {
  0% {transform: translateX(-50%) translateY(-35%);}
  50% {transform: translateX(-50%) translateY(-65%);}
  100% {transform: translateX(-50%) translateY(-35%);}
}
@keyframes ca_flotte2 {
  0% {transform: translateX(-50%) translateY(-30%);}
  50% {transform: translateX(-50%) translateY(-60%);}
  100% {transform: translateX(-50%) translateY(-30%);}
}
@keyframes ca_flotte3 {
  0% {transform: translateX(-1.5%) translateY(10%) rotate(-1.5deg);}
  50% {transform: translateX(1.5%) translateY(-5%) rotate(1.5deg);}
  100% {transform: translateX(-1.5%) translateY(10%) rotate(-1.5deg);}
}

#main {width: 90%; transition: .5s ease; display: none;}
#mainthorgal {max-width: 100%; width: 600px; border-radius: 70% 20% / 50% 50%; filter: drop-shadow(0 -30px 30px transparent); transition: .3s ease; border-color: #444; border-width: 0px 2px 30px 2px; border-style: solid; padding: 2px !important; margin-top: 20px; animation: ca_flotte3 9s ease-in-out infinite;}
#fond-sortie:hover + img { opacity: 1; }
@media (max-width: 600px) {
	.item {margin: 15px 0;}
	#image-antispam {margin: 0 auto;}
	#validation .checkboxes {padding: 20px 2px 0px 2px;}
	#mainthorgal {border-width: 0px 2px 15px 2px;}
}