/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 24 avr. 2023, 10:06:24
    Author     : Pixad
*/

:root {
    --inst-font: 'DM Sans', sans-serif;;
    --inst-global-fontsize: 15px;
    --inst-color: #797979;
    --inst-color-lien: #87529b;
    
    --couleur-primaire-light : #b28dc0;
    --couleur-primaire-dark : #242125;
    
    --couleur-scroll-btn : #222;
    
    --white-color: #ffffff;
    --inst-tansition: all 0.5s;
    
    --menu-couleur-lien:#8c719a;
    --menu-background:#8c719a;
    
    --swiper-pagination-bullet-opacity : 1;
    --swiper-theme-color : #b28dc0;
}

body {
    font-family: var(--inst-font);
    font-weight: 400;
    font-size: var(--inst-global-fontsize);
    line-height: 1.5;
    overflow-x: hidden;
    color: var(--inst-color);
    background: var(--white-color);
    -webkit-font-smoothing: antialiased;
   padding: 0px;
}



 @media (max-width: 500px){ 
     body { padding: 0px;}
 }

 main { margin: 0 0 80px 0;}
a,
a:hover,
a:focus,
button,
button:hover {
    text-decoration: none;
    -webkit-transition: var(--inst-tansition);
    -moz-transition: var(--inst-tansition);
    -ms-transition: var(--inst-tansition);
    -o-transition: var(--inst-tansition);
    transition: var(--inst-tansition);
    color: var(--inst-color-lien);
    font-weight: 600;
}


ul,
p {
    padding: 0;
    margin: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: var(--inst-title-color);
    font-family: var(--inst-font);
}

section {
    overflow: hidden;
}

section p {font-size: 16px; font-weight: 400;}

.flex { display: flex; flex-wrap: wrap; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.align-items-center {align-items: center;}
.align-items-end {align-items: flex-end;}
.align-items-start {align-items: flex-start;}
.justify-content-center { justify-content: center;}
.justify-content-start { justify-content: flex-start;}
.justify-content-end { justify-content: flex-end;}


/*SCROLLBAR SITE */            
*::-webkit-scrollbar-track {
    margin-left: 20vw;
    margin-right: 20vw;
    border: none;
    background: #f0ede8;
    opacity: 0;
    height: 5px;
    border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
    border: none;
    background: var(--couleur-scroll-btn);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}
*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
*::-moz-scrollbar-track {
    margin-left: 20vw;
    margin-right: 20vw;
    border: none;
    background: #dedede;
    opacity: 0;
    height: 5px;
    border-radius: 5px;
}
*::-moz-scrollbar-thumb {
    border: none;
    background: var(--couleur-scroll-btn);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}
*::-moz-scrollbar {
    width: 7px;
    height: 7px;
}

/** Go to Top Button CSS **/

        
#CercleScroll {
    position: fixed;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 9;
    visibility: hidden;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px);
    background: var(--couleur-primaire-dark);
    color:var(--white-color);
    background-image: -moz-linear-gradient( 160deg, rgb(255, 183, 43) 0%, rgb(255, 192, 0) 100%);
    background-image: -ms-linear-gradient( 160deg, rgb(255, 183, 43) 0%, rgb(255, 192, 0) 100%);
}

#CercleScroll.active {
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    animation: bounceInDown 2s;
    -webkit-animation: bounceInDown 2s;
    -moz-animation: bounceInDown 2s;
}

#CercleScroll.active-out {
    visibility: visible;
    transition: all 0.8s ease-in-out;
    animation: zoom-in-zoom-out 0.5s;
    -webkit-animation: zoom-in-zoom-out 0.5s;
    -moz-animation: zoom-in-zoom-out 0.5s;
}

@keyframes zoom-in-zoom-out {
0% {transform: scale(1, 1);}
50% { transform: scale(1.5, 1.5);opacity:1;}
100% { transform: scale(1, 1); opacity:0;}
}



#CercleScroll svg {
    height: 20px;
    width: 20px;
    fill: var(--white-color);
}



/*
@keyframes bounce {
    0%,
    100% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0px);
    }
}
*/

