/*
Theme Name:     nicolasassocies
Description:    Theme enfant de Divi fourni par Niala Salocin
Author:         Studio Niko
Template:       Divi
Version:        4.2
*/

/*
Rajoutez vos règles de CSS personnalisé ci-dessous
*/



/*pour un sticky header
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
il y a aussi un code dans le header template
#divi-sticky-header {
	top: 0;
	width: 100%;
	z-index: 99 !important;
    transition-delay: 1s;
}
non utilise car essai de sticky avec la nouvelle mouture de Divi
*/


/*Fermer tous les accordeons au demarrage. Avec ce code css ci dessous est associé du code jquery inscrit dans
option du theme > integration > Ajouter ligne de code à la < head > de votre blog.
Et le code css ci-dessous est là pour faire apparaitre un btn fermeture
.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block !important;
	content: "\e04f";
}
*/

/* je rajoute l'icone maison de ET devant l'accueil dans le menu*/
/*.icon_accueil a:before {
	font-family: 'ETModules';
	content : "\e074;";
	margin-right: 5px	;
}*/




/* cachez moi ce menu que je ne saurais voir Élément | https://nicolas.studioniko.fr/?et_fb=1&PageSpeed=off 
pourquoi je l'avais là celui là ?? */

/*.et_menu_container {
  display: none;
}*/


/*Rendre le footer cahé apparaissant seuelemnt au scroll.. sauf que le lien contact ne marche plus
.sticky-footer-reveal.et_pb_sticky_placeholder {
    z-index: index -99;
    }
*/
  

/* POUR LE MENU*/
/*change la taille des fonts du menu entre 981 et 1100 pour que cela puisse passer*/
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
#menu_avec_logo .nav a{
    font-size: 13px;
    padding-left : 0px;
    /*padding-right: 13px;*/
}
    
/*je cible ici l'image du logo du menu mais finalement après cght version divi j'ai l'impression que cela ne change rien*/
#menu_avec_logo .et_pb_menu__logo img{
    width: 80%;
}
    }



 /* MODULE D'INTRO gestion de la taille du texte dans l'intro mis en h2 */

 @media only screen and ( min-width: 1100px ) {
     #section_intro .texte_force_h2{
     font-size : 20px!important;
    }
}

@media only screen and ( min-width: 981px ) and ( max-width: 1100px ){
    #section_intro .texte_force_h2{
        font-size : 18px!important;
       }
          }

@media only screen and ( min-width: 700px ) and ( max-width:980px ){
            #section_intro .texte_force_h2{
                font-size : 16px!important;
               }
                  }
        
@media only screen and ( max-width: 699px ) {       
    #section_intro .texte_force_h2{
        font-size : 14px!important;
       }
          }


/* gestion du placement du bouton de defilement vers le bas*/
@media only screen and ( min-width: 1101px ) {
    #section_intro .scroll-down {
    padding-bottom: 8vw;
    text-shadow: 0.02em 0.05em 0.08em #3e7172;
}
}

@media only screen and ( min-width: 981px ) and ( max-width: 1100px ){
#section_intro .scroll-down {
    padding-bottom: 4vw;
    text-shadow: 0.02em 0.05em 0.08em #3e7172;
}
}


@media only screen  and (min-width: 511px ) and ( max-width: 980px ){
    #section_intro .scroll-down {
        padding-bottom: 2vw;
        text-shadow: 0.02em 0.05em 0.08em #3e7172;
    }
    }

@media only screen  and ( max-width: 510px ){
        #section_intro .scroll-down {
            display:none;
        }
        }
    
  
/*MODULE BLOG FINALEMENT NON UTILISE*/
/* TRANSFORMER LE MODULE BLOG EN 4 5 6 COLONNES.
Pour les explications, c'est ici que ça se passe :
https://intercom.help/elegantthemes/en/articles/2310880-change-blog-module-columns-number */

/*
.cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '4 .column.size-1of4' !important;
}

@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 24%!important;
	    margin-right: 1%;
	}
}
*/



