/*Ce fichier regroupe toutes les modifications et tous les ajouts de code css*/
/*Site Country Club Portusien Joomla 6*/


/* <---------============= Début modifications du menu principal =============--------->*/

.metismenu.mod-menu {
display: flex;
flex-wrap: wrap;				/*Passage à la ligne du menu si besoin de 2 lignes*/
}

.container-nav {
background-color: #D9B382;		/*marron clair*/
margin-left: 0;					/*Container en pleine largeur*/
margin-right: 0;				/*idem*/
width: 100%;
justify-content: center !important;		/*Centrer les éléments de menu*/
padding-top: 0.1em !important;			/*Espace au dessus des liens du menu*/
padding-bottom: 0.5em !important;		/*Espace sous les liens du menu*/
}

.metismenu-item li {				/*Eléments de sous-menu*/
	border: 1px solid #0000FD;		/*Bordure bleue du logo*/
	margin-bottom: 0.1em;			/*Petit espace entre les éléments de sous-menu*/
}

.metismenu-item li:hover {			/*Eléments de sous-menu au survol*/
	border: 1px solid #8B5F3C;		/*Bordure marron foncé*/
	color: black !important;		/*Texte noir au survol*/
}

/* NE FONCTIONNE PAS !! Force l'ouverture des sous-menus au clic sur le lien parent non pas sur la petite flèche à côté */
/*.nav-item.dropdown > .dropdown-menu {
    display: none;
}
.nav-item.dropdown.active > .dropdown-menu {
    display: block;
}*/


/* <-----------============= Fin modifications du menu principal =============------------>*/


/* <--------============= Début Modifications entête en haut du site =============-------->*/

.container-below-top {
display: block !important;	/*Annule "Display : flex" par défaut du template, pour avoir le container en pleine largeur*/
background-color: #8B5F3C;				/*marron foncé*/
}

.mod-menu-connexion-membres {			/*Classe perso dans le module Menu connexion membres*/
background-color: #D9B382;				/*marron clair*/
box-shadow: 0px 0px 7px grey;			/*Ombre grise à l'extérieur*/
box-shadow: inset 0px 0px 12px #0000FD;	/*Ombre bleue à l'intérieur*/
justify-content: center;				/*Pour centrer le lien Espace membres en vue sur grand écran*/
}

@media (max-width: 768px) {				/*Pour centrer le lien Espace membres en vue sur smartphone*/
  .mod-menu-connexion-membres {			/*Ecran de largeur < ou = à 768 px = mobile*/
  display: flex;
  align-content: center !important;
  }
}

.mod-logo {								/*Module Nom + description + logo + photo couple*/
/*background-color: #D9B382;			/*marron clair*/
}

.mod-rejoignez-nous {					/*Module du bouton Rejoignez-nous*/
background-color: #D9B382;				/*marron clair*/
box-shadow: 0px 0px 7px grey;			/*Ombre grise à l'extérieur*/
box-shadow: inset 0px 0px 12px #0000FD;	/*Ombre bleue à l'intérieur*/
}

#mod-custom121 {						/*Module du bouton Rejoignez-nous*/
font-size: 20px !important;
margin-top: 6px;
}

#mod-custom116 {						/*Module Menu connexion membres*/
/*text-align: center !important;*/
/*margin-left: 15px !important;*/
}

#mod-finder-searchword119 {				/*Module de recherche*/
background-color: #D9B382;				/*marron clair*/
box-shadow: 0px 0px 7px grey;			/*Ombre grise à l'extérieur*/
box-shadow: inset 0px 0px 12px #0000FD;	/*Ombre bleue à l'intérieur*/
}

/* <--------============= Fin Modifications entête en haut du site =============-------->*/

/* <--------============= Début Modifications couleurs du site =============-------->*/

a {
	text-decoration: none !important;	/*Supprime le soulignement par défaut des liens dans les articles*/
}

a:hover {						/*Couleur de fond au survol des liens*/
background-color: #F7CF9C !important; 	/*Marron clair*/
}



/* <--------============= Fin Modifications couleurs du site =============-------->*/

/* <--------===== Début Classes Styles css pour insérer les articles de presse avec une légende intégrée dessous dans les articles Presse saison 20xx/20xx====-------->*/ 