/* CTA Effect */
    .cta {
        position: relative;
        margin: auto;
        padding: 19px 22px;
        transition: all 0.2s ease;
        text-decoration: none!important;
        color: #0b0f1a;
        display: flex;
        justify-content: center;
        width: fit-content;
        align-items: center;
        margin-top: 50px;
        font-weight: 600 !important;
    }
    .cta:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 28px;
        background: var(--couleur-vert-clair);
        width: 56px;
        height: 56px;
        transition: all 0.3s ease;
    }
    .cta.blanc {color: white;}
    
    .cta:hover, .cta.blanc:hover{color: white;}
    .cta i {transition: all 0.6s ease-in-out; transition-delay: 0.2ms; color: var(--couleur-vert-clair); margin-left:5px;}
    .cta:hover i{ position:relative; color: white; margin-left:15px; }
    .cta:hover:before { width: 100%; background: var(--couleur-vert-clair);}
    .cta span, .cta.blanc span {
        position: relative;
        font-size: 0.8em;
        line-height: 1.5em;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        vertical-align: middle;
        text-align: left;
        width: max-content;
        margin : 0px!important;
        height: auto!important;
        
    }
    
    .cta.open:before { width: 100%; background: var(--couleur-vert-clair);}
    .cta.open i  { position:relative; color: red; margin-left:15px; }
    
    
/* HEADER */
    .header {
        position:relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap;
        width: 100%;
        height: 150px;
        
       padding: 0px; justify-content: space-evenly; align-items: center; 
        /* border-bottom: 35px solid #b28dc0; */
        transition: all 0.5s ease-in-out;
    }
    .header.scroll {
        position: relative;
        /* border-bottom: 35px solid #8c719a; */
        
        /* box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; */
    }
   
    .scrolldownEffect {
        animation: scroll 1s infinite;
        background-image: url(../img/souris_scroll.png);
        background-repeat: no-repeat;
        background-size: 18px;
        position: absolute;
        left: 15px;
        bottom: 125px;
        transform: translateY(-50%);
        height: 35px;
        width: 20px;
    }
    
    @keyframes scroll{0%{top:85%;opacity:0;}50%{opacity:1;}100%{top:95%;opacity:0;}}

    .header .logo {width: 50%; position: relative; top: 0px; text-align: center; }
    .header .logo img{width: 100%;}
    .header .navigation {width: 60%; font-weight: 500;}
            
    @media (max-width:480px){
      .header {display: none;}
    }
    
    
    
    #header-right {width: 20%}
    #header-right > div:last-child {padding: 0 15px;}
    #header-right > div:last-child a { color:var(--couleur-primaire-dark); font-size:14px;}
    #header-right div:first-child  { display: flex; flex-direction: row; justify-content: center; align-items: flex-end}
    #header-right .text-resize {background-color: transparent; padding: 15px;}
    #header-right .text-resize a {color: var(--couleur-primaire-light);}
    #header-right .text-resize a:not(:first-child) {margin-left: 5px;}
    #header-right .text-resize a p {line-height: 1; font-weight: 400;}
    #header-right .text-resize a.bigger-size p {font-size: 18px;}
    #header-right .text-resize a.smaller-size p {font-size: 12px;}
    
    #header-right .text-resize a .button {border: 2px solid var(--couleur-primaire-light); width: 20px; height: 20px; position: relative; border-radius: 50%; margin-top: 6px; transition: all 0.5s ease-in-out;}
    #header-right .text-resize a .button::before, #header-right .text-resize a .button::after {content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: var(--couleur-primaire-light); width: 8px; height: 2px;}
    #header-right .text-resize a.bigger-size .button::after {-webkit-transform: translate(-50%, -50%) rotate(90deg); -moz-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg);}

    #header-right .text-resize a:hover .button {background-color: var(--couleur-primaire-light); color: var(--white-color);}
    #header-right .text-resize a:hover .button::after,#header-right .text-resize a:hover .button::before {background-color: var(--white-color);}
    
    /*NAVIGATION MENU */
    nav.c-mega-menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
