/*
Theme Name: draculyre
Description: Thème personnalisé
Author: Gabrielle Robert
Author URI: https://draculyre-illustratrice.com
Version: 1.0
Tags: bootstrap, responsive, accessible, SEO, multilingue, diaporama, galerie, feed Instagram
*/

/* fairydustb */
@font-face {
  font-family: 'fairydustbregular';
  src: url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/fairydustb-webfont.woff2') format('woff2'),
       url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/fairydustb-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* montserrat-500 MEDIUM - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* montserrat-500 MEDIUM italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    src: url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/montserrat-v29-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* montserrat-700 BOLD- latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* montserrat-700 BOLD italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url('https://draculyre-illustratrice.com/wp-content/themes/draculyre/fonts/montserrat-v29-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

h1,h2{
    font-family: 'fairydustbregular';
}

h1{
  font-size: 2.5rem;
            /* 40px */
}

h2{
  font-size: 2rem;
             /* 32px */
} 

body{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;  
  font-size: 0.875rem;            
              /* 14px */
  line-height: 1.6rem;

  /* Curseur personnalisé  */
  cursor: url("https://draculyre-illustratrice.com/wp-content/uploads/2025/02/draculyre-illustratrice-curseur-chauve-souris.png"), auto;    
}

#menuTabletteMobile a{
  font-weight: 700;
  font-size: 1rem;
             /* 16px */
}


/* Menu et sous-menu Wordpress */
.menu-item a.nav-link, a.dropdown-item{
  color: #FFFFFF !important;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 10px;
}
.dropdown-menu{
  background-color: black;
  text-align: right;
}



.citation{
  font-style: italic;
  font-size: 0.94rem;            
            /* env 15px */
}

.debutParagraphe{
  font-size: 1.125rem;
             /* 18px */
}

.btn{
  font-weight: 700;
  font-size: 1.125rem;
             /* 18px */
}

#piedPage a{
  font-weight: 600;
}

.container{
    max-width: 1400px;
}
 
:root{
    --couleurNoir: #000000;
    --couleurBlanc: #FFFFFF;
    --couleurBleuKlein: #001F98;
    --couleurBleuClair: #809AD0;
}   

.text-black{
  color: var(--couleurNoir);
}
.text-white{
  color: var(--couleurBlanc);
}
.text-blueKlein{
    color: var(--couleurBleuKlein);
}
.text-blueLight{
    color: var(--couleurBleuClair);
}

.bg-black{
  background-color: var(--couleurNoir);
}
.bg-white{
  background-color: var(--couleurBlanc);
}
.bg-blackGradient{
  background-color: var(--couleurNoir);
  background: linear-gradient(180deg, rgba(0,0,0,1) 90%, rgba(255,255,255,1) 100%);
}

.btn-blueKlein{
  background-color: var(--couleurBleuKlein);
}
.btn-blueLight{
  background-color: var(--couleurBleuClair);
}
.border-blueLight{
 border-color: var(--couleurBleuClair);
}

#menuTabletteMobile a:hover{
  background: url("https://draculyre-illustratrice.com/wp-content/uploads/2025/02/soulignement-survol-menu-mobile-draculyre-illustratrice.png") no-repeat bottom right;
}



/* Liens Menu et sous-menu WordPress */
#menu-mobile .nav-link:active,
#menu-mobile .dropdown-item:active{
  color: var(--couleurBleuClair) !important;
}
/* pour enlever background bleu de la page active */
#menu-mobile .active{
  background-color: black !important;
  color: var(--couleurBleuClair) !important;
}



/* META SLIDER */
/* gestion de la légende */
#metaslider-id-13 .caption{
  padding: 10px;
}
/* gestion du bouton */
#metaslider-id-13 .flexslider .nexus-link {
  display: none;
  } 
/* gestion des flèches */
.metaslider.ms-theme-nexus .flexslider .flex-direction-nav li.flex-nav-prev {
  left: 0px !important;
}
.metaslider.ms-theme-nexus .flexslider .flex-direction-nav li.flex-nav-next {
  right: 0px !important;
}