.presse-figure {						/*Pour les articles de presse*/
	display: table;
	margin: auto;
	padding: 5px;
	background: #F7CF9C;				/*marron clair*/
	border: 1px solid #F7CF9C;			/*marron clair*/
}
.presse-figcaption {					/*Pour la légende sous les articles de presse*/
	display: table-caption;
	caption-side: bottom;
	text-align: center;
	font-style: italic;
	margin-top: 2px;
	padding: 5px;
	background: #F7CF9C;				/*marron clair*/
	border: 1px dotted #F7CF9C;			/*marron clair*/
	box-shadow: inset 0px 0px 12px #0000FD;	/*Ombre bleue à l'intérieur*/
}
/* <--------------------- Fin Styles css des articles de presse -------------------->*/

/* <---==== Modifications de la position Top A (pour la ligne "Bienvenue dans l'Espace membres" après connexion) ===-->*/

.top-a.card {							/*Position top-a du template*/
padding: 0em !important;				/*Supprime le padding*/
background-color: #0000FD !important;	/*Bleu du logo*/
color: white;							/*Couleur du texte en blanc*/
border: 1px solid grey;					/*bordures en gris*/
box-shadow: 0px 0px 5px grey;			/*Ombre à l'extérieur*/
}

.grid-child.container-top-a{			/*Container de la position top-a du template*/
padding: 0em !important;				/*Supprime le padding*/
margin-top: 0.5em !important;			/*Ajoute un espace entre le module "Bienvenue..." et le menu*/
}

.card-body{								/*Body de la position top-a du template*/
padding-top: 0em !important;			/*Supprime le padding haut*/
padding-bottom: 0.1em !important;		/*Réduit le padding bas*/
}

/* <-----------------============= Modifications de la position Footer =============------------------->*/

#mod-custom124 {						/*Module personnalisé mod_majcopyright en position Footer*/	
margin-top: -15px;
margin-bottom: -20px;
}

.container-footer {
	margin-top: 0.1em;					/*Petit espace de séparation entre le pied de page et le footer*/
}


/* <--------============= Modifications de la flèche Haut de page =============-------->*/

.back-to-top-link {							/*Petite flèche "Haut de page" en bas de la fenêtre*/
color: #0000FD !important;					/*Bleu du logo*/
background-color: rgb(241, 247, 253, 0.65);	/*Fond bleu très clair*/
border: 1px solid black;					/*Bordure noire*/
}

/* <-----------=========== Modifications du pied de page avec 3 modules en position Bottom-b ===========---------->*/

.grid-child.container-bottom-b {			/*Container de la position bottom-b du template*/
	background-color: #8B5F3C;				/*fond du container marron foncé*/
	width: 100vw;							/*Pour avoir le container en pleine largeur*/
	position: relative;						/*Idem*/
	left: 50%;								/*Idem*/
	right: 50%;								/*Idem*/
	margin-left: -50vw;						/*Idem*/
	margin-right: -50vw;					/*Idem*/
}

.bottom-b.card {
	background-color: #8B5F3C;				/*fond des modules marron foncé*/
	border: none;							/*Annule les bordures par défaut*/
	color: #D9B382;							/*Couleur du texte en blanc*/
	margin-left: 2em;						/*Marge à gauche des modules*/
}

/* <-----------============= Début code réseaux sociaux dans module Contacts =============------------>*/
.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.1em 0.5em;
  margin-right: 9em;				/* Largeur du bouton bleu Facebook*/
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 0.8em;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  margin-top: -3em;
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

/* <-----------============= Fin code réseaux sociaux dans module Contacts =============------------>*/
	
/* <--------============= Paramétrage des accordéons dans l'article Infos pratiques =============-------->*/

.persosliders {            		        /*Pour modifier le style des accordéons*/
border-top: 10px solid #F7CF9C !important;  /*Bordure marron clair au dessus des accordéons*/
box-shadow: inset 0px 0px 8px #0000FD;		/*Ombre bleue à l'intérieur*/
}

/* <------------------------ Début modifications calendrier iCagenda ------------------------>*/

.ic-calendar-container {
background-color: #F7CF9C;	/*Fond marron clair*/
border: 3px solid #ddd;
}

dialog.ic-calendar-dialog {
background-color: #f5f5f5;	/*Fond boîte de dialogue gris très clair*/
}

@media screen and (min-width: 900px) {	/*Largeur de la boîte de dialogue 40 % pour les écrans à partir de 900 px et +*/
	dialog.ic-calendar-dialog {
	width: 40%;
	}
}

/* <---------------- Début Styles css du tableau index horizontal dans l'article Toutes les chorégraphies --------------->*/