nav {
    flex: 0 0 85%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

nav.c-mega-menu {
   
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

nav.c-mega-menu ul { 
    margin: 0px; padding: 0px; list-style-type: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    height: 89px;}

nav.c-mega-menu ul>li {
    height: 100%;
    position: relative;
    
}
nav.c-mega-menu ul>li:not(:first-of-type) {
    border-left: 1px solid rgba(80, 38, 129, 0.04);
}

nav.c-mega-menu ul li a {
    width: auto;
    height: 90px;
    position: relative;
    padding: 0 15px;
    text-align: center;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    color: var(--couleur-lien-menu);
    font-weight: 500;
    word-break: keep-all;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size:17px;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}

nav.c-mega-menu ul li a::after {
    content: '';
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
    background: var(--menu-background);
    transition: transform 0.3s ease-in-out;
}
nav.c-mega-menu ul>li>ul>li>a:hover {
    color: #FFF;
    background-color: var(--couleur-primaire-dark);
    text-decoration: none;
}
nav.c-mega-menu ul>li>a:hover::after {
    transform: translate(0, -5px);
}
nav.c-mega-menu ul>li>a:active {
    background-color: var(--menu-background);
    color: var(--white-color);
}

nav.c-mega-menu ul li ul.dropdown-menu { display: none; width: 100%; text-align: left; height: auto; padding: 15px 0; border: 0px; border-radius: 0px; box-shadow: 0 10px 10px rgb(0 0 0 / 16%); background-color:  var(--white-color); min-width: min-content; }
nav.c-mega-menu ul li ul.dropdown-menu li {height: auto;}
nav.c-mega-menu ul li ul.dropdown-menu li a { height: 25px!important;  width: 100%; display: flex; align-items: flex-start; padding: 15px;}
nav.c-mega-menu ul li ul.dropdown-menu li a::after { height: 2px; background: #efefef;}
nav.c-mega-menu ul li ul.dropdown-menu li a:hover::after { transform: translate(0, -2px);}

nav.c-mega-menu > ul.navbar > li:hover > .dropdown-menu { display: block;}

    
 /* EFFRT */
   
/* CURSEUR EFFECT */

.cursor { display: none;}
@media(any-pointer:fine) {
    .cursor {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
    z-index: 9;
}
.cursor__inner {
    fill: var(--cursor-fill);
    stroke: var(--cursor-stroke);
    stroke-width: var(--cursor-stroke-width);
}

.mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
}
.cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: transapent; /* #ced0d4 */
    -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
    transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
    margin-left: -22.5px;
    margin-top: -22.5px;
    width: 45px;
    height: 45px;
    background-color: #ced0d4;
    opacity: .3;
}
.cursor-outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid transapent;  /* #ced0d4 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: .5;
    -webkit-transition: all .08s ease-out;
    transition: all .08s ease-out;
}
.cursor-outer.cursor-hover {
    opacity: 0;
}
.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -1111;
}
}

   
            
#scrolldownEffect {
  position: fixed;
  left: 12px;
  bottom: 1.02vh;
  height: 123px;
  z-index: 12000;
    mix-blend-mode: multiply;
}
#scrolldownEffect p {
  font-size: 1rem;
  font-weight: 400;
  color: #e9e9e9;
  letter-spacing: 0.1em;
  transform-origin: 6px center;
  transform: rotate(-90deg);
}
#scrolldownEffect img {
  position: absolute;
  width: 5px;
}
#scrolldownEffect img:nth-child(2) {
  left: 3px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(3) {
  left: 3px;
  top: 38px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(4) {
  left: 3px;
  top: 50px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(5) {
  top: 65px;
  opacity: 0;
   width: 10px;
}

@media (max-width: 480px) {
  #scrolldownEffect {
    display: none;
  }
}

    
/* PAGES */

/* HOME */


    #SliderHomePage {position: relative; display: block}
    #SliderHomePage .HeaderTitreSection_MainBlockFormation { position: absolute; z-index: 99; width: 500px; bottom: 0px; padding: 35px; background-color: #FFF; border-radius: 0px 40px 0 0; }
    #SliderHomePage .HeaderTitreSection_MainBlockFormation h2 { color: #8c719a; font-size: 3.2rem; line-height: 3.5rem; font-weight: 700; }
    #SliderHomePage .HeaderTitreSection_MainBlockFormation h2 span { position:relative; display: block; color:#585858; font-size: 2.5rem; right: 0; bottom: 0; }
    
    @media(max-width:500px){
        #SliderHomePage .HeaderTitreSection_MainBlockFormation h2 span {font-size: 2rem;}
    }
    
    #SliderHomePage .HeaderTitreSection_MainBlockFormation span {position: absolute; right: 15px; bottom: 15px;}
    
    /* Tourimse Slider */
    #SliderHomePage .swiper-slide:nth-child(1) .content {position: absolute; z-index: 2; top: 20%; right: 12%; width: 600px;  display: block; }
    #SliderHomePage .swiper-slide:nth-child(1) .content .tag {background-color: #d48342; color:#FFF; padding: 8px 12px; font-size: 14px; font-weight: 700; border-radius: 5px; width: max-content; margin-bottom: 35px; }
    #SliderHomePage .swiper-slide:nth-child(1) .content .tag a {color:#FFF;}
    #SliderHomePage .swiper-slide:nth-child(1) .content .text {font-size: 5.5rem; line-height: 55px; color:#fff; font-weight: 600; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.33);}
    #SliderHomePage .swiper-slide:nth-child(1) .content a.cta {justify-content: flex-end; width:100%;}
    
    /* Logistique Slider */
    #SliderHomePage .swiper-slide:nth-child(2) .content {position: absolute; z-index: 2; top: 20%; left: 15%; width: 600px; display: flex; flex-direction: column; align-items: flex-end;  }
    #SliderHomePage .swiper-slide:nth-child(2) .content .tag {position:relative; right:5px; background-color: #dde248; color:#000; padding: 8px 12px; font-size: 14px; font-weight: 700; border-radius: 5px; width: max-content; margin-bottom: 35px; text-align: right; }
    #SliderHomePage .swiper-slide:nth-child(2) .content .tag a {color:#FFF;}
    #SliderHomePage .swiper-slide:nth-child(2) .content .text {font-size: 5.5rem; line-height: 55px; color:#fff; font-weight: 600; text-align: right; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.33);}
    #SliderHomePage .swiper-slide:nth-child(2) .content a.cta {justify-content: flex-end; width:100%; color:#FFF;}
 
    /* ESF Slider */
    #SliderHomePage .swiper-slide:nth-child(3) .content {position: absolute; z-index: 2; top: 28%; right: 11%; width: 600px; display: flex; flex-direction: column; align-items: flex-end;  }
    #SliderHomePage .swiper-slide:nth-child(3) .content .tag {position:relative; right:5px; background-color: #6b84a3; color:#fff; padding: 8px 12px; font-size: 14px; font-weight: 700; border-radius: 5px; width: max-content; margin-bottom: 35px; text-align: right; }
    #SliderHomePage .swiper-slide:nth-child(3) .content .tag a {color:#FFF;}
    #SliderHomePage .swiper-slide:nth-child(3) .content .text {font-size: 5.5rem; line-height: 55px; color:#fff; font-weight: 600; text-align: right; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.33);}
    #SliderHomePage .swiper-slide:nth-child(3) .content a.cta {justify-content: flex-end; width:100%; color:#222;}
 
    @media (max-width: 520px){ 
        #SliderHomePage { margin-top: 70px;}
        #SliderHomePage .HeaderTitreSection_MainBlockFormation {position: relative; padding: 25px 15px}
        #SliderHomePage .HeaderTitreSection_MainBlockFormation h2 { font-size: 3.2rem;}
        
        
        #SliderHomePage .swiper-slide .content { max-width: 350px; width: 350px!important; padding: 15px; right:0px!important; top: 2%; display: flex; flex-direction: column; justify-content: center; align-items: center!important;}
        #SliderHomePage .swiper-slide .content .text {font-size: 3.5rem!important; line-height: 35px!important;}
    }
    @media (max-width: 480px){ 
        #SliderHomePage { margin-top: 70px;}
        #SliderHomePage .HeaderTitreSection_MainBlockFormation {position: relative; padding: 25px 15px}
        #SliderHomePage .HeaderTitreSection_MainBlockFormation h2 { font-size: 3.2rem;}
        
        
        #SliderHomePage .swiper-slide .content { max-width: 480px; padding: 15px; display: flex!important; flex-direction: column!important; justify-content: center!important; align-items: center!important; top: 15%; right: 0px; left: 0px; z-index: 2}
        #SliderHomePage .swiper-slide .content .text{ color:#FFF; text-align: center;}
      
        #SliderHomePage .swiper-slide:nth-child(2) .content {left:0px!important; align-items: center!important;}
        #SliderHomePage .swiper-slide:nth-child(2) .content .text {text-align: center!important;}
        
        #SliderHomePage .swiper-slide:nth-child(3) .content a.cta {justify-content: center;}
        
      
        #SliderHomePage .swiper-slide:nth-child(1) .content .text, #SliderHomePage .swiper-slide:nth-child(3) .content .text  {color:#FFF;}
        #SliderHomePage .swiper-slide:nth-child(1) .content .tag  {background-color: var(--couleur-primaire-dark);}
        #SliderHomePage .swiper-slide:nth-child(1) .content .cta, #SliderHomePage .swiper-slide:nth-child(3) .content .cta {color:#FFF;}
      
    }
    
    
    
    
    #MainBlockFormation {display: block; position: relative;}
    #MainBlockFormation .content.row {margin-left: 0; margin-right: 0px;}
    #MainBlockFormation .content .block-formation { border:40px solid #FFF; flex-shrink: 0; margin: 0px; display:flex; flex-direction: column; justify-content: center; align-items: center; background-color: #8c719a; padding: 0px; min-height: 80px; position: relative; overflow: hidden;}
    #MainBlockFormation .content .block-formation:nth-child(odd) {border-left: 0px; border-right: 0px;}
    
    
    
    @media (max-width: 480px){ 
        #MainBlockFormation .content .block-formation { border:20px solid #FFF;}
        #MainBlockFormation .content .block-formation:nth-child(odd) { border:20px solid #FFF; border-top: 0px; border-top: 0px;}
    }
    
    
    #MainBlockFormation .content .block-formation .TypeFormation {
        position: absolute;
        left: 0;
        top: 25px;
        display: inline-block;
        font-size: 16px;
        background: #8c719a;
        color: #FFF;
        transition: all 0.3s ease-in-out;
        position: absolute;
        z-index: 4;
        top: 100px;
        padding: 10px 20px;
        border-radius: 0 20px 20px 0;
        font-weight: 700;
    }
    
   #MainBlockFormation .content .block-formation:hover .TypeFormation {
       background: #FFF;
        color: #8c719a;
        padding-left: 50px;
        box-shadow: 0px 0px 0px 5px #8c719a;
   }
   
    #MainBlockFormation .content .block-formation .DureeFormation {
        position: absolute;
        left: 0;
        top: 160px;
        display: inline-block;
        font-size: 15px;
        background: #b28dc0;
        color: #FFF;
        transition: all 0.3s ease-in-out;
        position: absolute;
        z-index: 4;
        padding: 10px 20px;
        border-radius: 0 20px 20px 0;
        font-weight: 700;
    }
    
   #MainBlockFormation .content .block-formation:hover .DureeFormation {
       background: #FFF;
        color: #8c719a;
        padding-left: 50px;
        box-shadow: 0px 0px 0px 5px #8c719a;
   }
    
    #MainBlockFormation .content .block-formation .Titre { position: absolute;
    margin: auto;
    /* background-color: rgb(0 0 0 / 70%); */
    
    color: #FFF;
    padding: 35px;
    width: 100%;
    top: 0;
    min-height: 126px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 15px;
    align-items: center;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    font-weight: 700;
    font-size: 4rem;
    }
    
    /* INTRO HOME */
    .BlockIntroHome {}
    .BlockIntroHome h1 { color: var(--couleur-primaire-dark); font-weight: 700; text-align: right; }
    
    /* Animation du titre au scroll */
    body.c-page-on-scroll #MainBlockFormation .content .block-formation .Titre { position: absolute; transform: translate(0, 220px); }
    @media (max-width:500px){
        body.c-page-on-scroll #MainBlockFormation .content .block-formation .Titre {transform: translate(0, 180px); }
    }
    #MainBlockFormation .content .block-formation .Titre::after {content:""; height: 45px; background-color: #FFFF;}
    #MainBlockFormation .content .block-formation .Titre h3 {font-weight: 700; font-size: 4rem; line-height: 3.5rem;}
    #MainBlockFormation .content .block-formation .Titre h3 span {font-size: 2.5rem;}
    #MainBlockFormation .content .block-formation .Visuel { flex: inherit; width: 100%; overflow: hidden; height: 450px; transition:all 0.3s ease-in-out}
    #MainBlockFormation .content .block-formation:hover .Visuel {opacity:0.2; transform:scale(1.2) rotate(5deg); overflow: hidden;}
    #MainBlockFormation .content .block-formation .Visuel:before { content: " "; display: block; position: absolute; top: 0; left: 0; right: 0;   bottom: 0; background: linear-gradient(#0000 1.99%, #000 100%); }
    #MainBlockFormation .content .block-formation .desc {color: #FFF; font-size: 16px; font-weight: 400; position: absolute;top: 315px; padding: 15px 30px;text-align: right; width:100%; }
    /* bouton d'action */
    #MainBlockFormation .block-formation .btn-action {opacity: 0; position: absolute; right: 0px; top: 160px; text-decoration: none; font-size: 1rem; padding: 18px 60px;  cursor: pointer;  transition: all 0.3s ease-in-out; }
    #MainBlockFormation .block-formation .btn-action:nth-child(2) {right: 15px; }
    #MainBlockFormation .block-formation:hover .btn-action {opacity: 1; padding: 10px 20px; font-size: 1.5rem; font-weight: 600}
    #MainBlockFormation .block-formation .btn-action.light { background-color: #222; color: #fff;  }
    #MainBlockFormation .block-formation .btn-action:hover{ padding: 18px 25px 18px 25px;  }

    #MainBlockFormation .block-formation .iconflech{position:absolute; bottom: 15px; right: 15px; transition: all 0.2s ease-in-out; }
    #MainBlockFormation .block-formation .iconflech.last {position:absolute; bottom: 15px; right: 30px;}
    
    @media(max-width:480px){
        #MainBlockFormation .content .block-formation .Titre h3 {font-weight: 700; font-size: 3.5rem; line-height: 3.5rem;}
    }
    
    
