/************************************************** DECLARATION DE VARIABLE ***************************************/
 :root {
	--hauteur_menu: 80px;
 }



/************************************************************ PAGE *************************************************/
html
{
	/* font-size:2.0em; */
}


/***************************************************** ZONE DE TRAVAIL *********************************************/
body {
	max-width:99%;
}

/********************************************************* ENTETE **************************************************/
#entete 	#ligne_icones	{
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
#entete 	#ligne_icones	a {
	background-size: 50%;
	width: 90%;
}
#entete 	#ligne_icones	#home {
	text-align:center;
	padding-left:0px;
}

#entete		nav		{
	grid-template-columns: 1fr; 
	grid-row-gap: 0px;
}
#entete		nav	.menu	{
	/* font-size:2em; */
}
#entete		nav		.menu 	a	{
	background-color: var(--bleu_koriolan_fonce);
	color: var(--bleu_koriolan);
	/* display: block; */
	/* width: 96%; */
	padding:20px 0px;
	margin: auto;
	/* line-height: 2em; */
}

#espace_menu.replie	{
	padding-top:40px;
}
#espace_menu.deploye	{
	padding-top:360px;
}


/*********************************************************** PIED DE PAGE *********************************************/
#pied_de_page 	{
	grid-template-columns: 1fr;
	grid-row-gap: 0px;
	grid-template-rows: 100px 1em;
}

#pied_de_page 	.marque 	{
	text-align: center;
	height: 100px;
	padding: 20px;
	grid-column: 1 / span 3 !important;
}
#pied_de_page 	.mentions_legales 	{
	text-align: center;
	grid-column: 1 / span 3 !important;
	grid-row: 2 / span 3 !important;
}
#pied_de_page 	.mentions_legales 	a 	{
	text-align: center;
	display: inline-block;
	width: 90%;
	margin: 20px auto;
	border: 1px solid var(--bleu_koriolan);
}
#pied_de_page 	.signature 	{
	grid-column: 1 / span 3 !important;
	text-align: center;
	padding: 50px;
	height: 100px;
}
#pied_de_page 	a	{
	padding:20px 0px;
}

/********************************************************* TITRES ********************************************/
h1		{
	font-size:2.0em;
}
h2		{
	font-size:1.4em;
}

/****************************************************** TABLEAUX STANDARD *****************************************/


/***************************************************** FORMULAIRES ***************************************************/
input, textarea, select		{
	/* padding:10px 10px;	 */
	font-size: 1.0em;
}
select		{
	/* height: 40px; */
	/* font-size: 1.5em; */
}
::placeholder {
	/* font-size: 1.8em; */
}
.boutons_formulaire		button	{
	padding:50px 30px;
	/* font-size: 1.8em; */
}

/********************************************************* LIENS HYPERTEXTES ***************************************/
a.renforce	{
	padding:3px 30px;
}

ul	{
	padding-inline-start: 20px;			/* C'est une valeur par défaut de 40px, ce qui est beaucoup sur un affichage téléphone... */
}
ul	li	{
	margin-bottom: 0px;
}
/********************************************************* PARAGRAPHES ***************************************/
p			{
	margin:10px 0px;
	/* line-height:50px; */
	/* font-size:1.8em; */
}

/********************************************************* ANCRES ***************************************/
.ancre 	{
	/* padding-top: 350px; 		/* Taille du menu déployé */
	/*margin-top: -350px; 		Même valeur que ci-dessus pour compenser */
}
.ancre.sans_menu 	{
	/*padding-top: 40px;*/ 				/* Taille du menu replié */
	/*margin-top: -40px;*/ 			/* Même valeur que ci-dessus pour compenser */
}

/************************************* MESSAGE D'ERREUR ***************************************/







/************************************* COMPARATIF SHIPHEARTS ***************************************/
.comparatif 	 {
	/* font-size:1.5em; */
}
.comparatif 	.bouton_comparatif		a 	{
	margin-bottom: 50px;
	width: calc(99% - 50px);
	padding: 20px 0px 20px 50px;
	background-position: left 10px top 50%;
}
.comparatif 	table.table_comparatif	 	th 	{
	font-size: 0.7em;
}
.comparatif 	table.table_comparatif	 	th:not(:first-child) 	{
	border: 1px solid var(--bleu_koriolan);
	height: 80px;
	padding: 0px;
	transform: rotate(-90deg);
}
.comparatif 	table.table_comparatif	 	td 	{
	font-size:0.8em;
}
.comparatif 	table.table_comparatif	 	td.version 		img 	{
	/* width:60px; */
}

.comparatif 	table.table_renvois_comparatif 	tr 	td {
	font-size:0.8em;
}

