/* @@@@@@ couleurs du site  @@@@@@
    ###################################
    -> marron : #5A442B
    -> bège : #EBE0D0;
    -> alert/ exergue : #C58637;
    -> marron-logo: #81471C
    -> noir/gris : #4A4A4A;
    ###################################


    /* @@@@@@ fonts @@@@@@ */
    @import 'fonts/fonts.css';
    @import 'svg.css';

    html body {color: #4A4A4A;text-align: left;}
    html {  scroll-behavior: smooth; /* SCROLLEFFECT ANCRE DANS LA PAGE */ }
    .view {margin-top: 100px;}


    /* NAV ------------------- */
    nav {background: #fff;z-index: 1;}
    nav.haut {border-bottom: 1px solid #81471C;}
    nav #brand:hover {
        animation: bounce;/* @keyframe declaration lié à animate css */
        animation-duration: 2s;/* durée */
        }

    nav .menu {position: relative;width: 100%;}
    nav #menu { height: 80px; display: flex; align-items: flex-end; justify-content: flex-end; align-self: center;margin: 0px; padding: 0px; }

    nav #menu li { margin: 0px 0px; padding: 0px; cursor: pointer; transition: all 0.3s ease-out; }
    nav #menu li:hover { background: #C58637; border-radius: 6px; }
    nav #menu li a:hover { color: #FFF; }

@media (max-width: 768px)  { .menu { display: none; } }

    /* apparition icon hamburger sur mobile  ------------------- */
    #hamburger { position: absolute; right: 40px; top: 40px; z-index: 999; width: 40px; height: 40px; cursor: pointer;
                /* animation */
                transition: all 0.3s ease-out; visibility: hidden; opacity: 0; }

    #hamburger .line { height: 3px; background: #81471C; margin: 6px auto; backface-visibility: hidden; }
    #hamburger.active #one { transform: rotate(45deg) translateX(3px) translateY(3px); }
    #hamburger.active #two { opacity: 0; }
    #hamburger.active #three { transform: rotate(-45deg) translateX(10px) translateY(-12px); }

@media (max-width: 768px) { #hamburger { visibility: visible; opacity: 1; } }

    /* apparition menu sur mobile  ------------------- */
    .mobile-menu { display: flex; z-index: 99; position: fixed; top: 30px; background: #81471C; width: 100%; height: 100%; visibility:hidden; opacity: 0; transition: all 0.3s ease-out; }
    .mobile-menu .mobile-menu__items {  display: flex; align-content:space-between; flex-direction:column; justify-content:center;align-self:center;align-items:center;margin:auto; }
    .mobile-menu .mobile-menu__items li {border-bottom: 2px solid transparent;display:block;flex-grow: 4; flex-shrink: 3;align-self:center;font-size: 35px; font-weight: bold; cursor: pointer; transition: all 0.3s ease-out; }
    .mobile-menu .mobile-menu__items li:hover { border-bottom: 2px solid #C58637; }
    .mobile-menu .mobile-menu__items li a { color: #FFF; }
    .mobile-menu .mobile-menu__items li a:hover { opacity: 0.7;transition: all 0.3s ease-out;color: #C58637 !important; }
    .mobile-menu.active { visibility: visible; opacity: 0.99; }

@media (min-width: 768px) { .mobile-menu { visibility: hidden !important; } }

    /* structure ------------------- */ 
    section, header, footer { font-family: 'Muli Regular'; font-style: normal; }
    cite { color: #C58637; font-size: 14px; }

    h1 { color: #5A442B; font-size: min(max(52px, 4vw), 72px)!important; }
    h2 { color: #5A442B; font-size: min(max(42px, 5vw), 52px)!important;}
    h3 { color: #5A442B; font-size: min(max(22px, 4vw), 28px)!important;}
    h4 { color: #5A442B; font-size: min(max(22px, 4vw), 28px)!important;line-height: min(max(31px, 4vw), 35px)!important;}
    h5 { color: #5A442B; font-size: min(max(22px, 4vw), 24px)!important;line-height: min(max(28px, 3vw), 35px)!important; }
    p, .menu li, .menu-bas li, .liste-collections li, label, input, textarea { font-size: min(max(16px, 1.4vw),18px)!important; line-height: min(max(24px, 2.6vw), 28px)!important; }


    ul li.list-group-item { border: 0px; border-bottom: 1px solid #eee; }
    ul li a { color: #4A4A4A; }
    ul li .list-group-item a { display: block; padding: 5px 0px; } 
    li a:hover { color: #C58637; }

    /*HR*/
    hr { background-color: #C58637; padding: 1.5px; width: 100px; border: 0;display: block; clear: both; margin: auto; }
    hr.gauche { margin-left: 0px; margin-top: 100px; }

    /*FOOTER*/
    footer { background: #5A442B; }
    footer a { color: #C58637!important; }
    footer p.ml-brun { line-height: 130%!important; padding-top: 20px; color: #C58637;letter-spacing: 0.5px; font-size: min(max(9px, 2vw), 12px)!important; }
    footer p, footer li { margin: 0; padding: 0; color: #FFFFFF; }
    footer p.ml { font-size: min(max(9px, 2vw), 12px)!important; line-height:14px; padding-top: 20px; color: #fff;line-height: 130%!important; }

@media (max-width: 768px) {
    footer p.ml { text-align:center; } 
    footer p.ml-brun { text-align:center;}
}


    /* BG/BTN/LIEN/IMG PERSONNALISATION DES ÉLÉMENTS BOOTSTRAP------------------- */ 


    /*BTN*/
    .btn.btn-circle { border-radius: 50px; }
    .btn.btn-outline { background-color: transparent; } 
    .btn-primary { background: #C58637!important; color:#FFF!important;}

    .btn-soclage { color:#FFF!important; }
    .btn-font:hover { font-family: 'Muli Regular'; font-style: normal; color: #5A442B; background: #EBE0D0; }

    /*BG*/
    .bg-custom { background: #C58637; }
    .bg-white { background: #FFFFFF; }
    .bg-primary { background: #5A442B!important; } .btn-font { font-family: 'Muli Regular'; font-style: normal;
    letter-spacing: 0.5!important; }

    /*IMG*/
    .img-thumbnail { border: none; max-width: 70%; }
    .img-fluid { max-width: 100% \9; }
    .card { border: none; }
    .img-rounded {
       -moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
            }


    /* @@@@@@ section video @@@@@@ */
    .video-background { position: relative; background-color: black; height: 100%; min-height: 20rem; width: 100%; overflow:hidden; }

    .video-background video { 
    object-fit: cover; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform:
    translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%)
    translateY(-50%); }

    .video-background .container-jumbo { position: relative; z-index: 3; }
    .video-background .container-jumbo p, .video-background .container-jumbo h1 { color: #FFF; }
    .video-background .container-jumbo hr { background-color: #FFF; padding: 1px; width: 100px; border: 0; display: block;clear: both; margin: 40px 0px; }
    .video-background .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%;background-color: black; opacity: 0.5; z-index: 2; }

@media (pointer: coarse) and (hover: none) { 
    header { background: url('imgs/video-intro.jpg') black no-repeat center center scroll; }
    header video { display: none; } 
    }




    /*ID*/
    #contact { background: #EBE0D0; }
    #box-merci {display:none; }


    /* @@@@@@ parallax @@@@@@ */
    .parallax-collaboration { 
            /* The image used */
            background-image: url("imgs/affiche-collaboration.jpg");
            /* Set a specific height */
            height: 400px;
            /* Create the parallax scrolling effect */ 
            background-attachment: fixed; background-position: center;
            background-repeat: no-repeat; background-size: cover; 
            }

    .parallax-contact { 
        /* The image used */ 
        background-image: url("imgs/socle-visuel-contact.jpg");
        /* Set a specific height */
        height: 200px;
        /* Create the parallax scrolling effect */ 
        background-position: center; background-repeat: no-repeat;background-size: cover; }

        
        /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax-collaboration { background-attachment: scroll; }
    }


    /* @@@@@@ background @@@@@@ */

    .icon { width: 70%; height: auto; }
    .adresse { border-left: 3px solid #C58637; padding-left: 40px; }
    .visuel-contact { width: 90%; height: auto; float: right; }



    /* @@@@@@ card-liste pour la page collaboration @@@@@@ */

    .collaboration .bd-placeholder-img img { width: 80%; height: 10vh; object-fit: contain; display:none;}
    .collaboration .card-header { margin: 0; padding: 10px; background: none; border: none; border-top: 1px solid #EBE0D0; }
    .collaboration .card-header h4 { margin: 0; padding: 0px; font-weight: 700; font-size: 22px!important; }
    .collaboration h3 { padding: 20px 0px; font-weight: 700; }
    .collaboration .card-body li { list-style-type: disc!important; }
    .collaboration .card-body li:before { content: "\2022\00A0"; }
    .collaboration .card-body { margin: 0; padding: 10px 20px; }
    .collaboration .card-title { margin: 0px; padding: 0px; }
    .collaboration .card-title h5 { margin: 0px; padding: 0px; }
    .collaboration .blockquote:before { content: "\2014\00A0"; }

    .badge-primary { background: #C58637; }


@media (max-width: 520px) { 
    .col-xs-12.text-right, -xs-12.text-left { text-align: center; }
    .card-body { margin: auto; }
    .card-img-top { width: 60%; height: auto; object-fit: cover; margin: auto; } 
    }


    /* @@@@@@ menu sur le côté / page collaboration @@@@@@ */
    
    .menu-sticky { background: #EBE0D0; }
    .menu-sticky .list-group-item { display: block; padding: 0px; }
    .menu-sticky .list-group-item a { display: block; padding: 10px; }


    /*fixe le menu */
    #nav-sticky { top: 110px; z-index: 9999 !important; position: sticky; border: 1px solid #EBE0D0; }

@media (max-width: 520px) { 
    #nav-sticky { position: none; } 
   .menu-sticky .list-group-item a { display: block; padding: 5px;font-size:16px;line-height:120%!important; }
    }



    /* BANDEAU-RGPD-INFOS */
    .bg-rgpd { background: #EBE0D0; color: #C58637;}
    .bg-rgpd p {font-size: 13px!important;line-height:130%!important;}
    /* .brgpd {display:none;}*/


/* iframe video */
iframe> body {background-color: #000}