/* 
 * Feuilles de style d'Euridice Opera
 * Partie commune à toutes les pages
 * v6, 7/2024
 */



:root
{	/* Couleurs */
/*	--blanc: #fcfcfc;*/
	--blanc: #ffffff;
	--noir: #000000;
	--gris_bleu: #f0f4f8;
	--gris_clair: #dddddd;
	--gris_fonce: #999999;
	--gris_over: #999999;
	--bleu_fonce: #6c83b9;
	--bleu_clair: #bcc2de;
	
	/* Textes */
	--titre_taille: 30px;
	--gras: 600;
	--titre_info_taille: 25px;
	--texte_taille: 15px;
	--maigre: 400;
	--inter_texte: 25px;
	
	/* Espaces */
	--petit_espace: 20px;
	--grand_espace: 40px;
}

body
{	font-family: "Whitney SSm A", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--blanc);
}


/************ Corrections balises *************/

img
{	border:0;
}

form
{	margin:0;
	padding:0;
}

/*
h1, h2, h3
{	font-weight: unset;
	font-size: unset;
	margin: 0;
}
*/

/************************************************
*
* Outils
*
*************************************************/

.clear
{	clear: both;
}

.filet_noir,
.filet_blanc
{	clear: both;
	max-width: 1180px;
}

.filet_noir
{	border-top: 1px solid var(--noir);
}
.filet_blanc
{	border-top: 1px solid var(--blanc);
}

.fond_bleu
{	background-color: var(--bleu_fonce);
}

.fond_blanc
{	background-color: var(--blanc);
}

.texte_noir
{	color: var(--noir);
}
.texte_blanc
{	color: var(--blanc);
}
.texte_bleu
{	color: var(--bleu_fonce);
}
.texte_gris
{	color: var(--gris_fonce);
}

.gauche
{	text-align: left;
}	
.droite
{	text-align: right;
}	
.justifie
{	text-align: justify;
}	
.centre
{	text-align: center;
}	

.espace_avant
{	margin-top: var(--petit_espace);
}
.pt_espace_avant
{	margin-top: 10px;
}

.maigre
{	font-weight: var(--maigre);
}

.gras
{	font-weight: var(--gras);
}

.ital
{	font-style: italic;
}

.exposant
{	vertical-align: 6px;
	font-size: 50%;
	line-height: 0;
}

.exposant_titre
{	vertical-align: 10px;
	font-size: 50%;
	line-height: 0;
}


/************ Liens *************/

a,
a:link,
a:visited
{	text-decoration: none;
	color: var(--noir);
}

a:hover
{	text-decoration: none;
	color: var(--gris_over);
}


/************************************************
*
* Menu et langues
*
*************************************************/

#appel_menu
{	position: fixed;
	top: var(--grand_espace);
/*	left: var(--grand_espace);*/
	margin: 0 0 0 var(--grand_espace);
	height: 29px;
	float: left;
	z-index: 10;
}


#appel_courriel,
#appel_tel
{	position: fixed;
	right: var(--grand_espace);
	width: 35px;
	float: right;
	z-index: 10;
}

#appel_courriel
{	top: var(--grand_espace);
}

#appel_tel
{	top: 90px;
}


#cont_langues
{	margin: 45px 0 0 95px;
	float: left;
	width: 70%;
}
.une_langue
{	height: var(--petit_espace);
	margin-left: var(--petit_espace);
	float: left;
}

@media only screen and (max-width:710px)
{	#appel_menu
	{	top: 10px;
		left: 10px;
		margin: 0;
	}
	#appel_courriel
	{	top: 10px;
		right: 10px;
	}
	#appel_tel
	{	top: 60px;
		right: 10px;
	}
	#cont_langues
	{	margin: 15px 0 0 65px;
	}
}			/* fin de écran inferieur à 710 px */


/************************************************
*
* Haut de page
*
*************************************************/

div#image_haut_cont
{	width: 100%;
}

#image_haut
{	width: 100%;
	z-index: -10;
	position: fixed;
}

#haut_une
{	width: 100%;
	position: relative;
}

/***** Le logo de haut de page *****/

#logo_une_cont
{	margin: 0 12% 0 12%;
}

/*** Page de garde, 1260x730, une ou deux lignes ***/

