/*!
Theme Name: Loic Prudhomme Child
Theme URI: http://www.samloorie.fr
Version: 4.14.1
Description: Theme enfant Loic Prudhomme
Author: Samloorie
Template: Divi
*/

@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&family=Oswald:wght@200..700&display=swap');

/**** Général ****/

@font-face {
  font-family: 'ElegantIcons';
  src: url('fonts/ElegantIcons.woff') format('woff'),
    url('fonts/ElegantIcons.ttf') format('truetype'),
}




html  {
  --txt: #333333; 
  --couleur1: #913859; /* Rouoge bordeaux  */
  --couleur2: #94c253;/* Vert*/
  --couleur3: #f7dcd7; /* rose */
    --couleur4: #5b5b5b; /* gris */
  --fond: #f7e8e6; /*rrose clair*/
  --ombre : 0 0px 80px 0px rgba(0, 0, 0, 0.08);
  --encadre :3px solid #f7e8e6 ;
  --manuscrit :"Playwrite CU", cursive;
  --typo :  "News Cycle", sans-serif;
  --titre :"Oswald", sans-serif;
}


.couleur1{ color:var(--couleur1)!important;}
.couleur2{ color:var(--couleur2)!important;}
.couleur3{ color:var(--couleur3)!important;}
.couleur4{ color:var(--couleur4)!important;}


.bck1{ background-color:var(--couleur1); }

.bck2{ background-color:var(--couleur2); }
.bck3{ background-color:var(--couleur3); }
.bck4{ background-color:var(--couleur4); }
.fond { background-color:var(--fond)!important;}
.focus {background-color: var(--fond); padding:30px; margin:20px auto;}
.ombre { box-shadow:var(--ombre);}

.encadre {padding:30px; margin:20px auto; border:1px solid var(--couleur1);}
.asavoir {padding:30px; margin:20px auto; border:3px solid var(--couleur3);}

.more {font-size: 120%; }
.bigtitre { font-size: 40px;
  line-height: 1.2em;
  font-weight: 900;
}
.manuscrit { font-family: var(--manuscrit);}



.quote, .def {display: inline-block;
    vertical-align: middle;
    width: auto; 
    height: 3em;
    fill: currentColor;
    background-repeat: no-repeat;
    background-position: center;}

.quote { content: url(img/quote.svg); float: left;
  margin-right: 10px;}

  .def { content: url(img/def.svg); float: left;
  margin-right: 10px;}



.surligne, .surligne2, .surligne3 {
 z-index: 50;
  position: relative;
  display: inline-block;
  
  border-bottom: 0;
  padding-bottom: 0;
  position: relative;
  padding: 5px 15px;
  text-transform: uppercase; font-weight:900; 

}

.surligne a {text-transform: uppercase;  color: #fff !important; font-weight:900; }

.surligne { background: var(--couleur1); color: #fff !important;}
.surligne2 { background: var(--couleur2);color: #fff !important;}
.surligne3 { color: var(--couleur1);background-color: #fff !important;}

/* ---------------------------
Typo générale
-----------------------------*/

/*** mettre un fond **/

  /*.et_pb_section, body, .titre, .entry-content, #main-content, #et-main-area {background-color:#f9f7f7;}*/

body { 
padding:0; margin:0;
font-weight: 400;
  font-family: var(--typo);
  font-size: 16px;
  line-height: 1.7em;
  color: var(--txt);

  font-stretch: 100%;
  font-optical-sizing: auto;

}



/*debug diff texte blocs */

p, .et_pb_post p,
.et_pb_text,
.et_pb_text_inner, .et_pb_text_inner p { 
font-weight: 400;
  font-family: var(--typo);
  font-size: 16px;
  line-height: 1.7em;
  color: var(--txt);
}

.entry-content a {text-decoration: underline;; font-weight:800; }
.entry-content a:hover { border-bottom: 1px solid var(--couleur1); }

/*.page{ border:20px solid #ffffff!important;  }*/


h1, .et_main_title h1 { 
  color:var(--txt);
  font-size: 2.3em;
  margin:10px 0;
  font-family: var(--titre);
  font-style: bold;
  font-stretch: 100%;
  font-optical-sizing: auto;

}


h2 {
 font-family: var(--titre);
  font-weight: 900;
  color: var(--couleur1);
  margin: 10px 0 5px 0;
  line-height: 1.2em;

}
   



h3 { 
  font-family: var(--titre);
font-weight: 900;
  font-size: 1.4em;
  color: var(--txt);
  margin-top: 2%;
}

h4 { 
   font-family: var(--titre);
  font-size: 18px !important;
  line-height: 1.3em;
  font-weight: 800;
  }

  h5 { font-weight: 700;
 font-family: var(--typo);
  color:var(--couleur2); line-height: 1.5em;

}

.et_pb_button a, .bouton a {  text-decoration: none!important; }


.et_pb_button, .bouton { 
background:var(--txt); 
color: #ffffff; 
 border-radius :0; 
 margin:15px auto;
 font-family: var(--typo);
 text-decoration: none!important; 

  }
 
.et_pb_button:hover, .bouton:hover { background:var(--couleur1); 
color: #ffffff;  }


blockquote, blockquote p {
margin: 30px 0;
  border-left: 0;
    border-left-color: currentcolor;
  border-left-color: currentcolor;
  padding-left: 0;
  font-size: 1.1em;
font-family: inherit;
  font-weight: 900 !important;
  color: var(--couleur1);
  font-style: italic;
}



hr {
 display: block;
  width: 100%;
  background: #ddd;
  height: 1px;
  border: none;
  margin: 1% auto;
  text-align: center;
      
}

#top-menu a {
 color: var(--couleur1);
    font-family: var(--titre);
  font-size: 0.9em;
  letter-spacing: 0.02em;
  font-weight: 900;
display:inline-block;
position: relative;
text-transform: uppercase;}



#top-menu a:hover, #top-menu .current_page_item a:active {

color:var(--couleur1)!important;
opacity: 1;}

#top-menu li.current-menu-item > a {color:var(--couleur1);}

#main-content .container::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    
}

#top-menu li li a {
  padding: 2px 10px;
  width: 220px;
}

#main-header {
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
box-shadow: 0 0 0 rgba(0,0,0,0);}