/* FIL D'ARIANE */
#filDariane a,
#filDariane span,
.breadcrumb_last{
  color: var(--couleurBleuClair);
  text-decoration: none;
}


.imageEnTete{
  max-height: 700px;
}


#chauveSouris{
  height: 55px;
}

.bloctxt{
  border-style: dashed;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimg{
  max-width: 400px;
  max-height: 400px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect4s5{
  max-width: 560px;
  max-height: 700px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect2s3{
  max-width: 460px;
  max-height: 690px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect1s3{
  max-width: 230px;
  max-height: 690px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect5s12{
  max-width: 287.5px;
  max-height: 690px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect5s7{
  max-width: 400px;
  max-height: 560px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgRect16s9{
  max-width: 1320px;
  max-height: 742.5px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgCarre{
  max-width: 800px;
  max-height: 800px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.blocimgApropos{
  max-width: 400px;
  max-height: 225px;
  border-style: solid;
  /*car rounded-1 à 5 ne fonctionne pas bien*/
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.imgBouton{
  max-width: 100px;
  max-height: 50px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#aPropos .btn:hover,
#actualites .btn:hover,
#contact .btn:hover{
  background-color: var(--couleurBleuKlein);
}

#aPropos .btn a:hover,
#actualites .btn a:hover,
#contact .btn a:hover{
  color: var(--couleurBlanc);
}

#aPropos .separateur,
#categos .separateur,
#actualites .separateur,
#contact .separateur{
  border-top: var(--couleurBleuClair) dashed 4px;
}

.picto{
  max-width: 150px;
  max-height: 150px;
  border: var(--couleurBlanc) solid 1px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

/* Liens pictos et mots catégos créations */
#categos a:hover,
#actualites a.crea:hover,
#detailsTrad p a.crea:hover,
#detailsNum p a.crea:hover,
#detailsPlas p a.crea:hover{
  color: var(--couleurBleuClair) !important;
}


/* Liens Footer */
#piedPage a:hover,
#piedPage i:hover{
  color: var(--couleurBleuClair);
}




/* IMAGES SUPERPOSEES */
.galerie{
  min-height:540px;
}
.galerie .blocimg{
  max-width: 200px;
  max-height: 200px;
}

.decalage1{
  margin-left:8%;
}

.decalage2{
  top: 170px;
  right: 10%;
}

.decalage3{
  top: 340px;
  left: 17%;
}


/* IMAGES DES NOUVEAUX ARTICLES */
.nouvelArticle .wp-post-image{
  max-width: 800px;
  max-height: 800px;
  width: 100%;
  /* pour éviter que l'image soit étirée */
  height: auto !important;

  border: solid var(--couleurBleuClair) 5px !important;
  border-radius: 20px !important;
  -webkit-border-radius: 20px !important;
  -moz-border-radius: 20px !important;
  -ms-border-radius: 20px !important;
  -o-border-radius: 20px !important;
}

/* PARAGRAPHES DES NOUVEAUX ARTICLES */
.nouvelArticle p{
 padding-top: 1rem;
 padding-bottom: 0;

}


/* VIDEO */
.video{
  max-width: 527px;
  max-height: 296px;
}



/* FORMULAIRE DE CONTACT */
form .contour{
  border: solid var(--couleurBleuClair) 5px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  color: var(--couleurBleuClair) !important;
  opacity: 1;
}
/* case à cocher consentement */
.wpcf7-list-item-label{
  color: var(--couleurBlanc);
}
/* gestion du bouton */
.wpcf7-submit{
  display:flex;
  justify-content: center;
  color: var(--couleurNoir);
}
.wpcf7-submit:hover{
  background-color: var(--couleurBleuKlein);
  color: var(--couleurBlanc);
}
/* Messages rouges qui s'affichent pendant le remplissage du formulaire */
.wpcf7-not-valid-tip{
  text-align: center;
}
/* Message-bandeau qui s'affiche suite à l'envoi du formulaire */
form .wpcf7-response-output{
  background-color: var(--couleurBleuKlein);
  color: var(--couleurBlanc);
  text-align: center;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  margin-top: 1em !important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output{
  border: solid var(--couleurBleuKlein) 5px !important;
}



@media screen and (min-width:576px){
   
  h1{
    font-size: 6rem;
              /* 96px */
  }
  
  h2{
    font-size: 4rem;
               /* 64px */
  }
  
  body{
    font-size: 1.25rem;            
                /* 20px */
    line-height: 2.375rem;           
                /* 38px */          
  }
  
  #menuTabletteMobile a{
    font-size: 1.3rem;
               /* 20.8px */
  }
  
  .citation{
    font-size: 1.5rem;            
              /* env 24px */
    line-height: 2.5rem;
              /* 40px */
  }

  .debutParagraphe{
    font-size: 2rem;
               /* 32px */
    line-height: 2.5rem;
               /* 40px */ 
  }
  
  .btn{
    font-size: 2rem;
               /* 32px */
  }

  #logo{
    width: 60%;
    margin: auto;
  }

  #chauveSouris{
    height: 100px;
  }


    /* IMAGES SUPERPOSEES */
    .galerie{
      min-height:1100px;
    }
    .galerie .blocimg{
      max-width: 400px;
      max-height: 400px;
    }
    .decalage1{
      margin-left: 0%;
    }
    .decalage2{
      top: 350px;
      right: 2%;
    }
    .decalage3{
      top: 700px;
      left: 7%;
    }


    /* VIDEO */
    .video{
      max-width: 719px;
      max-height: 404px;
    }

} 


@media screen and (min-width:768px) {

  /* META SLIDER gestion du bouton */
  #metaslider-id-13 .flexslider .nexus-link {
  display: block;
  padding: 1.3rem 3rem;
  font-weight: 700;
  font-size: 2rem;
             /* 32px */
  box-shadow: none;
  }

  
  /* IMAGES SUPERPOSEES */
  .galerie{
    min-height:1100px;
  }

  .decalage1{
    margin-left:6%;
  }

  .decalage2{
    top: 350px;
    right: 8%;
  }
  
  .decalage3{
    top: 700px;
    left: 17%;
  }
 

 /* VIDEO */
  .video{
    max-width: 943px;
    max-height: 530px;
  }

}


@media screen and (min-width:992px) {

 /* Menu et sous-menu WordPress */
  .navbar-nav .nav-link,
  .dropdown-menu .dropdown-item{
    font-weight: 700;
    font-size: 1.75rem;
               /* 28px */
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 40px;
  }
  .dropdown-menu{
    background-color: black;
    text-align: left;
  }
  /* pour enlever background bleu de la page active */
  #menu-principal .active{
  background-color: black !important;
  color: var(--couleurBleuClair) !important;
  }


  #logo{
    width: 33%;
  }
  
    
  /* IMAGES SUPERPOSEES */
  .galerie{
    min-height:1100px;
    width: 50%;
  }

  .decalage1{
    margin-left: 0%;
  }

  .decalage2{
    top: 350px;
    right: 2%;
  }
 
  .decalage3{
    top: 700px;
    left: 5%;
  }


  /* VIDEO */
  .video{
    max-width: 1151px;
    max-height: 647px;
  } 
 
}


@media screen and (min-width:1200px) {

  #menuDesktop a:hover{
  background: url("https://draculyre-illustratrice.com/wp-content/uploads/2025/02/soulignement-survol-menu-desktop-draculyre-illustratrice.png") no-repeat bottom;
  }

  #menuDesktop a:active{
   color: var(--couleurBleuClair) !important;
  }

    
  /* IMAGES SUPERPOSEES */
  .galerie{
    min-height:1100px;
    width: 50%;
  }

  .decalage1{
    margin-left:0%;
  }

  .decalage2{
    top: 350px;
    right: 2%;
  }
  
  .decalage3{
    top: 700px;
    left: 10%;
  }


  /* VIDEO */
  .video{
    max-width: 1400px;
    max-height: 787.5px;
  }
 
}