/* changement pour 3 colonnes entre 980 et 800*/
/*@media only screen and ( max-width: 980px ) and ( min-width: 800px ) {
    
    .cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '3 .column.size-1of3' !important;
}
	.cu-blog .column.size-1of3 {
	    width: 32%!important;
	    margin-right: 1.33%;
	}
}
*/
/* changement pour 2 colonnes entre 800 et 700
@media only screen and ( max-width: 799px ) and ( min-width: 700px ) {
    
    .cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '2 .column.size-1of2' !important;
}
	.cu-blog .column.size-1of2 {
	    width: 47%!important;
	    margin-right: 1%;
        /*float:left;*/
/*	}
}*/

/* changement pour 1 colonnes avant  699 
@media only screen and ( max-width: 699px ) {
    
    .cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '1 .column.size-1of1' !important;
}
	.cu-blog .column.size-1of1 {
	    width: 95%!important;
	    /*margin-right: 1%;
        float:left;*/
/*	}
}*/




/* pour faire apparaitre le menu flottant au dessus du menu principal il faut forcer le niveau de la section contenant ce menu principal*/
#menu_principal {
   z-index: 9998 !important;
}


/* HABILLAGE BOUTON MENU-FLOTTANT à droite*/
.menu-flottant {
    width:14em; /* Largeur des items du menu*/
        
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:9999 !important; /* Il sera au dessus de tous les éléments*/
    top: 0px; /* Il sera à 0% du bord supérieur de l'écran*/
    font-size: O.9em; /* Taille de la police*/
    line-height: 40px; /* Hauteur de ligne du menu*/
    color: #fff; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -11em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
    
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: #aaa; /* Couleur de fond*/
    height: 3em; /* Hauteur des items du menu*/
    padding: 0.9em 1.2em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
	background-color: #a4c619; /* 1er item du menu*/
    border-bottom-left-radius: 23px;
    border-top-left-radius: 23px;
    box-shadow: -4px 2px 12px #2d2e2e94;
} 
.menu-flottant ul li:nth-child(2) { 
	background-color: #b4d6c8; /* 2e item du menu*/
} 
.menu-flottant ul li:nth-child(3) { 
	background-color: #4843D2; /* 3e item du menu*/
} 
/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(-11em);
    transform: translateX(-11em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
    color: #fff; /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:0.9em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    right: 0.2em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 1em;          
  }  
 /*FIN du MENU FLOTTANT*/


 
 /*PERSONNALISER LE BOUTON DE RETOUR EN HAUT DE PAGE*/

/*Opacité du bouton et effets d'animation (pour tous les navigateurs)*/
.et_pb_scroll_top.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
}
 
/*Positionnement et couleur du bouton*/
.et_pb_scroll_top.et-pb-icon {
    right: 5px; /*distance du bouton par rapport à la droite de la fenêtre*/
    bottom: 80px; /*distance du bouton par rapport au bas de la fenêtre*/
    border-radius: 5px; /*Propriété permettant d'arrondir le bouton, supprimez la si vous voulez un bouton carré*/
    background: #a3c619; /*couleur de fond du bouton. Mettez celle que vous voulez*/
    box-shadow: -4px 2px 12px #2d2e2e94;/*petit ombré */
}
 
 /*couleur de fond du bouton au survol*/
.et_pb_scroll_top.et-pb-icon:hover {
    background: #62770f;
}
 
/*Choix de l'icone et couleur de celui-ci*/
.et_pb_scroll_top:before {
    content: "\42"; /* icone provenant des icones de bases de Divi*/
    color: rgb(255, 255, 255); /*couleur de l'icône*/
}

/*FIN DE PERSONNALISER LE BOUTON DE RETOUR EN HAUT DE PAGE*/



/*couleur de fond des projets pour la div contenant les boutons suivant et precedent.
Ce code doit être placé plus haut que le code changeant le fond des portfolios */
.project {
    background-color: #5daba7;
}



/*PORTFOLIO*/

/*ADAPTER GRAPHIQUEMENT LE PORTFOLIO*/

  /*pour tous les breakpoints*/
  .et_pb_portfolio_item {
    background-color: rgba(170,169,158,0.75);
    border-radius: 10px;
    min-height: 320px;/* pour qu'ils soient tous à la m^me hauteur et non pas dépendant du nombre de lignes d'infos*/
    margin: 5px;
    padding-bottom: 10px;
    /*border : 5px;
    border-color: black;
    box-shadow: 6px 6px 18px 9px rgba(44,54,92,0.2);*/
  }


