/***********************************************************************************************************
*
*  Easy Custom OceanWP Shop [REV:1.8]  

*  1.  STYLE BACK OFFICE PLUGIN
*  2.  Table des Matières
*  3.  Scroll avec des ancres de navigation sous une page Gutenberg
*  4.  Bouton retour vers le haut
*
*  
* 
***********************************************************************************************************

/*----------------------------------------------------------------------------------------
		                STYLE BACK OFFICE PLUGIN
/*---------------------------------------------------------------------------------------*/


	
/* Style Page de réglages du plugin */
/* titre H1 des pages de réglages du plugin
 régle css avec avec WordPress en langue anglaise(3 classes) puis en langue française (2 classes) */
.toplevel_page_ecos_settings_page h1,
.ecos-settings_page_woocommerce_standard_shop h1,
.ecos-settings_page_oceanwp_theme_shop h1,
.parametres-ecos_page_oceanwp_theme_shop h1,
.parametres-ecos_page_woocommerce_standard_shop h1{
		  
		font-size:26px;
		font-weight:600;
		
}
	  

/* titre des sections */ 
/* régle css avec avec WordPress en langue anglaise(3 classes) puis en langue française (2 classes) */
.toplevel_page_ecos_settings_page h2,
.ecos-settings_page_woocommerce_standard_shop h2,
.ecos-settings_page_oceanwp_theme_shop h2,
.parametres-ecos_page_oceanwp_theme_shop h2,
.parametres-ecos_page_woocommerce_standard_shop h2{
		  
		color: #135E96!important;
		font-weight:700;
		font-size:1.5em;
		
}

	  
/* titre H3 des pages de réglages du plugin */
/* régle css avec avec WordPress en langue anglaise(3 classes) puis en langue française (2 classes) */
.toplevel_page_ecos_settings_page h3,
.ecos-settings_page_woocommerce_standard_shop h3,
.ecos-settings_page_oceanwp_theme_shop h3,
.parametres-ecos_page_oceanwp_theme_shop h3,
.parametres-ecos_page_woocommerce_standard_shop h3{ 
		  
		font-size: 1.3em;
		
}

/* pour les formulaires des sections contenant les champs de réglages 
   amélioration du responsive */
.toplevel_page_ecos_settings_page form,
.ecos-settings_page_woocommerce_standard_shop form,
.ecos-settings_page_oceanwp_theme_shop form,
.parametres-ecos_page_oceanwp_theme_shop form,
.parametres-ecos_page_woocommerce_standard_shop form {
		padding:10px;
}
	
.souligne-texte {
	
	background: linear-gradient(180deg,transparent 75%,rgba(25,133,255,0.3) 0);
	
}


/* pour les textes d'intro des Pages */
.bloc-intro {
	
    background-color: rgba(143, 182, 63, 0.51);
    border-left: 4px solid rgba(143, 182, 63, 0.3);
    border-radius: 4px;
    padding: 10px 10px 10px 10px;
	margin-bottom:30px;
	font-size:16px;
	width:72%;
	
}

/* pour les textes d'intro des sections */
.mise-en-avant {
	
	 border-left: 4px solid rgba(243,112,32,0.7);
	 background-color:rgba(243,230,114,0.7)!important;
	 border-radius:4px;
	 padding:1.1em;
	 margin:1.1em;
	 font-size: 14px;
	 width:72%;
	 
}


/* effet ombré inférieur pour les tables qui contiennent les sections de réglages */
/* régle css avec avec WordPress en langue anglaise(3 classes) puis en langue française (2 classes) */
.toplevel_page_ecos_settings_page table,
.ecos-settings_page_woocommerce_standard_shop table,
.ecos-settings_page_oceanwp_theme_shop table,
.parametres-ecos_page_oceanwp_theme_shop table,
.parametres-ecos_page_woocommerce_standard_shop table { 
	box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
	margin-bottom:30px;
}


/* Règles Pour les mobiles et tablette */ 
@media only screen and (max-width:768px){
	
	.toplevel_page_ecos_settings_page img,
	.ecos-settings_page_woocommerce_standard_shop img,
	.ecos-settings_page_oceanwp_theme_shop img,
	.parametres-ecos_page_oceanwp_theme_shop img,
	.parametres-ecos_page_woocommerce_standard_shop img {
		width: 70%;
		height:auto;
		margin-bottom:20px;
	
	}
	
}