#logo_euridice_une
{	width: 100%;
	max-width: 1008px;			/* 1260 - (126*2) */
	margin: 14% auto 10% auto;		/* Version 1 ligne */
}
@media only screen and (max-width:710px)
{	#logo_euridice_une
	{	max-width: 632px;			/* 800 - (84*2) */
		margin: 15% auto 18% auto;					/* Version 2 ligne */
	}
}			/* fin de écran inferieur à 710 px */

/*** Autres pages, 1260x500, seulement une ligne ***/

#logo_euridice_suite
{	width: 100%;
	max-width: 1008px;			/* 1260 - (126*2) */
	margin: 10% auto 5% auto;		/* Réglage hauteur */
}
@media only screen and (max-width:710px)
{	#logo_euridice_suite
	{	margin: 16% auto 6% auto;		/* Réglage hauteur */
		max-width: 632px;			/* 800 - (84*2) */
	}
}			/* fin de écran inferieur à 710 px */



/************************************************
*
* La page, fond blanc et textes
*
*************************************************/

/************ Centrer la page (bloc du haut et contenu) *************/

#la_page_haut
{	max-width: 1340px;
	margin: 0 auto 0 auto;
}

#la_page
{	background-color: var(--blanc);
}


/************ Les marges de la page *************/

div#page_cont
{	background-color: var(--blanc);
	max-width: 1260px;
	margin: 0 auto 0 auto;
	padding: 0 var(--grand_espace) 0 var(--grand_espace);
}

@media only screen and (max-width:710px)
{	div#page_cont
	{	/*padding-left: var(--petit_espace);
		padding-right: var(--petit_espace);*/
	}
}			/* fin de écran inferieur à 710 px */


/************ Introduction, titre et texte ************/

.intro_cont,
.intro_cont_artiste
{	clear: both;
	padding: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	background-color: var(--blanc);
	color: var(--noir);
	max-width: 1180px;
}
@media only screen and (max-width:710px)
{	.intro_cont
	{	padding: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);
	}
	.intro_cont_un_item
	{	padding: var(--grand_espace) 0 0 0;
	}

}			/* fin de écran inferieur à 710 px */

.titre_intro
{	margin: 0 var(--grand_espace) 0 var(--grand_espace);
	font-size: var(--titre_taille);
	font-weight: var(--gras);
	line-height: 40px;
	text-align: center;
}
@media only screen and (max-width:710px)
{	.titre_intro
	{	margin:0;
	}
}

.sous_titre_intro
{	margin: var(--petit_espace) var(--grand_espace) 0 var(--grand_espace);
	font-size: var(--texte_taille);
	font-weight: var(--gras);
	line-height: var(--inter_texte);
	color: var(--gris_fonce);
	text-align: center;
}

.texte_intro
{	margin: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	font-size: var(--texte_taille);
	font-weight: var(--maigre);
	line-height: var(--inter_texte);
	text-align: justify;
/*
	word-wrap: break-word;
	hyphens: auto;
*/
}

@media only screen and (max-width:710px)
{	.sous_titre_intro,
	.texte_intro
	{	margin: var(--petit_espace) 0 0 0;
	}
}			/* fin de écran inferieur à 710 px */

.lien_artiste
{	padding-top: 25px;
	text-align: left;
}


/************************************************
*
* Les colonnes
*
*************************************************/

/************ 3 colonnes ************/

@media only screen and (min-width:1001px)
{	div.colonne_2_1,
	div.colonne_2_2
	{	
	}

	div.colonne_3_1,
	div.colonne_3_2,
	div.colonne_3_3
	{	float: left;
		width: 30%; 
	}

	div.colonne_3_1
	{	clear: both;
	}

	div.colonne_3_2,
	div.colonne_3_3
	{	 margin-left: 5%;
	}
}		/* fin de écran supérieur à 1000 px */

/************ 2 colonnes ************/

@media only screen and (max-width:1000px)
{	div.colonne_3_1,
	div.colonne_3_2,
	div.colonne_3_3
	{
	}
	
	div.colonne_2_1,
	div.colonne_2_2
	{	float: left;
		width: 48%;
	}

	div.colonne_2_1
	{	clear: both;
	}

	div.colonne_2_2
	{	margin-left: 4%;
	}
}		/* fin de écran inferieur à 1000 px */

/************ 1 colonne ************/