/* adapter la largeur des colonnes lorsqu'on laisse un espace entre 2 items*/

@media only screen and (min-width: 981px) {
    .et_pb_gutters1 .et_pb_column_4_4 .et_pb_grid_item, .et_pb_gutters1 .et_pb_column_4_4 .et_pb_shop_grid .woocommerce ul.products li.product, .et_pb_gutters1 .et_pb_column_4_4 .et_pb_widget, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_shop_grid .woocommerce ul.products li.product, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_widget {
      width: 24%;
    }
  }
  
  @media only screen and (min-width: 768px ) and ( max-width: 980px ) {

    .et_pb_gutters1 .et_pb_column_4_4 .et_pb_grid_item, .et_pb_gutters1 .et_pb_column_4_4 .et_pb_shop_grid .woocommerce ul.products li.product, .et_pb_gutters1 .et_pb_column_4_4 .et_pb_widget, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_shop_grid .woocommerce ul.products li.product, .et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_widget {
    width: 30%;
    margin-left: 5px;
    margin-bottom : 5px;
}
  }

  @media only screen and ( max-width: 767px ) {
    /*.et_pb_portfolio_item .et_pb_grid_item */
   #Portfolio_Nicolas .et_pb_portfolio_items_wrapper.clearfix .et_pb_portfolio_items div{
      margin-bottom: 3%!important;
    }
}


/*graphisme des BOUTONS FILTRES du portfolio dans la page d'accueil par un ID*/


#Portfolio_Nicolas .et_pb_portfolio_filters li a  {
    background-color: rgba(84,185,191,0.9);
    color : whitesmoke;
    border-radius : 50px 0px 50px 0px;
    margin-left: 0.8vw;
  }

  #Portfolio_Nicolas .et_pb_portfolio_filters li {
    margin-bottom: 10px;
}
  #Portfolio_Nicolas .et_pb_portfolio_filters li a.active  {
    background-color:rgba(159,175,63,0.85);  
  }

 /*GRAPHISME DES BOUTONS FILTRES du portfolio dans les différentes pages par une CLASS*/
 .classPortfolioProjet .et_pb_portfolio_filters li a.active  {
    background-color:rgba(159,175,63,0.85);  
  }
  .classPortfolioProjet .et_pb_portfolio_filters li a.active:hover  {
    background-color:rgba(127, 141, 50, 0.85);  
  }


 .classPortfolioProjet .et_pb_portfolio_filters li a  {
    background-color: rgba(84,185,191,0.9);
    color : whitesmoke!important;
    border-radius : 50px 0px 50px 0px!important;
    margin-left: 0.8vw;
    transition: all 0.5s ease-out;
  }

.classPortfolioProjet .et_pb_portfolio_filters li {
    margin-bottom: 10px;
}

/* au survol*/
 .classPortfolioProjet .et_pb_portfolio_filters li a:hover  {
    background-color: rgba(53, 116, 119, 0.9)!important;
    border-radius : 50px 10px 50px 10px!important;
    font-weight :700;
    padding-left: 30px;
    padding-right: 30px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  }

 .classPortfolioProjet .et_pb_portfolio_filters li a.active:hover  {
    background-color:rgba(127, 141, 50, 0.85)!important;  
  }



  /*ameliore graphisme des boutons precedent suivant dans les archives projets*/
.nav-previous, .nav-next {
    display: inline-block;
    /*margin:10px;*/
    background-color: #f2b8b3;
    border-radius: 5px 5px 5px 5px;
    padding:10px 15px;
    margin-bottom:50px;
}

.nav-previous a, .nav-next a {
    color: white!important;
    font-weight: 600;
    }

/*elimine le blanc existant entre la fin de la navigation des projets et le pied de page */
/*.single .et_pb_post {
    margin-bottom: -10px;
}*/

.single-project.et_pb_pagebuilder_layout .nav-single {
    margin-top: 0px;
    margin-bottom:0px;
   }
   