/* Actualite CFA */
#SActualiteHome { cursor: move; width: 100%; position: relative; z-index: 2; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; transition: all 0.8s ease-in-out;}
#SActualiteHome h1 {font-size:4.5rem; margin: 80px 0 20px 0; text-transform: uppercase;}
#SActualiteHome h1 b {font-weight: 700; color:var(--couleur-primaire-light); }

#SActualiteHome .contentblock { background-image: url('../img/visuel_bg_saint_mont.png'); background-repeat: no-repeat; background-size: contain; display: flex!important; flex-direction: row; justify-content: flex-start;align-items: center; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; width: 100%; padding: 70px 0;}
#SActualiteHome .contentblock .content { padding: 15px}
#SActualiteHome .contentblock .content .titre {margin-bottom: 5px; min-height: 60px; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; line-height: 20px}
/* #SActualiteHome:after {content: ""; background-image: url('../img/ombre_slider.png'); width: 90px; height: 450px; position:absolute; top: -46px; right: -59px;} */
#SActualiteHome .element { width:calc((100% - 90px)/4); position:relative; overflow: hidden; margin: 0 15px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;  background-color: #FFF;}
#SActualiteHome .element:first-child {margin-bottom: 0px!important; margin-left:5%}
#SActualiteHome .element .visuel { height: 200px; max-height: 200px; overflow: hidden; transition: all 0.8s ease-in-out; display: block; position: relative;}
#SActualiteHome .element .visuel img { width: 100%; transition: all 0.8s ease-in-out; }
#SActualiteHome .element:hover .visuel img {transform: scale(1.2);}