/************************************* IMAGES ZOOMEES ***************************************/
#zoom		{
	grid-template-columns: 1fr;
	row-gap: 20px;
	width: 95%;
	padding:5px;
}
#zoom 	a		{
	display: block;
	text-align: center;
}
#zoom	a	img		{
    width: 50px;
}
#zoom	.photo_zoomee	{
	width: 100%;
}
#zoom	.photo_zoomee 	img	{
    max-height: 250px;
	max-width: 90%;
	border-radius: 5px;
}

/***********************************************************************************************************************
Fichier accueil.php
***********************************************************************************************************************/
#Accueil	h1	{
	/* height: 300px; */
}
#Accueil	h2		{
	font-size:2em;
}
#Accueil	p			{
	line-height:1.2em;
	margin: auto;
}

#Accueil	#bandeau_accueil	{
	height:300px;						/* Fige la hauteur du bloc 'bandeau-accueil' sinon on n'arrive à rien... */
	line-height: 300px;					/* Permet ensuite d'utiliser le vertical-align  sur le <p> inclus */
}
#Accueil	#bandeau_accueil	p 	{
	font-size:1.8em;
}

#Accueil	#notre_actualite	p	 {
	margin-bottom: 2em;
}
#Accueil	#notre_actualite	a 	 {
	width: 90%;
	border-radius: 1em;
	padding: 30px 0px;
}
#Accueil	#qu_est_ce_que_shipheart	.corps	 	{
	padding:50px 0px 50px 0px;
	border-bottom:10px solid var(--bleu_koriolan_transparent);
	font-weight: 300;
	font-size: 1em;
}
#Accueil	#qu_est_ce_que_shipheart	.corps	 	p 	{
	margin-top: 10px;
	margin-bottom: 10px;
}
#Accueil	#qu_est_ce_que_shipheart	.corps	 	.made_in_france  	{
	margin:20px 5% 50px 5%;
}
#Accueil	#qu_est_ce_que_shipheart	.corps	 	.made_in_france 	img 	{
	width: 99%;
}

#Accueil	#marguerite	 	{
	padding:0.5em 0px;	
}
#Accueil	#marguerite	 	.corps	 	{
	grid-template-columns: 1fr;
	row-gap:60px;
}
#Accueil	#marguerite	.corps	 .rubrique 	{
	border: none;
	border-bottom:10px solid var(--bleu_koriolan_transparent);
	padding:10px 10px;
}
#Accueil	#boutique	.corps 	a 	 {
	margin: 20px auto 20px auto;
	padding: 30px 0px;
	width: 96%;
	/* font-size: 2.0em; */
}


#Accueil	#faq	.corps	 .rubriques 		{
	grid-template-columns: 1fr;
	row-gap: 50px;
}



#Accueil	#qui_sommes_nous	img	 	{
	/* width:100%; */
}
#Accueil	#qui_sommes_nous	.image_bandeau	 	{
	height:200px;
}
#Accueil	#qui_sommes_nous	 .corps		{
	/* padding:50px 0px; */
}
#Accueil	#qui_sommes_nous	 .carte_de_visite	{
	grid-template-columns: 1% 1fr 2fr;
}
#Accueil	#qui_sommes_nous	 .carte_de_visite	.texte	p 	{
	font-size: 0.8em;
}

#Accueil	#qui_sommes_nous	 .contact	{
	/* grid-template-columns: 20px 1fr 20px; */
	padding-top: 50px;
	/* font-size: 1.8em; */
}
#Accueil	#qui_sommes_nous	 .contact	a 	{
	width: 95%;
	margin: 60px auto;
	padding: 30px 0px;
}


/***********************************************************************************************************************
Fichier actualites.php
***********************************************************************************************************************/
/*----------------------------------------*/
#Actualites			#accueil	.photos	{
	grid-template-columns: 1fr;
}





/***********************************************************************************************************************
Fichier boutique.php
***********************************************************************************************************************/
#Boutique 	.info_mobile	{
	display: inline-block;
}
#Boutique	.boutons_bas_de_page	{
	grid-template-columns: 1fr;
	grid-template-areas: 
            " suivant "
			" retour ";
	margin-top: 20px;
}
#Boutique	.boutons_bas_de_page	a	{
	margin: 30px 0px;
}

/*--------------------------------------------------*/
#Boutique	#bandeau_avancement		{
	grid-template-columns: repeat(7, auto);
	font-size:0.6em;
}
#Boutique	#bandeau_avancement		.etape:first-child		{
	border-radius: 0px; 
}
#Boutique	#bandeau_avancement		.etape:last-child		{
	border-radius: 0px; 
}