/* Eliminer le trait blanc existant sous les vignettes projets, du à la pagination.
celui çi est noté non affiché dans le module portefeuille filtrable. S'il devait etre remis, il faudrait remettre ce code en route*/
.et_pb_filterable_portfolio .et_pb_portofolio_pagination, .nav-single.clearfix { 
    border-top: 0px solid #e2e2e2;
  }


/*tests pour la 4e colonne à faire disparaitre
  .classPortfolioProjet > div  {
      background-color : red;
  }

  .classPortfolioProjet div.et_pb_portfolio_items.et_pb_portfolio_item{
    display:none;
}

.et_pb_portfolio_item:nth-child(4n)
    display:none;
}
*/


/*alignement et homogenisation des images du logos*/

#conteneur_logos{
    display : flex;
    flex-flow: wrap;
    justify-content :space-around;
    align-items :center;
}
.logos_footer img {
    /* display:flex; */
    width :100px;
    aspect-ratio: 3/2;
    object-fit: contain;
    margin: 0em 0.2em 0.3em 0.2em;
    max-height: 58px;
}

/*border radius des categories dans archives*/
.et_pb_post.et_pb_post_extra .post-categories a{
    border-radius:50px 0px 50px 0px;
    padding:2px 20px !important;
    box-shadow: 1px 1px 5px rgb(107, 111, 114);
}
/*Cibler les categories dans le mode block */
.et_pb_post_extra.el_dbe_block_extended .post-categories a{
    border-radius:50px 0px 50px 0px!important;
    padding:2px 20px !important;
    box-shadow: 1px 1px 5px rgb(107, 111, 114);
    margin-left:-5px;
    /*tentative de decaler les categories pour qu'elles dépassent du bloc
    z-index: 5;
    margin-left: 180px;
    white-space: nowrap;
    overflow:visible!important;*/
}

/* Ajout du soulignement aux liens, au survol seulement */
.et_pb_text a, .et_pb_blurb a {
    /*color:#222222;*/
    border-bottom: 0px solid #ffffff;
    transition: all 0.4s ease-in-out;
}

.et_pb_text a:hover, .et_pb_blurb a:hover  {
    border-bottom: 1px solid #ffffff;
}

/* Ajout d’un pictogramme FontAwesome aux liens s’ouvrant dans un nouvel onglet */
a.nouvel-onglet::after {
    /*content: url(https://nicolas.studioniko.fr/wp-content/uploads/2022/01/External_link_20px.svg);*/
    content: "\f35d";
    font-family: FontAwesome;
    /*color : black;*/
    font-size: 12px;
    /*display: inline-block;
    position:relative;
    width: 14px;*/
    padding-left: 2px;
    font-weight: 900;
    /*top: -5px;*/
    vertical-align:super;
    }


/* Ajout d’une ombre à tous les boutons */
.et_pb_button {
    box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
}
/* ne pas afficher lepicto awesome sur certains endroit (class nietafter) , les images notamment*/
.niet_after a.nouvel-onglet::after {
    content: "";
    display:none;
    }

/* deplace et habille le rond du blurb des outils de Foncier */
.outils_foncier .et_pb_blurb_content .et_pb_main_blurb_image {
    position: absolute;
    background-color: white;
    border: 1px solid grey;
    box-shadow: 5px 5px 8px rgba(50,50,50,0.3);
    top: -85px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 1.4rem;
    border-radius: 50%;
   }


/*  renverse l'ordre des colonnes en tablette et mobile */
/*  .renverse_colonnes .et_pb_column:first-child {
        order: 2;
      }
    .renverse_colonnes .et_pb_column:nth-child(2) {
        order: 1;
      }
      */
      
@media only screen and (max-width: 981px) {
    .renverse_colonnes {
      display: flex;
      flex-direction: column-reverse;
    }
    }

  



/*changer  l'affichage des blockquote par défaut"
 blockquote::before {
  content:"\"";
  font-size : 50px;
  margin-top:5px;
  display: block;
  float: left;
 color : #4f4a44;
}
blockquote::after {
   content:"\"";
  font-size : 50px;
  margin-top:-50px;
  margin-right : 0px;
  display: block;
  float: right;
 color : #4f4a44;
  
}

blockquote {
color: #4f4a45;
margin-top: 50px;
padding-top:0px;
margin-left:0px;
margin-right : 50px;
}
*/