/* Règles Pour les mobiles en mode portrait*/ 
@media only screen and (max-width:480px){
	
	/* Blocs d'introduction */
	.toplevel_page_ecos_settings_page .bloc-intro,
	.ecos-settings_page_woocommerce_standard_shop .bloc-intro,
	.ecos-settings_page_oceanwp_theme_shop .bloc-intro ,
	.parametres-ecos_page_oceanwp_theme_shop .bloc-intro ,
	.parametres-ecos_page_woocommerce_standard_shop .bloc-intro  {
		width: 100%;
	}
	
	/* Blocs mise en avant */
	.toplevel_page_ecos_settings_page .mise-en-avant,
	.ecos-settings_page_woocommerce_standard_shop .mise-en-avant,
	.ecos-settings_page_oceanwp_theme_shop .mise-en-avant,
	.parametres-ecos_page_oceanwp_theme_shop .mise-en-avant,
	.parametres-ecos_page_woocommerce_standard_shop .mise-en-avant {
		width: 100%;
		margin-top:0;
	}
	
	/* Images */
	.toplevel_page_ecos_settings_page img,
	.ecos-settings_page_woocommerce_standard_shop img,
	.ecos-settings_page_oceanwp_theme_shop img,
	.parametres-ecos_page_oceanwp_theme_shop img,
	.parametres-ecos_page_woocommerce_standard_shop img {
		width: 100%;
		height:auto;
		margin-bottom:20px;
	
	}
	
	/* titre de la page de réglages */
	.toplevel_page_ecos_settings_page h1,
	.ecos-settings_page_woocommerce_standard_shop h1,
	.ecos-settings_page_oceanwp_theme_shop h1,
	.parametres-ecos_page_oceanwp_theme_shop h1,
	.parametres-ecos_page_woocommerce_standard_shop h1 {
		text-align:center;
	}
	
}

/*-----------------------------------------------------------------------
		                  Table des Matières            
------------------------------------------------------------------------*/

/* pour la table des matières*/
.table-of-content {
	
    background-color: rgba(143, 182, 63, 0.51);
    border-left: 4px solid rgba(143, 182, 63, 0.3);
    border-radius: 4px;
    padding: 10px 10px 10px 10px;
	margin-top:20px;
	margin-bottom:30px;
	font-size:16px;
	line-height: 1.5em;
	overflow:auto;
}

.table-of-content #block-left {
	float: left;
	width: 46%;
	border-right: 4px solid rgba(143, 182, 63, 0.3);
	
}

/* Rappel: La propriété overflow spécifie s'il faut découper le contenu 
   ou ajouter des barres de défilement lorsque le contenu d'un élément est trop grand 
   pour tenir dans la zone spécifiée.
    overflow:auto similaire à overflow:scroll, mais il ajoute des barres de défilement 
	uniquement lorsque cela est nécessaire.
*/
.table-of-content #block-right {
	text-align: left;
	overflow:auto;
	margin-left: 47%;/* pour laisser une marge par rapport à la bordure droite du bloc de gauche */
 }

.table-of-content strong {
    font-weight: 700;
}

/* on supprime le soulignement des liens de la table des matières */
.table-of-content a{ 
	text-decoration:none;
	font-weight: 500;
	margin-left:10px;
}  
  
/* On souligne les Liens de la table des matières au survol avec un dégradé de bleu */
.table-of-content a:hover{
	background: linear-gradient(180deg,transparent 75%,rgba(25,133,255,0.3) 0);
}

/* identation pour les sous titre H3 d'une section */
.table-of-content a.sub-title{ 
	margin-left:1.5em;
	color: #3C434A;
	font-weight:400;
}


/* Règles Pour les mobiles en mode portrait*/ 
@media only screen and (max-width:480px){
	
	.table-of-content { width:100%; }
	
	.table-of-content #block-left {
		display:block;
		width: 100%;
		border-right:none;
	}
	
	.table-of-content #block-right {
		display:block;
		width: 100%;
		margin-left:0;
	}
	
}

/*-----------------------------------------------------------------------
		Scroll avec des ancres de navigation sous une page Gutenberg            
------------------------------------------------------------------------*/
	/*La propriété scroll-behavior permet d’activer le smooth scrolling dans votre page 
	sans utiliser Javascript. La propriété scroll-margin-top, 
	appliquée au titre, permet de laisser un peu d’espace lorsque le scroll est terminé : 
	au lieu que le titre soit collé tout en haut de l’écran, il y aura 100px d’espace */

	html {
	  scroll-behavior: smooth;
	}

	p, div, h2  {
	  scroll-margin-top: 100px;
	}
	
	h3, h4 {
	  scroll-margin-top: 55px;
	}
	
/*-----------------------------------------------------------------------
		Bouton retour vers le haut            
------------------------------------------------------------------------*/
.scroll-top {

  background-color: #2271B1;/* couleur par défaut bouton WordPress */
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none; /* évite le soulignement bouton actif */
  border-radius: 4px;
  position: fixed;/*La position fixe permet toujours à notre bouton de rester au même endroit lorsque nous faisons défiler la page*/
  bottom: 20px;
  right: 20px;
  z-index: 1000;/*z-index d'un nombre très élevé fait en sorte que le bouton chevauche toujours d'autres éléments du site*/
  opacity:0.5;
  
}

.scroll-top:hover {
  cursor: pointer;
  opacity:0.7;
}

.scroll-top:active {
  opacity:1;
}


.scroll-top:after {
  content: "\f343";
  font-family: 'dashicons';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 40px;/* on ajuste la hauteur de la ligne a celle du container pour un centrage vertical de l'icône */
  color: #FFFFFF;
}