<?php

/***********************************************************************************************************
*  	CSS DYNAMIQUE PALETTE DE COULEURS GUTENBERG (Back office)(OLD)
*
*  	STYLE BACK OFFICE PALETTE DE COULEURS
*
*  	STYLE BACK OFFICE BLOCS EDITEUR GUTENBERG
*		CORRECTION BUG DU AU PLUGIN
*		RÈGLES GÉNÉRALES EDITEUR GUTENBERG
*		ALIGNEMENT LARGE & PLEINE LARGEUR POUR L 'EDITEUR DE BLOCS RÉGLES BACK OFFICE
*   	EMBEDS RESPONSIVES LARGEUR MAX VIDÉOS INTÉGRÉES EN BACK OFFICE
*		FAIRE CORRESPONDRE LA LARGEUR DE L'EDITEUR & BLOC PARAGRAPHE & BLOC GROUP & BLOC TABLEAU & BLOC YOAST & BLOC LISTE & BLOC DÉTAILS & BLOC CITATION & BLOC SÉPARATEUR A CELLE DU SITE RÉGLES BACK OFFICE
*   	TITRE PAGE & ARTICLE & CPT BACK OFFICE
*		BLOC RÉUTILISABLE BLOCKQUOTE & STYLE FANCY QUOTE BACK OFFICE
*		BLOC RÉUTILISABLE METTRE EN ÉVIDENCE BACK OFFICE
*		STYLE BOX SHADOW BACK OFFICE
*   	Style box shadow(page d'options du plugin) back office
*   	Style box shadow(React JS) back office
*	BLOC PARAGRAPHE BACK OFFICE
*	  	Style Card back office
*	  	Style Notice: Question back office
*	 	Style Notice: Info back office
*	  	Style Notice: Advice back office
*	  	Style Notice: Warning back office
*	  	Style Notice: Alert back office
*	 	Style Click to Tweet Back Office
*	  	Style Evidence Back Office
*	  	Style pour le format Tooltip Back Office
*     	Style Contour Pour l'Icône Dashicon Ajouté au bloc paragraphe back office
*  	BLOC GROUP BACK OFFICE
*	 	Border Radius
*	 	Alignement Left & Right Back Office
*    	Style Variation InfoBox back office
*    	Style Variation Countdown Timer back office
*    	Style Table Of Contents back office
*    	Formes de séparation back office
*    		Forme Inclinée(tilt) Back Office
*	 		Forme Inclinée avec opacité(tilt opacity) Back Office
*	 		Forme Flèche(Arrow) Back Office
*			Forme Incurvée(incurved) Back Office
*			Forme Incurvée assymétrique(curve asymmetrical) Back Office
*			Triangle (Triangle) Back Office
*			Triangle Assymétrique(Triangle Asymmetrical) Back Office
*			Forme Vagues(waves) Back Office
*			Forme Vagues avec opacité(waves opacity) Back Office
*			Forme Diviser(Split) Back Office
*			Forme Livre(Book) Back Office
*			Forme Ventilateur(Fan) Back Office
*			Régles Mobiles & tablettes Back Office
*  		Fenêtre Modale Back Office
*		style Layout One Column Mobile pour une disposition grille Back Office
* 	BLOC CITATION BACK OFFICE
*		style quote Back Office
*		style parenthèse Back Office
*	 	style first letter Back Office
*		style arrow Back Office 
*	BLOC DÉTAILS BACK OFFICE
*		Icône Dashicons Arrow Back Office
*  	BLOC LISTE BACK OFFICE
*	 	On fait correspondre respectivement la taille & couleur des items de liste à celles des Tailles de texte & couleurs sélectionné de la palette
*	 	style Disc back office(style par défaut)
*	 	Style Square back office
*    	Style Check back office
*    	Style Check circle fill back office
*  		Style Add back office
*    	Style Add circle fill back office
*  		Style Push Spin back office
*   	Style Circle Duotone back office 
*   	Style Clear back office
*  		Style Site back office
*   	Style E-Mail back office
*    	Style Phone back office
*		Style Mobile back office
*    	Style Facebook back office
*   	Style YouTube back office
*	 	Style Twitter back office
*   	Style Pinterest back office
*    	Style Instagram back office
*   	Style Linkedin back office
*    	Style Whatsapp back office
*    	Style Calendar back office
*  		Style Clock back office
*    	Style Location back office
*		Style Diagram back office
*		Style Vidéo back office
*		Style Photo back office
*	 	Style Disque Pour Liste Ordonnée back office
*  	BLOC IMAGE BACK OFFICE
*	 	Style Circle back office
*	  	Style Filter Grayscale back office
*     	Style Card Image back office
*		Style Bordure Animée back office
*	 	Style Hover Zoom back office
*  	BLOC GALERIE BACK OFFICE
*	  	style Galerie Border Radius back office
*	  	style Galerie Hover Zoom back office
*  		Style Card Image Gallery back office
*		Galerie Native WordPress style Justifié back offfice
*		Galerie Native WordPress style Masonry back office
*		Galerie Native WordPress style Square back office
*	  	Style album d'images back office
*  	BLOC Bouton BACK OFFICE
*		Style Plein back office
*	  	Style Contour back office
*    	Style Contour avec icône flêche droite au survol back office
*    	Style Download back office
*     	Style Pour l'Icône Dashicon Ajouté au bloc bouton back office 
*		Onglets de navigation pour le Bloc Groupe
*		Icônes affectées au bloc bouton à partir du Panneau ECCP Icônes 
*	BLOC PARENT COLONNES BACK OFFICE
*	  	Régles générales Bloc Parent & bloc colonne back office 
*	  	Style responsive three columns back office
*	  	Style Column reverse back office 
*	 	Suite Régles générales Bloc Parent & bloc colonne back office
*    	Style Variation Pricing Table back office
*	BLOC MEDIA/TEXTE BACK OFFICE
*	  	style Half Background back office
*	  	Style Media Texte Reverse Mobile Back Office
*	BLOC SEPARATOR BACK OFFICE
*		Marge & Hauteur Bloc Separator back office
* 	BLOC TABLEAU BACK OFFICE
*     	style ECCP Stripes back office
* 	BLOC TITRE BACK OFFICE
*     	Style Admin Menu back office
*    	Style Post Formats back office
*   	Style Block Editor back office
*		Style TinyMCE back office
*   	Style Posts Screen back office
*   	Style Sorting back office
*		Style Social back office
*		Style WordPress back office
*	 	Style Buddicons back office
*	 	Style Products back office
*    	Style Widgets back office
*		Style Notifications back office
*		Style Miscellaneous back office
*	BLOC DERNIERS ARTICLES BACK OFFICE
*	 	Style Card Derniers Articles en mode grille back office
*   BLOC BOUCLE DE REQUÊTE BACK OFFICE
*	  	Style Card Boucle De Requête en mode grille back office
*		Style d'un avatar personnalisé en back office
*  	BLOC ESPACEMENT BACK OFFICE
*	BLOC ICONES SOCIALES BACK OFFICE
* 	ICÔNE TOOLBAR 
*		ICÔNE TOOLBAR PARAGRAPHE
*		ICÔNE TOOLBAR LISTE
*  	SURLIGNEMENT TEXTE BACK OFFICE
* 	FORMAT LIENS EXTERNE BACK OFFICE
*   FORMAT STYLE BOUTON BACK OFFICE
*  	RESPONSIVE BLOC GUTENBERG BACK OFFICE
* 		Hauteur du bloc couverture sur mobile en Back Office
*
*************************************************************************************************************/




/*----------------------------------------------------------------------------------------
		        CSS DYNAMIQUE PALETTE DE COULEURS GUTENBERG (Back office)(OLD)
/*---------------------------------------------------------------------------------------*/

//add_action('admin_head',  'eccp_css_dynamique_back_office',8);
//add_action('admin_print_styles',  'eccp_css_dynamique_back_office', 21);

function eccp_css_dynamique_back_office() {

	// Si on est en back office & si l'objet d'écran est l'éditeur Gutenberg,
	// alors on peut charger notre style sinon on sort
	if (!is_admin() and !get_current_screen()->is_block_editor() ) {
		return;
	}

	// On récupère les paramètres général de réglages du plugin
	$settings = get_option( 'eccp_multiple_setting' );
						
	echo'<style id="editor_custom_color_palette_css" type="text/css">';
	
		/*----------------------------------------------------------------------------------------
		                            CSS DYNAMIQUE PALETTE DE COULEURS GUTENBERG (Back office)
		/*---------------------------------------------------------------------------------------*/
		
		// si on a activé la personnalisation de la palette de couleurs
		if( $settings['eccp_settings_activate_customizing_color_palette_checkbox_field'] == true ) {
		
			/* ---------- Couleur N°1 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_one_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_one']).';';
			echo'}';
			// couleur de fond en gras
			echo'has-strong-'.esc_html($settings['eccp_settings_slug_color_one_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_one']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_one_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_one']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_one_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_one']).';';
			echo'}';
			
			/* ---------- Couleur N°2 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_two_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_two']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_two_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_two']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_two_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_two']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_two_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_two']).';';
			echo'}';
			
			/* ---------- Couleur N°3 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_three_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_three']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_three_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_three']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_three_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_three']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_three_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_three']).'!important;';
			echo'}';
			
			/* ---------- Couleur N°4 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_four_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_four']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_four_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_four']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_four_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_four']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_four_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_four']).';';
			echo'}';
			
			/* ---------- Couleur N°5 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_five_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_five']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_five_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_five']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_five_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_five']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_five_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_five']).';';
			echo'}';
			
			/* ---------- Couleur N°6 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_six_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_six']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_six_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_six']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_six_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_six']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_six_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_six']).';';
			echo'}';
			
			/* ---------- Couleur N°7 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_seven_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_seven']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_seven_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_seven']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_seven_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_seven']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_seven_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_seven']).';';
			echo'}';
			
			/* ---------- Couleur N°8 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_eight_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_eight']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_eight_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_eight']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_eight_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_eight']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_eight_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_eight']).';';
			echo'}';
			
			/* ---------- Couleur N°9 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_nine_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_nine']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_nine_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_nine']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_nine_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_nine']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_nine_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_nine']).';';
			echo'}';
			
			/* ---------- Couleur N°10 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_ten_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_ten']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_ten_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_ten']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_ten_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_ten']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_ten_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_ten']).';';
			echo'}';
			
			/* ---------- Couleur N°11 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_eleven_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_eleven']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_eleven_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_eleven']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_eleven_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_eleven']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_eleven_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_eleven']).';';
			echo'}';
			
			/* ---------- Couleur N°12 ---------*/
			// couleur de fond
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_twelve_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_twelve']).';';
			echo'}';
			// couleur de fond en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_twelve_text_field']).'-background-color{';
			echo'background-color:'.esc_html($settings['eccp_settings_color_twelve']).';';
			echo'}';
			// couleur de texte
			echo'.has-'.esc_html($settings['eccp_settings_slug_color_twelve_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_twelve']).'!important;';
			echo'}';
			// couleur texte en gras
			echo'.has-strong-'.esc_html($settings['eccp_settings_slug_color_twelve_text_field']).'-color{';
			echo'color:'.esc_html($settings['eccp_settings_color_twelve']).';';
			echo'}';
	
		}
		
	echo'</style>';
	

}



/*----------------------------------------------------------------------------------------
		                STYLE BACK OFFICE PALETTE DE COULEURS
/*---------------------------------------------------------------------------------------*/


function ecpp_custom_styling_color_palette() {
	
	// Si on est en back office & si l'objet d'écran est l'éditeur Gutenberg,
	// alors on peut charger notre style sinon on sort
	if (!is_admin() and !get_current_screen()->is_block_editor() ) {
		return;
	}
	
	// On récupère les paramètres pour la palette de couleurs
	$settings = get_option( 'eccp_multiple_setting' );
	
	
	// Style Palette de couleurs en back office
	echo '<style type="text/css">';
	
	
	
		switch ($settings['eccp_settings_number_colors_select_field']) {
			
			case '7':
			
			/* Pour la palette de couleurs dans le panneau latéral droit onglet Bloc */
			echo'.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+8),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+9),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			/* Pour la palette de couleurs qui apparait en fenêtre modale pour un
			   changement de couleurs du texte directement a partir de la barre d'outils du bloc */
			echo'.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+8),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+9),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			break;
			
			
			case '8':
			
			/* Pour la palette de couleurs dans le panneau latéral droit onglet Bloc */
			echo'.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+9),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			/* Pour la palette de couleurs qui apparait en fenêtre modale pour un
			   changement de couleurs du texte directement a partir de la barre d'outils du bloc */
			echo'.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+9),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			break;
			
			
			case '9':
			
			/* Pour la palette de couleurs dans le panneau latéral droit onglet Bloc */
			echo'.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			/* Pour la palette de couleurs qui apparait en fenêtre modale pour un
			   changement de couleurs du texte directement a partir de la barre d'outils du bloc */
			echo'.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+10),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			break;
			
			case '10':
			
			/* Pour la palette de couleurs dans le panneau latéral droit onglet Bloc */
			echo'.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			/* Pour la palette de couleurs qui apparait en fenêtre modale pour un
			   changement de couleurs du texte directement a partir de la barre d'outils du bloc */
			echo'.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+11),
				.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			break;
			
			case '11':
			
			/* Pour la palette de couleurs dans le panneau latéral droit onglet Bloc */
			echo'.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			/* Pour la palette de couleurs qui apparait en fenêtre modale pour un
			   changement de couleurs du texte directement a partir de la barre d'outils du bloc */
			echo'.components-popover__content .components-circular-option-picker__option-wrapper:nth-child(0n+12){
		
				display:none!important;
			
			}';
			
			break;
			
		}
	

	echo '</style>';

}

add_action('admin_head', 'ecpp_custom_styling_color_palette');

/*----------------------------------------------------------------------------------------
		                STYLE BACK OFFICE BLOCS EDITEUR GUTENBERG
/*---------------------------------------------------------------------------------------*/

// pour bien déclarer le style uniquemment pour l'éditeur en back office on utilise 
// le hook: enqueue_block_editor_assets
add_action('enqueue_block_editor_assets', 'ecpp_block_style_back_office');

