/***********************************************************************************************************************
Fichier shipmembers.php
***********************************************************************************************************************/
#Shipmembers		h2		{
	margin-bottom: 30px;
}
#Shipmembers		.message	p	{
	text-align: justify;
}


#Shipmembers		.boutons_bas_de_page 		a 	{
	background-color: var(--bleu_koriolan_fonce);
	color: var(--blanc);
	text-align: center;
	margin: 10px 0px 30px 0px;
	display:block;
}
#Shipmembers		.boutons_bas_de_page	 	a:hover 	{
	color: var(--bleu_koriolan);
}
#Shipmembers		.boutons_bas_de_page	 	button		{
	display:block;
	margin: 10px 0px 30px 0px;
	width: 100%;
}


/*--------------------------------------------------*/
#Shipmembers		#login		 form 	{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap:40px;
	row-gap:80px;
	align-items: start;
}


#Shipmembers		#login		.login		{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:20px;
}
#Shipmembers		#login		.login		.champs	{
	
	display: grid;
	grid-template-columns: 1fr;
}
#Shipmembers		#login		.login		.champs		.champs_titre	{
	text-align: left;
}
#Shipmembers		#login		.login		.champs		.champs_valeur	{
	text-align: left;
}
#Shipmembers		#login		.login		.champs		.champs_valeur	input		{
	text-align: left;
}
#Shipmembers		#login		.login		.champs		.champs_valeur	textarea		{
	border:1px solid var(--bleu_koriolan);
	border-radius: 10px;
	text-align: left;
}

/*--------------------------------------------------*/
#Shipmembers		#activation		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:80px;
	align-items: start;
}
#Shipmembers		#activation		.shipmember		{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}

#Shipmembers		#activation		.shipmember		.lignes {
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}
#Shipmembers		#activation		.shipmember		.ligne {
	display: grid;
	grid-template-columns: 1fr 3fr;
}
#Shipmembers		#activation		.shipmember		.ligne	.titre_ligne {
	border-bottom: 1px solid var(--bleu_koriolan);
}



/*--------------------------------------------------*/
#Shipmembers		#generation_mdp		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:80px;
	align-items: start;
}
#Shipmembers		#generation_mdp		.shipmember		{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}

#Shipmembers		#generation_mdp		.shipmember		.lignes {
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}
#Shipmembers		#generation_mdp		.shipmember		.ligne {
	display: grid;
	grid-template-columns: 1fr 3fr;
}
#Shipmembers		#generation_mdp		.shipmember		.ligne	.titre_ligne {
	border-bottom: 1px solid var(--bleu_koriolan);
}


/*--------------------------------------------------*/
#Shipmembers		#accueil		  	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
	align-items: start;
}
#Shipmembers		#accueil		.message  	{
	text-align: justify;
}

/* Mes invitations (synthèse §48) : une carte par invitation (texte, Accepter, Refuser), puis la saisie d'un code */
#Shipmembers		#accueil		.invitations	.aucune	{
	text-align: left;
	font-style: italic;
	color: var(--gris_pale);
}
#Shipmembers		#accueil		.invitations	form.invitation	{
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 10px;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 15px;
	border: 1px solid var(--bleu_koriolan);
	border-radius: 10px;
	background-color: var(--bleu_koriolan_transparent);
}
#Shipmembers		#accueil		.invitations	form.invitation	p	{
	margin: 0px;
	text-align: left;
}
#Shipmembers		#accueil		.invitations	button	{
	padding: 2px 16px;
	line-height: 1.8em;
	border-radius: 0.8em;
	white-space: nowrap;
}
#Shipmembers		#accueil		.invitations	button.refuser	{
	background-color: var(--blanc);
	border-color: var(--rouge);
	color: var(--rouge);
}
#Shipmembers		#accueil		.invitations	button.refuser:hover	{
	background-color: var(--rouge);
	color: var(--blanc);
}
#Shipmembers		#accueil		.invitations	form.saisie_code	{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 25px;
}
#Shipmembers		#accueil		.invitations	form.saisie_code	input	{
	width: 12em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-align: center;
}
#Shipmembers		#accueil		.invitations	form.saisie_code	input::placeholder	{
	text-transform: none;
	letter-spacing: normal;
}
@media only screen and (max-width: 580px) {
	#Shipmembers		#accueil		.invitations	form.invitation	{
		grid-template-columns: 1fr 1fr;
		row-gap: 10px;
	}
	#Shipmembers		#accueil		.invitations	form.invitation	p	{
		grid-column: span 2;
	}
}


/*--------------------------------------------------*/
#Shipmembers		#profil		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
	align-items: start;
}


#Shipmembers		#profil		.profil		{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}

#Shipmembers		#profil		.profil		.champs	{
	
	display: grid;
	grid-template-columns: 1fr 3fr;
}
#Shipmembers		#profil		.profil		.champs		.champs_titre	{
	text-align: left;
	padding-left:20px;
	line-height: 30px;
	background-color: var(--bleu_koriolan_transparent);
	border-bottom: 1px solid var(--bleu_koriolan);
	border-radius: 5px 0px 0px 5px;
}
#Shipmembers		#profil		.profil		.champs		.champs_valeur	{
	text-align: left;
	padding-left:20px;
	line-height: 30px;
	border-bottom: 1px solid var(--bleu_koriolan);
	border-radius: 0px 5px 5px 0px;
}






/*--------------------------------------------------*/
#Shipmembers		#modifier_profil		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
	align-items: start;
}
#Shipmembers		#modifier_profil		 .profil 	{
	display: grid;
	grid-template-columns: 1fr;
	row-gap:10px;
}
#Shipmembers		#modifier_profil		 .profil 	.message	{
	margin-top: 20px;
}



/*--------------------------------------------------*/
#Shipmembers		#historique		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
}



/*--------------------------------------------------*/
#Shipmembers		#bateau		 form 	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
	/* align-items: start; */
}
#Shipmembers		#bateau		 form 	a	{
	display: grid;
	grid-template-columns: 1fr;
	column-gap:40px;
	row-gap:80px;
	/* align-items: start; */
}
#Shipmembers		#bateau 	.acces_bateau	a 	{
	background-color: var(--bleu_koriolan_fonce);
	color: var(--blanc);
	text-align: left;
	padding-left: 20px;
	margin: 10px 30px 30px 30px;
	display:block;
}
#Shipmembers		#bateau	 	.acces_bateau 	a:hover 	{
	color: var(--bleu_koriolan);
}
#Shipmembers		#bateau	 	.acces_bateau	button		{
	display:block;
	margin: 10px 0px 30px 0px;
	width: 100%;
}