/*
    Created on : 24 avr. 2023, 10:06:24
    Author     : Pixad
*/

:root {
    --inst-font: "Lexend", serif;
    --inst-global-fontsize: 15px;
    --inst-color: #222;
    --inst-color-lien: #f9c76f;
    
    --couleur-primaire-dark : #f7ad11;  /* Orange foncé */
    --couleur-primaire-light : #f9c76f; /* orange clair */
    
    --couleur-violet-light : #f9c76f;
    --couleur-violet-dark : #f7ad11;
    
    --white : #ffffff;
    --white-color: #ffffff;
    --inst-tansition: all 0.5s;
    
    --menu-couleur-lien:#fff;
    --menu-background:#f7ad11;
    
    --couleur-lien-menu:#222;
    
    --swiper-pagination-bullet-opacity : 1;
    --swiper-theme-color : #f7ad11;
}

html { width: 100vw;}
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 header {display:none;}
}

figure {
    margin: 0;
    background-color: #FFF;
    border-radius: 0px;
    overflow: hidden;
    content-visibility:auto;
    contain-intrincis-size:400px;
    contain : layout style paint;
    transition: transform 0.3s;
}

figure img {display: block; width: 100%; height: auto;}
@keyframes scale-a-lil {
    form {scale : 0.7; opacity:0}
    to {scale:1; opacity:1;}
}

@media(prefers-reduced-motion : no-preference){
    figure {
        animation : scale-a-lil ease-out both;
        animation-timeline : view();
        animation-range : 0vh 90vh;
        transform-origin: center center;
        
    }
}


 @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;
}


a.btn-rounded{
    background-color: var(--couleur-primaire-dark); 
    color: var(--white-color)!important;
    border-radius: 25px;
    font-size:16px;
}

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);
}
h2 {
    margin: 30px 0;
    color: var(--couleur-primaire-dark);
}

h3 {
    margin: 25px 0;
}


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: #dedede;
    opacity: 0;
    height: 5px;
    border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
    border: none;
    background: var(--couleur-primaire-light);
    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-primaire-light);
    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-violet-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; }
    
    /*Ariane*/
    #Ariane {text-align: right;transform: rotate(-90deg); position: fixed; left: 0px; bottom: 28vh;}
    #Ariane a {font-size:12px; color:#b1b1b1;}
    #Ariane a:last-child {font-size:12px; color:var(--inst-color-lien);}
    
    @media(max-width:1500px){
        #Ariane {transform: rotate(0deg); position: relative; top: 15px; right: 0px; margin-right: 15px;}
    }
    
    