#logo {
  border-right: 1px solid #ddd;
  padding-right: 25px;
}


  #top-menu > .cta-menu > a {
  color: var(--txt);
  border:1px solid var(--txt);
  font-size: 14px;
  padding-left: 10px!important;
  display: inline-block;
  position: relative;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px!important;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}

.mobile_menu_bar::before, .mobile_menu_bar::after, #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a {
  color: var(--couleur2);
}


#gallery-1 img {
  border: 0!important;
}


.et_pb_scroll_top.et-pb-icon {
  text-align: center;
  background: var(--couleur2);
  text-decoration: none;
  position: fixed;
  display: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 30px;
  padding: 5px;
  color: #fff;
}

/*** centrer les textes verticalement***/

.centrer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
}

/* ---------------------------
header auto page classique
-----------------------------*/


.titre {
width: 100%;
  margin: 0 auto;
  padding-top: 35vh;}

  .titre h1{
padding:0;
margin:0!important;
font-size: 2.5rem;}

  .titre .surligne3{
padding:2% 4%;
  border-top: 5px solid var(--couleur2);
  border-right: 5px solid var(--couleur2);}
  

.titre .container{
margin:1% auto 0 auto;
  max-width: 900px;}





.filariane { 
padding-bottom: 1em;
padding-top: 1em;
display:block;
font-size:0.9em;
margin:0 auto;


}

.filariane a { 
font-weight:500;
}
.filariane a .breadcrumb_last{ 
font-style:italic;
font-weight:800;
} 

 .filariane li + li::before {
    content: "\e606";
    color: inherit;
    margin: 0 .5rem;
}



.container .boutons-partage {
 text-align: center;
 float:right;
   display: inline-block;
  margin: 2px auto;
  width: auto;}

.boutons-partage {
    margin-top: 20px;
}

.boutons-partage a {
    display: inline-block;
    margin-right: 1px;
    padding: 2px;
    color: var(--txt); /* Couleur du texte */
    text-decoration: none;
  
}

.boutons-partage a:hover {
    color: var(--couleur2); 
    fill:  var(--couleur2);
}


/**** Boutons RS **/

.bloc-rs {
  display: inline-block;
  max-width: 800px;
  margin: 0 auto 10px auto;
        }


.boutons-rs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
        }
        
      .boutons-rs  .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
  height: 50px;
  border-radius: 10%;
            color: white;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
      .boutons-rs .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
       .boutons-rs .youtube {
            background-color: #FF0000;
        }
        
      .boutons-rs  .linkedin {
            background-color: #0a66c2;
        }
        
       .boutons-rs .bluesky {
            background-color: #0085FF;
        }
        
       .boutons-rs .instagram {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        }
        
       .boutons-rs .facebook {
            background-color: #3b5998;
        }

/** pour les signles pages **/


 .et_pb_gutters2 .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 .et_pb_post {
margin-bottom: 30px;
    min-height: 430px;
  border-left: ;
  box-shadow: var(--ombre);
  border-radius: 20px;
  }


   .et_pb_bg_layout_light .et_pb_post p {
  color: var(--txt);
}

.et_pb_blog_grid .et_pb_post {
  border-color: transparent;
  background-color: transparent;
}

