/*
Theme Name: PUNCH Marionnettes
Theme URI: 
Author: Alice Reveilliez
Author URI: https://revalice.fr
Description: Thème pour Oblique - PUNCH Marionnettes
*/



@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


body{color: #0E2F09;font-size: 17px;font-family: "Nunito", sans-serif;font-weight: 400;}
h1, h2,h3,h4,h5,h6{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 700;}
h1{font-size: 38px;line-height: 42px;}
h2 {font-size: 32px;line-height: 38px;}


h3 {font-size: 28px;line-height: 32px;}
h4 {font-size: 20px; line-height: 23px;margin: 28px 0 0px;/*font-size: 35px;line-height: 40px;*/}
h5{font-size: 27px;line-height: 37px;margin-bottom: 10px;}
h6 {font-size: 25px;line-height: 30px;}

p {margin: 0 0 15px;font-size: 18px; line-height:25px;}
a{color: #0e3009;;font-weight: 400;}
a:hover, .btn.btn-link:hover{color: #386c2d;}
b, strong {font-weight: 700;}
span.bgtxt{background-color: rgb(34 38 42 / 66%);text-transform: uppercase;padding: 3px}
.maj{text-transform: uppercase;}
.opacity-5 {opacity: 0.5;}
li {margin-bottom: 12px;}

.bg-rouge{background-color: #FF0404}
.bg-blanc{background-color: #ffffff;}


.img-fluid{display: block;
  margin: 0 auto;}


.bg-rouge > *, .bg-rouge .icon-with-paragraph >*,.bg-noir > *,.bg-noir .icon-with-paragraph >*{color: #ffffff !important;}
.bg-rouge a, .bg-noir a, .bg-rouge .icon-with-paragraph a{color: #386C2C !important;}
.bg-rouge a.btn-white{color:#FF0404 !important;}


.bg-blanc h2,.bg-blanc h3,.bg-blanc h4,.bg-blanc h5{color: #FF0404 !important;}

.bg-rouge a, .bg-noir a, .bg-rouge .icon-with-paragraph a{color: #ffffff !important;}
.bg-rouge a.btn-white{color:#FF0404 !important;}

.text-rouge, .btn.text-rouge {color: #281993;}


h1.bg-rouge, h2.bg-rouge, h3.bg-rouge, h4.bg-rouge, h5.bg-rouge, h6.bg-rouge,
h1.bg-noir, h2.bg-noir, h3.bg-noir, h4.bg-noir, h5.bg-noir, h6.bg-noir,h6.bg-verf{color:#fff !important;}

.home section#N3 {background-position: bottom;background-size: 100% !important;background-repeat: no-repeat;}



h6 {
    font-size: 15px;
    line-height: 24px;
}


/* PAGE MAINTENANCE */

    




/* HEADER */
    .logged-in nav.navbar{margin-top: 32px;}
    .header-bg-image h1{color: #ffffff;}
    
    @media (min-width: 1024px){
        .header-bg-image h2 {font-size: 35px;line-height: 38px}
    }
    @media(max-width: 991px) {
        nav.navbar.bootsnav .navbar-nav {background-color: #FF0404;}
    }

    header a.logo img {max-height: 35px;width: 145px;}


    header.header-appear nav.header-bleu, header.sticky nav.navbar-fixed-top.header-dark, header.sticky nav.navbar-scroll-fixed-top.header-dark, header.sticky nav {
    background-color: #FF0404;
    }
    header.sticky nav.navbar.white-link .navbar-nav > li > a:hover, header.sticky nav.navbar.bootsnav.white-link ul.nav > li > a:hover {
    color: #198754;
    }
    .dropdown-toggle i.fas.fa-angle-right {margin-left: 6px;}
    nav.navbar.navbar-default.navbar-fixed-top ul.nav > li > a, 
    nav.navbar.navbar-default.navbar-top ul.nav > li > a{font-family: 'Roboto', sans-serif;font-weight: 500; font-style: normal;margin:0 10px;font-size: 14px;}

/*    nav.navbar{background-color: #ffffff;}*/
    li.active a {color: #198754 !important;font-weight: 500;}
    ul.sub-menu li a, ul.dropdown-menu li a {color: #ffffff !important;}
    ul.sub-menu li.active a, ul.dropdown-menu li.active a {color: #d13047 !important;}
    ul.sub-menu {list-style-type: none;}
    ul.sub-menu li:before {content: '- ';margin-left:-10px;}
    ul.sub-menu li{margin-left: 21px;font-size: 14px;line-height: 18px;}
 



/* ACCUEIL */

    
    @media(max-width: 767px) {
        .video a > img{width:90px} .video a:hover > img{width:70px}
        .icon-abc {max-width: 92px !important;margin-top: 17%;;}
        .h-100 {height: 84% !important;}
        .header-bg-image h2 {font-size: 28px;line-height: 34px;}
    }
    @media(max-width: 991px) {
        .video a > img{width:90px} .video a:hover > img{width:70px}
    }
    @media(min-width: 991px) {
        .video a > img{width:140px} .video a:hover > img{width:120px}
        .icon-abc {max-width:113px;}
    }
   
    .video-responsive { 
        overflow:hidden; 
        padding-bottom:56.25%; 
        position:relative; 
        height:0;
        }

        .video-responsive iframe {
        left:0; 
        top:0; 
        height:100%;
        width:100%;
        position:absolute;
        }

@media (max-width: 1199px) {
    /* Zone 1 - avec titre */
    
}


    .text-2col {
      columns: 2 300px; /* 3 colonnes d’au moins 300px */
      column-gap: 125px;
    }
    .text-3col {
      columns: 3 300px; /* 3 colonnes d’au moins 300px */
      column-gap: 60px;
    }
    @media(min-width: 991px) {
        .break-column {
          break-before: column; /* Force le début de cet élément dans la colonne suivante */
        }
        .vertical-titre {
        writing-mode: vertical-lr;
        text-orientation: inherit;
        transform: rotate(180deg);
        white-space: nowrap;
        text-align: end;
        }
        .vertical-titre h1{margin:0}

    }




/* Slider logo  */
 .logo .swiper-slide img {
  padding: 30px;
  height: 162px;
  } 
   
  .swiper-wrapper {
      display: flex !important;
  }
  .swiper-slide {
      width: auto !important;
      opacity: 1 !important;
  }
  .swiper-pagination{position: relative;}


/* FOOTER  */
    .footer-logo {max-height: 150px;}
    footer {padding-top: 2%;}
    footer h3 {
      font-size: 29px !important;
      line-height: 23px !important;
      color: #ffffff !important;
    }
    footer, footer a{color: #ffffff;}
    footer a:hover, .social-icon-style-8 a:hover{color: #408930 !important;}
    footer .signature{font-weight: 300;}
    .gip-members{margin-top:60px;}
    .gip-members a img{height:54px; width: auto !important;}


    .medium-input, .medium-textarea, .medium-select select{box-shadow: 4px 5px 10px #ebebeb;border:none;}
    .form-control{background-color: #fffffffff8c;}
    .input-group .required-error, 
    .input-group .required-error + .input-group-btn button, 
    .input-group .required-error + .input-group-btn a.btn, 
    .input-group .required-error+.input-group-append > .btn,
    .input-group .required-error{   border: 1px solid #ECCF4D !important;}
    form.wpcf7-form.sent .wpcf7-response-output {display: block !important;}    



/* Page structures */
section#structures-liste, section#equipe-liste{
    background-repeat: repeat-y;
    background-size: contain;
}
section#structures-liste >* {color:#fff;}


/* Equipe */
    .post-details p {
        font-size: 16px;
        line-height: 21px;
    }
    .post-details p {
        font-size: 16px;
        line-height: 21px;
    }


    .post-details h3 {
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-weight: 800;
    }
    .blog-content .blog-post{height: 570px !important;}
    .single-post h1 {font-size: 29px;}
    .lien-modal {margin-top: 25px;}
    .lien-modal a.btn-medium {padding: 0px 6px;}





/* .blog-content .post-details a{color: #ffffff;cursor:grab;}*/
    .blog-content .blog-post {height: 350px;}
    .banner-style3 .bg-extra-dark-gray {background-color: #230d4a;}
    .mfp-bg, .my-mfp-zoom-in.mfp-ready.mfp-bg, .my-mfp-slide-bottom.mfp-ready.mfp-bg {background:#292090;opacity: 0.93;}




/* Modal */

    .page-template-page-medialab .mfp-bg, 
    .page-template-page-medialab .my-mfp-zoom-in.mfp-ready.mfp-bg, 
    .page-template-page-medialab .my-mfp-slide-bottom.mfp-ready.mfp-bg,
    .page-template-page-equipe .mfp-bg,
    .page-template-page-equipe .my-mfp-zoom-in.mfp-ready.mfp-bg,
    .page-template-page-equipe .my-mfp-slide-bottom.mfp-ready.mfp-bg{
        opacity: 0.93 !important;
        background: color(srgb 0.99 0.98 0.93 / 0.83) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }



    .modal-popup-main p {
        line-height: 1.4rem;
        text-align: left;
        font-size: 1.1rem;
        text-align: center;
    }

    p.noir a.post-edit-link {
    color: #000;
    font-size: 10px;
    }






.btn.btn-transparent-dark-gray {
    background: #fff;
    border-color: #fff;
    color: #232323;
}

    .btn.btn-dark-gray {
        background: #ffffff;
        border-color: #fff;
        color: #212529;
        }
    .btn.btn-dark-gray:hover, .btn.btn-dark-gray:focus {
        background: transparent !important;
        color:#1B344D;
    }
    input, textarea, select {
        border: none;
        background-color: #f9f8f8;
        border-bottom: 5px solid #ffffff !important;
        text-transform: uppercase !important;
        padding: 11px 9px 5px 9px;
        border-radius: 10px;
    } 
    input[type="button"]:focus, input:focus, textarea:focus, select:focus, .form-control:focus, .btn.focus, .btn:focus{background: #dfeef3 !important;    box-shadow: 4px 5px 10px #ebebeb;}
    input::placeholder, textarea::placeholder, select::placeholder{color: #000 !important;} 


    .opacity-light {opacity: 0.1;}
    #N1 h6{font-size: 17px;line-height: 0px;font-family: 'Roboto', sans-serif;font-weight: 300 !important;color: #f1ceb2;}




/* Page projets  */
        .page-template-page-projets .blog-content .blog-post {
            height: 640px !important;
        }

/* VIDEO */
    /* Styles CSS pour rendre la vidéo responsive */
      .video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* Ratio 16:9 (56.25 = 9/16 * 100) */
      }
      .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }




/* MAP */
/* SECTION MAP  */
    #map {
      height: auto;
      overflow: hidden;
      position: relative;
      -webkit-transition: height 0.2s ease-out;
      transition: height 0.2s ease-out;
      padding: 0;
    }
    #map #google-map {
      position: relative;
    }
    #map #google-map #map-canvas {
      height: 550px;
    }




/* Custom ADMIN    */
#adminmenuwrap div#custom_dashboard_widget{font-size:18px;}

#dashboard-widgets .postbox .inside {
    background-color: red !important;;
}
body.login {
    background-color: #FF0404!important;
    background-size: cover !important;
}





/* FOOTER */

@media (max-width: 768px) {
    .gip-members a img {height: auto;max-width: 80%;}
}