/* HEADER */
    .header {
        position:relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap;
        width: 100%;
        height: 100px;
        
        background-color: #FFF; padding: 0px; justify-content: space-evenly; align-items: center; 
        /* border-bottom: 35px solid #b28dc0; */
        transition: all 0.5s ease-in-out;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    }
    
    
    header .TopHeader {width:100%; min-height: 45px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 25px;  flex-wrap: nowrap; background-color: var(--couleur-primaire-dark);}
    header .TopHeader a {color:#FFF;}
    header .TopHeader i {font-size:18px; background-color: #FFF; color:var(--couleur-primaire-dark); padding: 8px; border-radius: 50%;}
    header .TopHeader #MenuBigGeneral .btnTop span {color:#FFF;}
    
    @media(max-width:690px){
        header .TopHeader div:last-child {display: none;}
    }
    
    /*
    .header:after {content:""; height: 1px; background-color: #222; width: 80vw;position:absolute; bottom: 0; right: 0;}
    */
    .header.scroll {
         position: fixed;
         top:0;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
         opacity: 1;
         transition: all 0.8s ease-in-out;
        /*
        position: fixed; z-index: 99999; top:0px; 
        margin-bottom: 40px;
        width: calc(100% - 90px);
        border-bottom: 35px solid #8c719a;
        */
        
    }
   
    .header.scroll:hover {
        opacity: 1;
    }
   
    
    .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 {min-width: 15vw; position: relative; top: 0px; transition: all 0.8s ease; display: flex; justify-content: center; align-items: center; height: 75px }
    .header.scroll .logo {
       /* position: fixed; z-index: 99999; width:10%; top:-26px; left: 0px; */
    }
    .header .logo img{height:100px;}
    .header .navigation {width: 60vw; margin-left:5vw; font-weight: 500; height: 100%; display: flex; align-items: center;}
            
    @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-violet-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-violet-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-violet-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-violet-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-violet-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;
}

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

nav.c-mega-menu ul {border:0px!important; margin: 0px; padding: 0px; list-style-type: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 100%; }
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: 100%;
    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 {    text-transform: uppercase;}
 .c-mega-menu .nav-item.dropdown:hover > a {
    color: #FFF; /* La couleur souhaitée pour le premier lien */
    background-color: var(--couleur-primaire-dark);
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

nav.c-mega-menu ul li a::after {
    content: "\f061";
    font-family: "FontAwesome";
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
    background: var(--menu-background);

}
nav.c-mega-menu ul>li>ul>li>a {text-transform:capitalize; }
nav.c-mega-menu ul>li>ul>li>a:hover {
    color: var(--white);
    text-decoration: none;
    background-color: transparent;
}
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: max-content; text-align: left; height: auto; padding: 15px 0px; border: 0px; border-radius: 0px; box-shadow: 0 10px 10px rgb(0 0 0 / 16%); background-color:  var(--white-color); min-width:250px; }
nav.c-mega-menu ul li ul.dropdown-menu li {height: auto; transition: all 0.6s ease;}
nav.c-mega-menu ul li ul.dropdown-menu li:hover {
    background-color: var(--menu-background);
}
nav.c-mega-menu ul li ul.dropdown-menu li:hover:after {
    content: "\f061";
    font-family: "FontAwesome";
    position: absolute; 
    right: -5px;
    font-size:18px;
    top: 2px;
    color:var(--menu-background);
}


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;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
}

 /* 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-violet-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-violet-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;}
    }
    
        
    
    
    /*
    #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: 10px solid var(--inst-color); height: auto; }
footer .container-fluid { padding-top: 50px; background-color: #222; width: 100%;}

footer p {color: #FFF;}
footer a {color: #FFF; font-weight: 600;}
footer a:hover {color: #f2d0ff; 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: calc(100vw - 92px)}
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-violet-light);
    padding-bottom: 8px;
    padding-left: 5px;
    margin-bottom: 15px;
    font-weight: 400;
}
input, input:focus, textarea:focus {
    outline: 0;
}





        /* Style 1: Barre de progression horizontale en haut de la page */
        .scroll-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(to right, var(--couleur-primaire-dark),var(--couleur-primaire-light));
            width: 0%;
            z-index: 1000;
            transition: width 0.2s ease-out;
        }

        
        
        /* Style 2: Indicateur de défilement animé */
        .scroll-down-indicator {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 50px;
            border: 2px solid #333;
            border-radius: 15px;
            z-index: 1000;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .scroll-down-indicator::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            width: 6px;
            height: 6px;
            background-color: #333;
            border-radius: 50%;
            transform: translateX(-50%);
            animation: scrollWheel 2s infinite;
        }

        /* Animation pour l'indicateur de défilement */
        @keyframes scrollWheel {
            0% {
                opacity: 1;
                top: 8px;
            }
            100% {
                opacity: 0;
                top: 32px;
            }
        }

        /* Faire disparaître l'indicateur après un défilement */
        .scroll-down-indicator.hide {
            opacity: 0;
        }

        /* Style 3: Flèche rebondissante */
        .bounce-arrow {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 40px;
            height: 40px;
            z-index: 1000;
            animation: bounce 2s infinite;
            opacity: 0.8;
            transition: opacity 0.3s;
        }
        
        @media(max-width){
            .bounce-arrow {display: none;}
        }

        .bounce-arrow::after {
            content: '\f063';
            font-family: "FontAwesome";
            position: absolute;
            width: 20px;
            height: 2px;
      
        }
        /*
        .bounce-arrow::before,
        .bounce-arrow::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background-color: #333;
            top: 50%;
        }

        .bounce-arrow::before {
            left: 0;
            transform: rotate(45deg);
        }

        .bounce-arrow::after {
            right: 0;
            transform: rotate(-45deg);
        }
        */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-15px);
            }
            60% {
                transform: translateY(-7px);
            }
        }

        .bounce-arrow.hide {
            opacity: 0;
        }

        
        
/* Actualite Homepage */
#SActualiteHome { cursor: move; width: 100%; position: relative;display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; transition: all 0.8s ease-in-out;}
#SActualiteHome h2 {font-size:4.5rem; margin: 80px 0 20px 0; text-transform: uppercase;}
#SActualiteHome h2 b {font-weight: 400; color:#585858; }

#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; display: flex; flex-direction: column; gap: 10px;}
#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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;  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-violet-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 25px 35px 25px;}
    #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  .element { min-width: calc(100% - 30px); width: calc(100% - 30px); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }
    #SActualiteHome .contentblock  .element .content { display: table-cell; vertical-align: middle;  width: 100%;  text-align: center;  position: relative; z-index: 2;}
}



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