@media only screen and (max-width:710px)
{	div.colonne_2_1,
	div.colonne_2_2
	{	width: 100%;
	}
	
	div.colonne_2_2
	{	margin-left: 0;
	}
}		/* fin de écran inferieur à 710 px */


/************************************************
*
* Lignes de fin de colonne
* Si deux pastilles sur 3 colonnes ou 1 pastille sur 2 ou 3 colonnes
*
*************************************************/

/************ 3 colonnes, 2 pastilles ************/

@media only screen and (min-width:1001px)
{	div.pastilles2sur3colonnes
	{	width: 65%;
		margin: 0 auto 0 auto;
	}
	
	div.colonne_3_2_1,
	div.colonne_3_2_2
	{	float: left;
		width: 46%;
	}
	
	div.colonne_3_2_1
	{	clear: both;
	}
	div.colonne_3_2_2
	{	margin-left: 8%;
	}
}


/************ 3 colonnes, 1 pastille ************/

@media only screen and (min-width:1001px)
{	div.pastilles1sur3colonnes
	{	width: 30%;
		margin: 0 auto 0 auto;
	}
	
	div.colonne_3_1_1
	{	clear: both;
		float: left;
		width: 100%;
	}

}


/************ 2 colonnes, 1 pastille ************/

@media only screen and (max-width:1000px) and (min-width:710px)
{	div.pastilles1sur2colonnes
	{	width: 50%;
		margin: 0 auto 0 auto;
	}
}
@media only screen and (max-width:1000px)
{	div.colonne_2_1_1
	{	clear: both;
		float: left;
		width: 100%;
	}
}



/************************************************
*
* Les pastilles
*
*************************************************/

/************ le conteneur ************/

div#pastilles_cont
{	clear: both;
	background-color: var(--blanc);
	color: var(--noir);
	padding: 0 var(--grand_espace) 0 var(--grand_espace);
	max-width: 1180px;
}
@media only screen and (max-width:710px)
{	div#pastilles_cont
	{	/*max-width: 400px;*/
		margin: 0 auto 0 auto;
		/*padding: 0 var(--petit_espace) 0 var(--petit_espace);*/
		padding: 0 0 0 0;
	}
}

/************ les pastilles ************/

div.une_pastille
{	border-top: 1px solid var(--noir);
	margin-top: var(--grand_espace);
	padding: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);
}

div.pastille_titre,
h2.pastille_titre,
h3.pastille_titre,
div.pastille_soustitre
{	text-align: center;
}

div.pastille_titre,
h2.pastille_titre,
h3.pastille_titre
{	font-size: var(--titre_info_taille);
	font-weight: var(--gras);
	line-height: 36px;
	margin: 0;
}

div.pastille_soustitre
{	font-size: var(--texte_taille);
	font-weight: var(--gras);
	line-height: var(--inter_texte);
	color: var(--gris_fonce);
}

.une_pastille pastille_soustitre:hover
{	color: var(--gris_over);
}

.pastille_texte
{	margin-top: var(--petit_espace);
	font-size: var(--texte_taille);
	font-weight: var(--maigre);
	line-height: 20px;
	hyphens: auto;
}

.pastille_ligne
{	padding-top: 10px;
	margin: 0 auto 0 auto;
	max-width: 400px;
}

.pastille_pub
{	width: 100%;
}

@media only screen and (max-width:710px)
{ .pastille_pub_cont
	{	max-width: 400px;
		margin: 0 auto 0 auto;
	}
}

/************ Détail des spectacles et sejours ************/

.spect_date,
.spect_lieu
{	color: var(--gris_fonce);
}
.spect_personne
{	font-weight: var(--gras);
}
.spect_programme
{	font-weight: var(--maigre);
}

.plus_photos
{	color: var(--gris_fonce);
	font-weight: var(--gras);
}

.prix_personne
{	margin-top: 23px;
}

.photo_dans_dest		/* Pour les croisieres */
{	/*clear: both;*/
	float: left;
	position: static;
	width: 212px;
	padding-right: 20px;
}


/************************************************
*
* Les fleches de navigation horizontale
*
*************************************************/

.les_fleches_pt
{	visibility: hidden;
	padding: 0;
	padding: 0;
}

@media only screen and (max-width:710px)
{	.les_fleches_pt
	{	visibility: visible;
		text-align: center;
		width: 100%;
		margin: var(--petit_espace) auto 0 auto;
		padding-bottom: var(--petit_espace);
	}

	#nav_fleche_gauche,
	#nav_fleche_droite
	{	visibility: hidden;
		width: 0;
		height: 0;
	}
}		/* fin de petit écran */

