/* Couleurs et polices générales */
a, a:hover {color: #FFF; text-decoration: none;}
.background-principal {background-color: #00588D;}
.background-secondaire {background-color: #174D68;}
.background-gris {background-color: #4A4A4A;}
.background-gris-clair {background-color: #F2F2F2;}
.background-white {background-color: #FFF; color: #00588D;}
.background-white a:not(.btn) {color: #00588D; text-decoration: underline;}
.background-jaune {background-color: #FEAA00;color: #FFF;}
.bg-blur {background-color: rgba(255,255,255,0.1);}
h4.bg-blur{background-color: rgba(255,255,255,0.3);}

.border-bottom-light {border-bottom: 1px solid #9db3c1;}
.text-color-blue {color: #00588D; }
.text-color-black, .text-color-black a,  .text-color-black a:hover {color: #000;}
.text-color-white {color: #FFF;}
.text-color-jaune {color: #FEAA00;}
.text-bleu-clair {color: #8fb6cd; }
.text-gris-clair {color: #919191;}

.small-text {font-size: 0.75rem;}
h3 {font-weight: bold;}

.fit-cover {width: 100%; object-fit: cover;}

.valign-middle { position : relative; top: 50%; transform: translateY(-50%);}
.pos-relative {position: relative;}

.filtre_black {position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.6);}
.filtre_bleu {position: absolute; top: 0; width: 100%; height: 100%; background-color: #00588D; mix-blend-mode: color;}
/* surcharges bootstrap */
.btn {border-radius: 15px; }
.btn-lg {border-radius: 25px;}
.btn-primary, a.btn-primary {background-color: #FFF; color: #00588D; font-weight: bold; border: 2px solid #FFF; text-decoration: none;}
.btn-primary:hover, .btn-primary:focus {background-color: #00588D; color: #FFF; border: 2px solid #00588D;}
.background-white .btn-primary {background-color: #00588D; color: #FFF; font-weight: bold; border: 2px solid #FFF;}
.background-white .btn-primary:hover, .background-white .btn-primary:not(:disabled):not(.disabled).active, .background-white .btn-primary:not(:disabled):not(.disabled):active {background-color: #FEAA00;}
.background-white .btn-primary:not(:disabled):not(.disabled).active, .background-white .btn-primary:not(:disabled):not(.disabled):active {border-color: #FEAA00;}

.background-white .btn-primary-inverse {background-color: #FEAA00; color: #FFF; font-weight: bold; border: 2px solid #FFF;}
.background-white .btn-primary-inverse:hover, .background-white .btn-primary-inverse:not(:disabled):not(.disabled).active, .background-white .btn-primary-inverse:not(:disabled):not(.disabled):active {background-color: #00588D;}
.background-white .btn-primary-inverse:not(:disabled):not(.disabled).active, .background-white .btn-primary-inverse:not(:disabled):not(.disabled):active {border-color: #00588D;}


.btn-primary:active, .btn-primary:focus {box-shadow: none;}
.btn-bleu {background-color: #00588D; color: #FFF; font-weight: bold; border: 2px solid #00588E;}
.btn-bleu:hover {background-color: #00588D; color: #FFF; font-weight: bold; border: 2px solid #00588E;}
.btn-secondary {background-color: #FEAA00; color: #FFF; font-weight: bold; border: 2px solid #FEAA00;}
.btn-secondary:hover {background-color: #FFF; color: #00588D; font-weight: bold; border: 2px solid #FFF;}
.btn-white {background-color: #FFF; color: #00588E; font-weight: bold; border: 2px solid #FFF;}
.btn-white:hover {background-color: #4A4A4A; color: #FFF; font-weight: bold; border: 2px solid #4A4A4A;}
.btn-link {color: #00588D;}
.btn-outline-primary {border-color: #00588E; color: #00588E;}
.btn-outline-primary:hover {border-color: #00588E; background-color: #00588E; color: #FFF;}
.btn-rond {width: 40px; height: 40px; padding: 10px; line-height: 3px; border-radius: 50%; font-weight: bold;}
.btn-arrondi {border-radius: 30px;}

.bl-jaune {border-left: 1px solid #FEAA00; }

.accordion .card {border: none; border-radius: 0px;}

.separateur-bleu {border: none; border-top: 2px solid #00588E; margin: 0; padding: 0; height: 0px;}

.custom-switch .custom-control-label::after {background-color: #FFF;}
.custom-control-label::before {background-color: #00588E; border: 1px solid #FFF;}
.custom-control-input:checked~.custom-control-label::before {background-color: #FEAA00; }

@media (min-width: 1600px)
{
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1500px; }
}

@media screen and (max-width: 1600px)
{
    .container {max-width: 100%;}
}

/* éléments generiques */
ul.horizontal-list {list-style-type: none;}
ul.horizontal-list li {display: inline; margin-left: 10px;}

.bottom-description {position: absolute; bottom: 0px; padding: 15px; width: 100%; background-color: rgba(0, 0, 0, 0.3);}
.bottom-description h3 {margin-bottom: 0;}
.bottom-description p {line-height: 1.0em; font-size: 0.9em;}
.bottom-description p:last-child {margin-bottom: 0;}

.background-alpha {background-color: rgba(0, 0, 0, 0.3); color: #FFF;}

.effet-scale {transition: .2s ease;}
.effet-scale:hover {transform: scale(1.04); transition: .2s ease;}
.effet-scale-max:hover {transform: scale(1.2); }
.effet-scale.valign-middle:hover {transform: translateY(-50%) scale(1.08); transition: .2s ease;}

/* Les inputs text */
input.form-control, textarea.form-control, select.form-control {
    border-radius: 15px;
    border: 1px solid #00588E;
    padding: 6px 10px;
    margin: 5px 5px;
    background-color: transparent;
    color: #00588E;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 10px;
}

input.form-control::placeholder, textarea.form-control::placeholder {
    color: #00588E;
    opacity: 1;
  }

/* modal personnalisées */
.modal .modal-darkness .modal-content {background-color: rgba(0,0,0, 0.7); color: #FFF; border: 3px solid #FFF;}
.modal .modal-darkness .modal-header {border: none; position: relative;}
.modal .modal-darkness .modal-header h5 {font-size: 2.0rem; font-weight: bold; text-align: center; width: 100%;}
.modal .modal-darkness .modal-header button.close {color: #FFF;}
.modal .modal-darkness .modal-body {font-size: 1.0rem; padding: 0 30px; }
.modal .modal-darkness .modal-header .ico-modal {width: 80px; position: absolute; left: -30px; top: -30px;}

/* paramètres du body */
body {padding-top: 0px; font-family: 'Quicksand', sans-serif;}

/* Navigation principale */
#navbar-principale {background-color: #00588D ;/*background: rgba(6,6,6,0.1) 0% 0% no-repeat padding-box; backdrop-filter: blur(29px); -webkit-backdrop-filter: blur(29px);*/ padding: 0;}
/*#navbar-principale .navbar-brand {}*/
#navbar-principale .nav-item {padding: 15px 15px 5px 15px;}
#navbar-principale .nav-link, #navbar-principale .nav-link:hover {color: #FFF; font-size: 1.0rem; font-weight: bold; padding-bottom: 3px;}
#navbar-principale .dropdown-menu {background-color: #FFF; color: #00588D; border-radius: 0; border: 1px solid #5390b7; padding: 0; font-size: 0.8rem;}
#navbar-principale .dropdown-menu label {padding: 5px 15px; margin: 0;}
#navbar-principale .dropdown-menu .dropdown-item {padding: 5px 15px; font-size: 0.8rem; color: #00588D;}
.dropdown-item.active, .dropdown-item:active {color: #FEAA00; background-color: #ddd;}
#navbar-principale .dropdown-menu strong {display: block;}
#navbar-principale .dropdown-menu .dropdown-item:hover strong {color: #FEAA00;}
#navbar-principale .fas {font-size: 2.0em;}
.dropdown-menu-2col .col:first-child {border-right: 1px solid #bfd5e3; padding-right: 0;}

@media (min-width: 1024px) {
.dropdown-menu-2col {width: 400px;}
}
@media (min-width: 400px) {
    .dropdown-menu-2col .col:last-child {padding-left: 0;}
}
#navbarDropdownLanguage {padding-left: 0px; padding-right: 0;}
#navbarDropdownLanguage .badge {margin-top: -15px; font-size: 0.5em;}

.nav-item:hover {background-color: rgba(255,255,255,0.3);}
.dropdown-toggle::after {display: block; width: 6px; margin: 10px auto 0 auto; visibility: hidden;}
.nav-item:hover .dropdown-toggle::after {visibility: visible;}

.navbar-toggler {padding: 1.5rem .75rem;}
.navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon::before, .navbar-toggler .navbar-toggler-icon::after { content: ''; display: block; height: 4px;  width: 40px;position: relative;top: 0;bottom: 0;margin: 0;padding: 0;border: 0;border-radius: 2px;background-color: #FFF;  ;transition: width 0.5s, transform 0.5s;}
.navbar-toggler .navbar-toggler-icon::before { background-color: #FFF;  transform: translateY(-11px);}
.navbar-toggler .navbar-toggler-icon::after { background-color: #FFF;  transform: translateY(8px);}
.navbar-toggler:focus { outline: 5px auto#FFF;}

@media (max-width: 991px)
{
    #navbar-principale .nav-item {padding: 0 15px;}
    #navbar-principale .nav-link, #navbar-principale .nav-link:hover {padding-bottom: 0;}
    .dropdown-toggle::after {display: inline-block; width: 6px; margin: 15px 0 0 15px; visibility: visible;}

}
/* Pied de page */
footer {color: #FFF; padding-top: 50px; font-size: 1.0rem;}
footer h6 {font-size: 0.9rem; font-weight: bold;}
footer ul {list-style-type: none; padding: 0;}
footer a, footer .infos_footer {color: #9db3c1; font-size: 0.8rem;}
footer a:hover {color: #feaa00; text-decoration: underline;}


/* content */
#content {color: #FFF; /*padding-top: 65px;*/}


/* mise en page des sections et paragraphes */
section .container-fluid {margin: 0 -15px; width: calc(100% + 30px);}
.tuiles-blanches .mulitcol{margin-bottom: 30px;}
.tuiles-blanches .mulitcol .contenu_col {background-color: #FFF; color: #00588D; padding: 15px; height: 100%;}
.tuiles-blanches .cmulitcolol:first-child {padding-left: 0;}
.tuiles-blanches .cmulitcolol:last-child {padding-right: 0;}
.tuiles-blanches .mulitcol .contenu_col.has-illustration {position: relative; padding-left: 20%;}
.tuiles-blanches .illustration-multicol {position: absolute; width: 20%; left: 0; top: 50%; transform: translate(0, -50%); text-align: center;}
.tuiles-blanches .illustration-multicol img.mw-100 {max-width: calc(100% - 30px)!important;}
/* index */
#sectionCarousel {position: relative;/*background: transparent url(images/background-slider.jpg) top center no-repeat; background-size: cover; padding-bottom: 100px;*/}
#carouselAccueil {margin-bottom: 0px; }
.carousel-item {background-size: contain; position: relative; padding-bottom: 100px; min-height: 750px;}
.carousel-item .description h2 {font-size: 2.5rem; font-weight: bold; margin-bottom: 50px;}
.carousel-item .description {position: relative; padding-bottom: 30px; height: 100%; min-height: 550px;}
.carousel-item .description .content-description {position: absolute; top:50%; left: 0px; transform: translate(0, -50%); width: 60%; margin-left: 50%; padding-right: 20vw; font-size: 1.3rem; font-weight: bold;}
.carousel-item.item-video .description .content-description p {background-color: rgba(0, 0, 0, 0.5); padding: 10px; text-align: center;}
.carousel-indicators {bottom: 150px;}

.background-video {position: absolute; min-width: 100%; min-height: 100%; right: 0; bottom: 0;}

@media (max-width: 1280px) {
    .carousel-item .description .content-description {font-size: 1.0rem; }

}

#logo_principal {position: absolute; top: 100px; left: 15vw; width: 20vw;}
@media (max-width: 767px) {
    #logo_principal {display: none;}
    .carousel-item .description .content-description {/*position: absolute; bottom: unset; top: 10px;*/ width: 95%; margin-left: 0; padding-right: 0; margin: 0 15px;}
    .carousel-item .description h2 {font-size: 2.0rem;  margin-bottom: 10px;}
    .carousel-indicators {bottom: 170px;}
}
#liste_logos {/*height: 90px;*/ width: 100%;  position: absolute; z-index: 100; bottom: 40px; text-align: center;}
#liste_logos .ico {display: inline-block; margin: 0 15px; /*width: 90px; background-color: #FFF; height: 90px; border-radius: 50%;*/ padding-top: 15px; }
#liste_logos .ico img {height: 90px; /*width: 90%;*/}

.actu {height: 425px; overflow: hidden;}
.actu .img_actu {width: 100%; height: 63%; position: absolute; top: 0px; overflow: hidden; text-align: center;}
.actu .img_actu img {height: 100%; left: 50%; position: relative; transform: translateX(-50%);}
.actu .description {width: 100%; height: 37%; position: absolute; bottom: 0px;}
.actu:hover .img_actu {height: 100%; transition: .2s ease;}
.actu:hover .description {height: 0; transition: .2s ease; box-sizing: border-box;}
.actu:hover .description h3 {margin-top: 10px;}
@media(max-width: 767px)
{
    #liste_logos .ico img {height: 50px; /*width: 90%;*/}
    .actu {height: auto; overflow: visible;}
    .actu .img_actu {width: 100%; height: auto; position: relative; top: unset; overflow: visible; text-align: center;}
    .actu .img_actu img {width: 100%; height: auto; left: auto; position: relative; transform: none;}
    .actu .description {width: 100%; height: auto; position: relative; bottom: unset;}

}

#formation {font-size: 1.2rem;}
#formation h3 {font-size: 2.1rem; font-weight: bold; margin-bottom: 0;}
#formation h3 strong {font-size: 2.5rem;}
#formation .tile-content {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; position: relative; }
#formation .big-tail { height: 600px;}
#formation .big-tail h3 strong{ font-size: 3.5rem; text-transform: uppercase;}

#formation .little-tail {height: 285px;}
#formation .little-tail:first-child {margin-bottom: 30Px;}
#formation .tile-description {position: absolute; bottom: 0px; padding: 20px;}
#formation .tile-description p {margin-bottom: 0;}

#formation #liste-niveaux {padding: 0 15px;}
#formation .tile-niveau {color: #00588D; text-align: center; padding: 0; height: 170px; position: relative;}
#formation .tile-niveau .tile-niveau-content {padding: 10px; position: absolute; width: 100%; bottom: 0px; height: 100px;}
#formation .tile-niveau:nth-child(2) .tile-niveau-content { border-left: 1px solid #000; border-right: 1px solid #000; }
#formation .tile-niveau h3 {font-size: 1.5rem;  }
#formation .tile-niveau h4 {font-size: 0.9rem; font-weight: bold;}
#formation .tile-niveau p {display: none; /*height: 0px;*/ overflow: hidden;  font-size: 0.9rem; margin-bottom: 0;}
#formation .tile-niveau:hover {background-color: #00588D; color: #FFF; }
#formation .tile-niveau:hover .tile-niveau-content {top: 15px; height: auto; transition: .5s ease; /*margin-top: 20px;*/ /*transition: margin 5.2s ease;*/}
#formation .tile-niveau:hover h4 {font-weight: normal;}
#formation .tile-niveau:hover p { display: block; /*height: auto;*/ /*transition-delay: 5.5s;*/ }

@media(max-width: 1280px) {
    #formation .tile-niveau {height: 240px; }
    #formation .big-tail h3 strong{ font-size: 2.5rem; }
}

@media(max-width: 768px) {
    #formation .tile-content {margin-bottom: 15px; }
    #formation .tile-niveau  {margin-bottom: 15px; height: auto;}
    #formation .tile-niveau p {display: block;}
    #formation .tile-niveau .tile-niveau-content {height: auto; position: relative;}

    #formation .tile-niveau:nth-child(2) .tile-niveau-content { /*border-top: 1px solid #000; border-bottom: 1px solid #000;*/ border: none; }

    #formation .tile-niveau:hover {background-color:unset; color: unset; }
    #formation .tile-niveau:hover .tile-niveau-content {top: unset; height: auto; transition: unset; }


}

#comiteExcellence {text-shadow: 1px 0px rgba(0, 88, 141, 0.5);}

#partenaires .b-and-w img{-webkit-filter: grayscale(100%); filter: grayscale(100%); }
#partenaires .color-hover img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%); }
@media (min-width: 1200px) {
#partenaires #liste-partenaires img {max-height: 55px; max-width: 70px;}
}


/*--------------------------------------*/
/* Formation présentielle               */
/*--------------------------------------*/
#map-presentielle {position: relative;}
#map-presentielle object {width: 90%; /*margin-top: 5vh;*/ }
#formulaire-inscription-presentielle {margin: 0 3vw;}
#formulaire-inscription-presentielle h2 {font-size: 25px;}
#sessions_map {position: absolute; width: 90%; height: 100%;  top: 1.5rem; left: 50%; transform: translate(-50%, 0);  }
#sessions_map ul li {position: absolute; width: 6%; height: 12%; list-style-type: none; transform: translate(-50%, 0); background: transparent url(/images/map_marker.png) top center no-repeat; background-size: contain;}
#sessions_map ul li .desc_session {position: absolute; bottom: -40px; display: none; left: 50%; transform: translate(-50%, 0); width: 300px;}
#sessions_map ul li .desc_session h3 {font-size: 1.3rem; margin: 0;}
#sessions_map ul li.active, #sessions_map ul li:hover {background: transparent url(/images/map_marker_on.png) top center no-repeat; background-size: contain;}
#sessions_map ul li.active .desc_session, #sessions_map ul li:hover .desc_session {color: #feaa00; display: block;}

@media screen and (min-width: 992px) {
    #formulaire-inscription-presentielle {position: fixed; top: 180px; z-index: 100;}
}
/*--------------------------------------*/
/* Outils de formation                  */
/*--------------------------------------*/
#page-3 {font-size: 25px;}
#page-3 h1 {font-size: 75px; font-weight: bolder;}
#page-3 h2 {font-size: 60px; font-weight: bolder;}
#page-3 a.btn-primary, #page-3 button.btn-primary {color: #000;}
#page-3 a.btn-primary:hover, #page-3 button.btn-primary:hover {color: #FFF;}
#EnteteOutils {height: calc(100vh - 65px); min-height: 500px; color: #00588D;  }
#EnteteOutils h1, #EnteteOutils h2, #EnteteOutils h3, #EnteteOutils h4, #EnteteOutils h5{min-height: 100vh; color: #00588D; font-weight: bold!important; }

#EnteteOutils .container {padding-top: 30vh;}

#LogicielCompositesExpert {padding: 30px 0;}
#LogicielCompositesExpert .container {padding-left: 41vw; padding-right: 0; margin-bottom: 30px;}
@media screen and (min-width: 1600px)
{
    #LogicielCompositesExpert .container {padding-right: 5vw; }
}
@media screen and (max-width: 1024px)
{
    #LogicielCompositesExpert  {background-position: center 10px!important; background-size: 100vw!important; }

    #LogicielCompositesExpert .container {padding-left: 0; margin-top: 40vw;}

    #page-3 h1 {font-size: 45px; }
    #page-3 h2 {font-size: 30px; }

    #EnteteOutils {height: auto; min-height: auto;   }
    #EnteteOutils h1, #EnteteOutils h2, #EnteteOutils h3, #EnteteOutils h4, #EnteteOutils h5{min-height: auto;  }
    #EnteteOutils .container {padding-top: 0; padding-bottom: 40px;}


}
#Box1, #Box2, #Box3 {padding: 30px 0; color: #000;}
#Box1 a.btn-primary:hover, #Box2 a.btn-primary:hover, #Box3 a.btn-primary:hover {background-color: #4a4a4a; border-color: #4a4a4a;}


#Box1 .container, #Box2 .container, #Box3 .container  {padding-left: 41vw; padding-right: 0; margin-bottom: 30px;}
#Box1 h1, #Box1 h2, #Box1 h3, #Box1 h4, #Box1 h5, #Box2 h1, #Box2 h2, #Box2 h3, #Box2 h4, #Box2 h5, #Box3 h1, #Box3 h2, #Box3 h3, #Box3 h4, #Box3 h5{font-weight: bold!important; }

@media screen and (min-width: 1600px)
{
    #Box1 .container, #Box2 .container, #Box3 .container {padding-right: 5vw; }
}
@media screen and (max-width: 1024px)
{
    #Box1, #Box2, #Box3  {background-position: center 20px!important; background-size: 80vw!important; }

    #Box1 .container, #Box2 .container, #Box3 .container {padding-left: 0; padding-top: 50px; margin-top: 30vw;}
    #Box2 .container, #Box3 .container {padding-top: 80px;}

}

.contract-photo {position: absolute; bottom: 0px; left: 0px; font-size: 10px; font-style: italic;}
/*--------------------------------------*/
/*Pédagogie                             */
/*--------------------------------------*/
#page-4 h1, #page-4 h2 {font-size: 50px;  font-weight: bold;}
#page-4 .paragraphe { font-size: 25px; /*padding-left: 50%;*/ text-align: left; padding-top: 50px; padding-bottom: 30px; background-position: top left; background-repeat: no-repeat; background-color: transparent; background-size: contain;}
#page-4 .paragraphe:nth-child(even) {padding-left: 0; padding-right: 50%; text-align: right; background-position: top right;}
#page-4 #lien_catalogue {position: sticky; top: 150px; left: calc(100% - 150px); width: 150px; background-color: #FEAA00; color: #FFF; border: 1px solid #FFF; text-align: center; font-size: 1.3rem; line-height: 1.4rem; z-index: 200;}
#page-4 #lien_catalogue .btn-default {background-color: #FFF; color: #00588E; font-size: 2.0rem; font-weight: bolder;}
#page-4 #lien_catalogue .btn-default:hover {background-color: #00588E; color: #FFF; font-size: 2.0rem; font-weight: bolder;}
#page-4 .container-pedagogie {margin-top: -150px; background-color: #013351;}

#page-4 .container-pedagogie .col-descriptif {order: 2; padding-top: 25px; padding-bottom: 25px; z-index: 0;}
#page-4 .container-pedagogie .col-illustration { order: 1; background-position: top left; background-repeat: no-repeat; background-color: transparent; background-size: contain;  z-index: 0; min-height: 250px;}
#page-4 .para-pedagogie:nth-child(even) .col-descriptif {order: 1;}
#page-4 .para-pedagogie:nth-child(even) .col-illustration  {order: 2; background-position: top right;}

@media screen and (max-width: 1200px)
{
    #page-4 .paragraphe { background-size: 45%;}
}

@media screen and (max-width: 992px)
{
    #page-4 h1, #page-4 h2 {font-size: 25px;  font-weight: bold;}
    #page-4 .paragraphe { font-size: 20px; padding-left: 0; padding-right: 0; }
    #page-4 .paragraphe:nth-child(even) {padding-left: 0; padding-right: 0; text-align: right; }

    #page-4 #lien_catalogue {top: 91px; left: 0; width: 100%; }
    #page-4 #lien_catalogue p {display: inline-block; width: 70%; text-align: left; margin: 0; }
    #page-4 #lien_catalogue .btn-default {padding: 5px 10px!important; font-size: 1.5rem; margin-top: 0px; }

    #page-4 .container-pedagogie {margin-top: -50px;}

    #page-4 .container-pedagogie .col-descriptif {order: 2; }
    #page-4 .container-pedagogie .col-illustration { order: 1;}
    #page-4 .para-pedagogie:nth-child(even) .col-descriptif {order: 2;}
    #page-4 .para-pedagogie:nth-child(even) .col-illustration  {order: 1; }
}

/*--------------------------------------*/
/* Devis                                */
/*--------------------------------------*/
#form-devis form {margin: 30px 15vw; position: relative;}
#form-devis form .form-row {margin-bottom: 10px;}
#form-devis form .btn-primary {background-color: #00588D; color: #FFF; border-color: #00588D;}
#form-devis form .btn-primary:hover {background-color: #FEAA00; color: #FFF; border-color: #FEAA00;}
#persoFormulaire {position: absolute; left: -90px; top: 0px; width: 200px;}
#form-devis .border-top {border-color:#00588D!important;}

/*--------------------------------------*/
/* Devis Box                            */
/*--------------------------------------*/
#form-devisbox form {margin: 30px 15vw; position: relative;}
#form-devisbox form .form-row {margin-bottom: 10px;}
#form-devisbox form .btn-primary {background-color: #00588D; color: #FFF; border-color: #00588D;}
#form-devisbox form .btn-primary:hover {background-color: #FEAA00; color: #FFF; border-color: #FEAA00;}
#persoFormulaire {position: absolute; left: -90px; top: 0px; width: 200px;}

/*--------------------------------------*/
/* Devis Licence                            */
/*--------------------------------------*/
#form-devis-licence form {margin: 30px 15vw; position: relative;}
#form-devisb-licence form .form-row {margin-bottom: 10px;}
#form-devis-licence form .btn-primary {background-color: #00588D; color: #FFF; border-color: #00588D;}
#form-devis-licence form .btn-primary:hover {background-color: #FEAA00; color: #FFF; border-color: #FEAA00;}
#ordiFormulaire {position: absolute; left: -90px; top: 0px; width: 200px;}


/*--------------------------------------*/
/* Comite d'excellence                  */
/*--------------------------------------*/
#EnteteComite {font-size: 20px;}
.vignette-trombinoscope {font-size: 14px;}
.vignette-trombinoscope h3 {font-size: 18px; margin-bottom: 0;}
.vignette-trombinoscope h6 {font-weight: bold; font-size: 14px;}
.vignette-trombinoscope p {font-weight: bold;}


/*--------------------------------------*/
/* Composites expert                    */
/*--------------------------------------*/
#page-6 {font-size: 25px;}
#page-6 h1, #page-6 h2 {font-size: 90px; font-weight: bolder;}
@media screen and (max-width: 1200px) {
    #page-6 h1, #page-6 h2 {font-size: 45px;}
}

/*--------------------------------------*/
/* Catalogue des formations             */
/*--------------------------------------*/
#catalogue_formations {position: relative;}
#toolbar_catalogue .btn {height: 80px; color: #00588D; padding-top: 25px; box-shadow: none; vertical-align: middle; text-decoration: none; align-items: flex-start; border-radius: 0; line-height: 45px; }
#toolbar_catalogue .btn img {height: 30px;}
#toolbar_catalogue .dropdown-menu {margin-top: 0px; border: 1px solid #00588D; border-radius: 0px;}
#toolbar_catalogue .dropdown-menu .dropdown-item {color: #00588D;}
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #174D68;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
.tile-formation {height: 100%; padding: 0 0 10px 0; /*padding-left: 0; padding-right: 30px;*/ margin-bottom: 30px; background:rgba(255, 255, 255, 0.3); opacity: 1; backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(30px);}
/*.tile-formation:nth-child(even) {}*/
.tile-formation h2 {font-size: 25px;}
.tile-formation p {font-size: 15px;}
.tile-formation .btn-primary {font-size: 15px; font-weight: normal;}
.tile-formation .btn-primary:hover {background-color: #FEAA00; border-color: #FEAA00;}
.tile-formation .btn-savoir-plus {position: absolute; bottom: 15px; left: 0; width: 100%; }
/*.tile-formation .infos-generales {padding-bottom: 50px;}*/
.tile-formation .infos {font-size: 13px; line-height: 14px; vertical-align: middle; }
.tile-formation .infos .ico, #fiche_formation .infos .ico {width: 32px;}
.tile-formation .infos .desc-infos, #fiche_formation .infos .desc-infos {position: relative;}
.tile-formation .infos .desc-infos span, #fiche_formation .infos .desc-infos span {position: absolute; top: 50%; transform: translateY(-50%);}
.tile-formation>.row>.col-lg-6 {height: 333px;}
.tile-formation h3 {font-size: 15px; font-weight: normal; margin: 0;}
.tile-formation .photo-formation {height: 100%; width: 100%;}
.tile-formation .photo-formation img {position: relative; height: 100%; width: 100%; object-fit: cover;}
.liste-parcours .tile-formation .photo-formation img {height: 255px;}
.tile-formation .desc-1 {max-height: 230px; overflow: hidden;}
.tile-a-venir {height: 333px; background-repeat: no-repeat; background-size: 30% auto; background-position: center left; padding-left: 30%;}
.tile-a-venir h4 {font-size: 16px; font-weight: bold;}

.message_promo {position: absolute; top: 0px; left: 0px; width: 100%; background-color: rgba(0,0,0, 0.5); color: #FFF; font-size: 12px; padding: 3px 10px;}

.une-formation h3 {font-size: 0.8rem;}
.une-formation .tile-formation p {margin-bottom: 0;}

@media screen and (max-width: 1600px)
{
    .tile-formation h2 {font-size: 18px;}
    .tile-formation h5 {font-size: 15px;}
    .tile-formation p {font-size: 13px;}
    .tile-formation .infos .ico, #fiche_formation .infos .ico {width: 24px;}
    .tile-a-venir {font-size: 13px; padding-left: 45%;}
    .tile-a-venir h4,  .tile-a-venir h5, .tile-a-venir h6 {font-size: 14px;}
    .tile-a-venir p, .tile-a-venir ul {margin-bottom: 0;}

}
@media screen and (max-width: 991px)
{
    .tile-formation>.row>.col-lg-6 {height: unset;}
    .tile-a-venir {height: auto; background-size: auto 80vh; background-position: top center; padding-left: 10px; padding-right: 10px; padding-top: 85vh; }
    .tile-a-venir .valign-middle {top: unset; transform: unset;}

    #toolbar_catalogue {padding-left: 10px; }
    #toolbar_catalogue .btn {line-height: 25px; margin-top: 15px; padding-left: 25px; }
    #toolbar_catalogue .btn img {margin-left: -25px;}

}
#toolbar_catalogue {padding-left: 10px; background-color: #FFF; position: relative;}
/*--------------------------------------*/
/* Fiche formation                        */
/*--------------------------------------*/
#fiche_formation {padding: 60px 0 40px 0;}
#fiche_formation h1 {font-size: 25px;}
#fiche_formation h5 {font-size: 25px;}

#fiche_formation .infos .desc-infos span {font-size: 1rem; line-height: 15px;}

.container-checkbox {display: inline-block; /*width: 49%;*/ }
.checkbox {display: inline-block; width: 15px; height: 15px; border-radius: 3px; border: 1px solid #00588D; background-color: #FFF; padding: 1px; margin-top: 5px;}
.content-checkbox {display: block; height: 100%; border-radius: 2px; border: none; background-color: #00588D; }
.label-checkbox {vertical-align: text-top; font-size: 1rem; line-height: 5px;}


#newsletter h1 {font-size: 35px; font-weight: bolder;}
#newsletter {position: relative;}
#newsletter #form-contact {padding: 0px 0 150px 0;}
#newsletter #form-contact #col-formulaire {margin-top: 200px; padding-bottom: 100px;}
#newsletter #bg_bl {position: absolute; bottom: 0px; left: 0px; max-width: 100%;}
#newsletter #bg_br {position: absolute; bottom: 0px; right: 0px; max-width: 15%;}
#newsletter #bg_tl {position: absolute; top: 0px; left: 0px; max-width: 50%;}
#newsletter .form-control {background-color: #00588E; border: 2px solid #FFF; padding: 30px 10px; color: #FFF; }
#newsletter textarea.form-control {padding: 10px 10px; }
#newsletter .form-control::placeholder, #newsletter textarea.form-control::placeholder {
    color: #FFF;
    opacity: 1;
  }

  @media screen and (max-width: 1024px)
  {
    #newsletter #form-contact #col-formulaire {margin-top: 40px; padding-bottom: 10px;}
    #newsletter #bg_br {display: none;}

  }

/*--------------------------------------*/
/* Fiche credits                        */
/*--------------------------------------*/
  .pages-legales {padding-bottom: 40px;}
  .pages-legales h2 {font-size: 20px; line-height: 40px; border-bottom: 1px solid #00588E; font-weight: bolder;}
  .pages-legales .contenu {margin-bottom: 40px;}

/*--------------------------------------*/
/* Actualites                        */
/*--------------------------------------*/
.actualite {position: relative;}
.tile-actu {height: 360px; overflow: hidden; position: relative; }
.tile-actu div {height: 100%;}
.tile-actu div.lire-actu, .tile-actu div.pied-article {height: auto;}
.tile-actu h2, .tile-actu h3 {font-size: 1.5rem; text-decoration: underline;}
.photo-actu {text-align: left;}
.photo-actu img {object-fit: cover; width: 100%; height: 100%;}
.desc-actu {height: 140px; overflow: hidden; position: relative;}
.tile-actu:first-child .desc-actu {height: 200px;}
.desc-actu::after {display: block; width: 100%; height: 100px; content: ''; top: 100px; position: absolute; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);}
.tile-actu div.lire-actu, .tile-actu div.pied-article {height: auto; position: absolute; width: 100%; left: 0; padding: 0 20px;}
.tile-actu .pied-article {font-size: 0.7rem;}
.tile-actu .pied-article img {transform: scale(0.8);}
.tile-actu div.lire-actu {bottom: 35px;}
.tile-actu div.pied-article {bottom: 5px;}
.list-tags {position: absolute; bottom: 0px; list-style-type: none; margin: 10px; padding: 0;}
.list-tags li {display: inline-block; margin-right: 10px; background-color: #00588E; color: #FFF; padding: 5px 10px; }
.list-tags li:hover {background-color: #FEAA00;}
.list-tags li h3, .list-tags li h2 {font-size: 0.8rem; font-weight: bold; margin: 0; padding: 0;}
.list-tags li a {color: #FFF!important; text-decoration: none;}

@media(max-width:992px) {
    .tile-actu:first-child .desc-actu {height: 200px; overflow: hidden; margin-bottom: 100px;}
}

.actualite.col-md-6 .tile-actu .desc-actu {height: 170px;}

.share-toolbar { position: absolute; width: 30px; bottom: 0px; left: calc(100% - 15px); margin: 0; padding: 0; }
.share-toolbar ul { margin: 0; padding: 0; padding-inline-start: 0;}

.share-toolbar li {width: 30px; height: 30px; color: #FFF; list-style-type: none; text-align: center; padding-top: 3px;}

.share-toolbar .facebook {background-color: #537bbd;}
.share-toolbar .twitter {background-color: #78cdf0;}
.share-toolbar .linkedin {background-color: #9fcee1;}
.share-toolbar .telegram {background-color: #60c1de;}
.share-toolbar .mail {background-color: #60b5df;}
.share-toolbar .whatsapp {background-color: #93c786;}
.share-toolbar .reddit {background-color: #f4b5a6;}

#actualites #toolbar_catalogue .btn img, #fiche_actualite #toolbar_catalogue .btn img, #presses #toolbar_catalogue .btn img{height: 20px;}
#toolbar_catalogue .dropdown-menu a.choix-tag:hover {background-color: #00588E; color: #FFF;}




/*--------------------------------------*/
/* Fiche actualité                      */
/*--------------------------------------*/
#fiche_actualite h1 {font-size: 1.5rem; text-decoration: underline;}
#fiche_actualite .img-second, #fiche_actualite .img-princ{object-fit: cover;}
#fiche_actualite .list-tags {position: relative; margin-top: -30px;}
#fiche_actualite .share-toolbar { position: sticky; bottom: calc(100vh - 200px); left: calc(100vw - 30px);  height: 0px;}

@media screen and (max-width: 1280px) {
    #fiche_actualite .list-tags {margin-top: 0px; bottom: unset;}
}


.container-actu iframe {max-width: 100%!important;}
@media screen and (max-width: 991px) {
    .tile-actu {height: auto;}
    /*.share-toolbar {bottom: -30px; right: 15px; left: unset; width: 210px;}
    .share-toolbar ul li { float: left;}*/
    .share-toolbar { left: calc(100vw - 40px); }
    #fiche_actualite .share-toolbar { padding: 0; position: relative; left: unset; text-align: center; height: auto; margin-top: -90px; margin-bottom: 40px;}
    #fiche_actualite .share-toolbar {bottom: unset; right:unset; left: unset; width: 100%;}
    #fiche_actualite .share-toolbar ul li { display: inline-block; width: 14%; padding: 10px 0; height: 40px; margin: 0 -5px;}
    .container-actu {padding-bottom: 70px;}

    #actualites #toolbar_catalogue .btn, #fiche_actualite #toolbar_catalogue .btn {width: 49%; text-align: left; padding-top: 5px; height: 50px;}
    .list-tags {bottom: 75px;}
    .tile-actu .pied-article {margin-top: 80px;}

}

@media screen and (max-width: 500px) {
    /*#fiche_actualite .list-tags { margin-top: -50px;}
    .list-tags {bottom: 20px;}*/
    .list-tags li {margin-bottom: 10px;}
}

/*--------------------------------------*/
/* Presses                              */
/*--------------------------------------*/
#presses .tile-presse {background-color: #FFF; color: #00588E;}
#presses .tile-presse h2 {margin: 0; font-weight: bold; font-size: 1.5rem;}
#presses .tile-presse p {margin: 0;}

#presses .tile-presse:hover {background-color: #00588E; color: #FFF;}

/*---------------------------------------*/
/* Cookies                               */
/*---------------------------------------*/
#message_cookie {position: fixed; z-index: 255; bottom: 0px; width: 100%; padding: 30px; background: rgba(255,255,255,0.95); border-top: 2px solid #00588E;}
#message_cookie a {color: #00588E; text-decoration: underline; }

/*---------------------------------------*/
/* Parcours                              */
/*---------------------------------------*/
.bg-flou {background-color: rgba(100,100,100,0.2); backdrop-filter: blur(10px);}
.bg-flou iframe {max-width: 100%!important;}
#fiche_parcours { padding-top: 10px;}
#fiche_parcours header { border-radius: 5px;}
#fiche_parcours h1 {font-size: 2rem;}
@media(min-width: 1024px) {
    #fiche_parcours .description {max-width: 50%;}
}
.illustration-header-parcours {background-size: cover!important; height: 130px; border-radius: 5px 5px 0 0;}
.illustration-header-module {background-size: cover!important; height: 95px; border-radius: 5px 5px 0 0;}

.tuile-module h3 {font-size: 1.3rem;}
.tuile-module .description-module {font-size: 0.9rem; font-weight: thin;}
.tuile-module hr {border-top: 1px solid #FFF;}
.tuile-module .nav .nav-item:hover {background-color: transparent;}
.tuile-module .nav .nav-item a { background-color: rgba(255,255,255,0.3); border-radius: 0; position: relative;}
.tuile-module .nav .nav-item a::after {content:'';width: 15px; height: 15px; border-radius: 50%; background-color: #00588D; position: absolute;bottom: 0; left: 50%; z-index:-1; transform: translate(-50%,50%);}
.tuile-module .nav .nav-item a.active::after {background-color: #FEAA00; }

.tuile_mp {position: relative; min-height: 700px;}
.tuile_mp .titre_mp {position: absolute; top: 470px; left: 0; padding: 0 15px;}
.tuile_mp .carousel-indicators {bottom: 0;}
.tuile_mp .carousel-indicators li {width: 15px; height: 15px; border-radius: 50%; background-color: #FFF; opacity: 1; margin: 0 20px;}
.tuile_mp .carousel-indicators li.active {background-color: #FEAA00;}
.tuile_mp .carousel-control-prev, .tuile_mp .carousel-control-next {width: 60px; height: 60px; border-radius: 50%; background-color: #267eb3; position: absolute; top: unset; bottom: 15px; border: 0; opacity: 1; }
.tuile_mp .carousel-control-prev {left: 30px;}
.tuile_mp .carousel-control-next {right: 30px;}
.carousel-image {height: 440px; object-fit:cover;}
#carouselParcours .carousel-image {height: auto}
.descriptif-carousel {margin: 80px 15px 100px 15px;}
.formation-tabContent h4 {font-size: 1.2rem; line-height: 2.5rem;}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #FEAA00;
}

.dot-check {display: inline-block; width: 15px; height: 15px; background-color: #FEAA00; border-radius: 50%;}
.ligne-options-mp>div{border-right: 1px solid #FFF;}
.ligne-options-mp>div:last-child {border-right: none;}

#carouselParcours .carousel-item {min-height: auto; padding-bottom: 0;}
#carouselParcours .carousel-control-prev, #carouselParcours .carousel-control-next {width: 60px; height: 60px; border-radius: 50%; background-color: #267eb3; position: absolute; top: 50%; bottom: unset; border: 0; opacity: 0.5; }
#carouselParcours .carousel-control-prev {left: 30px;}
#carouselParcours .carousel-control-next {right: 30px;}
#carouselParcours .carousel-indicators {bottom: 0px;}

.rappel_pedagogique {background-color: #2A324D; backdrop-filter: blur(20px); padding: 10px 20px;}
.rappel_pedagogique h3 {margin-bottom: 30px;}
.rappel_pedagogique .contenu_col h4 {text-align: center; color: #FEAA00; font-weight: bold; margin-top: 20px; margin-bottom: 130px;}
.rappel_pedagogique .contenu_col p {text-align: center;}

.number-columns .row {counter-reset: css-counter 0;}
.number-columns .row .mulitcol {counter-increment: css-counter 1; position: relative;}
.number-columns .row .mulitcol:before {content: counter(css-counter); color: #FEAA00; font-size: 100px; line-height: 100px; font-weight: bold; position: absolute;}
.number-columns .row .mulitcol .illustration-multicol {position: absolute; top: 60px; height: 105px; width: calc(100% - 30px); text-align: center; background:rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px);}
.number-columns .row .mulitcol .illustration-multicol img {max-width: 100%; max-height: 100%; margin-top: 12px;}