.et_pb_blog_grid .et_pb_post h2 a{
color: var(--couleur1);
 /* border-bottom: 1px solid var(--couleur1);*/
  text-decoration: none !important;
    
  text-transform: uppercase;
  line-height: 1.5em;
}

.et_pb_blog_grid h3 a {
  position: relative;
  color: inherit; /* Garde la couleur du texte si tu veux neutre */
  text-decoration: none;
}

.et_pb_blog_grid h3 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 0.5em;
  background-color: #F7E8E6;
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.et_pb_blog_grid h3 a:hover::after {
  opacity: 1;
}

.et_pb_blog_grid .et_pb_post .post-meta, .et_pb_blog_grid .et_pb_post .post-meta a{
  color:var(--couleur4);
  font-size:0.9em!important;
  font-weight:400;
  font-family: var(--titre);
  text-decoration:none;

}


.post-meta .published{
   font-size:0.9em!important;
}


post-meta .published::before {
  content: "%%";
}


.et_pb_post .entry-featured-image-url {
  
}

.et_pb_post .et_pb_image_container img {
   
   
}

.et_pb_post .et_pb_image_container img:hover {
 filter: grayscale(40%) brightness(85%) contrast(130%) saturate(150%);
    transition: filter 0.2s ease, transform 0.2s ease;}



.pagination .alignleft, .pagination .alignright{
  background-color: var(--fond);
  padding: 1% 2%;}

/* ---------------------------
tableaux
-----------------------------*/



.entry-content tr td {
  border-bottom: 1px solid var(--txt);
  border-top:0; border-right: 0; border-left: 0;
  padding: 6px 0;
}

.entry-content tr td .apartirde {
 font-style:italic; font-size:0.7em; line-height:0.7em;
}


.note {
 font-style:italic; font-size:0.8em; line-height:0.8em;
}


.entry-content table:not(.variations) {
  border-bottom: 1px solid var(--txt);  border-left: 0; border-right: 0;
   border-top: 0;
}

.entry-content tr td {
  border-top: 1px solid transparent;

}



/**--------------------

Articles en vignettes 

-----------------------*/

.search-filter {padding: 20px;  margin:2% auto;}

.vignette-resultats {
  margin: 1%;
  width: 31.1%;
  float:left;
  min-height: 280px;
  box-shadow:var(--ombre);
}


.vignette-resultats .contenu {padding: 20px; min-height:230px; border-left: 4px solid var(--couleur3);}
.vignette-resultats .contenu p {padding-bottom: 0!important;}

.vignette-resultats h3 {color:var(--txt)!important; font-size:14px!important; line-height:1.3em;font-weight:900!important; }


.vignette-resultats .categories .category-item, .category-buttons a{
font-size: 0.8em;
  color: var(--txt);
  display: inline-block;
  padding:0 7px;
  font-weight: 400;
  background-color: var(--fond);
  margin:10px 2px;
border-radius: 3px;}

.category-buttons-themes a {
font-size: 11px;
  color: var(--txt);
  display: inline-block;
  padding: 1px 7px;
  font-weight: 800;
  background-color: var(--fond);
  margin: 3px 2px;
  border-radius: 3px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;}



 .vignette-resultats .img-vignette {
background-size: cover !important;
background-position: center !important;
width:auto;
  height: 200px;
  }




/*----------------------------------
Porte Voix
------------------------------------*/


.porte-voix-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 30px;
}

.porte-voix-item {
    text-align: center;
    padding: 15px;
    transition: box-shadow 0.3s, transform 0.3s;
    box-shadow: var(--ombre);
    border-left:5px solid var(--fond);
}

.porte-voix-item:hover {
    background-color:var(--fond);
    transform: translateY(-4px);
}

.porte-voix-item img {
    width: 100%;
    height: auto;
   
}

/* Responsive mobile */
@media (max-width: 768px) {
    .porte-voix-grid {
        grid-template-columns: 1fr; /* 1 colonne sur petit écran */
    }
}


/* ---------------------------
Style formulaire en colonne
-----------------------------*/

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, select, .wpcf7-select {
  width: 100%;
  font-size:1em;
  padding: 10px;
  margin:4px auto;
  background:var(--fond);
  border: 1px solid var(--txt);
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
      color:var(--txt);
        border-radius: 15px; 
          -moz-border-radius: 25px; 
          -webkit-border-radius: 25px; 
}
.wpcf7 input[type="text"]:focus{
    border: 1px solid #273249;

}

/*** special case à cocher **/
.wpcf7-list-item {
  display: block;
  margin: 0.2em;
}

/* Cibler les cases à cocher dans le formulaire Contact Form 7 */
span.wpcf7-checkbox input[type="checkbox"] {
  border: none !important; 
  background-color: var(--couleur2) !important; 
  padding: 0.5em;
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}