/*--------------------------------------------------*/
#Boutique	#accueil		.famille 	{
	grid-template-columns: 1fr;
}
#Boutique	#accueil		.famille	.produit 	{
	/* border-top:10px solid var(--bleu_koriolan_fonce); */
	grid-template-rows: auto;	
	row-gap:20px;	
}
#Boutique	#accueil		.famille	.produit 	.image 		img 	{
	height: auto;
	width: min(80%, 350px);
	margin-top: 20px;
}
#Boutique	#accueil		.famille	.produit 	.boutons	a 	{
	width: calc(96% - 20px);
	/* padding: 40px 10px;  */
	margin-bottom: 20px;
}
#Boutique	#accueil		.famille	.produit 	.boutons	a:hover 	{
}

/*--------------------------------------------------*/
#Boutique	#panier		.liste_produits 	{
	grid-row-gap: 10px;
}
#Boutique	#panier		.liste_produits		.titre		{
	display:none;
}

#Boutique	#panier		.liste_produits		.produit 	{
	border: 3px solid var(--bleu_koriolan_fonce);
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	row-gap: 10px;
	grid-template-areas: 
            " image 		image "	
			" nom 			nom "
			" descriptif 	descriptif "
			" delai			delai "
			" boutons		quantite "
			" prix_ht 		prix_ht "
			" prix_ttc 		prix_ttc ";
	
	align-items: center; 
	justify-items: center;
	
	margin: 10px 0px 50px 0px;
	padding: 20px 10px;
	
	/* font-size: 0.8em; */
}
#Boutique	#panier		.liste_produits		.produit 	.image 	 	{
	text-align: center;
}
#Boutique	#panier		.liste_produits		.produit 	.image 		img 	{
	height: auto;
	width: min(80%, 350px);
}
#Boutique	#panier		.liste_produits		.produit 	.descriptif	{
	font-style: normal;
}
#Boutique	#panier		.liste_produits		.produit 	.quantite	{
	/* font-size:1.5em; */
}
#Boutique	#panier		.liste_produits		.produit 	.quantite	.info_mobile	{
	font-size:0.8em;
}
#Boutique	#panier		.liste_produits		.produit 	.boutons	{
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
            " moins 		plus ";
	grid-column-gap: 20px;
	align-items: center;
}
#Boutique	#panier		.liste_produits		.produit 	.boutons	a 	{
	height: 100%;
	width: 100%;
}
#Boutique	#panier		.liste_produits		.produit 	.boutons	a 	img 	{
	width: 100%;
}
#Boutique	#panier		.liste_produits		.produit 	.delai	{
	line-height: normal;
}
#Boutique	#panier		.liste_produits		.produit 	.prix_ht	{
	line-height: normal;
}
#Boutique	#panier		.liste_produits		.produit 	.prix_ttc	{
	line-height: normal;
	font-size:1.2em;
}
#Boutique	#panier		.liste_produits		.synthese 	{
	grid-template-columns: 2fr 2fr 2fr;
}
#Boutique	#panier		.liste_produits		.synthese.titres.info_mobile		{
	display: block;
}


/*--------------------------------------------------*/
#Boutique	#identification		 form 	{
	grid-template-columns: 1fr;
	grid-template-areas: 
        " shipmember "
		" new_shipmember ";
	
	row-gap:10px;
}


/*--------------------------------------------------*/
#Boutique	#validation		.liste_produits		.titre		{
	display:none;
}

#Boutique	#validation		.liste_produits		.produit 	{
	border: 3px solid var(--bleu_koriolan_fonce);
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	row-gap: 20px;
	grid-template-areas: 
            " image 		image "	
			" nom 			nom "
			" descriptif 	descriptif "
			" delai			delai "
			" prix_ht 		prix_ht "
			" prix_ttc 		prix_ttc "
			" boutons		quantite ";
	
	align-items: center; 
	justify-items: center;
	
	margin: 10px 0px 10px 0px;
	padding: 20px 10px;
	
	/* font-size: 0.8em; */
}
#Boutique	#validation		.liste_produits		.produit 	.image 	{
	text-align: center;
}
#Boutique	#validation		.liste_produits		.produit 	.image 		img 	{
	height: auto;
	width: min(80%, 350px);
}
#Boutique	#validation		.liste_produits		.produit 	.descriptif	{
	font-style: normale;
}
#Boutique	#validation		.liste_produits		.produit 	.quantite	{
	font-size:1.5em;
	line-height: 1.5em;	
}
#Boutique	#validation		.liste_produits		.produit 	.quantite	.info_mobile	{
	font-size:0.8em;
}
#Boutique	#validation		.liste_produits		.produit 	.boutons	{
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
            " moins 		plus ";
	grid-column-gap: 20px;
	align-items: center;
}
#Boutique	#validation		.liste_produits		.produit 	.boutons	a 	{
	height: 200px;
	width: 200px;
	line-height: 200px;
}
#Boutique	#validation		.liste_produits		.produit 	.boutons	a 	img 	{
	width: 100px;
}
#Boutique	#validation		.liste_produits		.produit 	.delai	{
	line-height: normal;
}
#Boutique	#validation		.liste_produits		.produit 	.prix_ht	{
	line-height: normal;
}
#Boutique	#validation		.liste_produits		.produit 	.prix_ttc	{
	line-height: normal;
	font-size:1.2em;
}

