body, html { 
    --ifsb-white-color: #ffffff;
    --ifsb-black-color: #000000;
    --ifsb-yellow-color: #FFD25F;
    --ifsb-green-color: #8bbf18;
    --ifsb-blue-color: #009de0;
    --ifsb-red-color: #d55d06;
    font-family: 'Rubik'; font-size: 16px; font-weight: normal; font-style: normal;
    overflow-x: hidden;
}

.bkgjaune { background-color: var(--ifsb-yellow-color); }
.bkgvert { background-color: var(--ifsb-green-color); }
.bkgbleu { background-color: var(--ifsb-blue-color); }
.bkgrouge { background-color: var(--ifsb-red-color); }

header { position: relative; overflow: visible; margin-top:1rem; }
header .borderBYellow { border-bottom: 4px solid var(--ifsb-yellow-color); }
header .borderBWhite { border-bottom: 4px solid #fff; }
header .borderBYellow, header .borderBWhite { position:relative; top:4px; }
header .headerLogo { display: flex; align-items: center; padding-bottom: 1.2rem; }
header .headerLogo img { margin-right: 1.2rem; }
header .headerLogo h1, header .headerLogo span { font-size: 1.5rem; font-weight: 500; line-height: 1.8rem; }
header .headerNavbar { padding-bottom: 1.2rem; }
header .headerNavbar a { color:#000; text-decoration: none; font-size: 1.1rem; font-weight: 300; text-transform: uppercase; }
header .headerNavbar a:hover { color:#000; text-decoration: underline; }
header .navBarRegist, header .navBarConnex, header .navBarSearch, header .navBarLang { display:flex; align-items: center; justify-content: end; white-space: nowrap; }
header .navBarRegist img, header .navBarConnex img, header .navBarSearch img, header .navBarLang img,
header .navBarRegist svg, header .navBarConnex svg, header .navBarSearch svg, header .navBarLang svg { width: 20px; }
header .formulaire_recherche { width:90%; }
header .formulaire_recherche input { height: 34px; font-size: 0.8rem; width: calc(100% - 34px); padding: 0px 15px; }
header .formulaire_recherche button { height: 34px; width: 34px; padding: 5px 0px; }
header .formulaire_recherche input, .formulaire_recherche input:hover, .formulaire_recherche input:focus { border: 1px #000 solid; outline: 0; }
header .formulaire_recherche button { border: 1px #000 solid !important; background-color: #000 !important; color: var(--ifsb-yellow-color) !important; border-radius: 0px;  }
header .formulaire_recherche button:hover, .formulaire_recherche button:focus { border: 1px #000 solid !important; background-color: var(--ifsb-yellow-color) !important; color: #000 !important; border-radius: 0px;  }
header .formulaire_menu_lang { display: inline-block; margin-right: 10px; }
header .formulaire_menu_lang select { height: 34px; border: 1px solid black; padding: 5px 28px 5px 5px; background: none; text-transform: uppercase; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
header .formulaire_menu_lang select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 11px) calc(1rem + 2px), calc(100% - 6px) calc(1rem + 2px), calc(100% - 1.5rem) 0.5rem; background-size: 5px 5px, 5px 5px, 1px 1.5rem; background-repeat: no-repeat; }
header .formulaire_menu_lang select:focus { background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 6px) 1rem, calc(100% - 11px) 1rem, calc(100% - 1.5rem) 0.5rem; background-size: 5px 5px, 5px 5px, 1px 1.5rem; background-repeat: no-repeat; border-color: #FFD25F; outline: 0; }
header .formulaire_menu_lang select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
header .rowLine { border-bottom: 4px solid var(--ifsb-yellow-color); }

nav { margin:1rem 0em; padding:0rem; z-index: 1000; overflow: visible;  }
nav .active { font-weight: bold; background-image: url('../img/trapeze-jaune.png'); background-position: left; background-repeat: no-repeat; background-size: contain; }
nav .nav-link { font-size: 1.4rem; color: #000; }
nav .nav-link:hover { color: #000; text-decoration: underline; }
nav .nav-item:first-of-type { text-align: left; }
nav .nav-item:last-of-type { text-align: right; }
nav #navbarIFSB { position:relative; right: -12px; }
nav ul.sous-menu li a { display: block; color: white !important; background: none; font-size: 1.4rem; padding: 5px 20px; line-height: 2.5rem; margin-bottom: 0; border-bottom: 2px solid transparent; overflow: hidden; text-overflow: ellipsis; }
nav ul.sous-menu li a:hover, nav ul.sous-menu li a:active, nav ul.sous-menu li a:focus { color: #d38312 !important; background: none; text-decoration: none; border-bottom: 2px solid #FFD25F; }
nav ul.sous-menu { display: none; padding: 0; position: absolute; z-index: 5; top: 60px; left: -20px !important; text-align: left; background-color: #000; min-height:46px; margin-bottom: 0px; white-space: nowrap; min-width: 130px; max-width: 600px; }
nav .dTrapjaune { position: absolute; }
nav .iTrapjaune { max-width: 10px; position: relative; top: -10px; left: -12px; }
nav .navbar-toggler:focus { box-shadow: none; }

footer { background-color: #000; color:#fff; padding: 2.5rem 0rem; }
footer a { color:#fff; text-decoration: none; }
footer a:hover { color:#fff; text-decoration: underline; }
footer h3, footer h4 { text-transform: uppercase; font-size: 1.2rem; margin-bottom: 2rem; }
footer .liensDirects h4 { border-bottom: 4px solid var(--ifsb-yellow-color); padding-bottom: 0.8rem; }
footer .suivezNous h4 { margin-right:0.8rem; display: inline-block; }
footer .suivezNous .social img { height: 30px; width: 30px; }
footer .logo-construction21 { margin-top:2rem; }
footer .rowCopyr { font-size: 0.8rem; margin-top:2rem; }
footer .footer-coord, footer .liensDirects a { font-weight: 300; font-style: normal; font-size: 0.9rem; }

@media (max-width: 767.9px) { /* X-Small devices (phones, 0px and up) + Small devices (landscape phones, 576px and up) */
    /*footer { background-color: #AA5454; }*/
    footer .logo-construction21 { margin-top:0rem; }
    footer .suivezNous h4,
    footer .liensDirects h4 { margin-top: 2rem; }
    header .headerLogo h1, header .headerLogo span { font-size: 1.2rem; line-height: 1.2rem; }
    header .headerLogo { justify-content: center; }
    header .headerLogo a { margin-left: 50px; }
    header .headerNavbar { margin-top: 1.2rem; }
    header .navBarRegist { justify-content: start; }
    header .navBarConnex { justify-content: end; }
    header .navBarRegist img, header .navBarConnex img, header .navBarSearch img, header .navBarLang img,
    header .navBarRegist svg, header .navBarConnex svg, header .navBarSearch svg, header .navBarLang svg { width: 15px; }
    nav { position: absolute !important; top: 0px; margin: 12px 0px; width: 100%; }
    nav li a { text-align: center; }
    nav .nav-link { font-size: 1.2rem; }
    nav .navbar-nav { background-color: #fff; }
    nav .navbar-toggler { padding: 8px; }
    nav ul#menu-lifsb { left: -20px !important; }
    nav ul#menu-formations { left: -20px !important; }
    nav ul#menu-projets { left: -190px !important; }
    nav ul.sous-menu li a{ font-size: 1rem; padding: 5px 10px; }
}

@media (min-width: 768px) and (max-width: 991.9px) { /* Medium devices (tablets, 768px and up) + Large devices (desktops, 992px and up) */
    body, html { font-size: 15px; }
    /*footer { background-color: #545400; }*/
    header .headerLogo h1, header .headerLogo span { font-size: 1rem; line-height: 1rem; }
    header .navBarRegist img, header .navBarConnex img, header .navBarSearch img, header .navBarLang img,
    header .navBarRegist svg, header .navBarConnex svg, header .navBarSearch svg, header .navBarLang svg { width: 12px; }
    header .headerNavbar a { font-size: 0.8rem; }
    nav .nav-link { font-size: 1.2rem; }
    nav ul.sous-menu li a{ font-size: 1.2rem; padding: 5px 10px; }
    footer .suivezNous h4 { margin:0rem; display: block; }
}

@media (min-width: 992px) and (max-width: 1199.9px) { /* Medium devices (tablets, 768px and up) + Large devices (desktops, 992px and up) */
    body, html { font-size: 15px; }
    /*footer { background-color: #5454AA; }*/
    header .headerLogo h1, header .headerLogo span { font-size: 1.2rem; line-height: 1.8rem; }
    header .navBarRegist img, header .navBarConnex img, header .navBarSearch img, header .navBarLang img,
    header .navBarRegist svg, header .navBarConnex svg, header .navBarSearch svg, header .navBarLang svg { width: 15px; }
    header .headerNavbar a { font-size: 1rem; }
    nav .nav-link { font-size: 1.2rem; }
    nav ul.sous-menu li a{ font-size: 1.2rem; padding: 5px 10px; }
    footer .suivezNous h4 { margin:0rem; display: block; }
}

@media (min-width: 1200px) { /* X-Large devices (large desktops, 1200px and up) + XX-Large devices (larger desktops, 1400px and up) */
    /* header { background-color: #54AA54;} */
}