#SActualiteHome .element:after {content: "Lire la suite"; height: 20px; width: 150px; text-align: center; font-size: 12px; font-weight: 400; background-color: var(--couleur-primaire-dark); color:#FFF;  position: absolute; bottom:-40px; left: 32%; transition: all 1.2s ease-in-out;}
#SActualiteHome .element:hover:after { bottom: 0px; }


#SActualiteHome .element .visuel:before, #SActualiteHome .element:hover .visuel:before {
    content: " ";
    display: block;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#fff0 50%, #fff 100%);
}

#SActualiteHome .element .content .titre { font-size: 2rem;}
#SActualiteHome .element .content .desc {
    max-height:120px;
    min-height: 120px;
   word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;
    text-align: left; 
    font-size: 14px; color: #585858;  
    display: flex; flex-direction: row; justify-content: center;
    width: 100%;
 /**Major Properties**/
  white-space: break-spaces; 
  text-overflow: ellipsis; 
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight: 500;
}


@media (max-width: 780px){
    
}
@media (max-width: 550px){
    #SActualiteHome { width: 100%; }
}

@media (max-width: 480px){
    #SActualiteHome { width: auto; position: relative; display: block; padding: 35px 0px 35px 0px;}
    #SActualiteHome .contentblock {display: flex!important; flex-direction: row; justify-content: flex-start;align-items: center; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; width: 100%;}
    #SActualiteHome .contentblock  a.element { min-width: calc(100% - 30px); width: calc(100% - 30px); box-shadow: none; }
    #SActualiteHome .contentblock  a.element .content { display: table-cell; vertical-align: middle;  width: 100%;  text-align: center;  position: relative; z-index: 2;}

       
        
}
    

    
    
    
    /*
    #MainBlockFormation .block-formation:hover .iconflech { background-color: #FFF; height: 50px; width: 50px; padding: 15px; bottom: 0; right: 0} 
    #MainBlockFormation .block-formation:hover .iconflech.last { right: 15px} 
    */