span.wpcf7-checkbox .wpcf7-list-item-label {
  margin-right: 0.5em;
}



.wpcf7-submit { 
background:var(--txt); 
color: #ffffff; 
 border-radius :0; 
 margin:15px auto;
 font-family: var(--typo);
  }
 
.wpcf7-submit:hover { border: 1px solid var(--txt); color: var(--txt); background:transparent; box-shadow: 10px 10px 0px 0px var(--couleur1); }



span.wpcf7-not-valid-tip{
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  background: #ff0000;
  padding: 5px;
}
div.wpcf7-validation-errors { 
  text-shadow: none;
  border: transparent;
  background: #f9cd00;
  padding: 5px;
  color: #9C6533;
  text-align: center;
  margin: 0;
  font-size: 12px;
}
div.wpcf7-mail-sent-ok{
  text-align: center;
  text-shadow: none;
  padding: 5px;
  font-size: 12px;
  background: var(--fond);
  border-color: var(--couleur2);
  color: #fff;
  margin: 0;
}

#formulaire-responsive {
  max-width:600px /*-- à modifier en fonction de la largeur désirée --*/;
  margin:0 auto;
        width:100%;
}

#formulaire-responsive h5 { }
#formulaire-responsive hr { margin: 3vh auto;}
.rang-form {
  width: 100%;
}
.demi-colonne, .colonne {
  float: left;
  position: relative;
  padding: 0.65rem;
  width:100%;
  -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
  .demi-colonne {
    width: 50%;
  }
}

/* ---------------------------
Footer
-----------------------------*/
#main-footer {
  
}

.footer-widget .textwidget p {
 
}


.et_pb_widget .image{float:center;
}

#footer-bottom {
}

#footer-info, #footer-info a {font-size:0.8em!important;}
#footer-info a {text-decoration: underline;}


.footer-widget h4{font-size:1.1em;}
.fwidget .et_pb_widget .widget_nav_menu {
color:#fff;}

.fwidget .et_pb_widget .widget_custom_html p {
color:#fff !important;}

.footer-widget li, .footer-widget li a, #footer-info {
    font-size: 1.15em;
} 

#footer-widgets .footer-widget li a {}



/**** Responsive *****/

/* Cacher les menus item-mobile sur desktop */
 .item-mobile {display: none!important;}


@media only screen and (max-width:980px) {
 
 #main-header.et-fixed-header {
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  }


 /* Afficher les menus item-mobile sur mobile */ .item-mobile { display: block!important; }
  
}



@media screen and (max-width: 800px)
{

      
        p {font-size: 1rem;}
       

          h2 {font-size: 16px;line-height: 1.3em;margin: 10px 0 ;}   
	.bigtitre {font-size: 20px;line-height: 1.2em;}
            #et_main_title  .titre h1 , h1 {font-size: 20px;line-height: 1.2em;}   
          h3 { font-size: 14px; line-height:1.2em;}
            #et_main_title  { text-align:center;margin: 0 auto!important;}
          #et_main_title  .titre  {padding:2% 4%;}
             .et_pb_text_0 h1,  h1, .et_main_title h1, .bigtitre h1 {font-size: 18px; }
     
        /* X icon in expanded mobile menu */
        .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        }

        /* Remove the top line in the mobile menu*/
        .et_mobile_menu {
        border-top:0;
        }

        /* Center-align moble menu items */

        .et_mobile_menu li {
        text-align:center !important;
        }
          
        .et_mobile_menu li li, .et_mobile_menu li ul {
        padding-left:0 !important;
        }

      /* Remove the animation to avoid delay */

      .mobile_nav.opened .et_mobile_menu {
      display:block !important;
      }

     

        img.alignright {
        display: block;
        float: center !important;
        margin: 10px auto;
      }

        .et_pb_text_inner .et_pb_button {  display:block;}


      .et_mobile_menu {border-top: 0;}


      body, p, .et_pb_post p, 
      .et_pb_text,
      .et_pb_text_inner, .et_pb_text_inner p  { font-size: 1em; line-height: 1.5em;}
      .titre .container { padding: 2vh 0;}

    .container {width:94%;}
     .et_pb_row {width: 90%;}

     .titre-minimal .surligne a{font-size:10px;}
	
	
	.alignright {width:100%; float:none; margin:2% auto;}

	  .vignette-resultats {
	  margin: 3% auto;
	  width: 100%;
	  float:none;
	  height: auto;
	  box-shadow:var(--ombre);
	  }

	  .vignette-resultats .contenu {
	  padding: 20px;
	  min-height: auto;
		}

		.vignette-resultats .categories .category-item, .category-buttons a {font-size: .7em; padding: 1px 3px;}
  
  
}