#nav_fleche_gauche_pt,
#nav_fleche_droite_pt,
#nav_fleche_gauche,
#nav_fleche_droite
{	margin: 0;
}

#nav_fleche_gauche_pt,
#nav_fleche_gauche
{ float: left;
}

#nav_fleche_droite_pt,
#nav_fleche_droite
{	float: right;
}

#nav_fleche_gauche a,
#nav_fleche_droite a
{	
}

#nav_fleche_gauche_pt a:hover,
#nav_fleche_droite_pt a:hover,
#nav_fleche_gauche a:hover,
#nav_fleche_droite a:hover
{	opacity: .5;
}

img.petite_fleche
{	height: 40px;
	width: 40px;
}
@media only screen and (max-width:710px)
{	img.petite_fleche
	{	height: 30px;
		width: 30px;
	}
}

/************************************************
*
* Les listes de séjours, d'hotels, d'infos…
*
*************************************************/

.liste_cont
{	clear: both;
	background-color: var(--blanc);
	color: var(--noir);
	margin: var(--grand_espace);
	max-width: 1180px;		/* 1260 - 80 */
}
@media only screen and (max-width:710px)
{	div.liste_cont
	{	margin: var(--grand_espace) 0 var(--grand_espace) 0;
	}
}

div.liste_bloc
{	
}
@media only screen and (max-width:710px)
{	div.liste_bloc
	{	margin: 0 auto 0 auto;
/*		max-width: 400px;*/
	}
}

div.une_liste
{	clear: both;
	border-top: 1px solid var(--noir);
	padding: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	margin-top: var(--grand_espace);
}
@media only screen and (max-width:710px)
{	div.une_liste
	{	margin: var(--grand_espace) auto 0 auto;
		padding: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);
	}
}

div.image_liste
{	float: left;
	margin-right: 40px;
}
@media only screen and (min-width:1000px)
{	div.image_liste img
	{	max-width: 354px;
	}
}
@media only screen and (max-width:1000px)
{	div.image_liste
	{	float: none;
		margin: 0 auto 0 auto;
		max-width: 400px;
		width: 100%;
	}
}

a .image_liste:hover
{	opacity: .8;
}

div.bloc_texte_liste
{	margin: 0 0 0 394px;
	min-height: 319px;
}
@media only screen and (max-width:1000px)
{	div.bloc_texte_liste
	{ margin: 0 auto 0 auto;
		min-height: 0;
		max-width: 400px;
	}
}			/* fin de écran inferieur à 710 px */
@media only screen and (max-width:1000px)
{	.image_int
	{	width: 100%;
	}
}			/* fin de écran inferieur à 710 px */

.image_seule
{	margin-top: 20px;
}
@media only screen and (max-width:474px)		/* 354+120 */
{	.image_seule
	{	width: 100%;
	
	}
}			/* fin de écran inferieur à 710 px */



div.liste_titre,
h2.liste_titre,
h3.liste_titre
{	font-size: var(--titre_info_taille);
	font-weight: var(--gras);
	line-height: 36px;
	padding-bottom: var(--grand_espace);
	margin: 0;
}
@media only screen and (max-width:710px)
{	div.liste_titre
	{	margin-top: var(--grand_espace);
		text-align: center;
	}
}			/* fin de écran inferieur à 710 px */

div.liste_texte
{	font-size: var(--texte_taille);
	font-weight: var(--maigre);
	line-height: var(--inter_texte);
}

div.index_haut
{	max-width:350px;
	margin: var(--grand_espace) auto 0 auto;
}

.index_texte
{	padding-top: 7px;
	font-size: var(--texte_taille);
	font-weight: var(--maigre);
/*	line-height: var(--inter_texte);*/
	line-height: 20px;;
	text-align: left;
}



/************************************************
*
* Les formulaires
*
*************************************************/

div.formulaire_cont
{	max-width: 400px;
	margin: 0 auto 0 auto;
}

div.formulaire_titre
{	padding-top: 15px;
}
.asterisque
{	font-weight: var(--gras);
}
.asterisque:after
{	content: " *";
}

input.formulaire_input,
textarea.formulaire_text,
select.formulaire_popup,
input.formulaire_input_page
{	width: 100%;
}