function ecpp_block_style_back_office() {
	
	
	add_action( 'admin_head', function() {
		
		// On récupère les paramètres pour personnaliser l'éditeur
		$custom_gutenberg_editor_settings = get_option( 'eccp_settings_custom_gutenberg_editor' );
		// On récupère les paramètres pour les blocs réutilisables
		$reusable_blocks_settings = get_option( 'eccp_settings_reusable_blocks' );
		// On récupère les paramètres pour personnaliser les blocs Gutenberg
		$custom_gutenberg_blocks_settings = get_option( 'eccp_settings_custom_gutenberg_block' );
		// On récupère les paramètres pour personnaliser les Tailles de texte
	    $editor_text_size_settings = get_option( 'eccp_setting_editor_text_size' );
		
		// post type ayant un slug, publicly_queryable, mais qui ne sont pas des CPT utilisateurs
		$slug_no_cpt = array('e-landing-page','seedprod' ,'product','produit',
							'/boutique','elementor-hf','nf_sub','/produit');
		
		/*-------------- CORRECTION BUG DU AU PLUGIN ---------------*/
		// Si on est en back office & si l'objet d'écran est l'éditeur Gutenberg,
		// alors on peut charger notre style
		// sinon problème avec les métabox du panneau latéral de WordPress
		if (is_admin() and get_current_screen()->is_block_editor() ) {
		   
			// Style des blocs en back office
			echo '<style type="text/css">';
			
				/*------------------- RÈGLES GÉNÉRALES EDITEUR GUTENBERG --------------------------*/
				
				// On impose le centrage des blocks, cette régle étant invalidé uniquement 
				//	   pour les liste à puces par: 
				//	   .editor-styles-wrapper .block-editor-block-list__layout ul {
				//			margin: 15px 0 15px 0;
				//		}  	
				
				echo'.block-editor-block-list__layout .wp-block {
					margin-left: auto!important;
					margin-right: auto!important;
				}'; 
				
				// régles pour le block FAQ YOAST SEO
				echo'.wp-block-yoast-faq-block {
					margin-left: auto!important;
					margin-right: auto!important;
				}'; 
				
				/*------------------- ALIGNEMENT LARGE & PLEINE LARGEUR POUR L 'EDITEUR DE BLOCS RÉGLES BACK OFFICE ----------------------*/
				
				// si on à activé l'alignement large pour l'éditeur de blocs
				if( $custom_gutenberg_editor_settings['eccp_settings_activate_align_wide_block_editor_checkbox_field'] == true ) {
					
					//.block-editor-block-list__layout
					// régles pour un alignement large pour les pages
					// on fait correspondre le bloc a la largeur de l'editeur
					echo'body.post-type-page .wp-block[data-align="wide"] {
						
						width: 100%!important;
						
					}';
					
					
					// régles pour un alignement pleine largeur uniquement pour les pages
					// je ne gère pas les articles car généralement il y a une sidebar
					// et il est difficile de tester si présence ou non d'une sidebar
					echo'body.post-type-page .wp-block[data-align="full"] {
						
						max-width: none!important;
						margin-left:unset!important;
						margin-right:unset!important;
					
					}';
					
					
					// Règles alignement pour les articles si on activé le réglage de largeur de l'editeur.
					// On aurait pu faire comme pour les pages mais le thème Astra a une règle max-width: 1260px
					// pour tous les alignements qu'il faut pouvoir surchargé.
					if( $custom_gutenberg_editor_settings['eccp_settings_activate_editor_width_checkbox_field'] == true ){
					
					
						// Selon Largeur editeur pour les articles
						switch ($custom_gutenberg_editor_settings['eccp_settings_post_template_editor_select_field']) {
						
							// petit modèle pour les articles
							case 'small':
							
							echo' body.post-type-post .wp-block[data-align="left"], 
								  body.post-type-post .wp-block[data-align="right"], 
								  body.post-type-post .wp-block[data-align="center"], 
								  body.post-type-post .wp-block[data-align="full"], 
								  body.post-type-post .wp-block[data-align="wide"]{';
							 
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px;';
							
							echo'}';
							
							break;
							
							// large modèle pour les articles
							case 'large':
							
							echo' body.post-type-post .wp-block[data-align="left"], 
								  body.post-type-post .wp-block[data-align="right"], 
								  body.post-type-post .wp-block[data-align="center"], 
								  body.post-type-post .wp-block[data-align="full"], 
								  body.post-type-post .wp-block[data-align="wide"]{';
							 
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px;';
							
							echo'}';
							
							break;
							
							// pleine largeur pour les articles
							case 'fullwidth':
							
							echo' body.post-type-post .wp-block[data-align="left"], 
								  body.post-type-post .wp-block[data-align="right"], 
								  body.post-type-post .wp-block[data-align="center"], 
								  body.post-type-post .wp-block[data-align="full"], 
								  body.post-type-post .wp-block[data-align="wide"]{';
							 
								echo'max-width: none;';
							
							echo'}';
							
							break;
						
						}
						
					
					}
					
					// s'il y a des Customm Post Type
					if ( !empty($slug_cpt = eccp_get_registered_post_types()) ) {
						
						foreach ($slug_cpt as $key => $value) {
							
							// on récupère pour les CPT un tableau associatif : $slug_cpt
							// dont la clé donne le nom de nos CPT et la valeur le slug du CPT
							// récupère aussi a quelques exception prés des slug de post type 
							// qui ne sont pas des CPT, ex: e-landing-page que l'on écarte en les définissant dans $slug_no_cpt
							// si le slug est bien un slug de CPT alors on peut appliquer les régles CSS
							if  ( !in_array($value, $slug_no_cpt) )  {
						
								// régles pour un alignement large pour les Custom Post Type
								// on fait correspondre le bloc a la largeur de l'editeur
								echo'body.post-type-'.$value.' .wp-block[data-align="wide"] {
								
								width: 100%!important;
								
								}';
							
							
								// régles pour un alignement pleine largeur 
								echo'body.post-type-'.$value.' .wp-block[data-align="full"] {
									
									max-width: none!important;
									margin-left:unset!important;
									margin-right:unset!important;
								
								}';
								
								
								// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
								// ce n'est pas le slug mais le nom du post type qui est pris comme référence
								// par The Events Calendar pour appliquer des régles CSS.
								if ($key == 'tribe_events') {
									
									// régles pour un alignement large pour les événements
									// on fait correspondre le bloc a la largeur de l'editeur
									echo'body.post-type-'.$key.' .wp-block[data-align="wide"] {
									
									width: 100%!important;
									
									}';
								
								
									// régles pour un alignement pleine largeur 
									echo'body.post-type-'.$key.' .wp-block[data-align="full"] {
										
										max-width: none!important;
										margin-left:unset!important;
										margin-right:unset!important;
									
									}';
									
									
								}
							
							}
						
						}
					
						
					} // s'il ya des Customm Post Type
					
					
				} // fin si on a activé l'alignement pleine largeur
				
				
				/*------------------- EMBEDS RESPONSIVES LARGEUR MAX VIDÉOS INTÉGRÉES EN BACK OFFICE --------------------------*/
				
				// Si on à activé les embeds responsive			
				if( $custom_gutenberg_editor_settings['eccp_settings_activate_responsive_embeds_checkbox_field'] == true ) {
					
					// régles pour les articles
					echo'body.post-type-post .wp-block[data-align=left]>.wp-block-embed,
						 body.post-type-post .wp-block[data-align=center]>.wp-block-embed,
						 body.post-type-post .wp-block[data-align=right]>.wp-block-embed {'; 
					
							echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_post_embed_max_width_text_field']) ).'px!important;';
					
					echo'}';
					
					
					// régles pour les pages
					echo'body.post-type-page .wp-block[data-align=left]>.wp-block-embed,
						 body.post-type-page .wp-block[data-align=center]>.wp-block-embed,
						 body.post-type-page .wp-block[data-align=right]>.wp-block-embed {'; 
					
							echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_page_embed_max_width_text_field']) ).'px!important;';
					
					echo'}';
					
					
					// on récupère le thème actif
					$my_theme = wp_get_theme();
			
					// Modif pour le thème DIVI 
					if(stristr($my_theme, 'divi')) {
					
						// modif afin que la taille de la vidéo configurée dans la  
						// page d'option du plugin soit prise en compte
						echo'.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > [data-align="left"],
							 .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > [data-align="right"]{';
							
							echo'float:unset!important';
						
						echo'}';
					
					}
					
					
					// s'il ya des Custom Post Type
					if ( !empty($slug_cpt = eccp_get_registered_post_types()) ) {
						
						foreach ($slug_cpt as $key => $value) {
							
							// on récupère pour les CPT un tableau associatif : $slug_cpt
							// dont la clé donne le nom de nos CPT et la valeur le slug du CPT
							// récupère aussi a quelques exception prés des slug de post type 
							// qui ne sont pas des CPT, ex: e-landing-page que l'on écarte en les définissant dans $slug_no_cpt
							// si le slug est bien un slug de CPT alors on peut appliquer les régles CSS
							if  ( !in_array($value, $slug_no_cpt) )  {
								
								// régles pour les CPT
								echo'body.post-type-'.$value.' .wp-block[data-align=left]>.wp-block-embed,'.
									'body.post-type-'.$value.' .wp-block[data-align=center]>.wp-block-embed,'.
									'body.post-type-'.$value.' .wp-block[data-align=right]>.wp-block-embed {'; 
								
										echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px!important;';
								
								echo'}';
								
								// Régle pour les CPT
								// Mise à jour version 2.0: correction pour un alignement gauche & droite du bloc embed
								// pour un embed max-width de 960px 
								//@media (min-width:960px) {  margin-right:calc(109% - 960px);   }
						
								echo'@media (min-width: '.$custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field'].'px) {';
						
									echo 'body.post-type-'.$value.' .wp-block[data-align=left]>.wp-block-embed {';
							
										echo'margin-right: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px)!important;';
					
									echo'}';
							
									echo 'body.post-type-'.$value.' .wp-block[data-align=right]>.wp-block-embed {';
							
										echo'margin-left: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px)!important;';
					
									echo'}';

								echo'}'; 
								
								
								// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
								// ce n'est pas le slug mais le nom du post type qui est pris comme référence
								// par The Events Calendar pour appliquer des régles CSS.(Mise à jour version 2.0)
								if ($key == 'tribe_events') {
									
									// régles pour les CPT évènements
									echo'body.post-type-'.$key.' .wp-block[data-align=left]>.wp-block-embed,'.
										'body.post-type-'.$key.' .wp-block[data-align=center]>.wp-block-embed,'.
										'body.post-type-'.$key.' .wp-block[data-align=right]>.wp-block-embed {'; 
									
											echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px!important;';
									
									echo'}';
									
									// Régle pour les CPT évènements
									// Mise à jour version 2.0: correction pour un alignement gauche & droite du bloc embed
									// pour un embed max-width de 960px 
									//@media (min-width:960px) {  margin-right:calc(109% - 960px);   }
							
									echo'@media (min-width: '.$custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field'].'px) {';
							
										echo 'body.post-type-'.$key.' .wp-block[data-align=left]>.wp-block-embed {';
								
											echo'margin-right: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px)!important;';
						
										echo'}';
								
										echo 'body.post-type-'.$key.' .wp-block[data-align=right]>.wp-block-embed {';
								
											echo'margin-left: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_cpt_embed_max_width_text_field']) ).'px)!important;';
						
										echo'}';

									echo'}'; 
					
									
								}
								
						
							}
						
						}
					
						
					}
					
					
					// Régle pour les Articles
					// Mise à jour version 1.7: correction pour un alignement gauche & droite du bloc embed
					// pour un embed max-width de 960px 
					//@media (min-width:960px) {  margin-right:calc(109% - 960px);   }
			
					echo'@media (min-width: '.$custom_gutenberg_editor_settings['eccp_settings_post_embed_max_width_text_field'].'px) {';
			
						echo 'body.post-type-post .wp-block[data-align=left]>.wp-block-embed {';
				
							echo'margin-right: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_post_embed_max_width_text_field']) ).'px)!important;';
		
						echo'}';
				
						echo 'body.post-type-post .wp-block[data-align=right]>.wp-block-embed {';
				
							echo'margin-left: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_post_embed_max_width_text_field']) ).'px)!important;';
		
						echo'}'; 
					
					echo'}';

			
					// Régle pour les Pages
					// Mise à jour version 1.7 & 1.8: correction pour un alignement gauche & droite du bloc embed
					// pour un embed max-width de 960px 
					//@media (min-width:960px) {  margin-right:calc(109% - 960px);   }
			
					echo'@media (min-width: '.$custom_gutenberg_editor_settings['eccp_settings_page_embed_max_width_text_field'].'px) {';
			
						echo 'body.post-type-page .wp-block[data-align=left]>.wp-block-embed {';
				
							echo'margin-right: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_page_embed_max_width_text_field']-100) ).'px)!important;';
		
						echo'}';

						echo 'body.post-type-page .wp-block[data-align=right]>.wp-block-embed {';
				
							echo'margin-left: calc(109% - '. esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_page_embed_max_width_text_field']-100) ).'px)!important;';
		
						echo'}';
					
					echo'}';
					
					
					// régle pour centrer la vidéo pour un alignement centré
					echo'.wp-block[data-align=center]>.wp-block-embed {'; 
					
							echo'margin:0 auto!important;';
					
					echo'}';
					
					
					$my_theme = wp_get_theme();
			
					// pour un alignement centré correction pour le thème Astra 
					if(stristr($my_theme, 'astra')) {
					
						echo'.ast-plain-container .wp-block[data-align="center"] {';
						
							echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_post_embed_max_width_text_field']) ).'px!important;';
							
						echo'}';
					
					}
					
				}
				 
				
				
				/*------------------- FAIRE CORRESPONDRE LA LARGEUR DE L'EDITEUR & BLOC PARAGRAPHE & BLOC GROUP & BLOC TABLEAU & BLOC YOAST & BLOC LISTE & BLOC DÉTAILS & BLOC CITATION & BLOC SÉPARATEUR A CELLE DU SITE RÉGLES BACK OFFICE --------------------------*/
				
				if( $custom_gutenberg_editor_settings['eccp_settings_activate_editor_width_checkbox_field'] == true ){
				
					
					// Largeur editeur pour les articles
					switch ($custom_gutenberg_editor_settings['eccp_settings_post_template_editor_select_field']) {
					
						//----------- petit modèle pour les articles -----------
						case 'small':
						
							echo'body.post-type-post .wp-block {'; 
						
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px!important;';
						
							echo'}';
							
							
							// largeur block paragraphe	& block group & bloc tableau & bloc Liste & bloc détails & bloc citation & bloc Yoast SEO					
							echo'body.post-type-post p.is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
												
							echo'body.post-type-post p.is-style-eccp-size-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
											
								echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-large,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							
							/* Bloc Séparateur */
							echo'body.post-type-post .wp-block-separator:not(.is-style-wide){';
											
								echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="wide"] > hr {';
							
								echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).' * 1px)!important;';
							
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
							
						
						break;
						
						
						//----------- large modèle pour les articles -----------
						case 'large':
						
							echo'body.post-type-post .wp-block {'; 
						
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px!important;';
						
							echo'}';
							
							
							// largeur block paragraphe	& block group & block tableau & bloc liste & bloc détails & bloc citation & bloc Yoast SEO					
							echo'body.post-type-post p.is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
												
							echo'body.post-type-post p.is-style-eccp-size-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
								 
								echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-large,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							/* Bloc Séparateur */
							echo'body.post-type-post .wp-block-separator:not(.is-style-wide){';
											
								echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="wide"] > hr {';
							
								echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).' * 1px)!important;';
							
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
						
						break;
						
						
						//----------- pleine largeur pour les articles -----------
						//----------- ne fonctionne pas avec le thème Astra, -----------
						//-----------  même avec l'extension kadence Block -----------
						case 'fullwidth':
						
							echo'body.post-type-post .wp-block{
								max-width: none!important;
							}';
							
							// largeur block paragraphe	& block group & block tableau & block liste & block détails & bloc citation	& bloc Yoast SEO				
							echo'body.post-type-post p.is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: 50%!important;';
						
							echo'}';
											
							echo'body.post-type-post p.is-style-eccp-size-small,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: 60%!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
											
								echo'width: 70%!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-large,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: 80%!important;';
						
							echo'}';
							
							echo'body.post-type-post p.is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/list"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-post [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: 90%!important;';
						
							echo'}';
							
							
							/* Bloc Séparateur */
							echo'body.post-type-post .wp-block-separator:not(.is-style-wide):not([data-align=wide]):not([data-align=full]){';
											
								echo'width: calc(var(--eccp-separatorSize,5) * 1%)!important;';
						
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="wide"] > hr {';
							
								echo'width: 100%!important;';
							
							echo'}';
							
							echo'body.post-type-post .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
						
						break;
					
					}
					
					// Largeur editeur pour les pages
					switch ($custom_gutenberg_editor_settings['eccp_settings_page_template_editor_select_field']) {
					
						//----------- petit modèle pour les pages -----------
						case 'small':
						
							echo'body.post-type-page .wp-block {';
							
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px!important;';
						
							echo'}';
							
							
							// largeur block paragraphe & block group & block tableau & bloc liste & bloc détails & bloc citation & bloc Yoast SEO						
							echo'body.post-type-page p.is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
												
							echo'body.post-type-page p.is-style-eccp-size-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
											
								echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-large,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							
							/* Bloc Séparateur */
							echo'body.post-type-page .wp-block-separator:not(.is-style-wide){';
											
								echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="wide"] > hr {';
							
								echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).' * 1px)!important;';
							
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
						
						break;
						
						
						//----------- large modèle pour les pages -----------
						case 'large':
						
							echo'body.post-type-page .wp-block {';
							
								echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px!important;';
						
							echo'}';
							
							
							// largeur block paragraphe	& block group & bloc table & bloc liste	& bloc détails & bloc Yoast SEO				
							echo'body.post-type-page p.is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
												
							echo'body.post-type-page p.is-style-eccp-size-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
											
								echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-large,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							/* Bloc Séparateur */ 
							echo'body.post-type-page .wp-block-separator:not(.is-style-wide){';
											
								echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
						
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="wide"] > hr {';
							
								echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).' * 1px)!important;';
							
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
						
						break;
						
						
						//----------- pleine largeur pour les pages -----------
						//----------- ne fonctionne pas avec le thème Astra, -----------
						//----------- même avec l'extension kadence Block -----------
						case 'fullwidth':
						
							echo'body.post-type-page .wp-block{
								max-width: none!important;
							}';
							
							
							// largeur block paragraphe & block group & block table	& bloc liste & bloc détails	& bloc citation & bloc Yoast SEO				
							echo'body.post-type-page p.is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-very-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
									
								echo'width: 50%!important;';
						
							echo'}';
												
							echo'body.post-type-page p.is-style-eccp-size-small,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-small,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-small,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-small{';
									
								echo'width: 60%!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-regular,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
								
								echo'width: 70%!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-large,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-large,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-large,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-large{';
											
								echo'width: 80%!important;';
						
							echo'}';
							
							echo'body.post-type-page p.is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/group"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/table"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/list"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/details"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="core/quote"].is-style-eccp-size-larger,
								 body.post-type-page [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
											
								echo'width: 90%!important;';
						
							echo'}';
							
							/* Bloc Séparateur */
							echo'body.post-type-page .wp-block-separator:not(.is-style-wide)){';
											
								echo'width: calc(var(--eccp-separatorSize,5) * 1%)!important;';
						
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="wide"] > hr {';
							
								echo'width: 100%!important;';
							
							echo'}';
							
							echo'body.post-type-page .wp-block[data-align="full"] > hr {';
							
								echo'width: 100%!important;';
								
							echo'}';
						
						break;
					
					}
					
					
					// Largeur editeur pour les Custom Post Type
					
					// s'il ya des Custom Post Type
					if ( !empty($slug_cpt = eccp_get_registered_post_types()) ) {
						
						switch ($custom_gutenberg_editor_settings['eccp_settings_cpt_template_editor_select_field']) {
						
							//----------- petit modèle pour les CPT -----------
							case 'small':
							
								foreach ($slug_cpt as $key => $value) {
									
									// on récupère pour les CPT un tableau associatif : $slug_cpt
									// dont la clé donne le nom de nos CPT et la valeur le slug du CPT
									// récupère aussi a quelques exception prés des slug de post type 
									// qui ne sont pas des CPT, ex: e-landing-page que l'on écarte en les définissant dans $slug_no_cpt
									// si le slug est bien un slug de CPT alors on peut appliquer les régles CSS
									if  ( !in_array($value, $slug_no_cpt) )  {
									
										echo'body.post-type-'.$value.' .wp-block {'; 
								
											echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px!important;';
								
										echo'}';
										
										
										// largeur block paragraphe	& block group & block table & bloc liste & bloc détails & bloc citation & bloc Yoast SEO
										echo'body.post-type-'.$value.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
																					
											echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
																					
											echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
																							
											echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
																							
											echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
																							
											echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										/* Bloc Séparateur */ 
										echo'body.post-type-'.$value.' .wp-block-separator:not(.is-style-wide){';
														
											echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).' * 1px)!important;';
										
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
										
									}
									
									
									// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
									// ce n'est pas le slug mais le nom du post type qui est pris comme référence
									// par The Events Calendar pour appliquer des régles CSS.
									if ($key == 'tribe_events') {
										
										echo'body.post-type-'.$key.' .wp-block {'; 
								
											echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px!important;';
								
										echo'}';
										
										// largeur block paragraphe	& block group & block table & bloc liste & bloc détails & bloc citation & bloc Yoast SEO
										echo'body.post-type-'.$key.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
																					
											echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										
										// largeur block paragraphe	& block group & block tableau & bloc liste & bloc détails & bloc Yoast SEO
										echo'body.post-type-'.$key.' p.is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
																					
											echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
																							
											echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
														
											echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
														
											echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										/* Bloc Séparateur */ 
										echo'body.post-type-'.$key.' .wp-block-separator:not(.is-style-wide){';
														
											echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field']) ).' * 1px)!important;';
										
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
									}
									
				
								}
							
							
							break;
							
							//----------- large modèle pour les CPT -----------
							case 'large':
							
								foreach ($slug_cpt as $key => $value) {
									
									// si le slug est bien un slug de CPT
									if  ( !in_array($value, $slug_no_cpt) )  {
									
										echo'body.post-type-'.$value.' .wp-block {'; 
								
											echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px!important;';
								
										echo'}';
										
										// largeur block paragraphe & block group & bloc table & bloc liste	& bloc détails & bloc citation & bloc Yoast SEO					
										echo'body.post-type-'.$value.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
												
											echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
																
										echo'body.post-type-'.$value.' p.is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
												
											echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
														
											echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
														
											echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
														
											echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										/* Bloc Séparateur */ 
										echo'body.post-type-'.$value.' .wp-block-separator:not(.is-style-wide){';
														
											echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).' * 1px)!important;';
										
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
										
									}
									
									// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
									// ce n'est pas le slug mais le nom du post type qui est pris comme référence
									// par The Events Calendar pour appliquer des régles CSS.
									if ($key == 'tribe_events') {
										
										echo'body.post-type-'.$key.' .wp-block {'; 
								
											echo'max-width:'.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px!important;';
								
										echo'}';
										
										
										// largeur block paragraphe	& block group & block table & bloc liste & bloc détails & bloc citation	& bloc Yoast SEO				
										echo'body.post-type-'.$key.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
												
											echo'width: calc(0.5 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
															
										echo'body.post-type-'.$key.' p.is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
												
											echo'width: calc(0.6 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
														
											echo'width: calc(0.7 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
														
											echo'width: calc(0.8 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
														
											echo'width: calc(0.9 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										/* Bloc Séparateur */ 
										echo'body.post-type-'.$key.' .wp-block-separator:not(.is-style-wide){';
														
											echo'width: calc(var(--eccp-separatorSize,5) / 100 * '.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).'px)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: calc('.esc_html( strval($custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field']) ).' * 1px)!important;';
										
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
									}
				
								}
							
							break;
							
							//----------- pleine largeur pour les CPT -----------
							case 'fullwidth':
							
								foreach ($slug_cpt as $key => $value) {
									
									// si le slug est bien un slug de CPT
									if  ( !in_array($value, $slug_no_cpt) )  {
								
										echo'body.post-type-'.$value.' .wp-block{
											max-width: none!important;
									}';
										
										
										// largeur block paragraphe	& block group & block table & bloc liste & bloc détails	& bloc citation & bloc Yoast SEO				
										echo'body.post-type-'.$value.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
												
											echo'width: 50%!important;';
									
										echo'}';
														
										echo'body.post-type-'.$value.' p.is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
												
											echo'width: 60%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
														
											echo'width: 70%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
														
											echo'width: 80%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' p.is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$value.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
														
											echo'width: 90%!important;';
									
										echo'}';
										
										/* Bloc Séparateur */
										echo'body.post-type-'.$value.' .wp-block-separator:not(.is-style-wide)){';
														
											echo'width: calc(var(--eccp-separatorSize,5) * 1%)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: 100%!important;';
										
										echo'}';
										
										echo'body.post-type-'.$value.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
										
									}
									
									// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
									// ce n'est pas le slug mais le nom du post type qui est pris comme référence
									// par The Events Calendar pour appliquer des régles CSS.
									if ($key == 'tribe_events') {
										
										echo'body.post-type-'.$key.' .wp-block {'; 
								
											echo'max-width: none!important;';
								
										echo'}';
										
										
										// largeur block paragraphe	& block group & block table & bloc liste & bloc détails	& bloc citation	& bloc Yoast SEO			
										echo'body.post-type-'.$key.' p.is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/liste"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-very-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-very-small{';
												
											echo'width: 50%!important;';
									
										echo'}';
															
										echo'body.post-type-'.$key.' p.is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-small,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-small{';
												
											echo'width: 60%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-regular,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-regular{';
														
											echo'width: 70%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-large,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-large{';
														
											echo'width: 80%!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' p.is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/group"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/table"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/list"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/details"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="core/quote"].is-style-eccp-size-larger,
											 body.post-type-'.$key.' [data-type="yoast/faq-block"].is-style-eccp-size-larger{';
														
											echo'width: 90%!important;';
									
										echo'}';
										
										
										/* Bloc Séparateur */
										echo'body.post-type-'.$key.' .wp-block-separator:not(.is-style-wide)){';
														
											echo'width: calc(var(--eccp-separatorSize,5) * 1%)!important;';
									
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="wide"] > hr {';
										
											echo'width: 100%!important;';
										
										echo'}';
										
										echo'body.post-type-'.$key.' .wp-block[data-align="full"] > hr {';
										
											echo'width: 100%!important;';
											
										echo'}';
										
									}
								
								}
							
							break;
						
						}
					
					} // Fin  s'il ya des Custom Post Type
					

				}
				
				
				/*------------------- TITRE PAGE & ARTICLE & CPT BACK OFFICE --------------------------*/
				
				// Alignement du titre de l'article ou page ou CPT
				echo'.editor-post-title__input{';
					
					echo'text-align:'.$custom_gutenberg_editor_settings['eccp_settings_page_title_alignment_select_field'].';';
					
				echo'}';
				
			
				/*-------------------BLOC RÉUTILISABLE BLOCKQUOTE & STYLE FANCY QUOTE BACK OFFICE --------------------------
			
				/* On régle la largeur automatique du bloc en fonction de son contenu
				avec les régles position: absolute ou float:left mais cela pose un problème.
				j'ai donc pris une position relative et limiter la largeur à width:50% 
				par rapport à l'interface publique mofification de la régle: border:none!important 
				et ajout de la règle: padding-left:0px!important	 
				par rapport a l'interface publique on laisse les marges left et right à auto 
				width valeur différente de l'interface publique pour un même rendu */
				
				echo'.block-quote,
				     .is-style-eccp-fancy-quote{
					position: relative;
					font-style: italic;
					border:none!important;
					margin-top:40px!important;
					margin-bottom:80px!important;
					padding-left:0px!important;';
				echo'}';
				  
				/* Modif version 2.3: la graisse & taille de texte sont désormais des réglages
				   du bloc natif Bloc Quote de WordPress
				echo'.block-quote p {';
				  
				echo'font-size:'.esc_html($reusable_blocks_settings['eccp_settings_font_size_blockquote_text_field']).'px!important;';
				echo'font-weight:'.esc_html($reusable_blocks_settings['eccp_settings_font_weight_blockquote_select_field']).'!important;';
				
				echo'}';
				 */ 
				
				/* 
				   Modif Version 1.7
				   Blockquote de gauche,j'ai reformaté l'image SVG 
				   en URL data(https://websemantics.uk/tools/svg-to-background-image-conversion/) 
				   pour l'utiliser comme images d'arrière-plan, au lieu de l'URL relative 
				   par rapport au répertoire du plugin: 
				   echo'background: url('.EDITOR_CUSTOM_COLOR_PALETTE_URL.'/img/editeur-gutenberg/rc-blockquote.svg'.');';	
				   Ceci afin de modifier la couleur de fond($blocquote_color) 
				   et l'opacité($blocquote_opacity)directement dans l'URL data 
				*/ 
				
				// on met en forme la couleur des guillemets et l'opacité pour l'URL data 
				// qui charge l'image SVG des guillemets
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$blocquote_color = substr($reusable_blocks_settings['eccp_settings_quotation_marks_color_text_field'],1);
				// strval renvoi une variable au format chaine
				$blocquote_opacity = strval( intval($reusable_blocks_settings['eccp_settings_quotation_marks_opacity_text_field'])/100 );
				
				echo'.block-quote:before,
					 .is-style-eccp-fancy-quote:before{
					position: absolute;
					content: "";
					top: -19px;
					left: -67px;
					height: 55px;
					width: 53px;';
				echo'background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version=\'1.0\' encoding=\'UTF-8\' standalone=\'no\'?%3E%3Csvg xmlns:dc=\'http://purl.org/dc/elements/1.1/\' xmlns:cc=\'http://creativecommons.org/ns%23\' xmlns:rdf=\'http://www.w3.org/1999/02/22-rdf-syntax-ns%23\' xmlns:svg=\'http://www.w3.org/2000/svg\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:sodipodi=\'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\' xmlns:inkscape=\'http://www.inkscape.org/namespaces/inkscape\' width=\'53\' height=\'55\' version=\'1.1\' id=\'svg8\' sodipodi:docname=\'rc-blockquote.svg\' inkscape:version=\'1.0 (4035a4fb49, 2020-05-01)\'%3E%3Cmetadata id=\'metadata14\'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=\'\'%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource=\'http://purl.org/dc/dcmitype/StillImage\' /%3E%3Cdc:title /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id=\'defs12\'%3E%3Cfilter height=\'1.0000094\' y=\'-4.7127273e-06\' width=\'1.0000216\' x=\'-1.08e-05\' id=\'filter842\' style=\'color-interpolation-filters:sRGB\' inkscape:collect=\'always\'%3E%3CfeGaussianBlur id=\'feGaussianBlur844\' stdDeviation=\'0.000108\' inkscape:collect=\'always\' /%3E%3C/filter%3E%3Cfilter height=\'1.0000094\' y=\'-4.7127273e-06\' width=\'1.0000216\' x=\'-1.08e-05\' id=\'filter846\' style=\'color-interpolation-filters:sRGB\' inkscape:collect=\'always\'%3E%3CfeGaussianBlur id=\'feGaussianBlur848\' stdDeviation=\'0.000108\' inkscape:collect=\'always\' /%3E%3C/filter%3E%3C/defs%3E%3Csodipodi:namedview inkscape:document-rotation=\'0\' pagecolor=\'%23ffffff\' bordercolor=\'%23666666\' borderopacity=\'1\' objecttolerance=\'10\' gridtolerance=\'10\' guidetolerance=\'10\' inkscape:pageopacity=\'0\' inkscape:pageshadow=\'2\' inkscape:window-width=\'1366\' inkscape:window-height=\'705\' id=\'namedview10\' showgrid=\'false\' inkscape:zoom=\'8.6\' inkscape:cx=\'29.175176\' inkscape:cy=\'27.5\' inkscape:window-x=\'-8\' inkscape:window-y=\'-8\' inkscape:window-maximized=\'1\' inkscape:current-layer=\'svg8\' /%3E%3Cg id=\'g840\'%3E%3Cpath id=\'‘\' d=\'m 24,0 v 7.178 c -3.11,0.905 -5.441,3.185 -6.996,6.839 -1.555,3.654 -2.332,8.681 -2.332,15.084 v 2.037 H 24 V 55 H 0 V 34.242 C 0,23.7 1.992,15.569 5.976,9.846 9.96,4.123 15.968,0.84 24,0 Z\' style=\'display:inline;opacity:'.$blocquote_opacity.';fill:%23'.$blocquote_color.';fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;filter:url(%23filter842)\' /%3E%3Cpath id=\'‘-copy\' d=\'m 53,0 v 7.178 c -3.11,0.905 -5.441,3.185 -6.996,6.839 -1.555,3.654 -2.332,8.681 -2.332,15.084 v 2.037 H 53 V 55 H 29 V 34.242 C 29,23.701 30.992,15.569 34.976,9.846 38.96,4.123 44.968,0.84 53,0 Z\' style=\'display:inline;opacity:'.$blocquote_opacity.';fill:%23'.$blocquote_color.';fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;filter:url(%23filter846)\' inkscape:highlight-color=\'4294967295\' /%3E%3C/g%3E%3C/svg%3E");';	
				
				echo'}';
				
				
				// Blockquote de droite par rapport a l'interface publique on ajoute les régles 
				 // margin-left: auto & margin-top:auto  
				  
				echo'.block-quote:after,
                     .is-style-eccp-fancy-quote:after{
					position: absolute;
					content: "";
					right: -67px!important;
					height: 55px;
					width: 53px;
					margin-top:auto;
					margin-left:auto;
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);';
				echo'background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version=\'1.0\' encoding=\'UTF-8\' standalone=\'no\'?%3E%3Csvg xmlns:dc=\'http://purl.org/dc/elements/1.1/\' xmlns:cc=\'http://creativecommons.org/ns%23\' xmlns:rdf=\'http://www.w3.org/1999/02/22-rdf-syntax-ns%23\' xmlns:svg=\'http://www.w3.org/2000/svg\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:sodipodi=\'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\' xmlns:inkscape=\'http://www.inkscape.org/namespaces/inkscape\' width=\'53\' height=\'55\' version=\'1.1\' id=\'svg8\' sodipodi:docname=\'rc-blockquote.svg\' inkscape:version=\'1.0 (4035a4fb49, 2020-05-01)\'%3E%3Cmetadata id=\'metadata14\'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=\'\'%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource=\'http://purl.org/dc/dcmitype/StillImage\' /%3E%3Cdc:title /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id=\'defs12\'%3E%3Cfilter height=\'1.0000094\' y=\'-4.7127273e-06\' width=\'1.0000216\' x=\'-1.08e-05\' id=\'filter842\' style=\'color-interpolation-filters:sRGB\' inkscape:collect=\'always\'%3E%3CfeGaussianBlur id=\'feGaussianBlur844\' stdDeviation=\'0.000108\' inkscape:collect=\'always\' /%3E%3C/filter%3E%3Cfilter height=\'1.0000094\' y=\'-4.7127273e-06\' width=\'1.0000216\' x=\'-1.08e-05\' id=\'filter846\' style=\'color-interpolation-filters:sRGB\' inkscape:collect=\'always\'%3E%3CfeGaussianBlur id=\'feGaussianBlur848\' stdDeviation=\'0.000108\' inkscape:collect=\'always\' /%3E%3C/filter%3E%3C/defs%3E%3Csodipodi:namedview inkscape:document-rotation=\'0\' pagecolor=\'%23ffffff\' bordercolor=\'%23666666\' borderopacity=\'1\' objecttolerance=\'10\' gridtolerance=\'10\' guidetolerance=\'10\' inkscape:pageopacity=\'0\' inkscape:pageshadow=\'2\' inkscape:window-width=\'1366\' inkscape:window-height=\'705\' id=\'namedview10\' showgrid=\'false\' inkscape:zoom=\'8.6\' inkscape:cx=\'29.175176\' inkscape:cy=\'27.5\' inkscape:window-x=\'-8\' inkscape:window-y=\'-8\' inkscape:window-maximized=\'1\' inkscape:current-layer=\'svg8\' /%3E%3Cg id=\'g840\'%3E%3Cpath id=\'‘\' d=\'m 24,0 v 7.178 c -3.11,0.905 -5.441,3.185 -6.996,6.839 -1.555,3.654 -2.332,8.681 -2.332,15.084 v 2.037 H 24 V 55 H 0 V 34.242 C 0,23.7 1.992,15.569 5.976,9.846 9.96,4.123 15.968,0.84 24,0 Z\' style=\'display:inline;opacity:'.$blocquote_opacity.';fill:%23'.$blocquote_color.';fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;filter:url(%23filter842)\' /%3E%3Cpath id=\'‘-copy\' d=\'m 53,0 v 7.178 c -3.11,0.905 -5.441,3.185 -6.996,6.839 -1.555,3.654 -2.332,8.681 -2.332,15.084 v 2.037 H 53 V 55 H 29 V 34.242 C 29,23.701 30.992,15.569 34.976,9.846 38.96,4.123 44.968,0.84 53,0 Z\' style=\'display:inline;opacity:'.$blocquote_opacity.';fill:%23'.$blocquote_color.';fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;filter:url(%23filter846)\' inkscape:highlight-color=\'4294967295\' /%3E%3C/g%3E%3C/svg%3E");';
				
				echo'}';
				
				// Pour les Articles on définit pour le blockquote une largeur fixe en pixel pour petit & large ecran
				// afin d'avoir la même largeur du blockquote mode plein écran activé ou pas
				switch ($custom_gutenberg_editor_settings['eccp_settings_post_template_editor_select_field']) {
						
					// petit modèle pour les Articles
					case 'small':
					
					 $width_blockquote_post = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_post_back_office_text_field'])/100 ) ) ;
					 $width_blockquote_post = strval($width_blockquote_post).'px';
					
					break;
					
					// large modèle pour les Articles
					case 'large':
					
					 $width_blockquote_post = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_post_back_office_text_field'])/100 ) ) ;
					 $width_blockquote_post = strval($width_blockquote_post).'px';
					
					break;
					
					// pleine largeur pour les Articles
					case 'fullwidth':
					
					$width_blockquote_post = $reusable_blocks_settings['eccp_settings_width_blockquote_post_back_office_text_field'].'%';
					
					break;

				}
				
				
				
				// largeur blockquote pour les articles en back office
				echo'body.post-type-post .block-quote,
				     body.post-type-post .is-style-eccp-fancy-quote{';
				
					echo'width:'.esc_html($width_blockquote_post).';';
				
				echo'}';
				
				
				// Pour les Pages on définit pour le blockquote une largeur fixe en pixel pour petit & large ecran
				// afin d'avoir la même largeur du blockquote mode plein écran activé ou pas
				switch ($custom_gutenberg_editor_settings['eccp_settings_page_template_editor_select_field']) {
						
					// petit modèle pour les Pages
					case 'small':
					
					 $width_blockquote_page = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_page_back_office_text_field'])/100 ) ) ;
					 $width_blockquote_page = strval($width_blockquote_page).'px';
					
					break;
					
					// large modèle pour les Pages
					case 'large':
					
					 $width_blockquote_page = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_page_back_office_text_field'])/100 ) ) ;
					 $width_blockquote_page = strval($width_blockquote_page).'px';
					
					break;
					
					// pleine largeur pour les Pages
					case 'fullwidth':
					
					$width_blockquote_page = $reusable_blocks_settings['eccp_settings_width_blockquote_page_back_office_text_field'].'%';
					
					break;

				}
				
				// largeur blockquote pour les pages en back office
				echo'body.post-type-page .block-quote,
				     body.post-type-page .is-style-eccp-fancy-quote{';
				
					echo'width:'.esc_html($width_blockquote_page).';';
				
				echo'}'; 
				
				
				// largeur blockquote pour les CPT en back office
				
				// s'il ya des Custom Post Type
				if ( !empty($slug_cpt = eccp_get_registered_post_types()) ) {
					
					// Pour les CPT on définit pour le Blockquote une largeur fixe en pixel pour petit & large ecran
					// afin d'avoir la même largeur du blockquote mode plein écran activé ou pas
					switch ($custom_gutenberg_editor_settings['eccp_settings_cpt_template_editor_select_field']) {
							
						// petit modèle pour les CPT
						case 'small':
						
						 $width_blockquote_cpt = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_cpt_back_office_text_field'])/100 ) ) ;
						 $width_blockquote_cpt = strval($width_blockquote_cpt).'px';
						
						break;
						
						// large modèle pour les CPT
						case 'large':
						
						 $width_blockquote_cpt = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_width_blockquote_cpt_back_office_text_field'])/100 ) ) ;
						 $width_blockquote_cpt = strval($width_blockquote_cpt).'px';
						
						break;
						
						// pleine largeur pour les CPT
						case 'fullwidth':
						
						$width_blockquote_cpt = $reusable_blocks_settings['eccp_settings_width_blockquote_cpt_back_office_text_field'].'%';
						
						break;

					}
					
					foreach ($slug_cpt as $key => $value) {
						
						
						// on récupère pour les CPT un tableau associatif : $slug_cpt
						// dont la clé donne le nom de nos CPT et la valeur le slug du CPT
						// récupère aussi a quelques exception prés des slug de post type 
						// qui ne sont pas des CPT, ex: e-landing-page que l'on écarte en les définissant dans $slug_no_cpt
						// si le slug est bien un slug de CPT alors on peut appliquer les régles CSS
						if  ( !in_array($value, $slug_no_cpt) )  {
					
							// largeur blockquote pour les CPT en back office
							echo'body.post-type-'.$value.' .block-quote,
							     body.post-type-'.$value.' .is-style-eccp-fancy-quote{';
							
								echo'width:'.esc_html($width_blockquote_cpt).';';
							
							echo'}'; 
					
						}
						
						// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
						// ce n'est pas le slug mais le nom du post type qui est pris comme référence
						// par The Events Calendar pour appliquer des régles CSS.
						if ($key == 'tribe_events') {

							 
							// largeur blockquote pour les CPT évènements en back office
							echo'body.post-type-'.$key.' .block-quote,
							     body.post-type-'.$key.' .is-style-eccp-fancy-quote{';
							
								echo'width:'.esc_html($width_blockquote_cpt).';';
							
							echo'}';
							
						}
						
					
					}
				
					
				} // Fin s'il ya des Customm Post Type
				
				/*-------------------BLOC RÉUTILISABLE METTRE EN ÉVIDENCE BACK OFFICE --------------------------*/
				
				// bordure colorée orange #F37020 avec une transparence 
				echo'.mise-en-evidence {';
				
				echo'border-left: 5px solid '.esc_html($reusable_blocks_settings['eccp_settings_custom_paragraph_border_color']).';';
				
				echo' border-radius:4px;
					  padding:1.1em!important;
					  margin:1.1em!important;
					  font-size: 20px;';
					  
				echo'}';
				
				// Pour les Articles on définit pour le bloc mettre en évidence une largeur fixe en pixel 
				// pour petit & large ecran, afin d'avoir la même largeur 
				// mode plein écran activé ou pas 
				switch ($custom_gutenberg_editor_settings['eccp_settings_post_template_editor_select_field']) {
						
					// petit modèle pour les Articles
					case 'small':
					
					 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_post_back_office_text_field'])/100 ) ) ;
					 $width = strval($width).'px';
					
					break;
					
					// large modèle pour les Articles
					case 'large':
					
					 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_post_back_office_text_field'])/100 ) ) ;
					 $width = strval($width).'px';
					
					break;
					
					// pleine largeur pour les Articles
					case 'fullwidth':
					
					$width = $reusable_blocks_settings['eccp_settings_custom_paragraph_width_post_back_office_text_field'].'%';
					
					break;

				}
				
				// largeur bloc Mettre en Évidence pour les articles en back office
				echo'body.post-type-post .mise-en-evidence{';
				
					echo'width:'.esc_html($width).';';
				
				echo'}';
				
				
				//  Pour les Pages on définit pour le bloc mettre en évidence une largeur fixe en pixel 
				// pour petit & large ecran, afin d'avoir la même largeur 
				// mode plein écran activé ou pas 
				switch ($custom_gutenberg_editor_settings['eccp_settings_page_template_editor_select_field']) {
						
					// petit modèle pour les Pages
					case 'small':
					
					 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_page_back_office_text_field'])/100 ) ) ;
					 $width = strval($width).'px';
					
					break;
					
					// large modèle pour les Pages
					case 'large':
					
					 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_page_back_office_text_field'])/100 ) ) ;
					 $width = strval($width).'px';
					
					break;
					
					// pleine largeur pour les Pages
					case 'fullwidth':
					
					$width = $reusable_blocks_settings['eccp_settings_custom_paragraph_width_page_back_office_text_field'].'%';
					
					break;

				}
				
				
				// largeur  bloc Mettre en Évidence pour les pages en back office
				echo'body.post-type-page .mise-en-evidence{';
				
					echo'width:'.esc_html($width).';';
				
				echo'}'; 
				 
				 
				// largeur  bloc Mettre en Évidence pour les Custom Post Type 
				
				// s'il ya des Customm Post Type
				if ( !empty($slug_cpt = eccp_get_registered_post_types()) ) {
					
					// Pour les CPT on définit pour le bloc mettre en évidence une largeur fixe en pixel 
					// pour petit & large ecran, afin d'avoir la même largeur 
					// mode plein écran activé ou pas 
					switch ($custom_gutenberg_editor_settings['eccp_settings_cpt_template_editor_select_field']) {
							
						// petit modèle pour les CPT
						case 'small':
						
						 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_small_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_cpt_back_office_text_field'])/100 ) ) ;
						 $width = strval($width).'px';
						
						break;
						
						// large modèle pour les CPT
						case 'large':
						
						 $width = intval( ( $custom_gutenberg_editor_settings['eccp_settings_large_template_editor_text_field'] * intval($reusable_blocks_settings['eccp_settings_custom_paragraph_width_cpt_back_office_text_field'])/100 ) ) ;
						 $width = strval($width).'px';
						
						break;
						
						// pleine largeur pour les CPT
						case 'fullwidth':
						
						$width = $reusable_blocks_settings['eccp_settings_custom_paragraph_width_cpt_back_office_text_field'].'%';
						
						break;

					}
					
					foreach ($slug_cpt as $key => $value) {
						
						// on récupère pour les CPT un tableau associatif : $slug_cpt
						// dont la clé donne le nom de nos CPT et la valeur le slug du CPT
						// récupère aussi a quelques exception prés des slug de post type 
						// qui ne sont pas des CPT, ex: e-landing-page que l'on écarte en les définissant dans $slug_no_cpt
						// si le slug est bien un slug de CPT alors on peut appliquer les régles CSS
						if  ( !in_array($value, $slug_no_cpt) )  {
							
							// largeur bloc Mettre en évidence pour les CPT
							echo'body.post-type-'.$value.' .mise-en-evidence{';
				
								echo'width:'.esc_html($width).';';
				
							echo'}'; 
					
						}
						
						// Régles pour le plugin The Events Calendar(Mise à jour version 2.0)
						// ce n'est pas le slug mais le nom du post type qui est pris comme référence
						// par The Events Calendar pour appliquer des régles CSS.
						if ($key == 'tribe_events') {
							
							// largeur bloc Mettre en évidence pour les CPT évènements
							echo'body.post-type-'.$key.' .mise-en-evidence{';
							
								echo'width:'.esc_html($width).';';
							
							echo'}';
							
						}
					
					}
				
					
				}
				
				
				/*----------------------------STYLE BOX SHADOW BACK OFFICE------------------------------*/
				
				/*------------- Style box shadow(page d'options du plugin) back office ---------------------*/
				// a partir de la version 2.8 le réglage Box Shadow est dans les paramètres du bloc 
				
				
				/*if( $custom_gutenberg_blocks_settings['eccp_settings_activate_box_shadow_paragraph_block_radio_field'] == 'yes' ) {
					
					// on fait la conversion en RGBA, la fonction retourne une chaine
					// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
					$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_box_shadow_color_text_field'], 
                            intval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_opacity_text_field'])/100 );
					
					
					
					// on corrige le bug avant d'appliquer l'effet Box Shadow : 
					// une valeur de 0 enregistré en base de données donne une chaine vide
					if ( empty($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_x_text_field']) ){
						$custom_gutenberg_blocks_settings['eccp_settings_box_shadow_x_text_field'] = '0';
					}
					
					if ( empty($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_y_text_field']) ){
						$custom_gutenberg_blocks_settings['eccp_settings_box_shadow_y_text_field'] = '0';
					}
					
					if ( empty($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_blur_text_field']) ){
						$custom_gutenberg_blocks_settings['eccp_settings_box_shadow_blur_text_field'] = '0';
					}
					
					if ( empty($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_spread_text_field']) ){
						$custom_gutenberg_blocks_settings['eccp_settings_box_shadow_spread_text_field'] = '0';
					}
					
					
					// Pour un bloc groupé avec un fond effet ombre de boite par défaut: 
					// box-shadow: 8px 8px 12px -8px rgba(0,0,0,0.5);
					// padding editeur gutenberg: 20px 30px pour un bloc groupé correspond 
					// a celles de l'interface publique
					// régle: padding: 1.25em 2.375em; ajouté pour thème Astra
				
					echo'body.wp-admin .wp-block-group.is-style-eccp-box-shadow{';
					   
						echo'box-shadow: '.esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_x_text_field'])).'px '
										 .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_y_text_field'])).'px '
										 .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_blur_text_field'])).'px '
										 .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_spread_text_field'])).'px '
										 .esc_html($rgba).';';
						
						echo'padding: 1.25em 2.375em;';
						
					echo'}';
			
					// correction thème Generate press pour un bloc de paragraphes groupés
					echo'body.wp-admin .wp-block-group__inner-container{';
					
						echo'padding:0px!important;';
					
					echo'}';
			
					//Pour un  BLOC UN SEUL PARAGRAPHE AVEC UN FOND
					// ombre de boite par défaut: box-shadow: 8px 8px 12px -8px rgba(0,0,0,0.5); 
					// afin de correspondre à l'interface publique
					// régle: padding: 1.25em 2.375em; ajouté pour thème Astra
					echo'body.wp-admin p.is-style-eccp-box-shadow{';
						
						echo'box-shadow: '.esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_x_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_y_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_blur_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_spread_text_field'])).'px '
										  .esc_html($rgba).';';
						
						echo'background: #F0F2F6;';
						echo'padding: 1.25em 2.375em;';

					echo'}';
					
					
					//Pour un Boc Colonne
					echo'body.wp-admin .wp-block-column.is-style-eccp-box-shadow{';
						
						echo'box-shadow: '.esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_x_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_y_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_blur_text_field'])).'px '
										  .esc_html(strval($custom_gutenberg_blocks_settings['eccp_settings_box_shadow_spread_text_field'])).'px '
										  .esc_html($rgba).';';
					
					echo'}';
					
				 
				}*/
				
				/*---------------------- Style box shadow(React JS) back office-------------------------*/
				
				// Pour un BLOC GROUPE avec un effet ombre de boite 
				// les régles pour un effet box shadow sont appliqués 
				// directement en React Js
				// régle: padding: 1.25em 2.375em; ajouté pour thème Astra
			
				// la même régle est appliqué directement au bloc Group
				/*echo'body.wp-admin .wp-block-group.is-style-eccp-box-shadow{';
				   
					echo'padding: 1.25em 2.375em;';
					
				echo'}';*/
		
		
				// correction thème Generate press pour un bloc de paragraphes groupés
				echo'body.wp-admin .wp-block-group__inner-container{';
				
					echo'padding:0px!important;';
				
				echo'}';
		
				// Pour un BLOC PARAGRAPHE 
				// régle: padding: 1.25em 2.375em; ajouté pour thème Astra
				// les régles pour un effet box shadow sont appliqués 
				// directement en React Js
				echo'body.wp-admin p.eccp-box-shadow{';
					
					echo'padding: 1.25em 2.375em;';

				echo'}';
				
				
				// Pour Le Bloc image
				// on cible l'image du bloc,qu'on ne peut faire en React JS 
				// pour apliquer le style box shadow avec les variables
				// css déclarées et affectées par le script en React JS
				echo'body.wp-admin .wp-block-image.eccp-box-shadow img {';
			
				echo'box-shadow: calc(var(--eccp-horizontalBoxShadow, 0) * 1px) '.
								 'calc(var(--eccp-verticalBoxShadow, 0) * 1px) '.
								 'calc(var(--eccp-blurBoxShadow, 4) * 1px) '.
								 'calc(var(--eccp-spreadBoxShadow, 1) * 1px) '.
								 'var(--eccp-colorBoxShadow, rgba(0,0,0,0.2));';
				 
				echo'}';
				
				
				// Pour Le Bloc Média Texte
				// on cible l'image du bloc,qu'on ne peut faire en React JS 
				// pour apliquer le style box shadow avec les variables
				// css déclarées et affectées par le script en React JS
				echo'body.wp-admin .wp-block-media-text.eccp-box-shadow .wp-block-media-text__media img {';
			
				echo'box-shadow: calc(var(--eccp-horizontalBoxShadow, 20) * 1px) '.
								 'calc(var(--eccp-verticalBoxShadow, 20) * 1px) '.
								 'calc(var(--eccp-blurBoxShadow, 0) * 1px) '.
								 'calc(var(--eccp-spreadBoxShadow, 0) * 1px) '.
								 'var(--eccp-colorBoxShadow,#0E6487);';
				 
				echo'}';
				
				
				// Pour Le Bloc Bouton
				// On cible le lien du bouton qui a la classe: wp-block-button__link,
				// qu'on ne peut faire en React JS. 
				// On applique le style box shadow avec les variables
				// css déclarées et affectées par le script en React JS
				echo'body.wp-admin .wp-block-button.eccp-box-shadow .wp-block-button__link {';
			
				echo'box-shadow: calc(var(--eccp-horizontalBoxShadow, 0) * 1px) '.
								 'calc(var(--eccp-verticalBoxShadow, 0) * 1px) '.
								 'calc(var(--eccp-blurBoxShadow, 4) * 1px) '.
								 'calc(var(--eccp-spreadBoxShadow, 1) * 1px) '.
								 'var(--eccp-colorBoxShadow, rgba(0,0,0,0.2));';
				 
				echo'}';
				
				
				
				/*------------------- BLOC PARAGRAPHE BACK OFFICE --------------------------*/
				
				/*----------------------------Style Card back office------------------------------*/
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_card_paragraph_radio_field'] == 'yes' ) {
				
					echo'body.wp-admin p.is-style-eccp-card{';
							
							echo'box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);';
							echo'border-radius: 4px;';
							echo'background: #F0F2F6;';
							echo'padding: 16px 16px 16px 16px;';

					echo'}';
					
					echo'body.wp-admin p.is-style-eccp-card.has-background{';
					
					
						echo'padding: 16px 16px 16px 16px!important;';

					
					echo'}';
					
				}

				/*----------------------------Style Notice: Question back office------------------------------*/
				
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$icone_color_notice_question = substr($custom_gutenberg_blocks_settings['eccp_settings_icon_color_style_notice_question_text_field'],1);
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_notice_question_radio_field'] == 'yes' ) {
				
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin p.is-style-eccp-notice-question,
					     body.wp-admin [data-type="core/group"].is-style-eccp-notice-question{';
					
							echo'background: #e6e0f7 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color_notice_question).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z\'/%3E%3C/svg%3E") no-repeat;';
							echo'background-size: 50px;';
							echo'min-height: 60px;';
							echo'background-position: top 20px left 10px;';
							echo'border-left: 4px solid rgba(0, 0, 0, 0.1);';
							echo'border-radius: 5px;';
							echo'padding: 16px 16px 16px 75px!important;';// Version 2.7 modif pour le block Group

					echo'}';
					
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin [data-type="core/group"].is-style-eccp-notice-question p,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-question h3,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-question h4{';
					
						echo'margin:0;';
					
					echo'}';
					
					
					echo'body.wp-admin p.is-style-eccp-notice-question.has-background{';
					
					
						echo'padding: 16px 16px 16px 75px!important;';

					
					echo'}';
					
				}
				
				/*----------------------------Style Notice: Info back office------------------------------*/
				
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$icone_color_notice_info = substr($custom_gutenberg_blocks_settings['eccp_settings_icon_color_style_notice_info_text_field'],1);
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_notice_info_radio_field'] == 'yes' ) {
				
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin p.is-style-eccp-notice-info,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-info{';
							
						echo'background: #48ADD8 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color_notice_info).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E") no-repeat;';
						echo'color: #FFFFFF;';
						echo'background-size: 50px;';
						echo'min-height: 60px;';
						echo'background-position: top 20px left 10px;';
						echo'border-left: 4px solid rgba(0, 0, 0, 0.1);';
						echo'border-radius: 5px;';
						echo'padding: 16px 16px 16px 75px!important;';// Version 2.7 modif pour le block Group

					echo'}';
					
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin [data-type="core/group"].is-style-eccp-notice-info p,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-info h3,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-info h4{';
						 
						echo'margin:0;';
					
					echo'}';
					
						
					echo'body.wp-admin p.is-style-eccp-notice-info.has-background{';
						
						
						echo'padding: 16px 16px 16px 75px!important;';

						
					echo'}';
					

				}
				
				/*----------------------------Style Notice: Advice back office------------------------------*/
				
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$icone_color_notice_advice = substr($custom_gutenberg_blocks_settings['eccp_settings_icon_color_style_notice_advice_text_field'],1);
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_notice_advice_radio_field'] == 'yes' ) {
				
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin p.is-style-eccp-notice-advice,
					     body.wp-admin [data-type="core/group"].is-style-eccp-notice-advice{';
							
						echo'background: #83BD71 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color_notice_advice).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\' opacity=\'.87\'/%3E%3Cpath d=\'M21 8h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2zm0 4l-3 7H9V9l4.34-4.34L12.23 10H21v2zM1 9h4v12H1z\'/%3E%3C/svg%3E") no-repeat;';
						echo'color: #FFFFFF;';
						echo'background-size: 50px;';
						echo'min-height: 60px;';
						echo'background-position: top 20px left 10px;';
						echo'border-left: 4px solid rgba(0, 0, 0, 0.1);';
						echo'border-radius: 5px;';
						echo'padding: 16px 16px 16px 75px!important;';// Version 2.7 modif pour le block Group

					echo'}';
					
					
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin [data-type="core/group"].is-style-eccp-notice-advice p,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-advice h3,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-advice h4{';
						 
						echo'margin:0;';
					
					echo'}';
					
						
					echo'body.wp-admin p.is-style-eccp-notice-advice.has-background{';
						
						
						echo'padding: 16px 16px 16px 75px!important;';

						
					echo'}';
					
				}
				
				/*----------------------------Style Notice: Warning back office------------------------------*/
				
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$icone_color_notice_warning = substr($custom_gutenberg_blocks_settings['eccp_settings_icon_color_style_notice_warning_text_field'],1);
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_notice_warning_radio_field'] == 'yes' ) {
				
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin p.is-style-eccp-notice-warning,
					     body.wp-admin [data-type="core/group"].is-style-eccp-notice-warning{';
				
						echo'background: #FFC334 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color_notice_warning).'\'%3E%3Cpath d=\'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\'/%3E%3C/svg%3E") no-repeat;';
						echo'color: #FFFFFF;';
						echo'background-size: 50px;';
						echo'min-height: 60px;';
						echo'background-position: top 20px left 10px;';
						echo'border-left: 4px solid rgba(0, 0, 0, 0.1);';
						echo'border-radius: 5px;';
						echo'padding: 16px 16px 16px 75px!important;';// Version 2.7 modif pour le block Group

					echo'}';
					
					
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin [data-type="core/group"].is-style-eccp-notice-warning p,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-warning h3,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-warning h4{';
					
						echo'margin:0;';
					
					echo'}';
					
						
					echo'body.wp-admin p.is-style-eccp-notice-warning.has-background{';
						
						
						echo'padding: 16px 16px 16px 75px!important;';

						
					echo'}';
					
				}
				
				/*----------------------------Style Notice: Alert back office------------------------------*/
				
				// substr retourne une sous chaine de la position:1 jusqu'a la fin				
				$icone_color_notice_alert = substr($custom_gutenberg_blocks_settings['eccp_settings_icon_color_style_notice_alert_text_field'],1);
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_notice_alert_radio_field'] == 'yes' ) {
				
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin p.is-style-eccp-notice-alert,
					     body.wp-admin [data-type="core/group"].is-style-eccp-notice-alert{';
				
						echo'background: #B54D4D url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color_notice_alert).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z\'/%3E%3Ccircle cx=\'12\' cy=\'16\' r=\'1\'/%3E%3Cpath d=\'M11 7h2v7h-2z\'/%3E%3C/svg%3E") no-repeat;';
						echo'color: #FFFFFF;';
						echo'background-size: 50px;';
						echo'min-height: 60px;';
						echo'background-position: top 20px left 10px;';
						echo'border-left: 4px solid rgba(0, 0, 0, 0.1);';
						echo'border-radius: 5px;';
						echo'padding: 16px 16px 16px 75px!important;';// Version 2.7 modif pour le block Group

					echo'}';
						
						
					// Version 2.7 modif pour le block Group
					echo'body.wp-admin [data-type="core/group"].is-style-eccp-notice-alert p,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-alert h3,
						 body.wp-admin [data-type="core/group"].is-style-eccp-notice-alert h4{';
					
						echo'margin:0;';
					
					echo'}';
					
						
					echo'body.wp-admin p.is-style-eccp-notice-alert.has-background{';
						
						
						echo'padding: 16px 16px 16px 75px!important;';

						
					echo'}';
					
				}
				
				
				/*--------------------- Style Click to Tweet Back Office ---------------------------*/


				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_click_to_tweet_radio_field'] == 'yes' ) {

					// Bloc paragraphe de style ECCP Tweet
					echo'body.wp-admin p.is-style-eccp-tweet {';
					
						echo'font-size: 25px;';
						echo'line-height:1.5em;';
						echo'border: 1px solid #dde2e9;';
						echo'box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);';
						echo'padding: 2rem 2rem;';
						echo'margin-bottom: 1.5em;';
						echo'margin-top: 1.5em;';
						echo'border-radius: 4px;';
						
					echo'}';

				
				}
				
				
				/*--------------------- Style Evidence Back Office ---------------------------*/		

				// Bloc paragraphe de style Evidence
				// la couleur de la bordure est la même
				// que le bloc réutilisable mettre en évidence
				echo'body.wp-admin p.is-style-eccp-evidence {';
				
					/* bordure colorée orange #F37020 avec une transparence */
					echo'border-left: 5px solid '.esc_html($reusable_blocks_settings['eccp_settings_custom_paragraph_border_color']).';';
					/* couleur de fond jaune pale */
					echo'background:rgba(243,230,114,0.7);';
					echo'border-radius:4px;';
					echo'box-shadow: 8px 8px 12px -8px rgba(0,0,0,0.5);';
					echo' padding:1.1em!important;';
					echo' margin:1.1em;';
					echo' font-size: 20px;';
					
				echo'}';
				
				
				/*--------------------- Style pour le format Tooltip Back Office ---------------------------*/		
				
				/*
				Régles pour la balise <span> de classe eccp-tooltip qui 
				a l'attribut data-tooltip qui contient le message pour 
				l'info-bulle
				*/
				echo'.eccp-tooltip {';
					echo'position: relative;';
				  /* dotted ou double */
					echo'text-decoration: underline double 2px '.$custom_gutenberg_blocks_settings['eccp_settings_text_double_underline_color_text_field'].';';
				echo'}';

				/*
				container du message de l'info bulle 

				On affiche le message par la règle
				content et l'attribut data-tooltip de la balise
				<span> qui contient le message pour l'info-bulle.
				on affiche l'info-bulle au dessus et au mileu
				de la balise <span> grace a la translation
				sur l'axe X de -50%
				On calcule la position appropriée en soustrayant 
				à la largeur totale de l'élément de message (100%), 
				10 pixels supplémentaires. 
				C'est à cette distance que le message 
				est éloigné de la balise <span>
				*/
				echo'.eccp-tooltip:hover::after {';
				  echo'background-color:'.$custom_gutenberg_blocks_settings['eccp_settings_tooltip_background_color_text_field'].';';
				  echo'border-radius: 8px;';
				  echo'color:'.$custom_gutenberg_blocks_settings['eccp_settings_tooltip_text_color_text_field'].';';
				  echo'padding: 6px 6px;';
				  echo'position: absolute;';
				  echo'text-align: center;';
				  echo'z-index: 999;';
				  echo'width:200px;';
				  echo'font-size:14px;';
				  echo'font-weight:normal;';
				  echo'line-height:1.5;';
				  
				  echo'content:""attr(data-tooltip)"";';
				  echo'top: 0;';
				  echo'left: 50%;';
				  echo'transform: translate(-50%, calc(-100% - 10px));';
				echo'}';


				/*
				afficher une petite flèche vers le parent balise <span> 
				depuis la boîte de message info-bulle 

				Fondamentalement,ce sera un simple carré qui sera tourné de 45 degrés, 
				puis la moitié du carré sera masquée par la boîte de message réelle 
				créant une flèche. 
				De plus, on doit positionner correctement la flèche, 
				pour cela on doit prendre en considération que la moitié du carré 
				doit être couverte afin de créer la flèche, 
				pour cela on change le 10px décalage ci-dessus en seulement5px
				*/
				echo'.eccp-tooltip:hover::before {';
				  echo'background-color:'.$custom_gutenberg_blocks_settings['eccp_settings_tooltip_background_color_text_field'].';';
				  echo'content:"";';
				  echo'position: absolute;';
				  echo'width: 15px;';
				  echo'height: 15px;';
				  echo'z-index: 999;';
				  
				  echo'top: 0;';
				  echo'left: 50%;';
				  echo'transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);';
				echo'}';


				/*---------- Style Contour Pour l'Icône Dashicon Ajouté au bloc paragraphe back office ----------------*/
		
				echo'.editor-styles-wrapper p .eccp-dashicon.icon-outline:before {';
					
					echo'outline-style: solid;';
					echo'outline-offset: 0.45rem;';
					echo'outline-color: inherit;';
					echo'outline-width: 4px;';
					echo'border-radius: 50%;';
					
				echo'}';
				

				/*-------------------BLOC GROUP BACK OFFICE --------------------------*/
		
				/* version 2.4 correction pour thème astra
				   padding réglage natif a partir de WordPress 6.0
				echo'.wp-block-group {';
					echo'padding: 1.25em 2.375em!important;';
				echo'}';
				*/
		
				/*---------------------------- Border Radius ------------------------------*/
			
			    /* appliqué directement par une régle style
				   enregistré dans le HTML du bloc a partir de la version 2.5 
				echo'.is-style-eccp-border-radius{';
					echo'border-radius: 8px;';
				echo'}';
				*/
		
				/*---------------------------- Alignement Left & Right Back Office ------------------------------*/
		
				echo'@media (min-width:1025px) {';
				
					echo'.wp-block[data-align="left"] .wp-block-group.is-style-eccp-size-larger,
					     .wp-block-group.alignleft.is-style-eccp-size-larger {';
						/* le block groupe a une largeur de 90% paramètré
					       dans le panneau ECCP Style des paramètres du bloc
					       si on met une marge droite de 10% au  block qui a un style flottant a gauche
					       on est sur que le block suivant ne va pas remonter
						*/
						echo'margin-right: 10%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="left"] .wp-block-group.is-style-eccp-size-large,
 					     .wp-block-group.alignleft.is-style-eccp-size-large {';
						echo'margin-right: 20%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="left"] .wp-block-group.is-style-eccp-size-regular,
					     .wp-block-group.alignleft.is-style-eccp-size-regular{';
						echo'margin-right: 30%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="left"] .wp-block-group.is-style-eccp-size-small,
              			 .wp-block-group.alignleft.is-style-eccp-size-small {';
						echo'margin-right: 40%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';
					
					echo'.wp-block[data-align="left"] .wp-block-group.is-style-eccp-size-very-small,
              			 .wp-block-group.alignleft.is-style-eccp-size-very-small {';
						echo'margin-right: 50%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';
					
					
					
					echo'.wp-block[data-align="right"] .wp-block-group.is-style-eccp-size-larger,
        				 .wp-block-group.alignright.is-style-eccp-size-larger {';
						echo'margin-left: 10%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="right"] .wp-block-group.is-style-eccp-size-large,
                         .wp-block-group.alignright.is-style-eccp-size-large {';
						echo'margin-left: 20%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="right"] .wp-block-group.is-style-eccp-size-regular,
                         .wp-block-group.alignright.is-style-eccp-size-regular {';
						echo'margin-left: 30%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';

					echo'.wp-block[data-align="right"] .wp-block-group.is-style-eccp-size-small,
              			 .wp-block-group.alignright.is-style-eccp-size-small {';
						echo'margin-left: 40%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';
					
					echo'.wp-block[data-align="right"] .wp-block-group.is-style-eccp-size-very-small,
              			 .wp-block-group.alignright.is-style-eccp-size-very-small {';
						echo'margin-left: 50%!important;';
						echo'margin-bottom: 1.5em!important;';
					echo'}';
					
							
				echo'}';
		
		
				/*---------------------------- Style Variation InfoBox back office ------------------------------*/
				
				
				echo'.is-style-eccp-infobox.wp-block-group {';
					echo'padding: 1.25em!important;';
					echo'background: #F0F2F6;';
					echo'margin-bottom: 1.1em;';
				echo'}';


				echo'.is-style-eccp-infobox .wp-block-columns {';
					echo'margin-bottom: 0em!important;';
				echo'}';


				echo'.is-style-eccp-infobox .wp-block-buttons {';
				   echo'margin-bottom: 0em!important;';
				echo'}';
				
				
				echo'.is-style-eccp-infobox h2,.is-style-eccp-infobox h3,
					 .is-style-eccp-infobox h4,.is-style-eccp-infobox h5 {';
						echo'margin-top: 0em!important;';
				echo'}';


				echo'@media screen and (max-width: 599px) {';
				
					echo'.is-style-eccp-infobox p {';
						echo'text-align: center!important;';
					echo'}';
					
				echo'}';
				
				
				echo'@media screen and (max-width: 781px) {';
					
					echo'.is-style-eccp-infobox .wp-block-column {';
						echo'margin-bottom: 0em!important;';
					echo'}';
					
					echo'.is-style-eccp-infobox h2,.is-style-eccp-infobox h3,
						 .is-style-eccp-infobox h4,.is-style-eccp-infobox h5 {';
						echo'margin: 0em!important;';
					echo'}';
					
				echo'}';
				
				
				/*----------------------- Style Variation Countdown Timer back office --------------------------*/
				
				// Variation Bloc Groupe pour un compte a rebours
				echo'.wp-block-group.is-style-eccp-countdown{';
				
					echo'box-shadow:0px 0px 4px 1px rgba(0,0,0,0.2);';
					echo'padding:1em 1em;';
					
				echo'}';
		
		
				/*----------------------- Style Table Of Contents back office --------------------------*/
				
				echo'body.wp-admin .wp-block-group.is-style-eccp-toc {';
					echo'padding-top: 0.5em;';
					echo'padding-bottom: 0.5em;';
				echo'}';
				
				/* 
				bordure gris léger dans le cas ou il n'y a pas d'arrière plan
				ou un arrière plan en gris léger
				*/
				echo'body.wp-admin .wp-block-group.is-style-eccp-toc:not(.has-background),
				     body.wp-admin .wp-block-group.is-style-eccp-toc.has-light-green-background-color {';
					echo'border: 1px solid lightgray';
				echo'}';
				
				// on récupère le thème actif
				$my_theme = wp_get_theme();
				
				
				if(stristr($my_theme, 'generatepress')) {
					
					echo'body.wp-admin .wp-block-group.is-style-eccp-toc pre.wp-block-code code{';
						echo'margin-left:15px!important;';
						echo'margin-right:15px!important;';
					echo'}';
					
				}
		
				// on utilise un bloc code pour éviter que l'intitulé soit repris
				// dans le résumé apparaissant dans le bloc boucle de requête
				// ou Derniers Articles
				echo'body.wp-admin .wp-block-group.is-style-eccp-toc pre.wp-block-code {';
					echo'margin:0!important;';
					echo'padding:5px 0px!important;';
					echo'background:transparent!important;';
					echo'border:none!important;';
				echo'}';
				
				echo'body.wp-admin .wp-block-group.is-style-eccp-toc pre.wp-block-code code {';
					echo'color:#333333!important;';
					echo'font-size:20px!important;';
				echo'}';
				
				echo'body.wp-admin .wp-block-group.is-style-eccp-toc pre.wp-block-code code::after {';
					echo'content: "\f347";';
					echo'font-family: "dashicons";';
					echo'float:right;';
				echo'}';
				
				
				/*----------------------- Formes de séparation back office --------------------------*/
				
				/*
				 En ajoutant l'attribut préservationAspectRatio="none"
				 dans les proriétés du SVG, 
				 on peut définir une hauteur personnalisée.
				 Ce qui signifie aussi que la forme sera « déformée » 
				 pour garder la même hauteur.
				 grâce a la propriété css: -webkit-mask-image,
				 on va pouvoir appliquer une couleur d'arrière plan aux SVG.
				 Cette couleur d'arrière plan du SVG correspondra à la couleur
				 d'arrière plan de la publication excepté pour les styles:
				 • vagues avec opacité(waves opacity) 
				 • Inclinée avec opacité(Tilt Opacity) 
				 ces styles prennent la couleur d'arrière plan du bloc groupe.
				*/

				/* Le bloc groupe auquel on applique
				une forme de séparation a reçu en ReactJS la classe:
				.is-style-eccp-shape-divider */
				echo'.is-style-eccp-shape-divider {';
					echo'position: relative;';
				echo'}';
				
				/* ------------ Forme Inclinée(tilt) Back Office -----------------------*/

				/* réglage de l'angle par la hauteur de 0 à 500px 
				inversion: transform: rotateY(180deg)
				la couleur de la forme doit être celui de l'arrière plan de la publication
				remarque width fait aussi varier l'angle*/
				echo'.is-style-eccp-shape-divider.style-shape-top-tilt::before {';
					echo'content:"";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 120L0 16.48 0 0 1200 0 1200 120z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 120L0 16.48 0 0 1200 0 1200 120z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width: calc(var(--eccp-topShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';
				
				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-tilt::before {';
					echo'transform: rotateY(180deg);';
					echo'left: -1px;';
				echo'}';


				/* inversion: transform: rotateX(180deg) 
				 la couleur de la forme doit être celui de l'arrière plan de la publication*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-tilt::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 120L0 16.48 0 0 1200 0 1200 120z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 120L0 16.48 0 0 1200 0 1200 120z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: 0;';
					echo'left: -1px;';
					echo'width: calc(var(--eccp-bottomShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';
				
				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-tilt::after {';
					echo'transform: rotateX(180deg);';
				echo'}';

				/* ------------ Forme Inclinée avec opacité(tilt opacity) Back Office -----------------------*/

				/* séparation Forme Inclinée avec opacité partie supérieure
				réglage dimmensions avec les propriétés height & top
				la couleur de la forme doit être celui de l'arrière plan de la publication
				inversion: transform: rotateX(180deg);';*/


				 echo'.is-style-eccp-shape-divider.style-shape-top-tilt-opacity::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 2600 131.1\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0 0L2600 0 2600 69.1 0 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.5\' d=\'M0 0L2600 0 2600 69.1 0 69.1z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.25\' d=\'M2600 0L0 0 0 130.1 2600 69.1z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 2600 131.1\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0 0L2600 0 2600 69.1 0 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.5\' d=\'M0 0L2600 0 2600 69.1 0 69.1z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.25\' d=\'M2600 0L0 0 0 130.1 2600 69.1z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: calc(var(--eccp-topShapeHeight,50)*-1px);';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-tilt-opacity::before {';
					echo'transform: rotateX(180deg);';
				echo'}';

				/* séparation Forme Inclinée avec opacité partie inférieure
				réglage dimmensions avec les propriétés height & bottom
				inversion: transform: rotateY(180deg)*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-tilt-opacity::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 2600 131.1\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0 0L2600 0 2600 69.1 0 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.5\' d=\'M0 0L2600 0 2600 69.1 0 69.1z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.25\' d=\'M2600 0L0 0 0 130.1 2600 69.1z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 2600 131.1\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0 0L2600 0 2600 69.1 0 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.5\' d=\'M0 0L2600 0 2600 69.1 0 69.1z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.25\' d=\'M2600 0L0 0 0 130.1 2600 69.1z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:calc(var(--eccp-bottomShapeHeight,50)*-1px);';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-tilt-opacity::after {';
					echo'transform: rotateY(180deg);';
				echo'}';

				/* ------------ Forme Flèche(Arrow) Back Office -----------------------*/

				/* séparation Flèche partie supérieure
				réglage avec la propriété height 
				width permet d'excentrer la flêche vers la droite
				transform: translateX(-50%) de -10% a +50% permet de déplacer la fleche
				de gauche à droite
				la couleur de la forme doit être celui de l'arrière plan de la publication*/

				echo'.is-style-eccp-shape-divider.style-shape-top-arrow::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width: calc(var(--eccp-topShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';


				/* séparation Flèche partie inférieure
				réglage avec les propriétées transform, bottom , height
				pour la partie inférieure
				width permet d'excentrer la flêche vers la droite
				la couleur de la forme doit être celui de l'arrière plan de la publication*/ 
				echo'.is-style-eccp-shape-divider.style-shape-bottom-arrow::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: calc(var(--eccp-bottomShapeHeight,50)*-1px);';
					echo'left: 0;';
					echo'width: calc(var(--eccp-bottomShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg) translateY(100%);';
					echo'z-index:1;';
				echo'}';

				/* ------------ Forme Incurvée(incurved) Back Office -----------------------*/

				/* séparation incurvée partie supérieure
				réglage dimmensions avec la propriété height
				width permet d'aplanir la courbe 
				la couleur de la forme doit être celui de l'arrière plan de la publication*/
				echo'.is-style-eccp-shape-divider.style-shape-top-curve::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z\' class=\'shape-fill\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z\' class=\'shape-fill\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: -1px;';
					echo'width: calc(var(--eccp-topShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';


				/* séparation incurvée partie inférieure
				réglage dimmensions avec la propriété height 
				la couleur de la forme doit être celui de l'arrière plan de la publication*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-curve::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z\' class=\'shape-fill\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z\' class=\'shape-fill\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: 0;';
					echo'left: -1px;';
					echo'width: calc(var(--eccp-bottomShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				/* ------------ Forme Incurvée assymétrique(curve asymmetrical) Back Office -----------------------*/

				/* séparation incurvée assymétrique partie supérieure
				réglage dimmensions avec la propriété height
				width permet d'aplanir la courbe
				la couleur de la forme doit être celui de l'arrière plan de la publication
				retournement horizontal: transform: rotateX(180deg);'; */
				echo'.is-style-eccp-shape-divider.style-shape-top-curve-asymmetrical::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M741,116.23C291,117.43,0,27.57,0,6V120H1200V6C1200,27.93,1186.4,119.83,741,116.23Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M741,116.23C291,117.43,0,27.57,0,6V120H1200V6C1200,27.93,1186.4,119.83,741,116.23Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: -1px;';
					echo'width: calc((var(--eccp-topShapeWidth,100) + 1) *1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-curve-asymmetrical::before {';
					echo'transform: rotateX(180deg);';
				echo'}';


				/* séparation incurvée assymétrique partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication 
				retournement horizontal: transform: rotateY(180deg)*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-curve-asymmetrical::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M741,116.23C291,117.43,0,27.57,0,6V120H1200V6C1200,27.93,1186.4,119.83,741,116.23Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M741,116.23C291,117.43,0,27.57,0,6V120H1200V6C1200,27.93,1186.4,119.83,741,116.23Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: 0;';
					echo'left: 0;';
					echo'width: calc((var(--eccp-bottomShapeWidth,100) + 1) *1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-curve-asymmetrical::after {';
					echo'transform: rotateY(180deg);';
					echo'left: -1px;';
				echo'}';
			

				/* ------------ Triangle (Triangle) Back Office -----------------------*/
				 
				 /* séparation Triangle partie supérieure
				réglage dimmensions avec la propriétés height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				on peut aussi jouer avec width*/

				 echo'.is-style-eccp-shape-divider.style-shape-top-triangle::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width:100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';


				/* séparation Triangle partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				on peut aussi jouer avec width*/

				echo'.is-style-eccp-shape-divider.style-shape-bottom-triangle::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:0;';
					echo'left: 0;';
					echo'width:100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';


				/* ------------ Triangle Assymétrique(Triangle Asymmetrical) Back Office -----------------------*/
				 
				 /* séparation Triangle Assymétrique partie supérieure
				réglage dimmensions avec la propriétés height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				retournement horizontal: transform: rotateY(180deg);';
				on peut aussi jouer avec width*/

				 echo'.is-style-eccp-shape-divider.style-shape-top-triangle-asymmetrical::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 0L0 0 892.25 114.72 1200 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 0L0 0 892.25 114.72 1200 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width: calc(var(--eccp-topShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-triangle-asymmetrical::before {';
					echo'transform: rotateY(180deg);';
				echo'}';

				/* séparation Triangle Assymétrique partie inférieure
				réglage dimmensions avec la propriété height
				on peut aussi jouer avec width
				la couleur de la forme doit être celui de l'arrière plan de la publication
				retournement horizontal: transform: rotateX(180deg);';*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-triangle-asymmetrical::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 0L0 0 892.25 114.72 1200 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M1200 0L0 0 892.25 114.72 1200 0z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:0;';
					echo'left: 0;';
					echo'width: calc(var(--eccp-bottomShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-triangle-asymmetrical::after {';
					echo'transform: rotateX(180deg);';
				echo'}';

				/* ------------ Forme Vagues(waves) Back Office -----------------------*/

				/* séparation vagues partie supérieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				inversion: transform: rotateX(180deg);';
				on peut aussi varier avec width*/
				 echo'.is-style-eccp-shape-divider.style-shape-top-waves::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: -1px;';
					echo'width: calc(var(--eccp-topShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-waves::before {';
					echo'transform: rotateX(180deg);';
				echo'}';


				/* séparation vagues  partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				inversion: transform: rotateY(180deg)*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-waves::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:0;';
					echo'left:0;';
					echo'width: calc(var(--eccp-bottomShapeWidth,100)*1%);';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-waves::after {';
					echo'transform: rotateY(180deg);';
					echo'left: -1px;';
				echo'}';
				


				/* ------------ Forme Vagues avec opacité(waves opacity) Back Office -----------------------*/
				 
				 /* séparation vagues avec opacité partie supérieure
				réglage dimmensions avec les propriétés top & height
				inversion: transform: rotateX(180deg);';*/
				 echo'.is-style-eccp-shape-divider.style-shape-top-waves-opacity::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' opacity=\'.25\' class=\'shape-fill\'%3E%3C/path%3E%3Cpath d=\'M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z\' opacity=\'.5\' %3E%3C/path%3E%3Cpath d=\'M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' opacity=\'.25\' class=\'shape-fill\'%3E%3C/path%3E%3Cpath d=\'M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z\' opacity=\'.5\' %3E%3C/path%3E%3Cpath d=\'M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: calc(var(--eccp-topShapeHeight,50)*-1px);';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.top-shape-flip-horizontally.style-shape-top-waves-opacity::before {';
					echo'transform: rotateX(180deg);';
				echo'}';

				/* séparation vagues avec opacité partie inférieure
				réglage dimmensions avec les propriétés bottom & height
				inversion: transform: rotateY(180deg);';*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-waves-opacity::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' opacity=\'.25\' class=\'shape-fill\'%3E%3C/path%3E%3Cpath d=\'M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z\' opacity=\'.5\' %3E%3C/path%3E%3Cpath d=\'M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' opacity=\'.25\' class=\'shape-fill\'%3E%3C/path%3E%3Cpath d=\'M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z\' opacity=\'.5\' %3E%3C/path%3E%3Cpath d=\'M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: calc(var(--eccp-bottomShapeHeight,50)*-1px);';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';

				// retournement horizontal 
				echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-waves-opacity::after {';
					echo'transform: rotateY(180deg);';
				echo'}';

				/* ------------ Forme Diviser(Split) Back Office -----------------------*/
				 
				 /* séparation Diviser partie supérieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication*/

				echo'.is-style-eccp-shape-divider.style-shape-top-split::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Crect x=\'1200\' height=\'3.6\'%3E%3C/rect%3E%3Crect height=\'3.6\'%3E%3C/rect%3E%3Cpath d=\'M0,0V3.6H580.08c11,0,19.92,5.09,19.92,13.2,0-8.14,8.88-13.2,19.92-13.2H1200V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Crect x=\'1200\' height=\'3.6\'%3E%3C/rect%3E%3Crect height=\'3.6\'%3E%3C/rect%3E%3Cpath d=\'M0,0V3.6H580.08c11,0,19.92,5.09,19.92,13.2,0-8.14,8.88-13.2,19.92-13.2H1200V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0px;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';


				/* séparation Diviser partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-split::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Crect x=\'1200\' height=\'3.6\'%3E%3C/rect%3E%3Crect height=\'3.6\'%3E%3C/rect%3E%3Cpath d=\'M0,0V3.6H580.08c11,0,19.92,5.09,19.92,13.2,0-8.14,8.88-13.2,19.92-13.2H1200V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Crect x=\'1200\' height=\'3.6\'%3E%3C/rect%3E%3Crect height=\'3.6\'%3E%3C/rect%3E%3Cpath d=\'M0,0V3.6H580.08c11,0,19.92,5.09,19.92,13.2,0-8.14,8.88-13.2,19.92-13.2H1200V0Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom: 0;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';


				/* ------------ Forme Livre(Book) Back Office -----------------------*/
				 
				 /* séparation Livre partie supérieure
				réglage dimmensions avec la propriétés height
				la couleur de la forme doit être celui de l'arrière plan de la publication*/

				echo'.is-style-eccp-shape-divider.style-shape-top-book::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';


				/* séparation Livre partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-book::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z\' %3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:0;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';


				/* ------------ Forme Ventilateur(Fan) Back Office -----------------------*/
				 
				 /* séparation Ventilateur partie supérieure
				réglage dimmensions avec la propriétés height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				on peut faire varier width pour rendre le ventilateur assymétrique*/

				 echo'.is-style-eccp-shape-divider.style-shape-top-fan::before {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 283.5 19.6\' preserveAspectRatio=\'none\'%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z\'%3E%3C/path%3E%3Cpath d=\'M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 283.5 19.6\' preserveAspectRatio=\'none\'%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z\'%3E%3C/path%3E%3Cpath d=\'M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'top: 0;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-topShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-topShapeBackgroundColor,#E6E8ED);';
					echo'z-index:1;';
				echo'}';


				/* séparation Ventilateur partie inférieure
				réglage dimmensions avec la propriété height
				la couleur de la forme doit être celui de l'arrière plan de la publication
				on peut faire varier width pour rendre le ventilateur assymétrique*/
				echo'.is-style-eccp-shape-divider.style-shape-bottom-fan::after {';
					echo'content: "";';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 283.5 19.6\' preserveAspectRatio=\'none\'%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z\'%3E%3C/path%3E%3Cpath d=\'M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 283.5 19.6\' preserveAspectRatio=\'none\'%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z\'%3E%3C/path%3E%3Cpath style=\'opacity:0.33\' d=\'M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z\'%3E%3C/path%3E%3Cpath d=\'M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z\'%3E%3C/path%3E%3C/svg%3E");';
					echo'position: absolute;';
					echo'bottom:0;';
					echo'left: 0;';
					echo'width: 100%;';
					echo'height: calc(var(--eccp-bottomShapeHeight,50)*1px);';
					echo'background-color: var(--eccp-bottomShapeBackgroundColor,#E6E8ED);';
					echo'transform: rotate(180deg);';
					echo'z-index:1;';
				echo'}';
				
				/*--------------- Régles Mobiles & tablettes Back Office --------------- */

				echo'@media(max-width:767px){';

					
					/* ------------ Forme Inclinée(tilt) -----------------------*/

					/* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-tilt::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					
					/* Forme inférieure */ 
					echo'.is-style-eccp-shape-divider.style-shape-bottom-tilt::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					
					/* ------------ Forme Inclinée avec opacité(tilt opacity)-----------------------*/

					/* Forme  supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-tilt-opacity::before {';
						echo'top:calc(var(--eccp-mobileTopShapeHeight,50)*-1px);';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';

					/* séparation Forme Inclinée avec opacité partie inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-tilt-opacity::after {';
						echo'bottom:calc(var(--eccp-mobileBottomShapeHeight,50)*-1px);';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					
					/* ------------ Forme Flèche(Arrow) -----------------------*/

					/* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-arrow::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-arrow::after {';
						echo'bottom: calc(var(--eccp-mobileBottomShapeHeight,50)*-1px);';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					

					/* ------------ Forme Incurvée(incurved) -----------------------*/

					
					/* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-curve::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-curve::after {';
						echo'left:-1px;';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					

					/* ------------ Forme Incurvée assymétrique(curve asymmetrical) -----------------------*/

					/* Forme supérieure */ 
					echo'.is-style-eccp-shape-divider.style-shape-top-curve-asymmetrical::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
						echo'left:-1px;';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-curve-asymmetrical::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
						echo'left:-1px;';
					echo'}';
					

					/* ------------ Triangle (Triangle) -----------------------*/
					 
					/* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-triangle::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-triangle::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					

					/* ------------ Triangle Assymétrique(Triangle Asymmetrical) -----------------------*/
					 
					 /* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-triangle-asymmetrical::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-triangle-asymmetrical::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					
					/* ------------ Forme Vagues(waves ) -----------------------*/

					/* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-waves::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					
					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-waves::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					
					/* retournement horizontal */
					echo'.is-style-eccp-shape-divider.bottom-shape-flip-horizontally.style-shape-bottom-waves::after {';
						echo'left:-1px;';
					echo'}';

					/* ------------ Forme Vagues avec opacité(waves opacity) -----------------------*/
					 
					 /* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-waves-opacity::before {';
						echo'top: calc(var(--eccp-mobileTopShapeHeight,50)*-1px);';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					
					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-waves-opacity::after {';
						echo'bottom: calc(var(--eccp-mobileBottomShapeHeight,50)*-1px);';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					
					/* ------------ Forme Diviser(Split) -----------------------*/
					 
					 /* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-split::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-split::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					

					/* ------------ Forme Livre(Book) -----------------------*/
					 
					 /* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-book::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-book::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';
					

					/* ------------ Forme Ventilateur() -----------------------*/
					 
					 /* Forme supérieure */
					echo'.is-style-eccp-shape-divider.style-shape-top-fan::before {';
						echo'height: calc(var(--eccp-mobileTopShapeHeight,50)*1px);';
					echo'}';
					

					/* Forme inférieure */
					echo'.is-style-eccp-shape-divider.style-shape-bottom-fan::after {';
						echo'height: calc(var(--eccp-mobileBottomShapeHeight,50)*1px);';
					echo'}';

				echo'}';
				
				/*----------------------- Fenêtre Modale Back Office --------------------------*/
				
				
				echo'.wp-block-group.eccp-popup-content {';
						echo'width: var(--eccp-width-popup,720px);';
				echo'}';
				
				/*----style Layout One Column Mobile pour une disposition grille Back Office----*/
			
				echo'@media (max-width: 600px) {';
				  echo'.wp-block-group.is-style-eccp-layout-one-column-mobile .is-layout-grid,
					   .wp-block-group.is-style-eccp-layout-one-column-mobile.is-layout-grid{';
					echo'grid-template-columns: 1fr;'; /* 1 colonne sur les écrans plus petits */
				  echo'}';
				echo'}';
				
				/*------------------- BLOC CITATION BACK OFFICE --------------------------*/				
					
					/*------------------- style quote Back Office ----------------*/
					
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote {';
						echo'border:none;';
						echo'padding: 0.25em 20px 1em 40px!important;';
						echo'position: relative;';
						echo'color: currentColor;';
					echo'}';

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote p,
					.wp-block-quote.is-style-eccp-quote p {';
						echo'padding:20px 20px 0px 20px;';
						echo'margin-bottom: 0px!important;';
					echo'}';
					 
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote::before {';
						echo'display: block;';
						echo'font-family:dashicons;';
						echo'content: "\f205";';
						echo'font-size: 50px;';
						echo'position: absolute;';
						echo'left: 0px;';
						echo'top: -20px;';
					echo'}';
					
					// correction pour thème Astra
					$my_theme = wp_get_theme();
			
					//correction pour le thème Astra 
					if(stristr($my_theme, 'astra')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote::before {';
							echo'left: 5px;';
						echo'}';
					}
					
					//correction pour le thème GeneratePress
					if(stristr($my_theme, 'generatepress')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote::before {';
							echo'left: 5px;';
							echo'top: -10px;';
						echo'}';
					}
					
					//correction pour le thème Divi
					if(stristr($my_theme, 'divi')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote::before {';
							echo'left: 5px;';
							echo'top: 30px;';
						echo'}';
					}
					
					/*------------------- style parenthèse Back Office ----------------*/
					
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-patenthesis{';
						echo'border-left-width:0;';
						echo'padding: 20px;';
						echo'border-left: 4px solid currentColor!important;';
						echo'border-top-left-radius: 30px;';
						echo'border-bottom-left-radius: 30px;';
						echo'border-right: 4px solid currentColor;';
						echo'border-top-right-radius: 30px;';
						echo'border-bottom-right-radius: 30px;';
					echo'}';

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-patenthesis p{';
						echo'margin:0!important;';
					echo'}';
					
					/*------ style first letter Back Office  -------*/

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter {';
						echo'border:none!important;';
						echo'margin-top: 2.5em;';
						echo'padding: 0.25em 20px 1em 40px;';
						echo'position: relative;';
					echo'}';

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter p:first-letter {';
						echo'font-size: 32px;';
						echo'font-weight: bold;';
					echo'}';
					 
					/* Régle pour le guillemet */
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter::before {';
						echo'display: block;';
						echo'font-family:dashicons;';
						echo'content: "\f205";';
						echo'font-size: 120px;';
						echo'position: absolute;';
						echo'left: 0px;';
						echo'top: -92px;';
						echo'opacity:0.4;';
					echo'}';
					
					
					//correction pour le thème Astra 
					if(stristr($my_theme, 'astra')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter::before {';
							echo'left: 2px;';
						echo'}';
					}
					
					//correction pour le thème GeneratePress
					if(stristr($my_theme, 'generatepress')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter::before {';
							echo'left: -11px;';
							echo'top: -65px;';
						echo'}';
					}
					
					//correction pour le thème Divi
					if(stristr($my_theme, 'divi')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-first-letter::before {';
							echo'left: 8px;';
							echo'top: 5px;';
						echo'}';
					}

					/*------ style arrow Back Office  -------*/

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow {';
						echo'padding: 0.25em 20px 1em 40px!important;';
						echo'margin-bottom:40px;';
						echo'position: relative;';
						echo'background-color:#F2F0F2;';
						echo'border-radius:5px;';
						echo'border-left:none!important;';
					echo'}';

					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow p {';
						echo'padding:20px 20px 0px 20px;';
						echo'margin-bottom: 0px!important;';
					echo'}';

					/* Régle pour le guillemet */
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow::before {';
						echo'display: block;';
						echo'font-family:dashicons;';
						echo'content: "\f205";';
						echo'font-size: 50px;';
						echo'position: absolute;';
						echo'left: 0px;';
						echo'top: -20px;';
					echo'}';
					
					//correction pour le thème Astra 
					if(stristr($my_theme, 'astra')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow::before {';
							echo'left: 5px;';
						echo'}';
					}
					
					//correction pour le thème GeneratePress
					if(stristr($my_theme, 'generatepress')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow::before {';
							echo'left: 5px;';
							echo'top: -10px;';
						echo'}';
					}
					
					//correction pour le thème Divi
					if(stristr($my_theme, 'divi')) {
						echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow::before {';
							echo'left: 5px;';
							echo'top: 30px;';
						echo'}';
					}

					/* Régles pour la flêche */
					echo'.editor-styles-wrapper .wp-block-quote.is-style-eccp-quote-arrow::after {';
						echo'content: "";';
						echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
						echo'mask-image: url("data:image/svg+xml,%3Csvg data-name=\'Layer 1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\' preserveAspectRatio=\'none\'%3E%3Cpath d=\'M649.97 0L550.03 0 599.91 54.12 649.97 0z\' %3E%3C/path%3E%3C/svg%3E");';
						echo'position: absolute;';
						echo'bottom: -70px;';
						echo'left: 0;';
						echo'width: 100%;';
						echo'height: 70px;';
						echo'background-color: var(--eccp-bgColor,#F2F0F2);';
						echo'transform: translateX(-30%);';
						echo'z-index:1;';
					echo'}';

				/*------------------- BLOC DÉTAILS BACK OFFICE --------------------------*/
				
				/*------------------- Icône Dashicons Arrow Back Office ----------------*/
			
				//Icône Dashicons Arrow pour indiquer si le contenu du bloc détails 
				//est affiché ou masqué
				
				/*
				On masque le petit triangle horizontal
				qui est le contrôle utilisé par la balise détails
				afin d'indiquer si son contenu est révélé ou non
				*/
				echo'.editor-styles-wrapper .wp-block-details.is-style-details-dashicons-arrow summary:first-of-type {';
					echo'list-style: none!important;';
				echo'}';
				
				/* 
				icone dashicons flêche vers le bas 
				pour la balise détails fermé
				*/
				echo'.editor-styles-wrapper .wp-block-details.is-style-details-dashicons-arrow summary::before {';
					echo'content: "\f347";';
					echo'font-family: "dashicons";';
					echo'float:left;';
					echo'margin-right:10px;';
				echo'}';


				/* 
				icone dashicons flêche vers le haut 
				pour la balise détails ouverte
				*/
				echo'.editor-styles-wrapper .wp-block-details.is-style-details-dashicons-arrow[open] summary::before {';
					echo'content: "\f343";';
					echo'font-family: "dashicons";';
					echo'float:left;';
				echo'}';
				
				/*------------------- BLOC LISTE BACK OFFICE --------------------------*/
				
				
				/* On fait correspondre respectivement la taille & couleur des items de liste à celles des Tailles de texte & couleurs sélectionné de la palette */
			
			
				//petite
				echo'.editor-styles-wrapper .wp-block-list.has-eccp-small-font-size  li{';
					echo'font-size:'.intval($editor_text_size_settings['eccp_settings_small_font_size_text_field']).'px;';
				echo'}';
				
				//normale
				echo'.editor-styles-wrapper .wp-block-list.has-eccp-regular-font-size li {';
					echo'font-size:'.intval($editor_text_size_settings['eccp_settings_regular_font_size_text_field']).'px;';
				echo'}';
				
				//grande
				echo'.editor-styles-wrapper .wp-block-list.has-eccp-large-font-size li {';
					echo'font-size:'.intval($editor_text_size_settings['eccp_settings_large_font_size_text_field']).'px;';
				echo'}';
				
				// enorme
				echo'.editor-styles-wrapper .wp-block-list.has-eccp-huge-font-size li {';
					echo'font-size:'.intval($editor_text_size_settings['eccp_settings_huge_font_size_text_field']).'px!important;';
				echo'}';
				
				// on affecte a l'item de liste la couleur sélectionnée de la palette
				echo'.editor-styles-wrapper .wp-block-list.has-text-color  li{';
					echo'color: var(--eccp-textColor);';
				echo'}';
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_styles_bullet_list_radio_field'] == 'yes' ) {
					
					// on récupère la version du thème actif
					$my_theme = wp_get_theme();
					
					// substr retourne une sous chaine de la position:1 jusqu'a la fin				
					//$icone_color = substr($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_color_text_field'],1);
					
					/*-------------------style Disc back office(style par défaut)----------------*/
					
					
					echo'body.wp-admin .is-style-default li::marker{';
					
						echo'color: var(--eccp-bulletColor,#333333);';
						// comme la variable CSS --eccp-bulletSize est de type integer
						// il faut passer par la fonction calc pour affecter une taille en px
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						
					echo'}'; 	
						
					/*------------------- Style Square back office --------------------------*/
					
					echo'body.wp-admin .is-style-eccp-square-bullet-list {';
					
						echo'list-style:square;';
					
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-square-bullet-list li::marker{';
					
						echo'color: var(--eccp-bulletColor,#333333);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						
					echo'}';
					
					
					/*------------------- Style Check back office --------------------------*/
					
					/* icone Google
					echo'body.wp-admin .is-style-eccp-check-bullet-list {';
						
						echo'list-style-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\''.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px\' viewBox=\'0 0 24 24\' width=\''.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px\' fill=\'%23'.esc_html($icone_color).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\'/%3E%3C/svg%3E")';
					
					echo'}';*/
					
					
					echo'body.wp-admin .is-style-eccp-check-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-check-bullet-list li::before{';
						
						// la taille initiale du SVG est donné par width & height
						// pour le background-size
						// la variation de la taille se fera par la régle transform
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -25px;
							  position: absolute;
							  top: 1em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg en fonction de la variable
						// css --eccp-bulletSize donné par le script reactjs et 
						// enregistré dans le html du bloc par la régle style				
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					 
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-check-bullet-list li::before{';
								echo'top: 1em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-check-bullet-list li::before{';
						
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc par la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-check-bullet-list li::before{';
						
						// icone Google
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'  viewBox=\'0 0 24 24\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'  viewBox=\'0 0 24 24\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					
					/*------------------- Style Check circle fill back office --------------------------*/
					
					/* icone Iconify
					echo'body.wp-admin .is-style-eccp-check-circle-fill-bullet-list {';
						
						echo'list-style-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' aria-hidden=\'true\' role=\'img\' width=\''.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px\' height=\''.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px\' preserveAspectRatio=\'xMidYMid meet\' viewBox=\'0 0 24 24\'%3E%3Cg fill=\'none\'%3E%3Cpath d=\'M12 22c-5.52-.006-9.994-4.48-10-10v-.2C2.11 6.305 6.635 1.928 12.13 2c5.497.074 9.904 4.569 9.868 10.065C21.962 17.562 17.497 22 12 22zM7.41 11.59L6 13l4 4l8-8l-1.41-1.42L10 14.17l-2.59-2.58z\' fill=\'%23'.esc_html($icone_color).'\'/%3E%3C/g%3E%3C/svg%3E")';
					
					echo'}';*/

					
					echo'body.wp-admin .is-style-eccp-check-circle-fill-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-check-circle-fill-bullet-list li::before{';
								
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -25px;
							  position: absolute;
							  top: 1em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
			
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-check-circle-fill-bullet-list li::before{';
								echo'top: 1em;';
							echo'}';
					
						break;
						
					}
					
					
					
					echo'body.wp-admin ul.is-style-eccp-check-circle-fill-bullet-list li::before{';
						
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc par la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-check-circle-fill-bullet-list li::before{';
						
						// icone Google
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0z\' fill=\'none\'/%3E%3Cpath d=\'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0z\' fill=\'none\'/%3E%3Cpath d=\'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					
					/*------------------- Style Add back office --------------------------*/
					
					/* icone Google
					echo'body.wp-admin .is-style-eccp-add-bullet-list li{';
						
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23'.esc_html($icone_color).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\'/%3E%3C/svg%3E")no-repeat;';
						echo'background-size: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px;';
						echo'background-position: 7px 6px;';
						echo'padding: 0px 0px 0px 35px;';
						echo'margin-left:-35px;';
					
					echo'}';
					
					
					$my_theme = wp_get_theme();
			
					// correction theme divi pour la position des puces +
					if(stristr($my_theme, 'divi')) {
						
						echo'body.wp-admin .is-style-eccp-add-bullet-list li {';
							echo'background-position: 7px 3px!important;';
						echo'}';
					
					}*/
					
					echo'body.wp-admin .is-style-eccp-add-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-add-bullet-list li::before{';
								
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -25px;
							  position: absolute;
							  top: 1.2em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-add-bullet-list li::before{';
								echo'top: 1.1em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-add-bullet-list li::before{';
						
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc par la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-add-bullet-list li::before{';
						
						// icône Google
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					
					
					/*------------------- Style Add circle fill back office --------------------------*/
					
					/* icone Google
					echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li {';
					
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23'.esc_html($icone_color).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\'/%3E%3C/svg%3E")no-repeat;';
						echo'background-size: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px;';
						echo'background-position: 7px 6px;';
						echo'padding: 0px 0px 0px 35px;';
						echo'margin-left:-35px;';
					
					echo'}';
					
					
					// correction theme divi pour la position des puces +
					if(stristr($my_theme, 'divi')) {
						
						echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li {';
							echo'background-position: 7px 3px!important;';
						echo'}';
					
					}*/
					
					
					echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li::before{';
								
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -25px;
							  position: absolute;
							  top: 1.2em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li::before{';
								echo'top: 1.1em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-add-circle-fill-bullet-list li::before{';
						
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc par la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-add-circle-fill-bullet-list li::before{';
						
						// icône Google
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 0 24 24\' width=\'20px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					
					/*------------------- Style Push Spin back office --------------------------*/

					// icone Dashicons
					echo'.is-style-eccp-push-spin-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f109";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
						
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-push-spin-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-push-spin-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-push-spin-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-push-spin-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
					}
					
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Push Spin
					echo'body.wp-admin .is-style-eccp-push-spin-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
 
 
					/*------------------- Style Circle Duotone back office --------------------------*/
					
					// en back office on  prend  70% de la taille définit dans les paramètres de réglage
					// du plugin pour un même rendu que les autres puces
					// pour ce cercle bicolore une couleur est fixé: #108bc5, l'autre couleur est réglable
					echo'body.wp-admin .is-style-eccp-circle-duotone-bullet-list li::before {';
					 
						echo'content: "";';
						echo'display: inline-block;';
						echo'margin-left: -20px;';
						echo'margin-right: 10px;';
						echo'border: 3px solid var(--eccp-bulletColor,#333333);';
						echo'border-left: 3px solid #108bc5;';
						echo'border-radius: 50%;';
						echo'height: calc(var(--eccp-bulletSize,20) * 1px * 0.45);';
						echo'width: calc(var(--eccp-bulletSize,20) * 1px * 0.45);';
						// correction WordPress 6.1
						echo'position: absolute;';
						echo'top: 10px;';
					echo'}';	

					
					$my_theme = wp_get_theme();
			
					// correction theme generatePress pour la taille des puces 
					if(stristr($my_theme, 'generatepress')|| stristr($my_theme, 'astra')) {
						
						echo'body.wp-admin .is-style-eccp-circle-duotone-bullet-list li::before {';
					 
							echo'height: calc(var(--eccp-bulletSize,20) * 1px * 0.7);';
							echo'width: calc(var(--eccp-bulletSize,20) * 1px * 0.7);';
					
						echo'}';	
					
					}
					
					echo'.is-style-eccp-circle-duotone-bullet-list li::marker{';
						
						// on supprime la puce disk par défaut
						echo'content:\'\';';
			
					echo'}';
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style circle duotone
					echo'body.wp-admin .is-style-eccp-circle-duotone-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style Clear back office --------------------------*/

					/* icone Google
					echo'body.wp-admin .is-style-eccp-clear-bullet-list li{';
						
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23'.esc_html($icone_color).'\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\'/%3E%3C/svg%3E")no-repeat;';
						echo'background-size: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_bulleted_list_size_text_field']).'px;';
						echo'background-position: 7px 6px;';
						echo'padding: 0px 0px 0px 35px;';
						echo'margin-left:-35px;';
					
					echo'}';
					
					
					$my_theme = wp_get_theme();
			
					// correction theme divi pour la position des puces +
					if(stristr($my_theme, 'divi')) {
						
						echo'body.wp-admin .is-style-eccp-clear-bullet-list li {';
							echo'background-position: 7px 3px!important;';
						echo'}';
					
					}*/
					
					
					
					echo'body.wp-admin .is-style-eccp-clear-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					echo'.is-style-eccp-clear-bullet-list li::before{';
						
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -25px;
							  position: absolute;
							  top: 1.1em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-clear-bullet-list li::before{';
								echo'top: 1em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-clear-bullet-list li::before{';
				
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc avec la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-clear-bullet-list li::before{';
						
						// icône Google
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 0 24 24\' width=\'24px\' fill=\'%23000000\'%3E%3Cpath d=\'M0 0h24v24H0V0z\' fill=\'none\'/%3E%3Cpath d=\'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					/*------------------- Style Site back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-site-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f11f";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-site-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-site-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
					}
					
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Site
					echo'body.wp-admin .is-style-eccp-site-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style E-Mail back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-mail-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f465";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-mail-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style E-Mail
					echo'body.wp-admin .is-style-eccp-mail-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Phone back office  --------------------------*/
			
					// icone Dashicons
					echo'.is-style-eccp-phone-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f525";';
						echo'font-weight: 600;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-phone-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-phone-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-phone-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
					}
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Phone
					echo'body.wp-admin .is-style-eccp-phone-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style Mobile back office --------------------------*/

					/* icone https://icon-sets.iconify.design/fa-solid/mobile-alt/ */
					
					echo'body.wp-admin .is-style-eccp-mobile-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					echo'.is-style-eccp-mobile-bullet-list li::before{';
						
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -15px;
							  position: absolute;
							  top: 1.2em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-mobile-bullet-list li::before{';
								echo'top: 0.8em;';
							echo'}';
					
						break;
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-mobile-bullet-list li::before{';
								echo'top: 1.4em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-mobile-bullet-list li::before{';
				
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc avec la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-mobile-bullet-list li::before{';
						
						// icône Font awesome 5  de Iconify
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'0.63em\' height=\'1em\' viewBox=\'0 0 320 512\'%3E%3Cpath fill=\'%23000\' d=\'M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48M160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32m112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12z\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'0.63em\' height=\'1em\' viewBox=\'0 0 320 512\'%3E%3Cpath fill=\'%23000\' d=\'M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48M160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32m112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12z\'/%3E%3C/svg%3E");';
						
					echo'}';
					
			
					/*------------------- Style Facebook back office  --------------------------*/			
							
					// icone Dashicons
					echo'.is-style-eccp-facebook-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f305";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-facebook-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-facebook-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-facebook-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
					}
	
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Facebook
					echo'body.wp-admin .is-style-eccp-facebook-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
	
					
					/*------------------- Style YouTube back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-youtube-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f19b";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-youtube-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-youtube-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-youtube-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
					}
					
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style YouTube
					echo'body.wp-admin .is-style-eccp-youtube-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style Twitter back office  --------------------------*/			
				
					/* icone: https://github.com/ndiego/social-sharing-block/blob/main/src/social-sharing-link/icons/x.js */
					
					echo'body.wp-admin .is-style-eccp-twitter-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					echo'.is-style-eccp-twitter-bullet-list li::before{';
						
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -20px;
							  position: absolute;
							  top: 1.1em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-twitter-bullet-list li::before{';
								echo'top: 1em;';
							echo'}';
					
						break;
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-twitter-bullet-list li::before{';
								echo'top: 0.8em;';
							echo'}';
					
						break;
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-twitter-bullet-list li::before{';
								echo'top: 1.3em;';
							echo'}';
					
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-twitter-bullet-list li::before{';
				
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc avec la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-twitter-bullet-list li::before{';
						
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24" version="1.1"><path fill="currentColor" d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg>\');';
						echo'mask-image:url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24" version="1.1"><path fill="currentColor" d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg>\');';
						
					echo'}';
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style twitter
					echo'body.wp-admin .is-style-eccp-twitter-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Pinterest back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-pinterest-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f192";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-pinterest-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-pinterest-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-pinterest-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
					
					}
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style pinterest
					echo'body.wp-admin .is-style-eccp-pinterest-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Instagram back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-instagram-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f12d";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-instagram-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-instagram-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-instagram-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
					
					}
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style instagram
					echo'body.wp-admin .is-style-eccp-instagram-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Linkedin back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-linkedin-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f18d";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-linkedin-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-linkedin-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-linkedin-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
					
					}
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Linkedin
					echo'body.wp-admin .is-style-eccp-linkedin-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Whatsapp back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-whatsapp-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f19a";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-whatsapp-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-whatsapp-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-whatsapp-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
					
					}
			
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Whatsapp
					echo'body.wp-admin .is-style-eccp-whatsapp-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style Calendar back office  --------------------------*/
			
					// icone Dashicons
					echo'.is-style-eccp-calendar-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f508";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-calendar-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-calendar-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-calendar-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-calendar-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
					
					}
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Calendar
					echo'body.wp-admin .is-style-eccp-calendar-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
			
					/*------------------- Style Clock back office  --------------------------*/			
							
					// icone Dashicons
					echo'.is-style-eccp-clock-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f469";';
						echo'font-weight: 600;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-clock-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-clock-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-clock-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-clock-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						
					}
					
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Clock
					echo'body.wp-admin .is-style-eccp-clock-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
	
					
					/*------------------- Style Location back office  --------------------------*/			
					
					// icone Dashicons
					echo'.is-style-eccp-location-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f230";';
						echo'font-weight: 600;';
						echo'vertical-align: top;';	
						echo'margin-left:-25px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.3em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-location-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-location-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-location-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.2em);';
							echo'}';
					
						break;
						
					}
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Location
					echo'body.wp-admin .is-style-eccp-location-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					
					/*------------------- Style Diagram back office  --------------------------*/
			
					/*

					Ajoutez des éléments de liste pour représenter la structure de votre diagramme. 
					Indentez les éléments de la liste qui doivent être les éléments de la sous-arborescence 
					dans le diagramme.
					Vous devez impérativement mettre en gras tous les éléments de la liste.
					Sélectionnez dans le panneau style des paramètres du bloc le style Diagram,
					pour avoir le visuel du diagramme en back office & front End.
					On ajoute au bloc liste la classe: is-style-eccp-tree-bullet-list.
					Pour toute modifications ultérieures sélectionner le style défaut,
					Une fois terminé les modifications, sélectionner le style Diagram. 

					*/


					echo'.is-style-eccp-tree-bullet-list, 
						 .is-style-eccp-tree-bullet-list ul,
						 .is-style-eccp-tree-bullet-list li{';
							//echo'list-style: none!important;';
							echo'margin: 0!important;';
							echo'padding: 0;';
							echo'position: relative;';
					echo'}';

					echo'.is-style-eccp-tree-bullet-list {';
						echo'margin: 0 0 1em;';
						echo'text-align: center;';
					echo'}';

					echo'.is-style-eccp-tree-bullet-list, .is-style-eccp-tree-bullet-list ul {';
						echo'display: table;';
					echo'}';

					echo'.is-style-eccp-tree-bullet-list ul {';
					  echo'width: 100%;';
					echo'}';

						/* encadrement des niveaux d'arborescence*/
						// Modif WordPress 6.1: ajout .editor-styles-wrapper 
						echo'.editor-styles-wrapper .is-style-eccp-tree-bullet-list li {';
							echo'display: table-cell;';
							echo'padding: .5em 0;';
							echo'vertical-align: top;';
						echo'}';
						
						echo'.is-style-eccp-tree-bullet-list li:before {';
							echo'outline: solid 1px #666;';
							echo'content: "";';
							echo'left: 0;';
							echo'position: absolute;';
							echo'right: 0;';
							echo'top: 0;';
						echo'}';
						
						echo'.is-style-eccp-tree-bullet-list li:first-child:before {';
							echo'left: 50%;';
						echo'}';
						
						echo'.is-style-eccp-tree-bullet-list li:last-child:before {';
							echo'right: 50%;';
						echo'}';

						// Modif WordPress 6.1: ajout .editor-styles-wrapper 	
						echo'.editor-styles-wrapper .is-style-eccp-tree-bullet-list strong {';
							echo'border: solid .1em #666;';
							echo'border-radius: .2em;';
							echo'display: inline-block;';
							echo'margin: 0 .2em .5em;';
							echo'padding: .2em .5em;';
							echo'position: relative;';
						echo'}';
						
						
						
					/* laison verticale du diagramme  | */
					echo'.is-style-eccp-tree-bullet-list ul:before,       
						 .is-style-eccp-tree-bullet-list strong:before {';
							echo'outline: solid 1px #666;';
							echo'content: "";';
							echo'height: .5em;';
							echo'left: 50%;';
							echo'top: -.55em;';
							echo'position: absolute;';
					echo'}';

					echo'.is-style-eccp-tree-bullet-list ul:before {';
						echo'top: -.5em;';
					echo'}';
					
					
					/*------------------- Style Vidéo back office --------------------------*/

					// icone Dashicons
					echo'.is-style-eccp-video-bullet-list li:before {';
			
						echo'font-family: dashicons;';
						echo'content: "\f235";';
						echo'font-weight: 400;';
						echo'vertical-align: top;';	
						echo'margin-left:-30px;';
						echo'margin-right:10px;';				
						echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.4em);';
						echo'font-size:calc(var(--eccp-bulletSize,20)*1px);';
						echo'color:var(--eccp-bulletColor,#333333);';
						// correction WordPress 6.1
						echo'position: absolute;';
						
					echo'}';
					
					// on supprime la liste à puces par défaut
					echo'.is-style-eccp-video-bullet-list{';
					
						echo'list-style-type: none;';
					
					echo'}';
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-video-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.7em);';
								echo'margin-left:-30px;';
							echo'}';
					
						break;
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-video-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 0.9em);';
								echo'margin-left:-30px;';
							echo'}';
					
						break;
						
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-video-bullet-list li::before{';
								echo'line-height: calc(25 / var(--eccp-bulletSize,20) * 1.1em);';
								echo'margin-left:-30px;';
							echo'}';
					
						break;
						
					}
					
					
					// pour éviter que la liste ordonnée sélectionnée a partir de la barre d'outils du block
					// ne se supperpose au style Push Spin
					echo'body.wp-admin .is-style-eccp-video-bullet-list li::marker{';
						
						echo'content:\'\';';
					
					echo'}';
					
					/*------------------- Style Photo back office --------------------------*/

					/* icône Font Awesome de Iconify: https://icon-sets.iconify.design/fa-solid/camera-retro/ */
					
					echo'body.wp-admin .is-style-eccp-photo-bullet-list li{';
				
						// on supprime la puce disk par défaut
						echo'list-style-type: none;';
						
						echo'padding-left: 8px;';
						echo'position: relative;';
					
					echo'}';
					
					echo'.is-style-eccp-photo-bullet-list li::before{';
						
						echo' background-size: cover!important;
							  display: inline-block; 
							  height:25px;
							  width:25px;
							  left: -15px;
							  position: absolute;
							  top: 1.3em;                  
							  margin-top: -1em;                  	                  
							  mask-repeat: no-repeat;	                 
							  -webkit-mask-repeat: no-repeat;';
						
						// on applique une taille au svg	  
						echo'transform: scale(calc(var(--eccp-bulletSize,20) / 25));';
					
					echo'}';
					
					
					// modification position icône selon les thèmes
					switch ($my_theme) {
						
						// correction theme divi
						case stristr($my_theme, 'divi'):
					
							echo'body.wp-admin .is-style-eccp-photo-bullet-list li::before{';
								echo'top: 1em;';
							echo'}';
							
						break;
						
						// correction theme Astra
						case stristr($my_theme, 'astra'):
					
							echo'body.wp-admin .is-style-eccp-photo-bullet-list li::before{';
								echo'top: 1.4em;';
								echo'left: 0;';
							echo'}';
					
						break;
					
						// correction theme Generate Press
						case stristr($my_theme, 'generatepress'):
					
							echo'body.wp-admin .is-style-eccp-photo-bullet-list li::before{';
								echo'top: 1.1em;';
							echo'}';
							
						break;
						
					}
					
					
					echo'body.wp-admin ul.is-style-eccp-photo-bullet-list li::before{';
				
						// lorsqu'on affiche un icone avec la régle pseudo :before
						// il faut appliquer la régle content: "" pour que cela fonctionne
						// on applique une couleur de fond au svg avec la variable CSS
						// --eccp-bulletColor définit par le script ReactJS et enreigistré dans le
						// html du bloc avec la régle style
						echo' content: "";
							  background-color: var(--eccp-bulletColor,#333333)!important;';
							  
					echo'}';
					
					
					echo'body.wp-admin .is-style-eccp-photo-bullet-list li::before{';
						
						// icône Font Awesome de Iconify 
						// la régle mask-image permettra d'appliquer une couleur au SVG
						echo'-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16m426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6M256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120s120 53.8 120 120s-53.8 120-120 120m0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88s88-39.5 88-88s-39.5-88-88-88m-48 104c-8.8 0-16-7.2-16-16c0-35.3 28.7-64 64-64c8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32c0 8.8-7.2 16-16 16\'/%3E%3C/svg%3E");';
						echo'mask-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16m426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6M256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120s120 53.8 120 120s-53.8 120-120 120m0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88s88-39.5 88-88s-39.5-88-88-88m-48 104c-8.8 0-16-7.2-16-16c0-35.3 28.7-64 64-64c8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32c0 8.8-7.2 16-16 16\'/%3E%3C/svg%3E");';
						
					echo'}';
					
					/*------------------- Style Disque Pour Liste Ordonnée back office  --------------------------*/
								
					/* Marge externe de la liste */
					echo'body.wp-admin ol.is-style-eccp-ordonned-disk-bullet-list {';
						echo'margin: 15px 0 15px 0px;';
					echo'}';

					/* type de puce de la liste */ 
					echo'body.wp-admin  ol.is-style-eccp-ordonned-disk-bullet-list {';
						echo'counter-reset: li;';
						echo'list-style: none;';
					echo'}';

					/* Régle pour la liste: marge interne, hauteur etc.. */
					echo'body.wp-admin  ol.is-style-eccp-ordonned-disk-bullet-list li {';
						echo'position: relative;';
						echo'padding-left: 20px;';
						echo'min-height: calc( ( var(--eccp-bulletSize,18) + 13 ) * 1px );';
					echo'}';

					/* Taille des chiffres de la liste ordonnée & du fond en forme de disque */
					echo'body.wp-admin  ol.is-style-eccp-ordonned-disk-bullet-list li::before {';
						echo'content: counter(li);';
						echo'counter-increment: li;';
						echo'color: #fff;';
						echo'background: var(--eccp-bulletColor,#333333);';
						echo'border-radius: 50%;';
						echo'font-size: calc( var(--eccp-bulletSize,18) * 1px );';
						echo'width: calc( (var(--eccp-bulletSize,18) + 5 ) * 1px );';
						echo'height: calc( (var(--eccp-bulletSize,18) + 5 ) * 1px );';
						echo'line-height: calc( (var(--eccp-bulletSize,18) + 5 ) * 1px );';
						echo'text-align: center;';
						echo'display: block;';
						echo'position: absolute;';
						echo'top: calc( ( (25 - var(--eccp-bulletSize,18)) / 2 ) * 1px );';
						echo'left: -20px;';
					echo'}';
					
					/* correction positionnement puces pour le thème DIVI */
					if (stristr($my_theme, 'divi')){
						
						echo'body.wp-admin ol.is-style-eccp-ordonned-disk-bullet-list li:before {';
							echo'top: calc( ( (21 - var(--eccp-bulletSize,18)) / 2 ) * 1px);';
						echo'}';
						
						echo'body.wp-admin ol.is-style-eccp-ordonned-disk-bullet-list li {';
							echo'padding-left: 20px;';
						echo'}';
						
					}
					
					/* pour les puces indentés */
					echo'body.wp-admin ol.is-style-eccp-ordonned-disk-bullet-list li::marker {';
						echo'color: transparent;';
					echo'}';
					
					
					
				}//fin si on a activé les styles liste à puces
 
 
				/*-------------------BLOC IMAGE BACK OFFICE --------------------------*/
				
				/*
				echo'.wp-block-image {
					margin-top: 1.5em!important;
					margin-bottom: 1.5em!important;
				}';
				*/
				
				// Marge interne légende 
				echo'body.wp-admin .wp-block-image mark{';
					echo'padding:'.esc_html($custom_gutenberg_blocks_settings['eccp_settings_caption_padding_text_field']).'px;';
				echo'}';
				
				// Taille Légende de l'image 
				echo'body.wp-admin .wp-block-image figcaption {';
				
					echo'font-size:'.esc_html($custom_gutenberg_blocks_settings['eccp_settings_caption_font_size_text_field']).'px!important;';
					echo'margin-top:1.5em;';
					
				echo'}'; 
				
				/*---------------------------- Style Circle back office------------------------------*/
				// utilise la régle CSS clip-path pour apliquer un masque de détourage
				// Credits: https://github.com/bennettfeely/Clippy
				
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_image_circle_radio_field'] == 'yes' ) {
					
					// image 4/3
					echo'body.wp-admin .is-style-eccp-image-circle-4-3 img {';
					
						echo'clip-path: circle(42.5% at 50% 50%)!important;';
					
					echo'}';
					
					// image 16/9
					echo'body.wp-admin .is-style-eccp-image-circle-16-9 img {';
					
						echo'clip-path: circle(33.4% at 50% 50%)!important;';
					
					echo'}';
					
				}
				
				/*---------------------------- Style Filter Grayscale back office ------------------------------*/
					
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_image_filter_grayscale_radio_field'] == 'yes' ) {
					
					echo'body.wp-admin .is-style-eccp-filter-grayscale img {';
					
						echo'-webkit-filter: grayscale(100%);';
						echo'filter: grayscale(100%);';
					
					echo'}';
					
					echo'body.wp-admin .is-style-eccp-filter-grayscale img:hover {';
					
						echo'-webkit-filter: grayscale(0);';
						echo'filter: grayscale(0);';
					
					echo'}';
					
				}
				
				
				/*----------------------------Style Card Image back office------------------------------*/

				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_image_card_radio_field'] == 'yes' ) {
					
					// régles pour l'image
					// --eccp-cardStyleImageWidth est une variable css définit
					// en React JS et enregistré dans le HTML du bloc image
					echo'.wp-block[data-align="left"] .wp-block-image.is-style-eccp-card-image img,
						.wp-block[data-align="center"] .wp-block-image.is-style-eccp-card-image img,
						.wp-block[data-align="right"] .wp-block-image.is-style-eccp-card-image img,
						.wp-block-image.is-style-eccp-card-image img{';
						
						//echo'box-shadow: 0 0px 4px 2px rgba(0,0,0,.2);';
						echo'background: #ffffff;';
						echo'width: calc(var(--eccp-cardStyleImageWidth, 300)*1px)!important;';
						
					echo'}';

					// régles pour la légende
					echo'.wp-block[data-align="left"] .wp-block-image.is-style-eccp-card-image figcaption,
						 .wp-block[data-align="center"] .wp-block-image.is-style-eccp-card-image figcaption,
						 .wp-block[data-align="right"] .wp-block-image.is-style-eccp-card-image figcaption{';
						
						echo'margin-top:0em!important;';
						echo'padding:0.5em 0;';
						echo'display:block!important;';
						echo'margin:auto;';
						echo'background: #ffffff;';
						echo'box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);';
						echo'width: calc(var(--eccp-cardStyleImageWidth, 300)*1px)!important;';
					
					echo'}';
					
					// régles pour la légende pour aucun alignement
					echo'.wp-block-image.is-style-eccp-card-image figcaption{';
						
						echo'margin-top:0em!important;';
						echo'padding:0.5em 0;';
						echo'box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);';
						echo'width: calc(var(--eccp-cardStyleImageWidth, 300)*1px)!important;';
					
					echo'}';
					
					// régles pour un alignement left 
					// afin d'éviter une remontée du bloc suivant
					echo'.wp-block[data-align="left"] .wp-block-image.is-style-eccp-card-image{';
			
						echo'margin-right: 1000px;';
						
					echo'}';
					
					// régles pour un alignement right
					// afin d'éviter une remontée du bloc suivant
					echo'.wp-block[data-align="right"] .wp-block-image.is-style-eccp-card-image{';
			
						echo'margin-left: 1000px;';
						
					echo'}';

				}
				
				/*---------------------------- Style Bordure Animée back office ------------------------------*/
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_image_animated_border_radio_field'] == 'yes' ) {
					
					echo'@keyframes profileAnime {';
						
						echo'0% {';
							echo'border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;';
						echo'}';
						echo'50% {';
							echo'border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;';
						echo'}';
						echo'100% {';
							echo'border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;';
						echo'}';
						
					echo'}';

					echo'.editor-styles-wrapper .is-style-eccp-animated-border img {';
						echo'animation: profileAnime 8s ease-in-out 1s infinite;';
					echo'}';
	
				}
				
				/*----------------------------Style Hover Zoom back office------------------------------*/
								
				// régles responsive pour les PC
				echo'@media(min-width:1100px) {';

					// régles pour une simple image
					// --eccp-customHoverZoom est une variable css définit
					// en React JS et enregistré dans le HTML du bloc image
					echo'.wp-block-image.eccp-hover-zoom:not(.is-style-eccp-card-image) img:hover{';
						
						echo'transform: scaleX(calc( 1 + var(--eccp-customHoverZoom,5)/100 )) scaleY(calc( 1 + var(--eccp-customHoverZoom,5)/100 ));';
						echo'transition: transform 300ms ease 0ms;';
					
					echo'}';
					
					// régles pour une image de style card
					echo'.wp-block-image.eccp-hover-zoom.is-style-eccp-card-image:hover {';
					
						echo'transform: scaleX(calc( 1 + var(--eccp-customHoverZoom,5)/100 )) scaleY(calc( 1 + var(--eccp-customHoverZoom,5)/100 ));';
					
					echo'}';
					
				echo'}';
				
				
				/*------------------- BLOC GALERIE BACK OFFICE --------------------------*/
				
				
				/*----------------------- Galerie Native WordPress style justifié back office ------------------------*/
				
				// suppression des marges du block image
				// de manière a avoir un style justifié
				/* c'est a dire un même espacement horizontal & vertical entre les images
				echo'.wp-block-gallery.is-style-eccp-justified .wp-block-image{';
					echo'margin:0!important;';
				echo'}';
				
				// Pour une galerie ajoutée a un block groupe
				echo'.wp-block-group .wp-block-gallery.is-style-eccp-justified{';
					echo'margin-top:0;';
					echo'margin-bottom:0;';
				echo'}';
				
				// régle pour une galerie grouper a partir de sa barre d'outils
				// pour l'élément de classe .wp-block ayant un enfant de classe: is-style-eccp-justified
				// on supprime la marge haute afin que lorsque le bloc galerie est groupé 
				// avec un fond de couleur la marge interne haute du bloc groupe corresponde 
				// a l'espacement des blocs images 
				// on ne supprime pas la marge basse car l'inconvénient est que le bloc galerie 
				// avec le style justifié colle au bloc situé en dessous ce qui n'est pas le cas en Front End		
				echo'.editor-styles-wrapper .wp-block-group .wp-block:has(.is-style-eccp-justified){';
					echo'margin-top: 0;';
					//echo'margin-bottom: 0;';
				echo'}';
				*/
				
				
				/*---------------------------- style Galerie Border Radius back office ------------------------------*/
	
				// régles pour les images de la galerie
				// --eccp-border-radius-images-gallery est une variable css définit
				// en React JS et enregistré dans le HTML du bloc gallery
				echo'.wp-block-gallery figure.wp-block-image img{';
					
					echo'border-radius: var(--eccp-border-radius-images-gallery);';
				
				echo'}';
				
				// la légende a un fond avec un dégradé linéaire de la couleur noire
				// qui dépasse du bord arrondi de l'image
				// donc on applique le rayon de bordure a la partie basse de la légende
				echo'.wp-block-gallery figure.wp-block-image figcaption{';
					
					echo'border-radius: 0px 0px var(--eccp-border-radius-images-gallery) var(--eccp-border-radius-images-gallery);';
				
				echo'}';
				
		
				/*---------------------------- style Galerie Hover Zoom back office ------------------------------*/
				// LORSQU'ON ACTIVE L'EFFET DE ZOOM AU SURVOL DES IMAGES, 
				// ON NE PEUT PLUS RÉGLER D'OMBRES PORTÉES,
				// A CAUSE DE LA RÉGLE => overflow: hidden 
				
				
				// régles responsive pour les PC
				echo'@media(min-width:1100px) {';

					// Définit le comportement de survol, en mettant l'image à l'échelle
					// --eccp-customHoverZoom est une variable css définit
					// en React JS et enregistré dans le HTML du bloc image
					// Ajoute un effet de transition fluide «transform » lors du survol de l'image.
					echo'.wp-block-gallery.eccp-hover-zoom-gallery figure.wp-block-image:hover img{';
						
						echo'transform: scaleX(calc( 1 + var(--eccp-customGalleryHoverZoom,0)/100 )) scaleY(calc( 1 + var(--eccp-customGalleryHoverZoom,0)/100 ));';
						echo'transition: transform 300ms ease 0ms;';
					
					echo'}';
					
					// Définit les images de la galerie pour qu'elles aient un débordement caché 
					// lors du zoom de l'image qui empêchera le contenu de l'image de se répandre 
					// en dehors de son conteneur.
					echo'.wp-block-gallery.eccp-hover-zoom-gallery figure.wp-block-image {';
						echo'overflow: hidden;';
					echo'}';
					
					
				echo'}';
				
				/*----------------------------Style Card Image Gallery back office ------------------------------*/
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_style_image_card_radio_field'] == 'yes' ) {
			
					// régles pour les images de style card faisant partie d'une galerie 
					// on supprime la largeur personnalisé par défaut de 300px attribué avec 
					// la variable CSS:--eccp-cardStyleImageWidth
					echo'.wp-block-gallery .wp-block-image.is-style-eccp-card-image img,
						 .wp-block[data-align="left"] .wp-block-image.is-style-eccp-card-image img,
						 .wp-block[data-align="center"] .wp-block-image.is-style-eccp-card-image img,
						 .wp-block[data-align="right"] .wp-block-image.is-style-eccp-card-image img{';
						
						echo'width: auto!important;';
						
					echo'}';
					
					// régle de la bordure arrondi pour les images avec le style Card
					echo'.wp-block-gallery figure.wp-block-image.is-style-eccp-card-image img{';
						
						echo'border-radius:  var(--eccp-border-radius-images-gallery) var(--eccp-border-radius-images-gallery) 0px 0px!important;';
						echo'border-color:transparent;';
					
					echo'}';
					
					// la légende a un fond avec un dégradé linéaire de la couleur noire
					// qui dépasse du bord arrondi de l'image
					// donc on applique le rayon de bordure a la partie basse de la légende
					echo'.wp-block-gallery figure.wp-block-image.is-style-eccp-card-image figcaption{';
						
						echo'border-radius: 0px 0px var(--eccp-border-radius-images-gallery) var(--eccp-border-radius-images-gallery);';
					
					echo'}';
					
					
					// régles pour la légende des images d'une galerie disposant d'un alignement
					echo'wp-block[data-align="left"] .wp-block-gallery .wp-block-image.is-style-eccp-card-image figcaption,
						.wp-block[data-align="center"] .wp-block-gallery .wp-block-image.is-style-eccp-card-image figcaption,
						.wp-block[data-align="right"] .wp-block-gallery .wp-block-image.is-style-eccp-card-image figcaption{';
						
						// on supprime le réglage de largeur du style card du bloc image
						echo'width:auto!important;';
						echo'background: #FFFFFF!important;';
					
					echo'}';
					
					
					// régles pour la légende des images faisant partie d'une galerie 
					// avec aucun alignement
					echo'.wp-block-gallery figure.is-style-eccp-card-image figcaption{';
						
						// on supprime le réglage de largeur du style card du bloc image
						echo'width:auto!important;';
						echo'background: #FFFFFF!important;';
					
					echo'}';
				
				}
				
				/*---------------------------- Galerie Native WordPress style Justifié back offfice ------------------------------*/
		
				/*
					grid-template-columns: repeat(auto-fit, minmax(200px,1fr))
					auto-fit: demande à la grille de créer autant de colonnes 
					de la taille min donnée(200px) jusqu'a max 1fr
					(1 fraction de l' espace disponible dans le conteneur de grille) 
					que peut contenir l'espace du conteneur de la grille.
					Remarque: la min valeur ne peut être une valeur flexible comme 1fr
					largeur conteneur/largeur colonne n'est pas forcément un 
					nombre entier donc il peut subsister un espace a droite de
					la dernière colonne.
					auto-fit va rendre la colonne flexible et permettre que les colonnes
					occupent toute la largeur du conteneur 
					la combinaison de auto-fit et minmax permet d'avoir une grille
					responsive. 
					Chaque fois qu'il n'y a plus de place pour une colonne a 200px, 
					la grille crée automatiquement une nouvelle ligne et y pousse les éléments.
				*/

				/* On applique le style justifié qu'a partir d'une résolution de 700px */
				echo'@media(min-width: 700px){';
					
					echo'.editor-styles-wrapper .eccp-justified-gallery {';
						
						echo'display:grid!important;';	
						echo'grid-template-columns: repeat(auto-fit, minmax(var(--eccp-galleryColumnWidth,200px), 1fr) );';
						/* on fixe la hauteur de la ligne */
						echo'grid-auto-rows: var(--eccp-heightRowImageGallery,220px);';
						/* déplace les images pour éviter les vides.*/
						echo'grid-auto-flow: row dense;';
						
					echo'}';

					echo'.editor-styles-wrapper .eccp-justified-gallery figure {';
						echo'position:relative!important;';
						echo'width:100%!important;';
					echo'}';

					/* 	
						Une image au format 3/2 ou 16/9 a une largeur
						qui va s'étendre sur deux colonnes par la régle css:
						grid-column: span 2.
						les images aux format 1/1 ou 4/3 s'étendront
						par défaut sur 1 colonne.
						la class eccp-landscape a été ajoutée en PHP
						pour des images au format 3/2 ou 16/9
						par la fonction: eccp_add_justified_gallery_style()
						via le hook render_block.
					*/
					echo'.editor-styles-wrapper .eccp-justified-gallery figure.eccp-landscape {';
						echo'grid-column: span 2 ;';
					echo'}';

					echo'.editor-styles-wrapper .eccp-justified-gallery img {';
						echo'display: block!important;';
						echo'object-fit: cover!important;';
						echo'width: 100%!important;';
						echo'height: 100%!important;';
						echo'position: absolute!important;';
						echo'top:0;';
						echo'left:0;';
					echo'}';

				echo'}';
				
		
				/*---------------------------- Galerie Native WordPress style Masonry back office ------------------------------*/
				
				/*
				Par défaut lorsqu'on insère un bloc galerie il a la classe columns-default
				qui définit l'élément (bloc Galerie) pour qu'il ait trois colonnes par défaut. 
				On définit la mise en page avec la propriété de colonnes standard:columns et
				les préfixes pour les différents navigateurs
				*/
				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-default {';
				   echo'-webkit-columns: 3;'; /* Chrome, Safari, Opera */
				   echo'-moz-columns: 3;'; /* Firefox */
				   echo'columns: 3;'; /* Standard syntax */
				echo'}';

				/*
				Garantit que le bloc Galerie s'affiche en tant qu'élément de bloc, 
				remplaçant tous les styles en ligne.
				excepté pour les mobiles ou on garde une disposition en colonne
				*/
				echo'@media(min-width:481px){';
					echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery{';
						echo'display:block !important;';
					echo'}';
				echo'}';

				/*
				Définit les images dans la largeur de la galerie à 100 % de leur conteneur, 
				remplissant ainsi la colonne. 
				Définit la marge inférieure à l'aide d'une variable personnalisée native a WordPress 
				qui permet d'avoir le même ecartement vertical entre images que celui horizontal:
				--wp--style--unstable-gallery-gap 
				*/
				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery .wp-block-image{';
				   echo'width:100% !important;';
				   echo'margin-bottom:var(--wp--style--unstable-gallery-gap)!important;';
				echo'}';

				/* 
				 suppression des marges du block image
				de manière a avoir un style justifié
				c'est a dire un même espacement horizontal & vertical entre les images
				*/
				echo'.editor-styles-wrapper .wp-block-gallery.is-style-eccp-masonry-gallery .wp-block-image{';
					echo'margin-top:0!important;';
				echo'}';
					
				/*
				Lorsqu'on définit manuellement le nbr de colonne a un bloc galerie
				WordPress ajoute la classe column-1 si on a sélectionné une colonne
				et ainsi de suite.
				.eccp-masonry-image.columns-1 à .eccp-masonry-image.columns-8:
				Chaque classe définit le nombre de colonnes pour différentes 
				mises en page à l'aide de la propriété de colonnes standard
				et des préfixes pour les différents navigateurs
				*/
				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-1 {';
				   echo'-webkit-columns: 1;'; /* Chrome, Safari, Opera */
				   echo'-moz-columns: 1;'; /* Firefox */
				   echo'columns: 1;'; /* Standard syntax */
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-2 {';
				   echo'-webkit-columns: 2;'; 
				   echo'-moz-columns: 2;'; 
				   echo'columns: 2;'; 
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-3 {';
				   echo'-webkit-columns: 3;'; 
				   echo'-moz-columns: 3;'; 
				   echo'columns: 3;'; 
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-4 {';
				   echo'-webkit-columns: 4;'; 
				   echo'-moz-columns: 4;';
				   echo'columns: 4;'; 
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-5 {';
				   echo'-webkit-columns: 5;'; 
				   echo'-moz-columns: 5;';
				   echo'columns: 5;'; 
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-6 {';
				   echo'-webkit-columns: 6;'; 
				   echo'-moz-columns: 6;'; 
				   echo'columns: 6;';
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-7 {';
				   echo'-webkit-columns: 7;';
				   echo'-moz-columns: 7;'; 
				   echo'columns: 7;';
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-masonry-gallery.columns-8 {';
				   echo'-webkit-columns: 8;';
				   echo'-moz-columns: 8;'; 
				   echo'columns: 8;';
				echo'}';


				/*------------- Galerie Native WordPress style Square back office ------------------------------*/
				
				/*
				auto-fit: demande à la grille de créer autant de colonnes 
				de la taille donnée(200px) que peut contenir l'espace 
				du conteneur de la grille.
				largeur conteneur/largeur colonne n'est pas forcément un 
				nombre entier donc il peut subsister un espace a droite de
				la dernière colonne.
				minmax va rendre la colonne flexible et permettre que les colonnes
				occupent toute la largeur du conteneur 
				la combinaison de auto-fit et minmax permet d'avoir une grille
				responsive.
				Chaque fois qu'il n'y a plus de place pour une colonne a 200px, 
				la grille crée automatiquement une nouvelle ligne et y pousse les éléments.
				La taille maximale des colonnes est fixée à 1fr(1 fraction de l'espace libre) 
				*/
				echo'.editor-styles-wrapper .eccp-square-gallery {';
				  echo'display: grid!important;';
				  echo'grid-template-columns: repeat(auto-fit, minmax(var(--eccp-heightRowImageGallery,200px), 1fr));';
				echo'}';
				
				
				/* Régles responsive */
				echo'.editor-styles-wrapper .eccp-square-gallery {';
					echo'@media(max-width: 480px){';
						echo'grid-template-columns: 1fr 1fr;';
					echo'}';
				echo'}';
				
				echo'.editor-styles-wrapper .eccp-square-gallery {';
					echo'@media(max-width: 360px){';
						echo' grid-template-columns: 1fr;';
					echo'}';
				echo'}';


				/* c'est la régle padding-top: 100% qui permet
				   d'établir un carré */
				echo'.editor-styles-wrapper .eccp-square-gallery figure {';
				  echo'position: relative;';
				  echo'padding-top: 100%;'; 
				  echo'width:100%!important;';
				echo'}';


				echo'.editor-styles-wrapper .eccp-square-gallery img {';
				  echo'display: block!important;';
				  echo'object-fit: cover!important;';
				  echo'width: 100%!important;';
				  echo'height: 100%!important;'; 
				  echo'position: absolute!important;'; 
				  echo'top: 0;';
				  echo'left: 0;';
				echo'}';
				
				/*---------------------------- Style album d'images back office ------------------------------*/
				
				/* On masque toutes les images du bloc galerie exceptée la 1ère
				   qui sera la couverture de l'album
				*/
				echo'.editor-styles-wrapper .wp-block-gallery.is-style-eccp-gallery-album  .wp-block-image:not(:first-child) {';
				   echo'display: none;';
				echo'}';


				/* Avec le pseudo élément before on positionne le nom de l'album
				   au centre du bloc galerie.
				   On récupère le nom de l'album avec l'attribut de données: data-album-name 
				   qui a été ajouté dans le balisage du bloc galerie en React JS
                   et dont la valeur est affecté par le composant textArea du Panneau ECCP Style
				   qui permet de renseigner le nom de l'album d'images.
				   les variables CSS: --eccp-sizeNameGalleryAlbum & --eccp-colorNameAlbumGallery
				   sont affectées en React JS par les paramètres de réglages du Panneau ECCP Style
				   respectivement pour la taille de texte & la couleur du texte pour le Nom
				   de l'album d'images.
				*/
				echo'.editor-styles-wrapper .wp-block-gallery.is-style-eccp-gallery-album::before {';
					echo'position: absolute;';
					echo'content:attr(data-album-name);';
					echo'top: 50%;';
					echo'left: 50%;';
					echo'transform: translate(-50%, -50%);';
					echo'width: 100%;';
					echo'text-align: center;';
					echo'font-size: var(--eccp-sizeNameGalleryAlbum,18px);';
					echo'color: var(--eccp-colorNameAlbumGallery,#FFFFFF);';
					echo'z-index:1;';
				echo'}';
				
				// Effet Text Shadow pour le nom de l'album
				echo'.editor-styles-wrapper .wp-block-gallery.is-style-eccp-gallery-album.eccp-text-shadow::before {';
					echo'text-shadow: var(--eccp-albumStylehorizontalTextShadow,1px) var(--eccp-albumStyleverticalTextShadow,1px) var(--eccp-albumStyleblurTextShadow,2px) var(--eccp-albumStylecolorTextShadow,rgba(0,0,0,1)) ;';
				echo'}';

				/* Régles pour les mobiles
				*/
				echo'@media(max-width:480px) {';
					echo'.editor-styles-wrapper .wp-block-gallery.is-style-eccp-gallery-album::before {';
						echo'font-size: 20px;';
					echo'}';
				echo'}';
				

				/*-------------------BLOC BOUTON BACK OFFICE --------------------------*/
				
				
				echo'.wp-block-button__link{';
				
					echo'font-weight:600;';
					echo'text-decoration:none!important';
					
				echo'}';
				
				
				echo'.wp-block-button__link:hover{';
					echo'text-decoration:none!important';
				echo'}';
	
					
				/*----------------------------Style Plein back office ------------------------------*/
				
				// on fait la conversion en RGBA, la fonction retourne une chaine
				// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
				/*$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_hover_fill_style_background_color_text_field'], 
						intval($custom_gutenberg_blocks_settings['eccp_settings_hover_fill_style_backgound_color_opacity_text_field'])/100 ); */
				
				
				$my_theme = wp_get_theme();
			
				// si ce n'est pas le théme ASTRA 	
				if(!stristr($my_theme, 'astra')) {

				
					echo'.editor-styles-wrapper .wp-block-button.is-style-fill .wp-block-button__link {';
					  
					  echo'background-color: var(--eccp-bgColor, #0E6487);
					  border-radius: 10px;
					  color: var(--eccp-textColor, #FFFFFF)!important;';
					
					echo'}';
				  
				}else{
					
					echo'.wp-block-button.is-style-fill .wp-block-button__link {';
					  
					  // modification pour thème Astra
					  echo'border: none!important;';
					
					echo'}';
					
				}
				
				/*	A partir de la version 2.6 le style au survol est configuré
					Dans l'editeur Gutenberg
				echo'.wp-block-button.is-style-fill .wp-block-button__link:hover{';
				   
					echo'background: '.esc_html($rgba).'!important;';
					echo'border: 2px solid'.$custom_gutenberg_blocks_settings['eccp_settings_hover_fill_style_border_color_text_field'].';';
					echo'color: '.$custom_gutenberg_blocks_settings['eccp_settings_hover_fill_style_text_color_text_field'].'!important;';
					
				echo'}';
				*/
				
				
				echo'.wp-block-button.is-style-fill .wp-block-button__link:hover{';
				   
					echo'background: var(--eccp-buttonFillBgColorHover, rgba(0,0,0,0))!important;';
					echo'border: 2px solid var(--eccp-buttonFillBorderColorHover, #0E6487)!important;';
					echo'color: var(--eccp-buttonFillColorHover, #0E6487)!important;';
					
				echo'}';
				
		
				/*----------------------------Style Contour back office ------------------------------*/	
				
				// on fait la conversion en RGBA, la fonction retourne une chaine
				// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
				/*$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_hover_outline_style_background_color_text_field'], 
						intval($custom_gutenberg_blocks_settings['eccp_settings_hover_outline_style_backgound_color_opacity_text_field'])/100 );*/
				
				/* A partir de la version 2.6 le style contour du bouton au survol
				   est configuré dans l'editeur Gutenberg
				echo'.wp-block-button.is-style-outline .wp-block-button__link:hover{';
				   
					echo'background: '.esc_html($rgba).'!important;';
					echo'border: 2px solid'.$custom_gutenberg_blocks_settings['eccp_settings_hover_outline_style_border_color_text_field'].';';
					echo'color: '.$custom_gutenberg_blocks_settings['eccp_settings_hover_outline_style_text_color_text_field'].'!important;';
					
				echo'}';
				*/
				
				// si ce n'est pas le théme ASTRA 	
				if(!stristr($my_theme, 'astra')) {
				
					echo'.wp-block-button.is-style-outline .wp-block-button__link {';
					  
					  echo'border-radius: 10px;
					  color: var(--eccp-textColor, #0E6487);';
					
					echo'}';
					
				}else{
					
					echo'.wp-block-button.is-style-outline .wp-block-button__link {';
					  
					  // couleur de bordure pour surcharger la régle du thème Astra
					  echo'border-color: var(--eccp-textColor, #0E6487)!important;';
					
					echo'}';
					
				}
				
				// pour le theme GneratePress
				if(stristr($my_theme, 'generatepress')) {
					
					echo'.wp-block-button.is-style-outline .wp-block-button__link {';
					  echo'border:2px solid var(--eccp-textColor, #0E6487)!important;';
					echo'}';
				
				}
				
				echo'.wp-block-button.is-style-outline .wp-block-button__link:hover{';
				   
					echo'background: var(--eccp-buttonOutlineBgColorHover, #0E6487)!important;';
					echo'border: 2px solid var(--eccp-buttonOutlineBorderColorHover, #0E6487)!important;';
					echo'color: var(--eccp-buttonOutlineColorHover, #FFFFFF)!important;';
				
				echo'}';
				
				
				// Si on a activé les styles des boutons	
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_button_styles_hover_radio_field'] == 'yes' ) {	
					
					/*-------------------Style Contour avec icône flêche droite au survol back office----------------*/
					
					echo'.wp-block-button.is-style-eccp-outline-hover-arrow .wp-block-button__link {';
					  
					  echo'background-color: #0E6487;
					  border-radius: 6px;
					  padding: 0.5em 1em!important;
					  letter-spacing: 1px;
					  border-color: var(--eccp-bgColor, #0E6487);
					  color: var(--eccp-textColor, #FFFFFF);';
					
					echo'}';
					
					echo'.wp-block-button.is-style-eccp-outline-hover-arrow .wp-block-button__link:hover {';
					
					  echo'background-color: transparent!important;
					  border: 2px solid var(--eccp-bgColor, #0E6487);
					  border-radius: 6px;
					  padding:  0.3em 1em 0.3em 1em!important;
					  letter-spacing: 1px;
					  color: var(--eccp-bgColor, #0E6487)!important;';
					  
					echo'}';

					// icône flêche orienté vers la droite au survol
					echo'.wp-block-button.is-style-eccp-outline-hover-arrow .wp-block-button__link:hover::after {';
					
					  echo'font-family:dashicons;
					  content: "\f345";
					  font-weight:400;
					  color: var(--eccp-bgColor, #0E6487);
					  display:inline-block;
					  vertical-align:middle;
					  font-size:22px;
					  margin-left:7px;
					  transition: all 0.2s;';
					  
					echo'}';


					/*-------------------Style Download back office----------------*/
					
					echo'.wp-block-button.is-style-eccp-download .wp-block-button__link::before {';
					
					  echo'font-family:dashicons;
					  content: "\f310";
					  font-weight:400;
					  font-size:26px;
					  color: var(--eccp-textColor, #FFFFFF);
					  display:inline-block;
					  vertical-align:middle;
					  margin-right:7px;
					  transform: rotate(90deg);';
					echo'}';


					echo'.wp-block-button.is-style-eccp-download .wp-block-button__link {';
						 echo' padding: 0.6em 0.8em;';
						 // modification pour thème Astra
						 echo' border: none!important;';
					echo'}';
					
					// modification pour thème Astra
					echo'.wp-block-button.is-style-eccp-download .wp-block-button__link:hover {';
						 echo' border: none!important;';
					echo'}';
					
				}
				
				
					/*-------- Style Pour l'Icône Dashicon Ajouté au bloc bouton back office --------*/
					
					echo'.editor-styles-wrapper .wp-block-button__link  .eccp-dashicon {';
						echo'display:contents;';
						echo'font-size:inherit;';
					echo'}';
					
					echo'.editor-styles-wrapper p .eccp-dashicon {';
						echo'display:contents;';
						echo'font-size:inherit;';
					echo'}';
					
					// on supprime la marge a droite pour le bloc paragraphe
					// l'icône étant positionné a gauche par la régle css: before
					echo'.editor-styles-wrapper p .eccp-dashicon:before {';
						echo'margin-right:-10px;';
					echo'}';

					/* Icône a gauche */
					echo'.editor-styles-wrapper .eccp-dashicon:before{';
						echo'font-family:"dashicons";';
						echo'margin-right:10px;';
						echo'position:relative;';
						echo'top:0.15em;';
						echo'font-size:inherit;';
						echo'font-weight:500;';
					echo'}';

					/* Icône a droite */
					echo'.editor-styles-wrapper .eccp-dashicon.icon-right:before {';
						echo'float:right;';
						echo'margin-right:0;';
						echo'margin-left:10px;';
						echo'top:0.2em;';
					echo'}';
				
				
				/*------------- Onglets de navigation pour le Bloc Groupe -------------------*/
				/* 
				--eccp-buttonFillColorHover est une variable CSS définit par l'extension ECCP
				   pour la couleur de texte du bouton de style plein au survol
				Crédit code: https://redpishi.com/wordpress-tutorials/add-tabs-in-wordpress-without-plugins/
				*/
				
				/* on supprime le style plein éventuellement configuré en back office */
				echo'.editor-styles-wrapper .wp-block-buttons .is-style-tab-item .wp-block-button__link {';
					echo'background-color: transparent!important;';
					echo'border-style:none!important;';
				echo'}';

				/* on supprime le style plein éventuellement configuré en back office */
				echo'.editor-styles-wrapper .wp-block-buttons .is-style-tab-item .wp-block-button__link:hover {';
					echo'border-bottom:none!important;';
				echo'}';

				/* Couleur de l'item pour l'onglet au survol */
				echo'.editor-styles-wrapper .wp-block-buttons .is-style-tab-item .wp-block-button__link:hover {';
					echo'color: var(--eccp-buttonFillColorHover,#0E6487)!important;';
					/* background-color: var(--eccp-buttonFillBgColorHover)!important; pour une couleur de fond */
				echo'}';

				/* Couleur du texte & bordure inférieur de l'onglet au survol*/
				echo'.editor-styles-wrapper .wp-block-buttons .is-style-tab-item:hover {';
					echo'color: var(--eccp-buttonFillColorHover,#0E6487)!important;';
					echo'border-bottom: 3px solid var(--eccp-buttonFillColorHover,#0E6487)!important;';
				echo'}';
				
				
				/*-------- Icônes affectées au bloc bouton à partir du Panneau ECCP Icônes ----------*/
			 
				/* Pour une position de l'icône a droite */
				echo'.wp-block-button[class*=has-icon__] .wp-block-button__link::after{';
					echo'content: "";';
					echo'margin-left:0.5em;';
					echo'position:relative;';
					echo'top:0.1em;';
				echo'}';

				echo'.wp-block-button[class*=has-icon__] .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__] .wp-block-button__link::before{';
					echo'display: inline-block;';
					echo'background-color: currentColor;';
					echo'-webkit-mask-size: contain;';
					echo'mask-size: contain;';
					echo'-webkit-mask-position:center;';
					echo'mask-position:center;';
					echo'-webkit-mask-repeat: no-repeat;';
					echo'mask-repeat: no-repeat;';
					echo'height: 0.8em;';
					echo'width: 0.45em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'1.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9\'></polygon></svg>" );';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'1.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9\'></polygon></svg>");';
				echo'}';
				  
				/* pour une position de l'icône a gauche */  
				echo'.wp-block-button[class*=has-icon__].has-icon-position__left .wp-block-button__link::after{';
					echo'content: none;';
				echo'}';

				/* pour une position de l'icône a gauche */ 
				echo'.wp-block-button[class*=has-icon__].has-icon-position__left .wp-block-button__link::before{';
					echo'content: "";';
					echo'margin-right:0.5em;';
					echo'position:relative;';
					echo'top:0.1em;';
				echo'}';	

				echo'.wp-block-button[class*=has-icon__].has-icon-position__left .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon-position__left .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 1em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'16 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3\'></polygon></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'16 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3\'></polygon></svg>" );';
				echo'}';	

				echo'.wp-block-button[class*=has-icon__].has-icon__arrow-left .wp-block-button__link::after,
					 .wp-block-button[class*=has-icon__].has-icon__arrow-left .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 1em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'16 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3\'></polygon></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'16 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3\'></polygon></svg>");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__arrow-right .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__arrow-right .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 1em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'0 4.7 13.1180124 4.7 9.44099379 1 10.4347826 0 16 5.5 10.4347826 11 9.44099379 10 13.1180124 6.3 0 6.3\'></polygon></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'0 4.7 13.1180124 4.7 9.44099379 1 10.4347826 0 16 5.5 10.4347826 11 9.44099379 10 13.1180124 6.3 0 6.3\'></polygon></svg>" );';
				echo'}';  

				echo'.wp-block-button[class*=has-icon__].has-icon__chevron-right .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__chevron-right .wp-block-button__link::before{';
					echo'height: 0.8em;';
					echo'width: 0.45em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'1.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9\'></polygon></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'1.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9\'></polygon></svg>");';
				echo'}'; 
				 
				echo'.wp-block-button[class*=has-icon__].has-icon__chevron-left .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__chevron-left .wp-block-button__link::before{';
					echo'height: 0.8em;';
					echo'width: 0.45em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'8.18181818 0 10 1.5 3.03030303 9 10 16.5 8.18181818 18 0 9\'></polygon></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'10\' height=\'18\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'8.18181818 0 10 1.5 3.03030303 9 10 16.5 8.18181818 18 0 9\'></polygon></svg>" );';
				echo'}';
					
				echo'.wp-block-button[class*=has-icon__].has-icon__dashicons-pdf .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__dashicons-pdf .wp-block-button__link::before{';
					echo'height: 1.25em;';
					echo'width: 1.25em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' fill-rule=\'evenodd\' d=\'M5.8 14H5v1h.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5M11 2H3v16h13V7zM7.2 14.6c0 .8-.6 1.4-1.4 1.4H5v1H4v-4h1.8c.8 0 1.4.6 1.4 1.4zm4.1.5c0 1-.8 1.9-1.9 1.9H8v-4h1.4c1 0 1.9.8 1.9 1.9zM15 14h-2v1h1.5v1H13v1h-1v-4h3zm0-2H4V3h7v4h4zm-5.6 2H9v2h.4c.6 0 1-.4 1-1s-.5-1-1-1\' clip-rule=\'evenodd\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' fill-rule=\'evenodd\' d=\'M5.8 14H5v1h.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5M11 2H3v16h13V7zM7.2 14.6c0 .8-.6 1.4-1.4 1.4H5v1H4v-4h1.8c.8 0 1.4.6 1.4 1.4zm4.1.5c0 1-.8 1.9-1.9 1.9H8v-4h1.4c1 0 1.9.8 1.9 1.9zM15 14h-2v1h1.5v1H13v1h-1v-4h3zm0-2H4V3h7v4h4zm-5.6 2H9v2h.4c.6 0 1-.4 1-1s-.5-1-1-1\' clip-rule=\'evenodd\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__dashicons-video-alt2 .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__dashicons-video-alt2 .wp-block-button__link::before{';
					echo'height: 1.2em;';
					echo'width: 1.2em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M12 13V7c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2m1-2.5l6 4.5V5l-6 4.5z\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M12 13V7c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2m1-2.5l6 4.5V5l-6 4.5z\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__fa-solid-camera-retro .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__fa-solid-camera-retro .wp-block-button__link::before{';
					echo'height: 1em;';
					echo'width: 1em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16m426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6M256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120s120 53.8 120 120s-53.8 120-120 120m0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88s88-39.5 88-88s-39.5-88-88-88m-48 104c-8.8 0-16-7.2-16-16c0-35.3 28.7-64 64-64c8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32c0 8.8-7.2 16-16 16\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16m426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6M256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120s120 53.8 120 120s-53.8 120-120 120m0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88s88-39.5 88-88s-39.5-88-88-88m-48 104c-8.8 0-16-7.2-16-16c0-35.3 28.7-64 64-64c8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32c0 8.8-7.2 16-16 16\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__cloud .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__cloud .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 1em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M13.3787444,4.44036697 C13.3787444,1.91743119 11.2663111,0 8.55032538,0 C6.33729999,0 4.42605079,1.41284404 3.92309047,3.33027523 L3.72190634,3.33027523 C1.71006508,3.33027523 0,5.04587156 0,7.16513761 C0,9.28440367 1.71006508,11 3.72190634,11 L12.775192,11 C14.5858492,11 15.9941381,9.48623853 15.9941381,7.66972477 C16.0947301,6.05504587 14.8876254,4.74311927 13.3787444,4.44036697 L13.3787444,4.44036697 Z M12.8757841,9.58715596 L3.82249841,9.58715596 C2.61539365,9.58715596 1.60947301,8.47706422 1.60947301,7.26605505 C1.60947301,6.05504587 2.61539365,4.8440367 3.82249841,4.8440367 L5.13019523,4.8440367 L5.43197142,3.73394495 C5.83433967,2.42201835 7.1420365,1.51376147 8.65091745,1.51376147 C10.4615746,1.51376147 11.9704555,2.82568807 11.9704555,4.44036697 L11.9704555,5.75229358 L13.2781524,5.95412844 C14.0828889,6.05504587 14.6864412,6.86238532 14.6864412,7.7706422 C14.5858492,8.77981651 13.7811127,9.58715596 12.8757841,9.58715596 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M13.3787444,4.44036697 C13.3787444,1.91743119 11.2663111,0 8.55032538,0 C6.33729999,0 4.42605079,1.41284404 3.92309047,3.33027523 L3.72190634,3.33027523 C1.71006508,3.33027523 0,5.04587156 0,7.16513761 C0,9.28440367 1.71006508,11 3.72190634,11 L12.775192,11 C14.5858492,11 15.9941381,9.48623853 15.9941381,7.66972477 C16.0947301,6.05504587 14.8876254,4.74311927 13.3787444,4.44036697 L13.3787444,4.44036697 Z M12.8757841,9.58715596 L3.82249841,9.58715596 C2.61539365,9.58715596 1.60947301,8.47706422 1.60947301,7.26605505 C1.60947301,6.05504587 2.61539365,4.8440367 3.82249841,4.8440367 L5.13019523,4.8440367 L5.43197142,3.73394495 C5.83433967,2.42201835 7.1420365,1.51376147 8.65091745,1.51376147 C10.4615746,1.51376147 11.9704555,2.82568807 11.9704555,4.44036697 L11.9704555,5.75229358 L13.2781524,5.95412844 C14.0828889,6.05504587 14.6864412,6.86238532 14.6864412,7.7706422 C14.5858492,8.77981651 13.7811127,9.58715596 12.8757841,9.58715596 Z\'></path></svg>");';
				echo'}';   

				echo'.wp-block-button[class*=has-icon__].has-icon__cloud-upload .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__cloud-upload .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 1em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M13.3,4.4 C13.3,1.9 11.2,-1.24344979e-14 8.5,-1.24344979e-14 C6.3,-1.24344979e-14 4.4,1.4 3.9,3.3 L3.7,3.3 C1.7,3.3 1.95399252e-14,5 1.95399252e-14,7.1 C1.95399252e-14,9.2 1.7,10.9 3.7,10.9 L12.7,10.9 C14.5,10.9 15.9,9.4 15.9,7.6 C16,6 14.8,4.7 13.3,4.4 L13.3,4.4 Z M12.8,9.5 L8.8,9.5 L8.8,7.1 L10,8.3 L11,7.3 L8,4.3 L5,7.3 L6,8.3 L7.2,7.1 L7.2,9.5 L3.7,9.5 C2.5,9.5 1.5,8.4 1.5,7.2 C1.5,6 2.5,4.8 3.7,4.8 L5,4.8 L5.3,3.7 C5.7,2.4 7,1.5 8.5,1.5 C10.3,1.5 11.8,2.8 11.8,4.4 L11.8,5.7 L13.1,5.9 C13.9,6 14.5,6.8 14.5,7.7 C14.5,8.7 13.7,9.5 12.8,9.5 L12.8,9.5 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'11\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M13.3,4.4 C13.3,1.9 11.2,-1.24344979e-14 8.5,-1.24344979e-14 C6.3,-1.24344979e-14 4.4,1.4 3.9,3.3 L3.7,3.3 C1.7,3.3 1.95399252e-14,5 1.95399252e-14,7.1 C1.95399252e-14,9.2 1.7,10.9 3.7,10.9 L12.7,10.9 C14.5,10.9 15.9,9.4 15.9,7.6 C16,6 14.8,4.7 13.3,4.4 L13.3,4.4 Z M12.8,9.5 L8.8,9.5 L8.8,7.1 L10,8.3 L11,7.3 L8,4.3 L5,7.3 L6,8.3 L7.2,7.1 L7.2,9.5 L3.7,9.5 C2.5,9.5 1.5,8.4 1.5,7.2 C1.5,6 2.5,4.8 3.7,4.8 L5,4.8 L5.3,3.7 C5.7,2.4 7,1.5 8.5,1.5 C10.3,1.5 11.8,2.8 11.8,4.4 L11.8,5.7 L13.1,5.9 C13.9,6 14.5,6.8 14.5,7.7 C14.5,8.7 13.7,9.5 12.8,9.5 L12.8,9.5 Z\'></path></svg>" );';
				echo'}';
				  
				echo'.wp-block-button[class*=has-icon__].has-icon__comment-author-avatar .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__comment-author-avatar .wp-block-button__link::before{';
					echo'height: 1em;';
					echo'width: 1em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 Z M10,10.75 L6,10.75 C5.31,10.75 4.75,11.31 4.75,12 L4.75,13.63 C5.73765837,14.2015236 6.85890165,14.5016718 8,14.5000138 C9.14109835,14.5016718 10.2623416,14.2015236 11.25,13.63 L11.25,12 C11.25,11.31 10.69,10.75 10,10.75 Z M12.5437324,3.35187647 C10.0177861,0.882628059 5.9822139,0.882628059 3.45626762,3.35187647 C0.93032134,5.82112489 0.83872177,9.8556574 3.25,12.437 L3.25,12 C3.25,10.4812169 4.48121694,9.25 5.99999011,9.25 L9.99999011,9.25 C11.5187831,9.25 12.75,10.4812169 12.75,12 L12.75,12.437 C15.1612782,9.8556574 15.0696787,5.82112489 12.5437324,3.35187647 Z M8,4 C9.1045695,4 10,4.8954305 10,6 C10,7.1045695 9.1045695,8 8,8 C6.8954305,8 6,7.1045695 6,6 C6,4.8954305 6.8954305,4 8,4 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 Z M10,10.75 L6,10.75 C5.31,10.75 4.75,11.31 4.75,12 L4.75,13.63 C5.73765837,14.2015236 6.85890165,14.5016718 8,14.5000138 C9.14109835,14.5016718 10.2623416,14.2015236 11.25,13.63 L11.25,12 C11.25,11.31 10.69,10.75 10,10.75 Z M12.5437324,3.35187647 C10.0177861,0.882628059 5.9822139,0.882628059 3.45626762,3.35187647 C0.93032134,5.82112489 0.83872177,9.8556574 3.25,12.437 L3.25,12 C3.25,10.4812169 4.48121694,9.25 5.99999011,9.25 L9.99999011,9.25 C11.5187831,9.25 12.75,10.4812169 12.75,12 L12.75,12.437 C15.1612782,9.8556574 15.0696787,5.82112489 12.5437324,3.35187647 Z M8,4 C9.1045695,4 10,4.8954305 10,6 C10,7.1045695 9.1045695,8 8,8 C6.8954305,8 6,7.1045695 6,6 C6,4.8954305 6.8954305,4 8,4 Z\'></path></svg>");';
				echo'}';  

				echo'.wp-block-button[class*=has-icon__].has-icon__download .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__download .wp-block-button__link::before{';
					echo'height: 0.85em;';
					echo'width: 0.8em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'17\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M14,8.3 L13,7.2 L9,11.2 L9,0 L7.5,0 L7.5,11.3 L3,7.2 L2,8.3 L8.2,14.1 L14,8.3 L14,8.3 Z M14.5,12 L14.5,15.5 L1.5,15.5 L1.5,12 L0,12 L0,17 L16,17 L16,12 L14.5,12 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'16\' height=\'17\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M14,8.3 L13,7.2 L9,11.2 L9,0 L7.5,0 L7.5,11.3 L3,7.2 L2,8.3 L8.2,14.1 L14,8.3 L14,8.3 Z M14.5,12 L14.5,15.5 L1.5,15.5 L1.5,12 L0,12 L0,17 L16,17 L16,12 L14.5,12 Z\'></path></svg>" );';
				echo'}';  

				echo'.wp-block-button[class*=has-icon__].has-icon__external .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__external .wp-block-button__link::before{';
					echo'height: 0.7em;';
					echo'width: 0.7em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'15\' height=\'15\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M15,0 L8,0 L8,1.5 L12.44,1.5 L6.47,7.47 L7.53,8.53 L13.5,2.56 L13.5,7 L15,7 L15,0 Z M2,1 C0.8954305,1 0,1.8954305 0,3 L0,13 C0,14.1045695 0.8954305,15 2,15 L12,15 C13.1045695,15 14,14.1045695 14,13 L14,10 L12.5,10 L12.5,13 C12.5,13.2761424 12.2761424,13.5 12,13.5 L2,13.5 C1.72385763,13.5 1.5,13.2761424 1.5,13 L1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 L5,2.5 L5,1 L2,1 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'15\' height=\'15\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M15,0 L8,0 L8,1.5 L12.44,1.5 L6.47,7.47 L7.53,8.53 L13.5,2.56 L13.5,7 L15,7 L15,0 Z M2,1 C0.8954305,1 0,1.8954305 0,3 L0,13 C0,14.1045695 0.8954305,15 2,15 L12,15 C13.1045695,15 14,14.1045695 14,13 L14,10 L12.5,10 L12.5,13 C12.5,13.2761424 12.2761424,13.5 12,13.5 L2,13.5 C1.72385763,13.5 1.5,13.2761424 1.5,13 L1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 L5,2.5 L5,1 L2,1 Z\'></path></svg>");';
				echo'}';   

				echo'.wp-block-button[class*=has-icon__].has-icon__external-arrow .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__external-arrow .wp-block-button__link::before{';
					echo'height: 0.6em;';
					echo'width: 0.6em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'12\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'12 0 2.15240328 0 2.15240328 2.1101993 8.3985932 2.1101993 0 10.5087925 1.4912075 12 9.8898007 3.6014068 9.8898007 9.84759672 12 9.84759672\'></polygon></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'12\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><polygon points=\'12 0 2.15240328 0 2.15240328 2.1101993 8.3985932 2.1101993 0 10.5087925 1.4912075 12 9.8898007 3.6014068 9.8898007 9.84759672 12 9.84759672\'></polygon></svg>");';
				echo'}'; 

				echo'.wp-block-button[class*=has-icon__].has-icon__help .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__help .wp-block-button__link::before{';
					echo'height: 0.9em;';
					echo'width: 0.9em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,1.37142857 C5.63183949,1.37142857 3.44356893,2.63482711 2.25948867,4.68571426 C1.07540841,6.73660141 1.07540841,9.26339859 2.25948867,11.3142857 C3.44356893,13.3651729 5.63183949,14.6285714 8,14.6285714 C11.6608589,14.6285714 14.6285713,11.6608589 14.6285713,8 C14.6285713,4.33914113 11.6608589,1.37142857 8,1.37142857 Z M0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 Z M8,5.02857143 C8.72564752,5.03138642 9.32350762,5.59898692 9.36397433,6.32351069 C9.40444104,7.04803446 8.87350647,7.67868136 8.15268571,7.76228571 C7.72754286,7.80982857 7.31428571,8.16457143 7.31428571,8.68571429 L7.31428571,9.82857143 L8.68571429,9.82857143 L8.68571429,9.056 C10.0658081,8.69966131 10.9429771,7.34564321 10.704046,5.94045706 C10.465115,4.53527091 9.18971942,3.5472645 7.76941052,3.66709276 C6.34910163,3.78692102 5.25726757,4.97464525 5.25714286,6.4 L6.62857143,6.4 C6.62857143,5.64258091 7.24258091,5.02857143 8,5.02857143 Z M7.31428571,10.7428571 L7.31428571,12.1142857 L8.68571429,12.1142857 L8.68571429,10.7428571 L7.31428571,10.7428571 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,1.37142857 C5.63183949,1.37142857 3.44356893,2.63482711 2.25948867,4.68571426 C1.07540841,6.73660141 1.07540841,9.26339859 2.25948867,11.3142857 C3.44356893,13.3651729 5.63183949,14.6285714 8,14.6285714 C11.6608589,14.6285714 14.6285713,11.6608589 14.6285713,8 C14.6285713,4.33914113 11.6608589,1.37142857 8,1.37142857 Z M0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 Z M8,5.02857143 C8.72564752,5.03138642 9.32350762,5.59898692 9.36397433,6.32351069 C9.40444104,7.04803446 8.87350647,7.67868136 8.15268571,7.76228571 C7.72754286,7.80982857 7.31428571,8.16457143 7.31428571,8.68571429 L7.31428571,9.82857143 L8.68571429,9.82857143 L8.68571429,9.056 C10.0658081,8.69966131 10.9429771,7.34564321 10.704046,5.94045706 C10.465115,4.53527091 9.18971942,3.5472645 7.76941052,3.66709276 C6.34910163,3.78692102 5.25726757,4.97464525 5.25714286,6.4 L6.62857143,6.4 C6.62857143,5.64258091 7.24258091,5.02857143 8,5.02857143 Z M7.31428571,10.7428571 L7.31428571,12.1142857 L8.68571429,12.1142857 L8.68571429,10.7428571 L7.31428571,10.7428571 Z\'></path></svg>");';
				echo'}'; 
					
				echo'.wp-block-button[class*=has-icon__].has-icon__info  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__info  .wp-block-button__link::before{';
					echo'height: 0.9em;';
					echo'width: 0.9em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,0 C3.63636364,0 0,3.54545455 0,8 C0,12.3636364 3.54545455,16 8,16 C12.3636364,16 16,12.4545455 16,8 C16,3.63636364 12.3636364,0 8,0 L8,0 Z M8,14.5454545 C4.36363636,14.5454545 1.45454545,11.5454545 1.45454545,8 C1.45454545,4.36363636 4.36363636,1.45454545 8,1.45454545 C11.6363636,1.45454545 14.5454545,4.45454545 14.5454545,8 C14.5454545,11.6363636 11.6363636,14.5454545 8,14.5454545 Z M7.2,12.5454545 L8.8,12.5454545 L8.8,7.09090909 L7.2,7.09090909 L7.2,12.5454545 Z M7.2,5.05454545 L8.8,5.05454545 L8.8,3.45454545 L7.2,3.45454545 L7.2,5.05454545 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M8,0 C3.63636364,0 0,3.54545455 0,8 C0,12.3636364 3.54545455,16 8,16 C12.3636364,16 16,12.4545455 16,8 C16,3.63636364 12.3636364,0 8,0 L8,0 Z M8,14.5454545 C4.36363636,14.5454545 1.45454545,11.5454545 1.45454545,8 C1.45454545,4.36363636 4.36363636,1.45454545 8,1.45454545 C11.6363636,1.45454545 14.5454545,4.45454545 14.5454545,8 C14.5454545,11.6363636 11.6363636,14.5454545 8,14.5454545 Z M7.2,12.5454545 L8.8,12.5454545 L8.8,7.09090909 L7.2,7.09090909 L7.2,12.5454545 Z M7.2,5.05454545 L8.8,5.05454545 L8.8,3.45454545 L7.2,3.45454545 L7.2,5.05454545 Z\'></path></svg>");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__lock-outline  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__lock-outline  .wp-block-button__link::before{';
					echo'height: 0.9em;';
					echo'width: 0.64em;';
					echo'mask-image: url( "data:image/svg+xml;utf8,<svg width=\'12\' height=\'17\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M11,6.88095238 L9.8,6.88095238 L9.8,3.8452381 C9.8,1.7202381 8.1,0 6,0 C3.9,0 2.2,1.7202381 2.2,3.8452381 L2.2,6.88095238 L1,6.88095238 C0.4,6.88095238 0,7.28571429 0,7.89285714 L0,15.9880952 C0,16.5952381 0.4,17 1,17 L11,17 C11.6,17 12,16.5952381 12,15.9880952 L12,7.89285714 C12,7.28571429 11.6,6.88095238 11,6.88095238 Z M3.8,3.8452381 C3.8,2.63095238 4.8,1.61904762 6,1.61904762 C7.2,1.61904762 8.2,2.63095238 8.2,3.8452381 L8.2,6.88095238 L3.8,6.88095238 L3.8,3.8452381 Z M10.5,15.4821429 L1.5,15.4821429 L1.5,8.39880952 L10.5,8.39880952 L10.5,15.4821429 Z\'></path></svg>");';
					echo'-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg width=\'12\' height=\'17\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M11,6.88095238 L9.8,6.88095238 L9.8,3.8452381 C9.8,1.7202381 8.1,0 6,0 C3.9,0 2.2,1.7202381 2.2,3.8452381 L2.2,6.88095238 L1,6.88095238 C0.4,6.88095238 0,7.28571429 0,7.89285714 L0,15.9880952 C0,16.5952381 0.4,17 1,17 L11,17 C11.6,17 12,16.5952381 12,15.9880952 L12,7.89285714 C12,7.28571429 11.6,6.88095238 11,6.88095238 Z M3.8,3.8452381 C3.8,2.63095238 4.8,1.61904762 6,1.61904762 C7.2,1.61904762 8.2,2.63095238 8.2,3.8452381 L8.2,6.88095238 L3.8,6.88095238 L3.8,3.8452381 Z M10.5,15.4821429 L1.5,15.4821429 L1.5,8.39880952 L10.5,8.39880952 L10.5,15.4821429 Z\'></path></svg>");';
				echo'}';
				   
				echo'.wp-block-button[class*=has-icon__].has-icon__login  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__login  .wp-block-button__link::before{';
					echo'height: 0.8em;';
					echo'width: 0.8em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'14\' height=\'14\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M6.08695652,9.5 L7.20289855,10.6 L10.2463768,7.6 L10.7536232,7.1 L10.1449275,6.5 L7.10144928,3.5 L6.08695652,4.5 L7.8115942,6.2 L0,6.2 L0,7.7 L7.8115942,7.7 L6.08695652,9.5 Z M11.9710145,0 L4.86956522,0 C3.75362319,0 2.84057971,0.9 2.84057971,2 L2.84057971,3.5 L4.36231884,3.5 L4.36231884,2 C4.36231884,1.7 4.56521739,1.5 4.86956522,1.5 L11.9710145,1.5 C12.2753623,1.5 12.4782609,1.7 12.4782609,2 L12.4782609,12 C12.4782609,12.3 12.2753623,12.5 11.9710145,12.5 L4.86956522,12.5 C4.56521739,12.5 4.36231884,12.3 4.36231884,12 L4.36231884,10.5 L2.84057971,10.5 L2.84057971,12 C2.84057971,13.1 3.75362319,14 4.86956522,14 L11.9710145,14 C13.0869565,14 14,13.1 14,12 L14,2 C14,0.9 13.0869565,0 11.9710145,0 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'14\' height=\'14\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M6.08695652,9.5 L7.20289855,10.6 L10.2463768,7.6 L10.7536232,7.1 L10.1449275,6.5 L7.10144928,3.5 L6.08695652,4.5 L7.8115942,6.2 L0,6.2 L0,7.7 L7.8115942,7.7 L6.08695652,9.5 Z M11.9710145,0 L4.86956522,0 C3.75362319,0 2.84057971,0.9 2.84057971,2 L2.84057971,3.5 L4.36231884,3.5 L4.36231884,2 C4.36231884,1.7 4.56521739,1.5 4.86956522,1.5 L11.9710145,1.5 C12.2753623,1.5 12.4782609,1.7 12.4782609,2 L12.4782609,12 C12.4782609,12.3 12.2753623,12.5 11.9710145,12.5 L4.86956522,12.5 C4.56521739,12.5 4.36231884,12.3 4.36231884,12 L4.36231884,10.5 L2.84057971,10.5 L2.84057971,12 C2.84057971,13.1 3.75362319,14 4.86956522,14 L11.9710145,14 C13.0869565,14 14,13.1 14,12 L14,2 C14,0.9 13.0869565,0 11.9710145,0 Z\'></path></svg>");';
				echo'}'; 

				echo'.wp-block-button[class*=has-icon__].has-icon__logout  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__logout  .wp-block-button__link::before{';
					echo'height: 0.8em;';
					echo'width: 0.8em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.23em\' height=\'1em\' viewBox=\'0 0 1568 1280\'%3E%3Cpath fill=\'%23000\' d=\'M640 1184q0 4 1 20t.5 26.5t-3 23.5t-10 19.5t-20.5 6.5H288q-119 0-203.5-84.5T0 992V288Q0 169 84.5 84.5T288 0h320q13 0 22.5 9.5T640 32q0 4 1 20t.5 26.5t-3 23.5t-10 19.5T608 128H288q-66 0-113 47t-47 113v704q0 66 47 113t113 47h312l11.5 1l11.5 3l8 5.5l7 9zm928-544q0 26-19 45l-544 544q-19 19-45 19t-45-19t-19-45V896H448q-26 0-45-19t-19-45V448q0-26 19-45t45-19h448V96q0-26 19-45t45-19t45 19l544 544q19 19 19 45\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.23em\' height=\'1em\' viewBox=\'0 0 1568 1280\'%3E%3Cpath fill=\'%23000\' d=\'M640 1184q0 4 1 20t.5 26.5t-3 23.5t-10 19.5t-20.5 6.5H288q-119 0-203.5-84.5T0 992V288Q0 169 84.5 84.5T288 0h320q13 0 22.5 9.5T640 32q0 4 1 20t.5 26.5t-3 23.5t-10 19.5T608 128H288q-66 0-113 47t-47 113v704q0 66 47 113t113 47h312l11.5 1l11.5 3l8 5.5l7 9zm928-544q0 26-19 45l-544 544q-19 19-45 19t-45-19t-19-45V896H448q-26 0-45-19t-19-45V448q0-26 19-45t45-19h448V96q0-26 19-45t45-19t45 19l544 544q19 19 19 45\'/%3E%3C/svg%3E");';
				echo'}';   
				   
				echo'.wp-block-button[class*=has-icon__].has-icon__next  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__next  .wp-block-button__link::before{';
					echo'height: 0.75em;';
					echo'width: 0.775em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'13\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M1.2,0 L2.22044605e-14,1 L4.5,6 L2.22044605e-14,11 L1.1,12 L6.6,6 L1.2,0 Z M7.2,0 L6.1,1 L10.6,6 L6.1,11 L7.2,12 L12.7,6 L7.2,0 L7.2,0 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'13\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M1.2,0 L2.22044605e-14,1 L4.5,6 L2.22044605e-14,11 L1.1,12 L6.6,6 L1.2,0 Z M7.2,0 L6.1,1 L10.6,6 L6.1,11 L7.2,12 L12.7,6 L7.2,0 L7.2,0 Z\'></path></svg>");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__previous  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__previous  .wp-block-button__link::before{';
					echo'height: 0.75em;';
					echo'width: 0.775em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'13\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M11.5,0 L12.7,1 L8.2,6 L12.7,11 L11.6,12 L6.1,6 L11.5,0 Z M5.5,0 L6.6,1 L2.1,6 L6.6,11 L5.5,12 L2.30926389e-14,6 L5.5,0 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'13\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M11.5,0 L12.7,1 L8.2,6 L12.7,11 L11.6,12 L6.1,6 L11.5,0 Z M5.5,0 L6.6,1 L2.1,6 L6.6,11 L5.5,12 L2.30926389e-14,6 L5.5,0 Z\'></path></svg>");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__wordpress  .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__wordpress  .wp-block-button__link::before{';
					echo'height: 0.9em;';
					echo'width: 0.9em;';
					echo'mask-image: url("data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M20,10 C20,4.49 15.51,0 10,0 C4.48,0 0,4.49 0,10 C0,15.52 4.48,20 10,20 C15.51,20 20,15.52 20,10 Z M7.78,15.37 L4.37,6.22 C4.92,6.2 5.54,6.14 5.54,6.14 C6.04,6.08 5.98,5.01 5.48,5.03 C5.48,5.03 4.03,5.14 3.11,5.14 C2.93,5.14 2.74,5.14 2.53,5.13 C4.12,2.69 6.87,1.11 10,1.11 C12.33,1.11 14.45,1.98 16.05,3.45 C15.37,3.34 14.4,3.84 14.4,5.03 C14.4,5.77 14.85,6.39 15.3,7.13 C15.65,7.74 15.85,8.49 15.85,9.59 C15.85,11.08 14.45,14.59 14.45,14.59 L11.42,6.22 C11.96,6.2 12.24,6.05 12.24,6.05 C12.74,6 12.68,4.8 12.18,4.83 C12.18,4.83 10.74,4.95 9.8,4.95 C8.93,4.95 7.47,4.83 7.47,4.83 C6.97,4.8 6.91,6.03 7.41,6.05 L8.33,6.13 L9.59,9.54 L7.78,15.37 Z M17.41,10 C17.65,9.36 18.15,8.13 17.84,5.75 C18.54,7.04 18.89,8.46 18.89,10 C18.89,13.29 17.16,16.24 14.49,17.78 C15.46,15.19 16.43,12.58 17.41,10 Z M6.1,18.09 C3.12,16.65 1.11,13.53 1.11,10 C1.11,8.7 1.34,7.52 1.83,6.41 C3.25,10.3 4.67,14.2 6.1,18.09 Z M10.13,11.46 L12.71,18.44 C11.85,18.73 10.95,18.89 10,18.89 C9.21,18.89 8.43,18.78 7.71,18.56 C8.52,16.18 9.33,13.82 10.13,11.46 L10.13,11.46 Z\'></path></svg>");';
					echo'-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M20,10 C20,4.49 15.51,0 10,0 C4.48,0 0,4.49 0,10 C0,15.52 4.48,20 10,20 C15.51,20 20,15.52 20,10 Z M7.78,15.37 L4.37,6.22 C4.92,6.2 5.54,6.14 5.54,6.14 C6.04,6.08 5.98,5.01 5.48,5.03 C5.48,5.03 4.03,5.14 3.11,5.14 C2.93,5.14 2.74,5.14 2.53,5.13 C4.12,2.69 6.87,1.11 10,1.11 C12.33,1.11 14.45,1.98 16.05,3.45 C15.37,3.34 14.4,3.84 14.4,5.03 C14.4,5.77 14.85,6.39 15.3,7.13 C15.65,7.74 15.85,8.49 15.85,9.59 C15.85,11.08 14.45,14.59 14.45,14.59 L11.42,6.22 C11.96,6.2 12.24,6.05 12.24,6.05 C12.74,6 12.68,4.8 12.18,4.83 C12.18,4.83 10.74,4.95 9.8,4.95 C8.93,4.95 7.47,4.83 7.47,4.83 C6.97,4.8 6.91,6.03 7.41,6.05 L8.33,6.13 L9.59,9.54 L7.78,15.37 Z M17.41,10 C17.65,9.36 18.15,8.13 17.84,5.75 C18.54,7.04 18.89,8.46 18.89,10 C18.89,13.29 17.16,16.24 14.49,17.78 C15.46,15.19 16.43,12.58 17.41,10 Z M6.1,18.09 C3.12,16.65 1.11,13.53 1.11,10 C1.11,8.7 1.34,7.52 1.83,6.41 C3.25,10.3 4.67,14.2 6.1,18.09 Z M10.13,11.46 L12.71,18.44 C11.85,18.73 10.95,18.89 10,18.89 C9.21,18.89 8.43,18.78 7.71,18.56 C8.52,16.18 9.33,13.82 10.13,11.46 L10.13,11.46 Z\'></path></svg>");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__shopping-cart .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__shopping-cart .wp-block-button__link::before{';
					echo'height: 1.2em;';
					echo'width: 1.2em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'%23000\' d=\'M20.756 5.345A1 1 0 0 0 20 5H6.181l-.195-1.164A1 1 0 0 0 5 3H2.75a1 1 0 1 0 0 2h1.403l1.86 11.164l.045.124l.054.151l.12.179l.095.112l.193.13l.112.065a1 1 0 0 0 .367.075H18a1 1 0 1 0 0-2H7.847l-.166-1H19a1 1 0 0 0 .99-.858l1-7a1 1 0 0 0-.234-.797M18.847 7l-.285 2H15V7zM14 7v2h-3V7zm0 3v2h-3v-2zm-4-3v2H7l-.148.03L6.514 7zm-2.986 3H10v2H7.347zM15 12v-2h3.418l-.285 2z\'/%3E%3Ccircle cx=\'8.5\' cy=\'19.5\' r=\'1.5\' fill=\'%23000\'/%3E%3Ccircle cx=\'17.5\' cy=\'19.5\' r=\'1.5\' fill=\'%23000\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'%23000\' d=\'M20.756 5.345A1 1 0 0 0 20 5H6.181l-.195-1.164A1 1 0 0 0 5 3H2.75a1 1 0 1 0 0 2h1.403l1.86 11.164l.045.124l.054.151l.12.179l.095.112l.193.13l.112.065a1 1 0 0 0 .367.075H18a1 1 0 1 0 0-2H7.847l-.166-1H19a1 1 0 0 0 .99-.858l1-7a1 1 0 0 0-.234-.797M18.847 7l-.285 2H15V7zM14 7v2h-3V7zm0 3v2h-3v-2zm-4-3v2H7l-.148.03L6.514 7zm-2.986 3H10v2H7.347zM15 12v-2h3.418l-.285 2z\'/%3E%3Ccircle cx=\'8.5\' cy=\'19.5\' r=\'1.5\' fill=\'%23000\'/%3E%3Ccircle cx=\'17.5\' cy=\'19.5\' r=\'1.5\' fill=\'%23000\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__credit-card .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__credit-card .wp-block-button__link::before{';
					echo'height: 1em;';
					echo'width: 1.1em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.13em\' height=\'1em\' viewBox=\'0 0 576 512\'%3E%3Cpath fill=\'%23000\' d=\'M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48M54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6m467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6M192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12m192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.13em\' height=\'1em\' viewBox=\'0 0 576 512\'%3E%3Cpath fill=\'%23000\' d=\'M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48M54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6m467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6M192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12m192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12\'/%3E%3C/svg%3E");';
				echo'}';
				 
				echo'.wp-block-button[class*=has-icon__].has-icon__shipping .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__shipping .wp-block-button__link::before{';
					echo'height: 0.9em;';
					echo'width: 0.925em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.23em\' height=\'1em\' viewBox=\'0 0 1728 1408\'%3E%3Cpath fill=\'%23000\' d=\'M576 1152q0-52-38-90t-90-38t-90 38t-38 90t38 90t90 38t90-38t38-90M192 640h384V384H418q-13 0-22 9L201 588q-9 9-9 22zm1280 512q0-52-38-90t-90-38t-90 38t-38 90t38 90t90 38t90-38t38-90M1728 64v1024q0 15-4 26.5t-13.5 18.5t-16.5 11.5t-23.5 6t-22.5 2t-25.5 0t-22.5-.5q0 106-75 181t-181 75t-181-75t-75-181H704q0 106-75 181t-181 75t-181-75t-75-181h-64q-3 0-22.5.5t-25.5 0t-22.5-2t-23.5-6t-16.5-11.5T4 1114.5T0 1088q0-26 19-45t45-19V704q0-8-.5-35t0-38t2.5-34.5t6.5-37t14-30.5t22.5-30l198-198q19-19 50.5-32t58.5-13h160V64q0-26 19-45t45-19h1024q26 0 45 19t19 45\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.23em\' height=\'1em\' viewBox=\'0 0 1728 1408\'%3E%3Cpath fill=\'%23000\' d=\'M576 1152q0-52-38-90t-90-38t-90 38t-38 90t38 90t90 38t90-38t38-90M192 640h384V384H418q-13 0-22 9L201 588q-9 9-9 22zm1280 512q0-52-38-90t-90-38t-90 38t-38 90t38 90t90 38t90-38t38-90M1728 64v1024q0 15-4 26.5t-13.5 18.5t-16.5 11.5t-23.5 6t-22.5 2t-25.5 0t-22.5-.5q0 106-75 181t-181 75t-181-75t-75-181H704q0 106-75 181t-181 75t-181-75t-75-181h-64q-3 0-22.5.5t-25.5 0t-22.5-2t-23.5-6t-16.5-11.5T4 1114.5T0 1088q0-26 19-45t45-19V704q0-8-.5-35t0-38t2.5-34.5t6.5-37t14-30.5t22.5-30l198-198q19-19 50.5-32t58.5-13h160V64q0-26 19-45t45-19h1024q26 0 45 19t19 45\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__edit .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__edit .wp-block-button__link::before{';
					echo'height: 1.2em;';
					echo'width: 1.2em;';
					echo'mask-image: url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"></path></svg>\');';
					echo'-webkit-mask-image: url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"></path></svg>\');';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__edit-blog .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__edit-blog .wp-block-button__link::before{';
					echo'height: 1.1em;';
					echo'width: 1em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.13em\' height=\'1em\' viewBox=\'0 0 576 512\'%3E%3Cpath fill=\'%23000\' d=\'m402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0m162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2M384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1.13em\' height=\'1em\' viewBox=\'0 0 576 512\'%3E%3Cpath fill=\'%23000\' d=\'m402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0m162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2M384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__fa-envelope .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__fa-envelope .wp-block-button__link::before{';
					echo'height: 1em;';
					echo'width: 1em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7c22.4 17.4 52.1 39.5 154.1 113.6c21.1 15.4 56.7 47.8 92.2 47.6c35.7.3 72-32.8 92.3-47.6c102-74.1 131.6-96.3 154-113.7M256 320c23.2.4 56.6-29.2 73.4-41.4c132.7-96.3 142.8-104.7 173.4-128.7c5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7c16.8 12.2 50.2 41.8 73.4 41.4\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'%23000\' d=\'M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7c22.4 17.4 52.1 39.5 154.1 113.6c21.1 15.4 56.7 47.8 92.2 47.6c35.7.3 72-32.8 92.3-47.6c102-74.1 131.6-96.3 154-113.7M256 320c23.2.4 56.6-29.2 73.4-41.4c132.7-96.3 142.8-104.7 173.4-128.7c5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7c16.8 12.2 50.2 41.8 73.4 41.4\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__dashicons-facebook-alt .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__dashicons-facebook-alt .wp-block-button__link::before{';
					echo'height: 1.1em;';
					echo'width: 1.1em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M8.46 18h2.93v-7.3h2.45l.37-2.84h-2.82V6.04c0-.82.23-1.38 1.41-1.38h1.51V2.11c-.26-.03-1.15-.11-2.19-.11c-2.18 0-3.66 1.33-3.66 3.76v2.1H6v2.84h2.46z\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M8.46 18h2.93v-7.3h2.45l.37-2.84h-2.82V6.04c0-.82.23-1.38 1.41-1.38h1.51V2.11c-.26-.03-1.15-.11-2.19-.11c-2.18 0-3.66 1.33-3.66 3.76v2.1H6v2.84h2.46z\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__dashicons-youtube .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__dashicons-youtube .wp-block-button__link::before{';
					echo'height: 1.2em;';
					echo'width: 1.2em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M17.7 5.3c-.2-.7-.7-1.2-1.4-1.4c-2.1-.2-4.2-.4-6.3-.3q-3.15 0-6.3.3c-.6.2-1.2.8-1.4 1.4a37 37 0 0 0 0 9.4c.2.7.7 1.2 1.4 1.4c2.1.2 4.2.4 6.3.3q3.15 0 6.3-.3c.7-.2 1.2-.7 1.4-1.4a37 37 0 0 0 0-9.4M8 13V7l5.2 3z\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M17.7 5.3c-.2-.7-.7-1.2-1.4-1.4c-2.1-.2-4.2-.4-6.3-.3q-3.15 0-6.3.3c-.6.2-1.2.8-1.4 1.4a37 37 0 0 0 0 9.4c.2.7.7 1.2 1.4 1.4c2.1.2 4.2.4 6.3.3q3.15 0 6.3-.3c.7-.2 1.2-.7 1.4-1.4a37 37 0 0 0 0-9.4M8 13V7l5.2 3z\'/%3E%3C/svg%3E");';
				echo'}';

				echo'.wp-block-button[class*=has-icon__].has-icon__dashicons-instagram .wp-block-button__link::after,
				.wp-block-button[class*=has-icon__].has-icon__dashicons-instagram .wp-block-button__link::before{';
					echo'height: 1.2em;';
					echo'width: 1.2em;';
					echo'mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M12.7 10c0-1.5-1.2-2.7-2.7-2.7S7.3 8.5 7.3 10s1.2 2.7 2.7 2.7s2.7-1.2 2.7-2.7m1.4 0c0 2.3-1.8 4.1-4.1 4.1S5.9 12.3 5.9 10S7.7 5.9 10 5.9s4.1 1.8 4.1 4.1m1.1-4.3c0 .6-.4 1-1 1s-1-.4-1-1s.4-1 1-1s1 .5 1 1M10 3.4c-1.2 0-3.7-.1-4.7.3c-.7.3-1.3.9-1.5 1.6c-.4 1-.3 3.5-.3 4.7s-.1 3.7.3 4.7c.2.7.8 1.3 1.5 1.5c1 .4 3.6.3 4.7.3s3.7.1 4.7-.3q1.05-.45 1.5-1.5c.4-1.1.3-3.6.3-4.7s.1-3.7-.3-4.7c-.2-.7-.8-1.3-1.5-1.5c-1-.5-3.5-.4-4.7-.4m8 6.6v3.3c0 1.2-.4 2.4-1.3 3.4c-.9.9-2.1 1.3-3.4 1.3H6.7c-1.2 0-2.4-.4-3.4-1.3c-.8-.9-1.3-2.1-1.3-3.4V6.7c0-1.3.5-2.5 1.3-3.4C4.3 2.5 5.5 2 6.7 2h6.6c1.2 0 2.4.4 3.4 1.3c.8.9 1.3 2.1 1.3 3.4z\'/%3E%3C/svg%3E");';
					echo'-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1em\' height=\'1em\' viewBox=\'0 0 20 20\'%3E%3Cpath fill=\'%23000\' d=\'M12.7 10c0-1.5-1.2-2.7-2.7-2.7S7.3 8.5 7.3 10s1.2 2.7 2.7 2.7s2.7-1.2 2.7-2.7m1.4 0c0 2.3-1.8 4.1-4.1 4.1S5.9 12.3 5.9 10S7.7 5.9 10 5.9s4.1 1.8 4.1 4.1m1.1-4.3c0 .6-.4 1-1 1s-1-.4-1-1s.4-1 1-1s1 .5 1 1M10 3.4c-1.2 0-3.7-.1-4.7.3c-.7.3-1.3.9-1.5 1.6c-.4 1-.3 3.5-.3 4.7s-.1 3.7.3 4.7c.2.7.8 1.3 1.5 1.5c1 .4 3.6.3 4.7.3s3.7.1 4.7-.3q1.05-.45 1.5-1.5c.4-1.1.3-3.6.3-4.7s.1-3.7-.3-4.7c-.2-.7-.8-1.3-1.5-1.5c-1-.5-3.5-.4-4.7-.4m8 6.6v3.3c0 1.2-.4 2.4-1.3 3.4c-.9.9-2.1 1.3-3.4 1.3H6.7c-1.2 0-2.4-.4-3.4-1.3c-.8-.9-1.3-2.1-1.3-3.4V6.7c0-1.3.5-2.5 1.3-3.4C4.3 2.5 5.5 2 6.7 2h6.6c1.2 0 2.4.4 3.4 1.3c.8.9 1.3 2.1 1.3 3.4z\'/%3E%3C/svg%3E");';
				echo'}';
		
		
				/*-------------------BLOC PARENT COLONNES BACK OFFICE --------------------------*/
				
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_columns_block_styles_radio_field'] == 'yes' ) {
				
					/* ------------------------------ Régles générales Bloc Parent & bloc colonne back office ---------------*/
			
					// Marge basse pour le bloc parent container des colonnes
					/* Margin réglage natif a partir de WordPress 6.0				
					echo'body.wp-admin .wp-block-columns {';
					  echo'margin-bottom: 1.75em;';
					echo'}';
					*/

					/* marge interne pour chaque colonne*/
					
					// si on n'a pas activé pour l'editeur Gutenberg le nouveau paramètre
					/* de marge interne, on affecte une marge interne par défaut
					if (!$custom_gutenberg_editor_settings['eccp_settings_activate_support_margin_padding_checkbox_field']){
						
						echo'body.wp-admin .wp-block-column{';
							echo'padding:0.6em!important;';
						echo'}';
						
					}
					*/

					/* marge gauche de 20px pour les colonnes
					echo'@media screen and (min-width: 782px) {';
						
						echo'body.wp-admin .wp-block-column:not(:first-child) {';
							echo'margin-left: 20px!important;';
						echo'}';
						
					echo'}';
					*/

					/* marge basse pour les colonnes sur mobile*/
					echo'@media screen and (max-width: 781px) {';
					  
					  echo'body.wp-admin .wp-block-column {';
						echo'margin-bottom: 0.5em!important;';
					  echo'}';
					  
					echo'}';
					

					/*----------------------------Style Responsive three columns back office ------------------------------*/

					 /* pour un block à trois colonnes */
					echo'@media (min-width: 600px) and (max-width: 781px) {';
					  
					  // on inhibe la régle flex-basis: 100% établi par gutenberg pour les colonnes
					  // jusqu'a une résolution de 768px
					  echo'body.wp-admin .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {';
						echo'flex-basis: 33%!important;';
					  echo'}';
					  
					  
					  /* la 1ére colonne est mise a une largeur de 100% de son container
						  le bloc colonnes*/
					  echo'body.wp-admin .wp-block-column:first-child {';
						echo'flex-basis: 100%!important;'; 
					  echo'}';
					  
					  /* la direction d'empilement est la ligne (row) et on autorise avec la régle wrap
					     un retour à la ligne si on dépasse le container qui est le bloc colonnes 
						 ce qui est le cas pusique la 1ère colonne est mise a une largeur de 100% du container */
					  echo'body.wp-admin .wp-block-columns {';
						echo'flex-flow: row wrap!important;'; 
					  echo'}';
					  
					  /* marge gauche de 15px seulement pour les colonnes impaires excepté la 1ère colonne */
					  echo'.is-style-eccp-responsive-three-columns .wp-block-column:not(:first-child),
						   .is-style-eccp-responsive-three-columns .wp-block-column:nth-child(odd){';
						   
						echo'margin-left: 10px!important;';
					 
					 echo'}';
					 
					  
					echo'}';

					/*----------------------------Style Column reverse back office ------------------------------*/
					
					echo'@media only screen and (max-width : 599px) {';

						echo'body.wp-admin .is-style-eccp-column-reverse{';
							
							echo'display: -webkit-flex!important;
								 display: -ms-flex!important;
								 display: flex!important;';
							
							echo'-webkit-flex-direction: column-reverse;
								 -ms-flex-direction: column-reverse;
								 flex-direction: column-reverse!important;';
							
						echo'}';

					echo'}';
					
					
					/* ------------------------------ Suite Régles générales Bloc Parent & bloc colonne back office ---------------*/
					
					/* régles pour les colonnes sur mobile en mode portrait 
					echo'@media (max-width: 480px) {';
					   
						echo'body.wp-admin .wp-block-column {';
							echo'display:block;';
							echo'margin-left:0px!important;';
						echo'}';
					  
					echo'}';*/
					
				}	
				
				/*----------------------------Style Variation Pricing Table back office ------------------------------*/
				
				echo'body.wp-admin .is-style-eccp-pricing-table .wp-block-column{';
					   echo'padding: 0em!important;';
				echo'}';


				echo'.is-style-eccp-pricing-table .wp-block-column h3{';
					echo'margin-top: 0em;';
					// mise a jour WordPress 6.1
					echo'padding: 1.2em 1.2em;';
					echo'border-bottom-right-radius: 0px!important;';
					echo'border-bottom-left-radius: 0px!important;';
				echo'}';

				echo'body.wp-admin .is-style-eccp-pricing-table .wp-block-column ul{';
					echo'padding:20px!important;';
					echo'margin:15px 0px 15px 20px!important;';
				echo'}';
								
				// mise a jour WordPress 6.1
				echo'body.wp-admin .is-style-eccp-pricing-table .wp-block-column  .wp-block-button__link{';
					echo'margin-bottom:1.1em;';
				echo'}';
				
			
				/*-------------------BLOC MEDIA/TEXTE BACK OFFICE --------------------------*/
		
				// Si on a activé les styles du bloc media/text
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_media_text_block_styles_radio_field']== 'yes' ) {
			
			
					/*---------------------------- Style Half Background back office  ------------------------------*/
					
					/* pour le containeur du bloc media/text */
					echo'.wp-block-media-text.is-style-eccp-half-background,
						 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile{
	
					  background-color: transparent !important;
					  padding-top: 2rem;
					  padding-bottom: 1rem;
					  column-gap: 1rem;';/* espacement des colonnes */
					  
					echo'}';


					/* pas de marge interne pour le bloc texte, et on met l'image au 1er plan par rapport au fond */
					echo'.wp-block-media-text.is-style-eccp-half-background .wp-block-media-text__media,
					     .wp-block-media-text.is-style-eccp-half-background .wp-block-media-text__content,
						 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile .wp-block-media-text__media,
					     .wp-block-media-text.is-style-eccp-half-background-reverse-mobile .wp-block-media-text__content{
					  position: relative;
					  z-index: 2;
					  padding: 0;
					}';
					
					
					// pour les tablettes & PC
					echo'@media (min-width: 768px) {';
									  

						/* régles pour l'image à droite */
						echo'.wp-block-media-text.is-style-eccp-half-background.has-media-on-the-right,
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.has-media-on-the-right{';
							/* On utilise une unité flexible a l'intérieur du containeur en grille
							L'unité fr représente une fraction de l'espace restant dans le conteneur en grille 
							3fr pour la colonne texte, 4fr pour la colonne image */
							echo'grid-template-columns: 3fr 4fr;';
						
						echo'}';
					  
					  
						/* régles pour le fond de l'image a droite */
						  // on applique le style box shadow avec les variables
						  // css déclarées et affectées par le script en React JS
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media img,
       						 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media img {';

							echo'box-shadow: calc(var(--eccp-horizontalBoxShadow, 20)* 1px) '.
											 'calc(var(--eccp-verticalBoxShadow, 20)* 1px) '.
											 'calc(var(--eccp-blurBoxShadow, 0)* 1px) '.
											 'calc(var(--eccp-spreadBoxShadow, 0)* 1px) '.
											 'var(--eccp-colorBoxShadow,#0E6487);';

						echo'}';
					  
					  
					  
						/* régles pour l'image a gauche */
						echo'.wp-block-media-text.is-style-eccp-half-background,
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile {
							grid-template-columns: 4fr 3fr;
						}';
					  
					  
						/* régles pour  le fond de l'image a gauche */
						// on décale le fond a gauche par une valeur négative de X
						// on applique le style box shadow avec les variables
						// css déclarées et affectées par le script en React JS
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow .wp-block-media-text__media img,
							 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.eccp-box-shadow .wp-block-media-text__media img {';

							echo'box-shadow: calc(var(--eccp-horizontalBoxShadow, 20) * -1px) '.
											 'calc(var(--eccp-verticalBoxShadow, 20)* 1px) '.
											 'calc(var(--eccp-blurBoxShadow, 0)* 1px) '.
											 'calc(var(--eccp-spreadBoxShadow, 0)* 1px) '.
											 'var(--eccp-colorBoxShadow,#0E6487);';

						echo'}';
						 
					  
					echo'}';
					
					
					/* régles pour mobile: */
					echo'@media (max-width: 600px) {';
					
						/* régle pour le bloc colonne image qui est toujours au dessus 
						   de la colonne texte quelque soit la position de l'image sur PC */ 
						echo'.wp-block-media-text .wp-block-media-text__media{
							  margin-bottom:3rem!important;
						}';
					  
					echo'}';
					
					
					// Pour Le Bloc Média Texte avec le style Half Background
					// on limite X & Y à 15px sur mobile
					// on applique le reste du style box shadow avec les variables
					// css déclarées et affectées par le script en React JS
					echo'@media (max-width:480px) {';
												
						/* régles pour  le fond de l'image a droite*/ 
						   // on limite le décalage a 15px
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media img,
							 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media img{';
					
							echo'box-shadow: 15px '.
											 '15px '.
											 'calc(var(--eccp-blurBoxShadow, 0)* 1px) '.
											 'calc(var(--eccp-spreadBoxShadow,0)* 1px) '.
											 'var(--eccp-colorBoxShadow, #0E6487);';
						 
						echo'}';
							
						// on met une marge interne a droite pour le container de l'image 
						// lorsque l'image est a droite
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media,
							 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.eccp-box-shadow.has-media-on-the-right .wp-block-media-text__media{';
						
							echo'padding-right: 10px;';
							
						echo'}';
							
							
						/* régles pour  le fond de l'image a gauche */
						// on décale le fond a gauche par une valeur négative de X
						// on limite le décalage a 15px
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow .wp-block-media-text__media img,
        					 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.eccp-box-shadow .wp-block-media-text__media img {';

							echo'box-shadow: -15px '.
											 '15px '.
											 'calc(var(--eccp-blurBoxShadow, 0)* 1px) '.
											 'calc(var(--eccp-spreadBoxShadow, 0)* 1px) '.
											 'var(--eccp-colorBoxShadow,#0E6487);';

						echo'}';
						
						
						// on met une marge interne à gauche pour le container de l'image 
						// lorsque l'image est a gauche
						echo'body.wp-admin .wp-block-media-text.is-style-eccp-half-background.eccp-box-shadow .wp-block-media-text__media,
							 body.wp-admin .wp-block-media-text.is-style-eccp-half-background-reverse-mobile .wp-block-media-text__media{';
						
							echo'padding-left: 10px;';
							
						echo'}';
							
							
					echo'}';
					
					
					/*---------------------------- Style Media Texte Reverse Mobile Back Office ------------------------------*/
			
					// On inverse le média & texte sur mobile
					// pour le bloc media texte standard & le style Half Background 
					echo'@media (max-width:600px) {';
			
						/* Pour une image a droite sur PC */
						echo'.wp-block-media-text.is-style-eccp-media-texte-reverse-mobile.has-media-on-the-right .wp-block-media-text__content,
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.has-media-on-the-right .wp-block-media-text__content {';
							echo'grid-column:1 !important;';
							echo'grid-row:2 !important;';
						echo'}';
						echo'.wp-block-media-text.is-style-eccp-media-texte-reverse-mobile.has-media-on-the-right .wp-block-media-text__media, 
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile.has-media-on-the-right .wp-block-media-text__media{';
							echo'grid-column:1 !important;';
							echo'grid-row:1 !important;';
						echo'}';
						
						/* Pour une image a gauche sur PC */
						echo'.wp-block-media-text.is-style-eccp-media-texte-reverse-mobile .wp-block-media-text__content,
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile .wp-block-media-text__content {';
							echo'grid-column:1 !important;';
							echo'grid-row:1 !important;';
						echo'}';
						echo'.wp-block-media-text.is-style-eccp-media-texte-reverse-mobile .wp-block-media-text__media, 
							 .wp-block-media-text.is-style-eccp-half-background-reverse-mobile .wp-block-media-text__media{';
							echo'grid-column:1 !important;';
							echo'grid-row:2 !important;';
						echo'}';
						
					echo'}';
					
				
				}// Fin si on a activé les styles du bloc media/text
				
				
				/*------------------- BLOC SEPARATOR BACK OFFICE --------------------------*/
		
				/*---------------------------- Marge & Hauteur Bloc Separator back office ------------------------------*/	
					
				/* 
				Lorsqu'on applique un alignement au bloc séparateur
				une div encadre le bloc séparateur 
				et le balisage HTML devient:
				<div class="wp-block" data-align="left">
					<hr class="wp-block-separator">
				</div>
				on va supprimer les marges de cette <div>
				lorsque cette div de classe wp-block a pour enfant direct
				une balise HTML <hr>
				*/
				echo'.editor-styles-wrapper .wp-block:not([data-align=wide]):not([data-align=center]):has(> hr){';
					echo'margin:0!important;';
				echo'}';
				
				/* pour un alignement large ou centré on rétabli l'alignement centré */
				echo'.editor-styles-wrapper .wp-block[data-align=wide]:has(> hr),
					 .editor-styles-wrapper .wp-block[data-align=center]:has(> hr){';
					echo'margin:0 auto!important;';
				echo'}';
				
				/* 
					on ne peut modifier la hauteur pour le style dots
					donc on rétabli la régle d'origine
				*/
				echo'.editor-styles-wrapper .wp-block-separator.is-style-dots{';
						echo'height:auto!important;';
				echo'}';
				
				/* 
				   pour un style Ligne Large sélectionné dans le Panneau Styles
				   des paramètres du bloc, on supprime la régle float
				   lorsqu'on a sélectionné dans la barre d'outils un alignement
				   à gauche ou droite
				*/
				echo'.editor-styles-wrapper .wp-block[data-align=left] > hr.is-style-wide,
					 .editor-styles-wrapper .wp-block[data-align=right] > hr.is-style-wide{';
					echo'float:none!important;';
				echo'}';
				
					
				/*------------------- BLOC TABLEAU BACK OFFICE --------------------------*/
		
				/*-------------------- style ECCP Stripes back office ----------------------*/
					
				//------------- EN-TÊTE---------------------------
				
				/* couleur arrière plan en-tête */
				echo'.wp-block-table.is-style-eccp-stripes thead {';
					echo'background:var(--eccp-tableHeaderBgColor,#2B5DF2);';
					echo'border-bottom:none;';
				echo'}';

				/* Style cellule en-tête */
				echo'.wp-block-table.is-style-eccp-stripes thead tr th {';
					echo'border: 1px solid  #FFFFFF;';
					echo'font-weight:bold;';
					echo'color:var(--eccp-tableHeaderColor,#FFFFFF);';
				echo'}';

				/* Style 1ère cellule en-tête */
				echo'.wp-block-table.is-style-eccp-stripes thead tr th:first-child {';
					echo'border-radius: 10px 0px 0px 0px;';
				echo'}';

				/* Style dernière cellule en-tête */
				echo'.wp-block-table.is-style-eccp-stripes thead tr th:last-child {';
					echo'border-radius: 0px 10px 0px 0px;';
				echo'}';
				
				//------------- CORPS DE LA TABLE ---------------------------
				
				/* style des cellules de la table */
				echo'.wp-block-table.is-style-eccp-stripes tbody tr td {';
					echo'vertical-align:middle;';
					echo'padding: 8px;';
					echo'border: 1px solid;';
					echo'border-color: #EAF1F8;';
					echo'line-height:1.4em;';
				echo'}';

				/* couleur  d'arrière plan et du texte des lignes paires parentes de tbody  
			       afin d'éviter de changer la couleur d'arrière plan & du texte 
				   de la ligne d'en-tête */
				echo'.wp-block-table.is-style-eccp-stripes tbody > tr:nth-child(2n){';
					echo'background-color:var(--eccp-tableRowOddBgColor,#EFF8FE);';
					echo'color:var(--eccp-tableRowOddColor);';
				echo'}';	
				
				
				/*------------------- BLOC TITRE BACK OFFICE --------------------------*/
		
				echo'h2::before,h3::before,h4::before,h5::before{';
					echo'font-family:dashicons;';
					echo'position: relative;';
					echo'top: 0.15em;';
					echo'margin-right:0.5em;';
					echo'font-size:inherit;';
				echo'}';
			
			
				/*--------------------- Style Admin Menu back office ---------------------------*/
				
				//------------- Home---------------------------
				echo'.is-style-eccp-icon-heading-home::before {';
					echo'content: "\f102";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Site---------------------------
				echo'.is-style-eccp-icon-heading-site::before {';
					echo'content: "\f11f";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Post ---------------------------
				echo'.is-style-eccp-icon-heading-post::before {';
					echo'content: "\f109";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Links---------------------------
				echo'.is-style-eccp-icon-heading-links::before {';
					echo'content: "\f103";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Users---------------------------
				echo'.is-style-eccp-icon-heading-users::before {';
					echo'content: "\f110";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Tools---------------------------
				echo'.is-style-eccp-icon-heading-tools::before {';
					echo'content: "\f107";';
					echo'font-weight:600;';
				echo'}';

					
				/*--------------------- Style Post Formats back office ---------------------------*/
			
				//------------- Audio ---------------------------
				echo'.is-style-eccp-icon-heading-audio::before {';
					echo'content: "\f127";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Camera ---------------------------
				echo'.is-style-eccp-icon-heading-camera::before {';
					echo'content: "\f129";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Video ---------------------------
				echo'.is-style-eccp-icon-heading-video::before {';
					echo'content: "\f235";';
					echo'font-weight:600;';
				echo'}';
				
				
				/*--------------------- Style Block Editor back office ---------------------------*/
			
				//------------- Info Outline ---------------------------
				echo'.is-style-eccp-icon-heading-info-outline::before {';
					echo'content: "\f14c";';
					echo'font-weight:600;';
				echo'}';
				
				
			
				/*--------------------- Style TinyMCE back office ---------------------------*/
			
				//------------- Site---------------------------
				echo'.is-style-eccp-icon-heading-list::before {';
					echo'content: "\f203";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Quote ---------------------------
				echo'.is-style-eccp-icon-heading-quote::before {';
					echo'content: "\f205";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Film ---------------------------
				echo'.is-style-eccp-icon-heading-film::before {';
					echo'content: "\f219";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Help ---------------------------
				echo'.is-style-eccp-icon-heading-help::before {';
					echo'content: "\f223";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Code ---------------------------
				echo'.is-style-eccp-icon-heading-code::before {';
					echo'content: "\f475";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Table ---------------------------
				echo'.is-style-eccp-icon-heading-table::before {';
					echo'content: "\f535";';
					echo'font-weight:400;';
				echo'}';
				
				
				//------------- Hashtag ---------------------------
			
				echo'body.wp-admin .is-style-eccp-icon-heading-hashtag::before{';
					
				// la taille initiale du SVG est donné par width & height
				// pour le background-size
				// lorsqu'on affiche une icone avec la régle pseudo :before
				// il faut appliquer la régle content: "" pour que cela fonctionne
				// on applique une couleur de fond au svg avec la variable CSS
				// --eccp-textColor définit par la sélection de couleur pour le titre
				// dans les paramètres du bloc, sinon on applique une couleur par défaut #333333
				echo' background-size: cover!important;
					  display: inline-block; 
					  position: relative; 
					  top:0;
					  mask-repeat: no-repeat;	                 
					  -webkit-mask-repeat: no-repeat;
					  content: "";
					  background-color: var(--eccp-textColor,#333333);';
			
				echo'}';
				
				
				// taille icone pour un titre h2
				echo'body.wp-admin h2.is-style-eccp-icon-heading-hashtag::before{';
					echo'height:30px;';
					echo'width:30px;';
				echo'}';
				
				// taille icone pour un titre h3
				echo'body.wp-admin h3.is-style-eccp-icon-heading-hashtag::before{';
					echo'height:20px;';
					echo'width:20px;';
				echo'}';
				
				// taille icone pour un titre h4
				echo'body.wp-admin h4.is-style-eccp-icon-heading-hashtag::before{';
					echo'height:17px;';
					echo'width:17px;';
				echo'}';
				
				// taille icone pour un titre h5
				echo'body.wp-admin h5.is-style-eccp-icon-heading-hashtag::before{';
					echo'height:14px;';
					echo'width:14px;';
				echo'}';
				
				echo'body.wp-admin .is-style-eccp-icon-heading-hashtag::before{';
					
					// la régle mask-image permettra d'appliquer une couleur au SVG
					echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3C?xml version=\'1.0\' encoding=\'utf-8\'?%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 103.41 122.88\' style=\'enable-background:new 0 0 103.41 122.88\' xml:space=\'preserve\'%3E%3Cg%3E%3Cpath d=\'M23.12,51.51L18.3,74.86H0v18.31h14.87L8.7,122.88H27.5l6.08-29.71h23.48l-5.91,29.71h18.98l5.99-29.71h27.28V74.86H79.76 l5.3-26.34h18.35V30.23H88.79L94.7,0H75.79l-6.08,30.23H46.15L52.32,0H33.36l-5.99,30.23H0v18.29h23.74L23.12,51.51L23.12,51.51z M58.74,74.86H37.17l5.55-26.34h23.46l-5.4,26.34H58.74L58.74,74.86z\'/%3E%3C/g%3E%3C/svg%3E");';
					echo'mask-image:url("data:image/svg+xml;charset=utf8,%3C?xml version=\'1.0\' encoding=\'utf-8\'?%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 103.41 122.88\' style=\'enable-background:new 0 0 103.41 122.88\' xml:space=\'preserve\'%3E%3Cg%3E%3Cpath d=\'M23.12,51.51L18.3,74.86H0v18.31h14.87L8.7,122.88H27.5l6.08-29.71h23.48l-5.91,29.71h18.98l5.99-29.71h27.28V74.86H79.76 l5.3-26.34h18.35V30.23H88.79L94.7,0H75.79l-6.08,30.23H46.15L52.32,0H33.36l-5.99,30.23H0v18.29h23.74L23.12,51.51L23.12,51.51z M58.74,74.86H37.17l5.55-26.34h23.46l-5.4,26.34H58.74L58.74,74.86z\'/%3E%3C/g%3E%3C/svg%3E");';
				
				echo'}';
				
			
				/*--------------------- Style Posts Screen back office ---------------------------*/
			
				//------------- Calendar---------------------------
				echo'.is-style-eccp-icon-heading-calendar::before {';
					echo'content: "\f508";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Edit---------------------------
				echo'.is-style-eccp-icon-heading-edit::before {';
					echo'content: "\f464";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Trash---------------------------
				echo'.is-style-eccp-icon-heading-trash::before {';
					echo'content: "\f182";';
					echo'font-weight:400;';
					echo'top:0.1em;';
				echo'}';
			
			
			    /*--------------------- Style Sorting back office ---------------------------*/
			
				//------------- List View ---------------------------
				echo'.is-style-eccp-icon-heading-list-view::before {';
					echo'content: "\f163";';
					echo'font-weight:600;';
				echo'}';
				
				
				//------------- List View Alt(Icone Font Awesome) ---------------------------
				
				echo'.is-style-eccp-icon-heading-list-view-alt::before{';
						
					// la taille initiale du SVG est donné par width & height
					// pour le background-size
					// lorsqu'on affiche une icone avec la régle pseudo :before
					// il faut appliquer la régle content: "" pour que cela fonctionne
					// on applique une couleur de fond au svg avec la variable CSS
					// --eccp-textColor définit par la sélection de couleur pour le titre
					// dans les paramètres du bloc, sinon on applique une couleur par défaut #333333
					echo' background-size: cover!important;
						  display: inline-block; 
						  position: relative; 
						  top:0.1em;					  
						  mask-repeat: no-repeat;	                 
						  -webkit-mask-repeat: no-repeat;
						  content: "";
						  background-color: var(--eccp-textColor,#333333);';
				
				echo'}';
				
				// taille icone pour un titre h2
				echo'h2.is-style-eccp-icon-heading-list-view-alt::before{';
					echo'height:30px;';
					echo'width:30px;';
				echo'}';
				
				// taille icone pour un titre h2 sur mobile
				echo '@media (max-width:767px){';
				
					echo'h2.is-style-eccp-icon-heading-list-view-alt::before{';
					echo'height:24px;';
					echo'width:24px;';
					echo'}';
					
				echo'}';
					
				// taille icone pour un titre h3
				echo'h3.is-style-eccp-icon-heading-list-view-alt::before{';
					echo'height:24px;';
					echo'width:24px;';
				echo'}';
				
				// taille icone pour un titre h4
				echo'h4.is-style-eccp-icon-heading-list-view-alt::before{';
					echo'height:20px;';
					echo'width:20px;';
				echo'}';
				
				// taille icone pour un titre h5
				echo'h5.is-style-eccp-icon-heading-list-view-alt::before{';
					echo'height:17px;';
					echo'width:17px;';
				echo'}';
				
				echo'.is-style-eccp-icon-heading-list-view-alt::before{';
					
					// Icone Font Awesome Regular List
					// https://commons.wikimedia.org/wiki/File:Font_Awesome_5_regular_list-alt.svg
					// la régle mask-image permettra d'appliquer une couleur au SVG
					echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath d=\'M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z\'/%3E%3C/svg%3E%3C!-- Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E");';
					echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath d=\'M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z\'/%3E%3C/svg%3E%3C!-- Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E");';
					
				echo'}';
				
			
				/*--------------------- Style Social back office ---------------------------*/
			
				//------------- Facebook ---------------------------
				echo'.is-style-eccp-icon-heading-facebook::before {';
					echo'content: "\f305";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Instagram ---------------------------
				echo'.is-style-eccp-icon-heading-instagram::before {';
					echo'content: "\f12d";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- LinkedIn ---------------------------
				echo'.is-style-eccp-icon-heading-linkedin::before {';
					echo'content: "\f18d";';
					echo'font-weight:600;';
					echo'top: 0.1em;';
				echo'}';
				
				//------------- Pinterest ---------------------------
				echo'.is-style-eccp-icon-heading-pinterest::before {';
					echo'content: "\f192";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Twiter ---------------------------
				echo'.is-style-eccp-icon-heading-twiter::before {';
					echo'content: "\f301";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- YouTube ---------------------------
				echo'.is-style-eccp-icon-heading-youtube::before {';
					echo'content: "\f19b";';
					echo'font-weight:600;';
				echo'}';
			
			
				/*--------------------- Style WordPress back office ---------------------------*/
			
				//------------- Heart ---------------------------
				echo'.is-style-eccp-icon-heading-heart::before {';
					echo'content: "\f487";';
					echo'font-weight:600;';
				echo'}';
				
				
				/*--------------------- Style Buddicons back office ---------------------------*/
			
				//------------- Community ---------------------------
				echo'.is-style-eccp-icon-heading-community::before {';
					echo'content: "\f453";';
					echo'font-weight:400;';
				echo'}';
			
			
				/*--------------------- Style Products back office ---------------------------*/
			
				//------------- Info  ---------------------------
				echo'.is-style-eccp-icon-heading-info::before {';
					echo'content: "\f348";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Info Circle( icone Font Awesome) ---------------------------
				
				echo'.is-style-eccp-icon-heading-info-circle::before{';
						
					// la taille initiale du SVG est donné par width & height
					// pour le background-size
					// lorsqu'on affiche une icone avec la régle pseudo :before
					// il faut appliquer la régle content: "" pour que cela fonctionne
					// on applique une couleur de fond au svg avec la variable CSS
					// --eccp-textColor définit par la sélection de couleur pour le titre
					// dans les paramètres du bloc, sinon on applique une couleur par défaut #333333
					echo' background-size: cover!important;
						  display: inline-block; 
						  position: relative; 
						  top:0.1em;					  
						  mask-repeat: no-repeat;	                 
						  -webkit-mask-repeat: no-repeat;
						  content: "";
						  background-color: var(--eccp-textColor,#333333);';
				
				echo'}';
				
				// taille icone pour un titre h2
				echo'h2.is-style-eccp-icon-heading-info-circle::before{';
					echo'height:30px;';
					echo'width:30px;';
				echo'}';
				
				// taille icone pour un titre h2 sur mobile
				echo '@media (max-width:767px){';
				
					echo'h2.is-style-eccp-icon-heading-info-circle::before{';
					echo'height:24px;';
					echo'width:24px;';
					echo'}';
					
				echo'}';
					
				// taille icone pour un titre h3
				echo'h3.is-style-eccp-icon-heading-info-circle::before{';
					echo'height:24px;';
					echo'width:24px;';
				echo'}';
				
				// taille icone pour un titre h4
				echo'h4.is-style-eccp-icon-heading-info-circle::before{';
					echo'height:20px;';
					echo'width:20px;';
				echo'}';
				
				// taille icone pour un titre h5
				echo'h5.is-style-eccp-icon-heading-info-circle::before{';
					echo'height:17px;';
					echo'width:17px;';
				echo'}';
				
				echo'.is-style-eccp-icon-heading-info-circle::before{';
					
					// Icone Font Awesome 5 Solid
					// https://commons.wikimedia.org/wiki/File:Font_Awesome_5_solid_info-circle.svg
					// la régle mask-image permettra d'appliquer une couleur au SVG
					echo'-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath d=\'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\'/%3E%3C/svg%3E%3C!-- Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E");';
					echo'mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath d=\'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\'/%3E%3C/svg%3E%3C!-- Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E");';
					
				echo'}';
			
				//------------- Cart ---------------------------
				echo'.is-style-eccp-icon-heading-cart::before {';
					echo'content: "\f174";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- WordPress ---------------------------
				echo'.is-style-eccp-icon-heading-wordpress::before {';
					echo'content: "\f120";';
					echo'font-weight:400;';
				echo'}';
			
			
				/*--------------------- Style Widgets back office ---------------------------*/
			
				//------------- Archive ---------------------------
				echo'.is-style-eccp-icon-heading-archive::before {';
					echo'content: "\f480";';
					echo'font-weight:400;';
				echo'}';
				
				
				/*--------------------- Style Notifications back office ---------------------------*/
			
				//------------- Bell ---------------------------
				echo'.is-style-eccp-icon-heading-bell::before {';
					echo'content: "\f16d";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Star Filled ---------------------------
				echo'.is-style-eccp-icon-heading-star-filled::before {';
					echo'content: "\f155";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- warning ---------------------------
				echo'.is-style-eccp-icon-heading-warning::before {';
					echo'content: "\f534";';
					echo'font-weight:400;';
				echo'}';
				
				
			
				/*--------------------- Style Miscellaneous back office ---------------------------*/
			
				//------------- Book ---------------------------
				echo'.is-style-eccp-icon-heading-book::before {';
					echo'content: "\f330";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Products ---------------------------
				echo'.is-style-eccp-icon-heading-products::before {';
					echo'content: "\f312";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Awards ---------------------------
				echo'.is-style-eccp-icon-heading-awards::before {';
					echo'content: "\f313";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Testimonial ---------------------------
				echo'.is-style-eccp-icon-heading-testimonial::before {';
					echo'content: "\f473";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Download ---------------------------
				echo'.is-style-eccp-icon-heading-download::before {';
					echo'content: "\f316";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Carrot ---------------------------
				echo'.is-style-eccp-icon-heading-carrot::before {';
					echo'content: "\f511";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Beer ---------------------------
				echo'.is-style-eccp-icon-heading-beer::before {';
					echo'content: "\f16c";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Chart Bar ---------------------------
				echo'.is-style-eccp-icon-heading-chartbar::before {';
					echo'content: "\f185";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Clock ---------------------------
				echo'.is-style-eccp-icon-heading-clock::before {';
					echo'content: "\f469";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- Coffee ---------------------------
				echo'.is-style-eccp-icon-heading-coffee::before {';
					echo'content: "\f16f";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Food ---------------------------
				echo'.is-style-eccp-icon-heading-food::before {';
					echo'content: "\f187";';
					echo'font-weight:400;';
				echo'}';
				//------------- Hourglass ---------------------------
				echo'.is-style-eccp-icon-heading-hourglass::before {';
					echo'content: "\f18c";';
					echo'font-weight:400;';
				echo'}';
				
				//------------- Location ---------------------------
				echo'.is-style-eccp-icon-heading-location::before {';
					echo'content: "\f230";';
					echo'font-weight:600;';
				echo'}';
				
				//------------- PDF ---------------------------
				echo'.is-style-eccp-icon-heading-pdf::before {';
					echo'content: "\f190";';
					echo'font-weight:400;';
				echo'}';


				/*---------------- BLOC DERNIERS ARTICLES BACK OFFICE -------------------*/
				
				// Si on a activé le style card pour le bloc Derniers Articles
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_card_style_latest_posts_block_radio_field'] == 'yes' ) {
					
					/*-------- Style Card Derniers Articles en mode grille back office -----------*/
				
					/* article en mode grille */
					echo'ul.wp-block-latest-posts__list.is-grid li{';
						echo'box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);';
						echo'padding-bottom: 1.2em;';
					echo'}';

					/* Lien image */
					echo'ul.wp-block-latest-posts__list.is-grid li div.wp-block-latest-posts__featured-image a{';
						echo'padding:0;';
						echo'display: block;';
					echo'}';

					/* Image article */
					echo'ul.wp-block-latest-posts__list.is-grid li img{';
						echo'margin-bottom:1.2em;';
						echo'width:100%;';
					echo'}';

					/* Image article au survol */
					echo'ul.wp-block-latest-posts__list.is-grid li img:hover{';
						echo'background-color: #000000;';
						echo'opacity: 0.6;';
					echo'}';

					/* Auteur & Date */
					echo'ul.wp-block-latest-posts__list.is-grid li  div.wp-block-latest-posts__post-author,
						 ul.wp-block-latest-posts__list.is-grid li time.wp-block-latest-posts__post-date{';
						echo'display:block;';
						echo'padding:0 1.5em 0 1.5em;';
					echo'}';

					/* titre & extrait */
					echo'ul.wp-block-latest-posts__list.is-grid li a,
						 ul.wp-block-latest-posts__list.is-grid li div.wp-block-latest-posts__post-excerpt{';
						echo'display:block;';
						echo'padding:0 1.2em 0 1.2em;';
					echo'}';

					/* Titre de l'article */
					echo'ul.wp-block-latest-posts__list.is-grid li a{';
						echo'font-weight:bold;';
						echo'text-decoration:none!important;';
					echo'}';
					
					// si on a activé les styles du bloc lire la suite
					// on applique le même style a la balise read more du bloc Derniers Articles
					if( $custom_gutenberg_blocks_settings['eccp_settings_activate_block_styles_read_more_radio_field'] == 'yes' ) {
					
						// on fait la conversion en RGBA pourla couleur de fond du bloc Lire La Suite, 
						// la fonction retourne une chaine
						// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
						$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_block_read_more_background_color_text_field'], 
								intval($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_backgound_color_opacity_text_field'])/100 );
							
					
						/*  pour la balise read more du bloc Derniers Articles */
						echo'ul.wp-block-latest-posts__list.is-grid div.wp-block-latest-posts__post-excerpt a{';					
						
							echo'background: '.esc_html($rgba).'!important;';							
							echo'border: 2px solid '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_border_color_text_field']).';';
							echo'color: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_text_color_text_field']).';';
							echo'padding: 0.5em 1em!important;';
							echo'font-size: 18px;';
							echo'font-weight:600;';
							echo'line-height: 1.3333333;';
							echo'border-radius: 6px;';
							
							echo'display:block;';
							echo'margin:auto;';
							echo'width:150px;';
							echo'margin-top:15px;';
							echo'text-align:center;';
							
						echo'}';
						
						// on supprime la marges introduites avec la personnalisation 
						// du bloc liste
						echo'ul.wp-block-latest-posts__list.is-grid {';					
							echo'margin-left:0;';
						echo'}';
						
						// sur mobile on supprime le gap qui sépare les listes
						// dans la grille
						echo'@media (max-width:480px) {';
							echo'ul.wp-block-latest-posts.is-grid li {';	
								echo'margin-right:0;';
							echo'}';
						echo'}';
						
						// on fait la conversion en RGBA pour la couleur de fond au survol du bloc Lire La Suite, 
						// la fonction retourne une chaine
						// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
						$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_background_color_text_field'], 
								intval($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_backgound_color_opacity_text_field'])/100 );
							
						// régles au survol pour la balise read more
						echo'ul.wp-block-latest-posts__list.is-grid div.wp-block-latest-posts__post-excerpt a:hover {';
							echo'background: '.esc_html($rgba).'!important;';
							echo'border: 2px solid '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_border_color_text_field']).';';
							echo'color: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_text_color_text_field']).';';
						echo'}';
					
					}// fin si on a activé les styles du bloc lire la suite
							
				}// fin si on a activé le style card pour le bloc Derniers Articles				
				
				
				/*---------------- BLOC BOUCLE DE REQUÊTE BACK OFFICE -------------------*/
				
				// Si on a activé le style Card pour le bloc Boucle de Requête
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_card_style_query_loop_block_radio_field'] == 'yes' ) {
					
					/*-------- Style Card Boucle De Requête en mode grille back office -----------*/
					// Remarque le bloc Derniers Articles est construit a base 
					// d'une liste non ordonnée positionnée dans une grille
				
					/* article en mode grille */
					echo'ul.wp-block-post-template li{';
						echo'box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);';
						echo'padding-bottom: 1.2em;';
						// modif pour le thème Divi(on supprime la puce disque par défaut)
						echo'list-style-type: none;';
					echo'}';
					
					
					$my_theme = wp_get_theme();
			
					//correction pour le thème Astra 
					if(stristr($my_theme, 'astra')) {

						// écartement entre les colonnes de la grille
						echo'body.wp-admin .wp-block-post-template.is-flex-container{';
							echo'gap:1em;';
						echo'}';
					
					}
					

					/* Image article au survol */
					echo'ul.wp-block-post-template li figure:hover{';
						echo'background-color: #000000;';
						echo'opacity: 0.6;';
					echo'}';

					/* Auteur & Date */
					echo'ul.wp-block-post-template li  div.wp-block-post-author,
						 ul.wp-block-post-template li div.wp-block-post-date{';
						echo'display:block;';
						echo'padding:0 1.2em 0 1.2em;';
					echo'}';
					
					/* Avatar */
					echo'ul.wp-block-post-template li  div.wp-block-post-author__avatar{';
						echo'float:left;';
					echo'}';
					
					/* Catégories Articles */
					echo'ul.wp-block-post-template li div.taxonomy-category a{';
						echo'display:block;';
						echo'padding:0 1.2em 0 1.2em;';
					echo'}';
					
					/* Extrait */
					echo'ul.wp-block-post-template li div.wp-block-post-excerpt p{';
						echo'display:block;';
						echo'padding:0 1.2em 0 1.2em;';
					echo'}';

					/* Titre de l'article */
					echo'ul.wp-block-post-template li .wp-block-post-title a,
						 ul.wp-block-post-template li div.wp-block-post-excerpt p{';
						echo'display:block;';
						echo'padding:0 1em 0 1em;';
						echo'text-decoration:none!important;';
					echo'}';

					// si on a activé les styles du bloc lire la suite
					// on applique le même style a la balise read more du bloc Derniers Articles
					if( $custom_gutenberg_blocks_settings['eccp_settings_activate_block_styles_read_more_radio_field'] == 'yes' ) {
					
						// on fait la conversion en RGBA pourla couleur de fond du bloc Lire La Suite, 
						// la fonction retourne une chaine
						// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
						$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_block_read_more_background_color_text_field'], 
								intval($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_backgound_color_opacity_text_field'])/100 );
							
					
						//  pour la balise read more du bloc Derniers Articles 
						echo'ul.wp-block-post-template li a.wp-block-post-excerpt__more-link{';					
							
							echo'background: '.esc_html($rgba).'!important;';
							echo'border: 2px solid '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_border_color_text_field']).';';
							echo'color: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_text_color_text_field']).';';
							echo'padding: 0.5em 1em!important;';
							echo'font-size: 18px;';
							echo'font-weight:600;';
							echo'line-height: 1.3333333;';
							echo'border-radius: 6px;';
							
							echo'display:block;';
							echo'margin:auto;';
							echo'width:150px;';
							echo'margin-top:15px;';
							echo'text-align:center;';
							echo'text-decoration:none!important;';
							
						echo'}';
						
						//  pour la balise read more du Thème Generate Press & Astra 
						echo'ul.wp-block-post-template li div.wp-block-post-excerpt a.read-more,
							 ul.wp-block-post-template li div.wp-block-post-excerpt p.read-more a{';		
						
							echo'display:none;';
						
						echo'}';
						
						// on supprime les marges introduites avec la personnalisation 
						// du bloc liste
						echo'body.wp-admin ul.wp-block-post-template{';					
							echo'margin-left:0!important;';
							// correction pour le thème Divi
							echo'padding-left:0!important;';
						echo'}';
						
						// sur mobile on supprime le gap qui sépare les listes
						// dans la grille
						echo'@media (max-width:480px) {';
							echo'ul.wp-block-post-template  li {';	
								echo'margin-right:0;';
							echo'}';
						echo'}';
						
						// on fait la conversion en RGBA pour la couleur de fond au survol du bloc Lire La Suite, 
						// la fonction retourne une chaine
						// soit pour une couleur #000000 avec opacité 0.5 ==> rgba(0,0,0,0.5)
						$rgba = eccp_hex2rgba( $custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_background_color_text_field'], 
								intval($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_backgound_color_opacity_text_field'])/100 );
							
						// régles au survol pour la balise read more
						echo'ul.wp-block-post-template li a.wp-block-post-excerpt__more-link:hover{';
							echo'background: '.esc_html($rgba).'!important;';
							echo'border: 2px solid '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_border_color_text_field']).';';
							echo'color: '.esc_html($custom_gutenberg_blocks_settings['eccp_settings_block_read_more_hover_text_color_text_field']).';';
							echo'text-decoration:none!important;';
						echo'}';
					

					}// fin si on a activé les styles du bloc lire la suite
					
				
				}// fin si on a activé le style Card pour le bloc Boucle de Requête
				
				
				
				/*-------- Style d'un avatar personnalisé en back office -----------*/
				
				// Si on a activé l'utilisation d'un avatar personnalisé
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_custom_avatar_radio_field'] == 'yes' ) {
				
					/* Image Avatar */
					echo'ul.wp-block-post-template li  div.wp-block-post-author__avatar img{';
						echo'width:'.esc_html($custom_gutenberg_blocks_settings['eccp_settings_custom_avatar_size_text_field']).'px;';
						echo'height:'.esc_html($custom_gutenberg_blocks_settings['eccp_settings_custom_avatar_size_text_field']).'px;';
					echo'}';
				
				}// fin si on a activé un avatar personnalisé
				
				
				/*---------------- BLOC ESPACEMENT BACK OFFICE -------------------*/
				
				// régles pour tablette
				echo'@media (max-width:1024px) { ';
				
					echo'.wp-block-spacer.eccp-is-style-spacer-block{';
					
						echo'height: calc(var(--eccp-blockHeightSpacingTablet, 50)*1px)!important;';

					echo'}';
					
				echo'}';	
				
				// régles pour mobile
				echo'@media (max-width:600px) { ';
				
					echo'.wp-block-spacer.eccp-is-style-spacer-block{';
					
						echo'height: calc(var(--eccp-blockHeightSpacingTablet, 30)*1px)!important;';

					echo'}';
					
				echo'}';
				
				
				/*------------------- BLOC ICONES SOCIALES BACK OFFICE --------------------------*/
				
				
				// Si on a activé le style forme rectangulaire ou flottant
				if( $custom_gutenberg_blocks_settings['eccp_settings_activate_rectangle_shape_style_radio_field'] == 'yes' ) {
				
					
					//----------------   Style Forme Rectangulaire  ----------------
					
					/* On fait correspondre la taille des icônes a celles des Tailles de texte */
			
					//petite
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape.has-small-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-right.has-small-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left.has-small-icon-size{';
						echo'font-size:'.intval($editor_text_size_settings['eccp_settings_small_font_size_text_field']).'px;';
					echo'}';
					
					//normale
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape.has-normal-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-right.has-normal-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left.has-normal-icon-size{';
						echo'font-size:'.intval($editor_text_size_settings['eccp_settings_regular_font_size_text_field']).'px;';
					echo'}';
					
					//grande
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape.has-large-icon-size,
      					 ul.wp-block-social-links.is-style-eccp-social-icons-floating-right.has-large-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left.has-large-icon-size{';
						echo'font-size:'.intval($editor_text_size_settings['eccp_settings_large_font_size_text_field']).'px;';
					echo'}';
					
					// enorme
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape.has-huge-icon-size,
					     ul.wp-block-social-links.is-style-eccp-social-icons-floating-right.has-huge-icon-size,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left.has-huge-icon-size{';
						echo'font-size:'.intval($editor_text_size_settings['eccp_settings_huge_font_size_text_field']).'px;';
					echo'}';
					
					
					/*flex: flex-grow flex-basis soit ici flex: flex-grow:1  flex-basis:0(par défaut) 
					flexgrow  indique la quantité d'espace restant que l'élément devrait consommer 
					dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.
					les éléments voisins possèdant le même facteur d'expansion, ils recevront tous la même part d'espace.
					flex-basis: donne la taille du container flexible
					min-width: 34px ==> pour éviter que les éléments flexible ne se retrécissent en dessous de cette valeur
					*/	
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape  li {';
						echo'flex: 1;';
						echo'margin: 5px;';
						echo'border-radius: 5px;';
						echo'min-width: 34px;';
						echo'text-align:center;';
					echo'}';
					
					// espacement entre les container icônes sociales
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape {';
						echo'display:flex;';
						echo'gap: 0.5em!important;';
					echo'}';
					
					// Zoom container icônes sociales au survol
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape  li:hover {';
						echo'transform: scale(1.1);';
					echo'}';
					
					/* container du lien */
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape li button {';
						echo'padding:0.4em;';
					echo'}';

					/* libellé masqué */
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape li button span.wp-block-social-link-label {';
						echo'font-size:0;';
					echo'}';

					/* libellé affiché au survol*/ 
					echo'ul.wp-block-social-links.is-style-eccp-rectangular-shape li:hover button span.wp-block-social-link-label {';
						echo'font-size:0.6em;';
					echo'}';
					
					
					//----------------   Style Fottant a droite & a gauche  ----------------
					
					// On impose la disposition en colonne même s'il existe ce réglage dans l'editeur
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left {';
						echo'display:flex;';
						echo'flex-direction: column;';
						echo'gap: 0.5em!important;';
						echo'margin-top: 50px;';
					echo'}';
					
					/* container icônes sociales: mise en forme rectangulaire */
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right li ,
					ul.wp-block-social-links.is-style-eccp-social-icons-floating-left li {';
						echo'border-radius:5px;';
					echo'}';

						
					/* container du lien */
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right li button,
					ul.wp-block-social-links.is-style-eccp-social-icons-floating-left li button {';
						echo'padding:0.4em;';
					echo'}';

					/* libellé masqué */
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right li button span.wp-block-social-link-label,
					ul.wp-block-social-links.is-style-eccp-social-icons-floating-left li button span.wp-block-social-link-label {';
						echo'font-size:0;';
					echo'}';

					/* On affiche le libellé au survol*/ 
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right li:hover button span.wp-block-social-link-label,
						 ul.wp-block-social-links.is-style-eccp-social-icons-floating-left li:hover button span.wp-block-social-link-label{';			
							echo'font-size:0.6em;';
							echo'transition: transform 0.3s ease-in-out;';
					echo'}';

					/* container icônes sociales fottant a droite: on crée un décalage a gauche & un effet de zoom */ 
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-right li:hover {';			
						echo'transform: translateX(calc(0% - 30px)) scale(1.1);';
					echo'}';

					/* container icônes sociales fottant a gauche: on crée un décalage a droite & un effet de zoom */ 
					echo'ul.wp-block-social-links.is-style-eccp-social-icons-floating-left li:hover {';			
						echo'transform: translateX(calc(0% + 30px)) scale(1.1);';
					echo'}';
					
				}
				
					//------------- Style Liens de Partage Back Office --------------------
			
					// Facebook a besoin  pour le partage du balisage open graph pour récupérer 
					// l'image en avant ,le titre , description
					// cela est fait automatiquement par l'extension Yoast SEO ou Social Warfare
					// la bonne dimension pour le partage de l'image en avant est 1200 * 630px
			
					// le style lien de partage a été activé dans le panneau ECCP Styles
					// des paramètres du bloc
					// on affiche après le bloc icône sociales l'icône de partage
					// afin de bien montrer qu'on a transformé les liens de profil 
					// en lien de partage
					echo'ul.is-style-eccp-social-sharing-link:after {';
						echo'content: "\f237";';/* icone de partage */
						echo'font-family:"dashicons";';
						echo'font-weight: 600;';
						echo'font-size: 1.1em;';
						echo'display: block;';
						echo'margin: auto;';
					echo'}';	
					
					// position absolute pour éviter déplacement lors du survol d'une icône sociale
					echo'ul.is-style-eccp-social-sharing-link.is-style-eccp-social-icons-floating-right:after {';
						echo'position:absolute;';
						echo'top:-40px;';
					echo'}';
					
					echo'ul.is-style-eccp-social-sharing-link.is-style-eccp-social-icons-floating-left:after {';
						echo'position:absolute;';
						echo'top:-40px;';
					echo'}';
				
				/*-------------------------ICÔNE TOOLBAR -------------------------------*/
					
							
				/*------------- ICÔNE TOOLBAR PARAGRAPHE -------------------- */
				echo'.ECGB-toolbar-icon-question{';
				
					echo'color: #E6E0F7!important;';
				
				echo'}';
							
				echo'.ECGB-toolbar-icon-info{';
				
					echo'color: #48ADD8!important;';
				
				echo'}';
				
				echo'.ECGB-toolbar-icon-advice{';
				
					echo'color: #83BD71!important;';
				
				echo'}';
				
				echo'.ECGB-toolbar-icon-warning{';
				
					echo'color: #FFC334!important;';
				
				echo'}';
				
				echo'.ECGB-toolbar-icon-alert{';
				
					echo'color: #B54D4D!important;';
				
				echo'}';
				
				
				/*------------- ICÔNE TOOLBAR LISTE -------------------- */
				
				echo'.ECGB-toolbar-icon-square,.ECGB-toolbar-icon-check,.ECGB-toolbar-icon-add, 
					 .ECGB-toolbar-icon-push-spin,.ECGB-toolbar-icon-circle-duotone,
					 .ECGB-toolbar-icon-clear{';
				
					echo'color: #48ADD8!important;';
				
				echo'}';
				
				// ajustement taille & position icône clear (x)
				echo'.components-button.has-icon .dashicon {';
					echo'margin-left: -2px!important;';
					echo'margin-top: -4px;';
					echo'font-size: 24px;';
				echo'}';

				/*------------------------------ SURLIGNEMENT TEXTE BACK OFFICE ------------------------------------*/

				// style pour le surlignement du texte
				echo'span.is-style-eccp-highlight {';
					echo'padding: 0.12em 0.24em;';
					echo'border-radius: 2px;';
				echo'}';
				
				
				/*------------------------------ FORMAT LIENS EXTERNE BACK OFFICE ------------------------------------*/
				
				// Ajout de l'icône External de Dashicons aprés un lien hypertexte
				// grace au format External Links de la barre d'outils du bloc
				echo'span.is-style-eccp-external-links:after{';
	
					echo'font-family: dashicons;';
					echo'content: "\f504";';
					echo'font-weight: 400;';
					echo'vertical-align: top;';	
					echo'margin-left:0.1em;';	
					echo'margin-right:0.1em;';	

				echo'}';
				
				
				/*------------------------------ FORMAT STYLE BOUTON BACK OFFICE ------------------------------------*/
				
				// Grace au format Button Style de la barre d'outils du bloc
				// on applique des régles CSS pour appliquer un style bouton
				// au texte sélectionné
				echo'.editor-styles-wrapper .is-style-eccp-table-button {';
					echo'border-radius: 8px;';
					echo'display: inline-block;';
					echo'font-size: 18px;';
					echo'text-align: center;';
					echo'padding: 8px 16px;';
					echo'vertical-align: top;';
					echo'box-shadow:1px 1px 4px 1px rgba(0,0,0,.3);';
				echo'}';
				  
				echo'.editor-styles-wrapper .is-style-eccp-table-button a{'; 
					echo'text-decoration:none!important';
				echo'}';

				echo'.editor-styles-wrapper .is-style-eccp-table-button .eccp-dashicon{';
					echo'width:100%;';
					echo'font-size:inherit;';
					echo'display:inline-block;';
				echo'}';
				
				echo'.is-style-eccp-table-button .eccp-dashicon:before{';
					echo'top:0.25em;';
				echo'}';
				
				// régle pour les mobiles
				echo'@media(max-width:600px) {';
					echo'.is-style-eccp-table-button .eccp-dashicon:before{';
						echo'display:none;';
					echo'}';
				echo'}';
				
				
				/*------------------------------ RESPONSIVE BLOC GUTENBERG BACK OFFICE------------------------------------*/
					
					/*----------------- Hauteur du bloc couverture sur mobile en Back Office -----------------------*/
					
					// régle pour mobile
					echo'@media (max-width: 480px){';
						
						echo'.is-style-eccp-cover:not(.has-aspect-ratio){';
							echo'min-height: calc(var( --eccp-mobileCoverHeight, 300)* 1px)!important;';
						echo'}';
						 
					echo'}';
				
				
			echo '</style>';
		
		
		}// fin si l'objet d'écran est l'éditeur
		
	
	} );// fin fonction hook admin head

}