/* FOOTER */
footer { min-height: 250px; position:relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-top: 0px solid #b28dc0; height: auto; }
footer .container-fluid { padding-top: 15px; background-color: #f0ede8; width: 100%; color: #222;}

@media(max-width:500px){
    footer .container-fluid .row-fluid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;}
    footer .container-fluid .row-fluid .col-md-3 { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;}
    footer .container-fluid .row-fluid .col-md-3 p {text-align: center;}
}

footer p {color: #222;}
footer a {color: #222; font-weight: 600;}
footer a:hover {color: #585858; font-weight: 600;}

footer .block-copyrights { position: absolute; bottom: -50px; right: 15px; display: flex; justify-content: center; align-items: center; border-top: 0px solid #FFF; margin-top: 0px; width: 100%;}
footer .block-copyrights div {width: 50%; color: #585858; font-size:13px; font-weight: 500; padding: 25px;}
footer .block-copyrights div a, footer .block-copyrights div a:hover {color: #585858; font-size:13px; font-weight: 500;}
footer .block-copyrights div:first-child {text-align: left; }
footer .block-copyrights div:last-child {text-align: right; }
footer .block-copyrights div span {position: relative; display: inline-block;}
@media (max-width: 480px){ 
    footer .block-copyrights {position:relative; bottom: 0px; flex-direction: column; justify-content: flex-start; align-items: center; padding: 10px; text-align: center; height: auto; margin-bottom: 25px; width: calc(100vw - 30px); right:0px; padding: 0px; }
    footer .block-copyrights div {width: 100%; padding: 5px 0px; text-align: center!important; padding: 5px 15px; position: relative; top: 40px;}
    footer .block-copyrights div span {position: relative; display: block;}
    footer .block-copyrights div:fist-child a {display: block; width: 100%;}
    footer .block-copyrights div:last-child {text-align: center; }
}
            


/* Form */
span.input, div.input {
    position: relative;
    display: block;
}
input[type=password], input[type=text] {
    border: 0;
    color: #222;
    background: transparent;
    font-size: 15px;
    font-weight: 900;
    width: 100%;
    display: block;
    border: 1px solid var(--couleur-primaire-light);
    padding-bottom: 8px;
    padding-left: 5px;
    margin-bottom: 15px;
    font-weight: 400;
}
input, input:focus, textarea:focus {
    outline: 0;
}