input.formulaire_input
{	height: 25px;
/*	max-width: 306px;*/
}

input.formulaire_input_page
{	height: 25px;
	max-width: 392px;
}

select.formulaire_popup,
select.formulaire_popup_page
{	height: 30px;
	width: 100%;
	padding: 5px;
	max-width: 400px;
	color: var(--noir);
	background-color: var(--blanc);
	border: solid 1px var(--noir);
	border-radius: 5px;
}

input.proteger		/* antispam */
{	width: 0;
	height: 0;
	display: none;
}

/************ Les boutons ************/

div.bloc_button
{	text-align: center;
}

.button,
.button:hover
{ border: 1px solid var(--gris_fonce);
	border-radius: 5px;
  padding: 8px 32px;
/*  padding: 16px 32px;*/
  background-color: var(--blanc);
  color: var(--noir);
  text-align: center;
  text-decoration: none;
	font-family: "Whitney SSm A", Verdana, Arial, Helvetica, sans-serif;
	font-size: var(--texte_taille);
	font-weight: var(--maigre);
  transition-duration: 0.4s;
  cursor: pointer;
}

/*
@media only screen and (max-width:540px)
{	.button
	{	max-width: 100%;
	  padding: 6px 8px;
	}
}
*/

.button:hover
{	background-color: var(--gris_clair);
}

.btn_reserver
{	border: 3px solid var(--gris_fonce);
	font-weight: var(--gras);
	width: 100%;
	max-width: 400px;
}

/************************************************
*
* Liste d'initiales
*
*************************************************/

.initiales,
.initiales a
{	text-align: center;
	padding-right: 5px;
	font-size: var(--titre_info_taille);
}
@media only screen and (max-width:710px)
{	.initiales,
	.initiales a
	{	font-size: 20px;
	}
}

/************************************************
*
* Les sous parties
*
*************************************************/

/************ Titres des sous parties ************/

.titre_sous_partie_cont
{	clear: both;
	padding: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	margin: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	border-top: 1px solid var(--noir);
	background-color: var(--blanc);
	color: var(--noir);
	max-width: 1180px;
}
@media only screen and (max-width:710px)
{	.titre_sous_partie_cont
	{	padding: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);
		/*margin: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);*/
		margin: var(--grand_espace) 0 0 0;
	}
}			/* fin de écran inferieur à 710 px */

.titre_sous_partie
{	font-size: var(--titre_info_taille);
	font-weight: var(--maigre);
	line-height: 40px;
	text-align: center;
	margin: 0;
}


/************ Signature des commentaires ************/

.signature
{	margin-top: var(--petit_espace);
	font-style: italic;
}

/************************************************
 *
 * Pied de page
 *
 *************************************************/

/**************** Bloc texte pdp ***************/

#pdp_cont
{	clear: both;
	margin-bottom: var(--grand_espace);
	background-color: var(--blanc);
	color: var(--noir);
}

div#pdp_bloc
{	max-width: 1180px;		/* 1260 - 80 */
	margin: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
}
@media only screen and (max-width:710px)
{	div#pdp_bloc
	{	/*margin: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);*/
		margin: var(--grand_espace) 0 0 0;
	}
}

div.un_bloc_pdp
{	max-width: 1180px;		/* 1260 - 80 */
	border-top: 1px solid var(--noir);
	margin-top: var(--grand_espace);
	padding: var(--grand_espace) var(--grand_espace) 0 var(--grand_espace);
	text-align: center;
}
@media only screen and (max-width:710px)
{	div.un_bloc_pdp
	{	padding: var(--grand_espace) var(--petit_espace) 0 var(--petit_espace);
	}
}			/* fin de écran inferieur à 710 px */

/**************** Logo et citation ***************/

#logo_pdp
{	width: 200px;
}

#citation_texte
{	font-size: var(--titre_info_taille);
}
#citation_auteur
{	font-size: 12px;
}


/************ Les blocs de texte ************/

h2.titre_pdp,
div.texte_pdp
{	text-align: center;
}

h2.titre_pdp
{	font-size: var(--titre_taille);
	font-weight: var(--gras);
	line-height: 36px;
	margin: 0;
}

div.texte_pdp
{	font-size: var(--texte_taille);
	font-weight: var(--maigre);
	line-height: var(--inter_texte);
	padding-top: var(--grand_espace);
}