.boutons-lettre {
    display: flex;
    flex-wrap: wrap;
	justify-content:center;
}
.boutons-lettre li {
    list-style: none; 		/*Pour ne pas afficher la puce devant les lettres*/
}
.boutons-lettre a {
    border: 1px solid black;
    margin : 4px 3px 0 0;	 /*-1px -1px 0 0 = Pour que les traits verticaux entre 2 cases se chevauchent*/
    padding : 5px 0 5px 0;	 /*Marges à l'intérieur des cases*/
    width : 32px;			/*Largeur des cases*/
    text-align:center;
    text-decoration: none;	 /*Pour ne pas afficher le tiret sous les lettres*/
    display: block;
    background-color: #dceefe;	/*Bleu ciel*/
}

/*Styles css pour le zoom sur les lettres de l'alphabet dans l'article Toutes les chorégraphies*/
.zoom_image {
    display:inline-block;
    /*width:30px;*/
    /*height:30px;*/
    position: relative;
	margin : 3px 3px 7px 0;
	text-align:center;
	color: #0403c6 !important;				/*Couleur des lettres en bleu du logo du club*/
	padding : 2px 0 2px 0;	 				/*Marges à l'intérieur des cases*/
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    /*-ms-transition: all 200ms ease-in;*/ 	/*Propriété invalide*/
    /*-ms-transform: scale(1);*/			 /*Propriété invalide*/
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
}
.zoom_image:hover {
    box-shadow: 0px 0px 150px #000000;		/*Ombre à l'extérieur au survol*/
	z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    /*-ms-transition: all 200ms ease-in;*/ 	/*Propriété invalide*/
    -ms-transform: scale(1.5);   /*1.5 = zoom 150 %*/
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

/* <---------------- Début Styles css des tableaux pour les chorégraphies par saison --------------->*/

table.tab-chor-saison  /*Classe "tableau-chorégraphies-par-saison"*/
 {
border: medium solid #6495ed;
border-collapse: collapse;
table-layout: fixed;
/*width: 80%;*/
margin: 0px auto 0px auto;	/*Pour centrer le tableau en largeur dans la page*/
}

table.tab-chor-saison
th {							/*Titre des colonnes sur écran large std*/
font-family: monospace;
border: thin solid #6495ed;
padding: 5px;
font-size: 130%;
text-align: center;
background-color: #D0E3FA;	/*Obligatoire au cas ou l'image ne s'affiche pas*/
background-image: url("/images/image_articles/ciel.jpg");
}

@media screen and (max-width: 780px){	/*Ecran de largeur < ou = à 780 px = mobile*/
table.tab-chor-saison
th {						/*Colonnes des tableaux*/
font-size: 100%;		/*Taille de la police du titre des colonnes sur mobile*/
 }
}

table.tab-chor-saison
td {							/*Lignes des tableaux = nom des chorées*/
font-family: sans-serif;
border: thin solid #6495ed;
padding: 5px;
text-align: center;
background-color: #ffffff;
}

table.tab-chor-saison
caption {						/*Légende des tableaux*/
font-family: sans-serif;
caption-side: top;			/*Positionne la légende au dessus des tableaux*/
text-align: center;
}

table.tab-chor-saison
 a:hover {
/*color: #0000cc !important;	/*Couleur bleu foncé des liens survolés dans les tableaux des chorégraphies par saison pour la classe tab-chor-saison*/
}

table.tab-1col	/*Tableaux à 1 colonne*/
 {
width: 30%;		/*Largeur 30% sur écran large std*/
 }	

@media screen and (max-width: 780px){	/*Ecran de largeur < ou = à 780 px = mobile*/
table.tab-1col	/*Tableaux à 1 colonne*/
 {
width: 80%;		/*Largeur 80% sur mobile*/
 }
}
 
 /*table.tab-2col	/*Tableaux à 2 colonnes*/
 /*{
width: 50%;			/*Largeur 50%*/
/* }*/
 
table.tab-3col		/*Tableaux à 3 colonnes*/
 {
width: 70%;			/*Largeur 70% sur écran large*/
 }

@media screen and (max-width: 780px){	/*Ecran de largeur < ou = à 780 px = mobile*/
table.tab-3col		/*Tableaux à 3 colonnes*/
 {
width: 145%;		/*Largeur sur mobile*/
 }
}
	
/* <---------------- Début Styles css pour les articles CD du club avec les jaquettes --------------->*/

.container-fluid {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}
.bloc-photo {
    display: flex;
    flex-wrap: wrap;
	justify-content:center;
	border: 1px solid black;
    margin : 1px 1px 0 0;
    padding : 1px 0 1px 0;
}
.cadre-photo {
	border: 2px solid black;
	margin : 1px 1px 1px 1px;
}