#Boutique	#validation		.liste_produits		.synthese 	{
	grid-template-columns: 2fr 2fr 2fr;
}
#Boutique	#validation		.liste_produits		.synthese.titres.info_mobile		{
	display: inline;
}


#Boutique	#validation		.message_validation_cgv		input 	{
	width: 40px;
}
#Boutique	#validation		.message_validation_cgv		label 	{
	line-height: 20px;
}
#Boutique	#validation		.message_validation_cgv		a	{
	padding: 0px 30px;
	/* background-color: var(--bleu_koriolan_fonce); */
}




/*--------------------------------------------------*/
#Boutique	#paiement		.saisie_paiement	form {
  /* padding: 20px 0px 100px 0px; */
}

#Boutique	#paiement		.saisie_paiement	#card-element {
	width: 90%;
	margin-bottom: 50px;
  
  /* margin: 50px 0px 150px 0px; */
  /* background: var(--bleu_koriolan_transparent); */
}




/*--------------------------------------------------*/
#Boutique	#cloture		h2 	{
	margin-top: 50px;
}










/***********************************************************************************************************************
Fichier faq.php
***********************************************************************************************************************/

/*----------------------------------------*/
#Faq	#accueil	h2		{
	border-bottom: none;
}
#Faq	#accueil	.famille	a 	{
	padding-bottom:10px;
	border: 2px solid var(--bleu_koriolan);
	margin: 5px 0px;
}
#Faq	#accueil	.famille 	.reponse		{
	margin:0px 10px 30px 10px;
}
#Faq	#accueil	.famille 	.reponse	.photos	{
	grid-template-columns: 1fr;
}




/***********************************************************************************************************************
Fichier galerie.php
***********************************************************************************************************************/

#Galerie	#accueil	#photos		{
	grid-template-columns: 1fr;
}
#Galerie	#accueil	#photos		.photo		.legende 	{
	/* font-size:1.6em; */
}
#Galerie	#accueil	#photos		.photo 	{
	grid-template-rows: 1fr auto;
}


/***********************************************************************************************************************
Fichier mentions_legales.php
***********************************************************************************************************************/
#Mentions_legales	#accueil	{
}
#Mentions_legales	#accueil	a	{
	padding:0px 5px 1px 5px;
}
#Mentions_legales	#accueil	p	{
	/* text-align: justify; */
	/* margin: 0px; */
}

#Mentions_legales	#accueil	.adresse	{
	/* padding-left:10%; */
}

/***********************************************************************************************************************
Fichier nautic2021.php
***********************************************************************************************************************/
#Nautic2021		.logo_sh	{
	height:80px;
}
#Nautic2021		.logo_nautic	{
	height:80px;
}
#Nautic2021		.champs		.champs_valeur		{
   min-height: 50px;
   line-height: 50px;
   vertical-align: middle;
}
#Nautic2021		.champs		.champs_valeur	 input[type="checkbox"]	{
   margin-left: 30px;
}
#Nautic2021		.champs		.champs_valeur	 label	{
    width: 70%;
	min-height: 50px;
}


/***********************************************************************************************************************
Fichier produits.php
***********************************************************************************************************************/


#Produits		.boutons_bas_de_page	{
	grid-template-columns: 1fr;
	grid-template-areas: 
            "retour"
			"suivant";
}

/*----------------------------------------*/
#Produits			#accueil	.produit 	{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
			"photo_principale"
            "nom"
			"descriptif"
			"photos";
}



/***********************************************************************************************************************
Fichier shipmembers.php
***********************************************************************************************************************/
/*--------------------------------------------------*/
#Shipmember		 	{
	/* font-size: 1.5em; */
}
#Shipmember		.message		{
	/* font-size: 0.9em; */
}

#Shipmember		.boutons_bas_de_page 		a 	{
	margin: 50px 0px 30px 0px;
	padding: 30px 10px;
}
#Shipmember		.boutons_bas_de_page	 	button		{
	display:block;
	margin: 50px 0px 30px 0px;
	padding: 30px 10px;
	/* font-size: 1.2em; */
}


/*--------------------------------------------------*/
#Shipmember		#login		 form 	{
	grid-template-columns: 1fr;
}
#Shipmember		#login		 form 	table  td:nth-child(1)	{
	width: 30%;
}


/*--------------------------------------------------*/
#Shipmember		#profil		.profil		{
	row-gap:50px;
}
#Shipmember		#profil		.profil		.champs	{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 20px;
}