/* @import './_fonts.pcss'; */
html {
  /* it means 10px if default font-size browser is 16px */
  font-size: 62.5%;
}
body {
  box-sizing: border-box;
  position: relative;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2.6rem;
    font-weight: 400;
  color: var(--text-color-dark);
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
ul {
  list-style-type: none;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
}
/* Variables */
:root {
    --navigation-height: 7.3;

    --primary-color: #003347; /*bleu prussien*/
    --secondary-color: #F5EDE8; /*isabeline*/
    --accent-color: #FF7D00; /*orange */

    --grey-light-color: #CFD0D1; /*20% noir*/
    --orange-light-color: #FFBE80;/*50% orange*/
    --blue-light-color: #F2F5F6; /*5% de bleu prussien*/

    --black: #3F4145; /*80% black*/ 

    --blue-uranus: #B0D6F5;

    --purple: #4F0A24;

    --text-color-dark: #3F4145;
    --text-color-light: #fff;
    
    --font-stack-A: "DM Sans", Arial; /*titre*/
    --font-stack-B: "Inter", Arial; /*body*/

    --small-gap: 1rem;
    --medium-gap: 2rem;
    --large-gap: 3rem;


    --gap-menu-item: 3rem;


    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    --wrapper-width: 1200px;

        --purple-light-color: #F6F3F4;


}
/*layout*/
/*

    Commencer par la typography (en partant d'un article de base). 

    1. Les titres (limité à 4 niveaux)

    2. Le corps d'un text (limité au paragraphe, aux listes à puces, au liens et citations)

    3. Les titres et liens dans un context de menu

    4. Les titres et liens dans un contexte de footer 

    5. Les titres et liens dans un contexte de cartes (tags, attributes,...)

*/
/* Les titres (limité à 4 niveaux)*/
h1{


    font-family: var(--font-stack-A);
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 3.8rem;
}
@media (min-width: 980px) {
h1{
        /*Page template and Archive template*/
        font-family: var(--font-stack-A);
        font-size: 6.2rem;
        font-weight: bold;
        line-height: 107%;
}
    }
h1 {
    color:var(--primary-color);

    position: relative;
}
h1:after{
        content:'';
        display:block;
        height:1px;
        width:6rem;
        background-color:var(--accent-color);
        bottom:-1rem;
        position: absolute;
    }
h1 {

    margin-bottom:3rem;
}
h2{
    font-family: var(--font-stack-A);
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 3.8rem;
    color:var(--primary-color);

    margin-bottom:2rem;
}
h3{
    font-family: var(--font-stack-A);
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom:3rem;
}
h4, h5, h6{
    font-family: var(--font-stack-A);
    font-size: 2rem;
    font-weight: bold;
}
/*2. body */
p{
    font-family: var(--font-stack-B);
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom:4rem;
    color:#333333;
}
/*Menu*/
.menu-item{
    font-family: var(--font-stack-B);
    font-size:1.4rem;
    font-weight:normal;
}
.container {
    max-width: var(--wrapper-width);
    margin: 0 auto;
    width: 100%;
    /* background-color:pink; */
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (min-width: 1240px) {
.container {
                padding: 0;
}
        }
.container-half{
        max-width: calc(var(--wrapper-width) / 2);


    }
.--to-right {
    justify-items: end;
}
.container-row, .flex{
    display:flex;
}
.--space-between {
    justify-content: space-between;
}
.--center{
    justify-content: center;
}
.--wrap{
    flex-wrap:wrap;
}
.grid{
    display:grid;
}
@media (min-width: 980px) {
.grid-page{
      display:grid;
      grid-template-columns: repeat(12, 1fr );

      /*gap:2rem;*/
}


.--full{
      grid-column:1 / -1;
}

.--narrow{
    grid-column: 2/ -1;
}


.--news-detail{
    grid-column: 3 / span 8;
}


.--compact{
      grid-column:4 / span 6;

}

.--half-start{
    grid-column: 1 / span 6;
}

.--half-end{
    grid-column: span 6 / -1;
}


}
.--flex-1-1{
    flex: 1 1;
}
.container-section{
     max-width: var(--wrapper-width);
     margin: 0 auto;
     width: 100%;
     /* background-color:pink; */
     padding-left: 2rem;
     padding-right: 2rem; /*from 12 to 7 :cf1.1*/


     
}
@media (min-width: 1240px) {
.container-section{
                padding: 0;


     
}
        }
.container-section {

   --align:center;
     
     padding-top:7rem;
     padding-bottom:7rem;
}
.container-section.--align-left{
            --align:left;
         }
.container-section-header{
        text-align:var(--align);
     }
.container-section-header h2{
            font-family: var(--font-stack-A);
            font-size: 3.6rem;
            font-weight: bold;
            line-height: 3.8rem;
            color:var(--primary-color);

            margin-bottom:2rem;
        }
.container-section-header h3{
            font-family: var(--font-stack-A);
            font-size: 2rem;
            font-weight: bold;
            margin-bottom:3rem;

            color:var(--primary-color);
        }
.container-section-header p{
            font-family: var(--font-stack-B);
            font-size: 1.6rem;
            line-height: 2.4rem;
        }
.container-section-header {

        margin-bottom:8rem;
}
.container-section-main{

        display:flex;
        gap:2rem;

        flex-flow:row wrap;
        justify-content:center;
     }
@media (min-width: 980px) {
.container-section-main{

             /*flex-flow:row nowrap;*/
             justify-content:flex-start
     }

             .container-section-main.--justify-center{
                justify-content:center;
                
             }
        }
.container-section-main.--wrap{
         flex-wrap:wrap;
        }
.container-section-footer{
        margin-top:8rem;

        text-align:var(--align);
     }
.container-section .--no-grid{
        display:block;

     }
/*With label*/
.container-section-header.--with-label{
        padding-left:10rem;
    }
.container-section-header.--with-label .container-section-label{
            position: relative;
            
            font-size: 2rem;
            font-family: 'DM Sans';
            font-weight: bold;
            text-transform: uppercase;
            
            color:var(--accent-color);
            
            display:inline-block;
            margin-bottom: 4rem;
        }
.container-section-header.--with-label .container-section-label:before{
                content:'';
                height:1px;
                width:8rem;
                background-color:currentColor;
                display: block;
                
                position: absolute;
                left:0;

                /* align the line in the vertical middle instead of bottom (2px)*/
                bottom:13px;
                
                transform: translatex(calc(-100% - 2rem));
            }
.container-section-header.--with-label h2,.container-section-header.--with-label p{
            max-width:50rem;
        }
.content-grid{
    display:grid;
    grid-template-columns: [full-start] 1fr [content-start] min(700px, 100%)[content-end] 1fr [full-end]
}
.content-grid > :not(blockquote){
    grid-column: content;
}
.content-grid > blockquote{
    grid-column: full;
}
.menu-top{

    display:none;
}
@media (min-width: 980px) {
.menu-top{

 display:block;

    background-color: black;
    color:var(--secondary-color)
}




  .menu-top nav{
    padding: .5rem 0;
  }
    .menu-top nav ul{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--medium-gap);
        position: relative;
        z-index: 9;

    }


        .menu-top nav ul li{
              

                font-family: var(--font-stack-B);
              

                font-size:1.4rem;
              

                font-weight:normal;
        }

                .menu-top nav ul li a{
                    color:inherit;
                    font-weight:inherit;
                    font-size:inherit;
                }
}
.menu-main {

     background-color: var(--primary-color);
     color: white;

     display: flex;
     justify-content: space-between;
     align-items: center;

     position: relative;
     z-index: 9;
     height: calc(var(--navigation-height) * 1rem);
 }
.menu-main .container-row {

         justify-content: space-between;
         align-items: center;
     }
/* padding-left: 2rem;
         padding-right: 2rem; */
@media (min-width: 980px) {
.menu-main .container-row {
             /* padding-left: 0;
             padding-right: 0; */
     }
         }
@media (min-width: 980px) {
.menu-main .hamburger {
             display: none
     }
         }
.menu-main .logo {
         padding: 1.5rem 0;
         text-decoration: none;
         position: relative;
         z-index: 9;
     }
.menu-main .logo img {
             display: block;
             max-width: 100%;
             height: 5rem;
         }
.menu-main .navigation {
         display: none;
     }
@media (min-width: 980px) {
         .menu-main .navigation {

             display: block;
         }
                 .menu-main .navigation .nav>ul {
                     display: flex;
                     gap: var(--large-gap);
                 }



                         .menu-main .navigation .nav>ul>li>a {
                             color: inherit;
                             font-weight: inherit;
                             font-size: inherit;

                             /*use hover instead of click - cf:1.4
                             &:focus+ul,
                            
                                 {
                                 opacity: 1;
                               
                                 transform: translateY(24px);
                                
                                 pointer-events: auto;
                                
                             }
*/
                         }


                             .menu-main .navigation .nav>ul>li>a+ul {
                                 display: block;
                                 position: absolute;
                                 width: 100%;
                                 width: -moz-max-content;
                                 width: max-content;
                                 max-width: 25rem;



                                 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);

                                 background-color: white;
                                 border-radius: 5px;
                                 padding: 2rem 0;

                                 opacity: 0;
                                 transform: translateY(30px);
                                 transition: opacity 0.3s ease, transform 0.3s ease;
                                 pointer-events: none;


                             }
                                     .menu-main .navigation .nav>ul>li>a+ul li a {
                                         padding: 0.5rem 2rem;

                                         color: var(--primary-color);
                                         display: block;
                                     }

                                         .menu-main .navigation .nav>ul>li>a+ul li a:hover {
                                             background-color: rgba(255, 125, 0, 0.2);
                                             color: var(--accent-color);
                                         }
                                         .menu-main .navigation .nav>ul>li>a+ul li.active a {
                                             background-color: rgba(255, 125, 0, 0.2);
                                             color: var(--accent-color);
                                         }

                         .menu-main .navigation .nav>ul>li.has-submenu{
                            /*padding-bottom: 2rem;*/
                         }


                         /*use hover instead of click - cf:1.4*/
                            .menu-main .navigation .nav>ul>li:hover ul{
                                 opacity: 1;
                               
                                 transform: translateY(0);
                                
                                 pointer-events: auto;
                                
                             }



                         .menu-main .navigation .nav>ul>li.active {
                             position: relative;
                         }

                             @media (min-width: 980px) {
                                 .menu-main .navigation .nav>ul>li.active:after {
                                     content: '';
                                     height: 1px;
                                     width: calc(100% - 2rem);

                                     background-color: var(--accent-color);
                                     position: absolute;
                                     left: 0rem;
                                     bottom: -0.4rem;
                                 }
                             }
     }
/* For making the header disapear or appear on scroll*/
.hide-header-onscroll {
     position: fixed;
     top: 0;
     width: 100%;
     opacity: 1;
     visibility: visible;
     height: 78px;
     transition: all .4s;

     z-index: 9;

 }
.hide-header-onscroll.stick {
         top: -150px;
         opacity: 0;
         transition: all .4s;
     }
.menu-mobile {
  display: block; /* Always block so it's in the flow, but off-screen */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%; /* Adjust width as needed */
  background: var(--primary-color);
  color:white;
  z-index: 1000;
  overflow-y: auto;
  transform: translateX(-100%); /* Start off-screen */
  transition: transform 0.5s ease; /* Smooth transition for the transform */

  padding:2rem;
}
.menu-mobile-body {
     overflow: hidden;
   }
.menu-mobile-section{

  }
.menu-mobile-header{
      margin-bottom:4rem;
  }
.menu-mobile-header .close{
        cursor: pointer;
    }
.menu-mobile-navigation li{
          
          border-bottom:1px solid var(--accent-color);

  }
.menu-mobile-navigation li a{
          color:white;
          padding:2rem;
          font-size:2rem;
     
          line-height: 5.8rem
      }
.menu-mobile-navigation li.active .icon-chevron{
            transform: rotate(180deg); /* Rotates the chevron to point up */
        }
.menu-mobile-navigation ul li > ul {
        visibility: hidden; /* Initially hidden */
        opacity: 0; /* Start fully transparent */
        max-height: 0; /* Start with no height */
        overflow: hidden; /* Prevent content from expanding the box */
        transform: translateX(-20px); /* Start slightly to the left */
        transition: opacity 0.5s, transform 0.5s, max-height 0.5s ease, visibility 0s 0.5s;
    }
/* Animate opacity, position, and max-height */
.menu-mobile-navigation ul li > ul li{

            border:none;
        }
/*border-top:1px solid red;*/
.menu-mobile-navigation ul li > ul li a{
                 padding-left:4rem;
                    font-size:2rem;
                
                    line-height: 3.8rem  
            }
.menu-mobile-navigation ul li.active > ul {
        visibility: visible; /* Make visible */
        opacity: 1; /* Fully visible */
        max-height: 700px; /* Sufficiently large enough to show all content */

        transform: translateX(0); /* Move to original position */
        transition: opacity 0.5s, transform 0.5s, max-height 0.5s ease; /* Animate opacity, position, and max-height */

    }
.menu-mobile.active {
    transform: translateX(0); /* Move into view when active */
  }
.menu-footer-list{
        display:flex;
        flex-wrap:wrap;
        flex-direction:column;
        gap:3rem;
    }
@media (min-width: 980px) {
.menu-footer-list{
            flex-direction:row;
            flex-wrap:nowrap
    }
        }
.menu-footer-list nav{
            min-width:200px;
        }
/* Footer V2 */
.footer-v2-text{
    font-family: var(--font-stack-B);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: normal;
    color:var(--color);
    margin-top:1.5rem;
    font-size:1.5rem;
    line-height: 2.4rem;
}
.footer-v2-list{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    margin-top:1.5rem;
}
.footer-v2-link-item{
    display:flex;
    align-items:center;
    gap:0.8rem;
}
.footer-v2-link-item span{
        font-size:1.4rem;
    }
.footer-v2-link-item a{
        display:flex;
        align-items:center;
        gap:0.8rem;
        font-family: var(--font-stack-B);
        font-size: 1.3rem;
        font-weight: 400;
        line-height: normal;
        color:var(--color);
    }
.footer-v2-link-item.--has-image{
        flex-direction:column;
        align-items:flex-start;
        gap:0.6rem;
    }
.footer-v2-link-item.--has-image a.footer-v2-logo-link{
            display:block;
        }
.footer-v2-icon{
    width:2.4rem;
    height:2.4rem;
    fill:currentColor;
    flex-shrink:0;

}
.footer-v2-partner-logo{
    max-width:260px;
    height:auto;
    display:block;


}
.footer-v2-link-desc{
    font-family: var(--font-stack-B);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: normal;
    color:var(--color);
    opacity:0.8;
    display:block;

    font-size:1.4rem;
    line-height: 1.8rem;
}
.menu-legal{

      max-width: var(--wrapper-width);

      margin: 0 auto;

      width: 100%;

      /* background-color:pink; */

      padding-left: 2rem;

      padding-right: 2rem;

}
@media (min-width: 1240px) {
.menu-legal{
                padding: 0;

}
        }
.menu-legal {


      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;

      padding-top:2.5rem;
      padding-bottom:2.5rem;
}
@media (min-width: 980px) {
.menu-legal ul{
        display:flex;
        gap:1rem
      }
         }
.menu-legal a{
        color:white;
        font-family: var(--font-stack-B);
        font-size: 1.3rem;
        font-weight: 400;
        line-height: normal;

      }
.menu-legal p{
        margin-bottom:0;
      }
.menu-legal-mention{
        font-family: var(--font-stack-B);
        font-size: 1.3rem;
        font-weight: 400;
        line-height: normal;

      }
.footer{
      max-width: var(--wrapper-width);
      margin: 0 auto;
      width: 100%;
      /* background-color:pink; */
      padding-left: 2rem;
      padding-right: 2rem;
}
@media (min-width: 1240px) {
.footer{
                padding: 0;
}
        }
.footer {


      --color:white;


      padding-top:3rem;
      padding-bottom:5rem;
}
@media (min-width: 980px) {
.footer{
            padding-top:6rem;
            padding-bottom:10rem
}
            }
.footer-header{
             margin-bottom:2rem;
      }
.footer-menu-footer{

        color:var(--color);


        display: flex;
        flex-flow:row wrap;
        gap:4rem;
      }
@media (min-width: 980px) {
.footer-menu-footer{
        gap:11rem;

        flex-flow:row nowrap
      }

      }
.footer-menu-footer nav{
            margin-top:2.5rem;
        }
.footer-menu-footer nav h3{
                font-family: var(--font-stack-A);
                font-size: 2rem;
                font-weight: bold;

                text-transform: uppercase;
                opacity: 0.5;
                font-size:1.6rem;
            }
.footer-menu-footer nav ul{
                margin-left:1rem;
                margin-top:1.5rem;
            }
@media (min-width: 980px) {
.footer-menu-footer nav ul{
                            margin-left:0
            }

            }
.footer-menu-footer nav ul a{

                    font-family: var(--font-stack-B);

                    font-size: 1.3rem;

                    font-weight: 400;

                    line-height: normal;

                    color:var(--color);
                }
.footer-menu-footer-sponsor h3{
                    margin-top:2rem;
                }
.footer-menu-footer-sponsor p{
                    margin-top:1rem;
                    color:var(--color);
                    margin:0;
                }
.footer-menu-footer-sponsor a{
                    margin-top:2rem;
                    display:block;

                    color:var(--color);
                }
.footer-menu-footer-sponsor img{
                    width:200px;
                }
/* =====================================================
   Footer V3
   ===================================================== */
.site-footer {
    background-color: var(--primary-color);
    color: #fff;
    --color: #fff;
    --line:         rgba(255,255,255,0.10);
    --line-strong:  rgba(255,255,255,0.18);
    --grey-1:       rgba(255,255,255,0.85);
    --grey-2:       rgba(255,255,255,0.62);
    --grey-3:       rgba(255,255,255,0.42);
}
/* Surcharge header footer existant pour V3 */
.site-footer .footer-header {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 4rem;
        border-bottom: 1px solid var(--line);
        margin-bottom: 4.5rem;
    }
@media (min-width: 980px) {
.site-footer .footer-header {
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between
    }
        }
.site-footer .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 1.6rem;
    }
.site-footer .footer-logo img { display: block; height: 5rem; width: auto; }
.site-footer .footer-tagline {
        font-family: var(--font-stack-B);
        font-size: 1.4rem;
        line-height: 2.2rem;
        color: var(--grey-2);
        max-width: 36rem;
    }
@media (min-width: 980px) {
.site-footer .footer-tagline { text-align: right
    } }
/* Grid 4 colonnes */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
@media (min-width: 720px) {
.footer-grid {
        grid-template-columns: 1fr 1fr
}
    }
@media (min-width: 980px) {
.footer-grid {
        grid-template-columns: 1.1fr 1.2fr 1fr 1.1fr;
        gap: 5rem
}
    }
/* Titre de colonne */
.footer-col h3 {
    font-family: var(--font-stack-A);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
    margin-bottom: 2.2rem;
}
/* Colonne contact — texte + liste */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 2rem;
}
.footer-contact-list a {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        font-family: var(--font-stack-B);
        font-size: 1.4rem;
        color: var(--grey-1);
        transition: color 150ms ease;
    }
.footer-contact-list a:hover { color: #fff; }
.footer-contact-list svg {
        width: 1.6rem;
        height: 1.6rem;
        fill: currentColor;
        opacity: 0.55;
        flex: none;
    }
.footer-contact-list a:hover svg { opacity: 1; }
/* Colonne partenaires — design éditorial typographique */
.site-footer .footer-v2-list {
        gap: 2.4rem;
        margin-top: 0;
    }
.site-footer .footer-v2-link-item.--has-image {
        display: block;
    }
.site-footer .footer-v2-link-item a.footer-v2-logo-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        transition: transform 200ms ease;
    }
.site-footer .footer-v2-link-item a.footer-v2-logo-link:hover { transform: translateX(4px); }
.site-footer .footer-v2-partner-logo {
        /*height: 2.6rem;*/
        width: auto;
        display: block;
    }
.site-footer .footer-v2-link-desc {
        display: block;
        font-family: var(--font-stack-B);
        font-size: 1.2rem;
        line-height: 1.55;
        color: var(--grey-2);
        margin-top: 0.6rem;
    }
.site-footer .footer-v2-link-item::after {
        content: "";
        display: block;
        height: 1px;
        background: var(--line);
        margin-top: 1.8rem;
    }
.site-footer .footer-v2-link-item:last-child::after {
        display: none;
    }
/* Colonne réseaux sociaux — boutons ronds */
.footer-socials {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--grey-1);
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.footer-social:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.45);
        color: #fff;
    }
.footer-social svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
    }
/* Colonne sponsor — carte bordée */
.site-footer .footer-col:last-child a {
    display: block;
}
/*padding: 1.8rem 2rem;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: background 150ms ease, border-color 150ms ease;
*/
.site-footer .footer-col:last-child a:hover {
        background-color: rgba(255,255,255,0.08);
        border-color: var(--line-strong);
    }
.site-footer .footer-col:last-child a img {
        width: auto;
        max-width: 100%;
        height: 4.4rem;
        display: block;
        margin-bottom: 1rem;
    }
.site-footer .footer-col:last-child a p {
        font-family: var(--font-stack-B);
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: var(--grey-2);
        margin: 0;
    }
/* Mentions / méta de colonne */
.footer-meta {
    margin-top: 2rem;
    font-family: var(--font-stack-B);
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: var(--grey-3);
}
/* Bandeau légal V3 */
.site-footer-legal-wrap {
    background-color: #002836;
}
.site-footer-legal-wrap .menu-legal {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
.site-footer-legal-wrap .menu-legal a {
        color: var(--grey-2);
        transition: color 150ms ease;
    }
.site-footer-legal-wrap .menu-legal a:hover { color: #fff; }
.site-footer-legal-wrap .menu-legal-mention { color: var(--grey-3); }
.button{

    background-color: var(--accent-color);
    color:white;

  position: relative;
  padding: 1rem 2rem; /* Adjust right padding to ensure space for the icon */



  border: 1px solid transparent;
  border-radius: 1rem;

  cursor: pointer;

  display: inline-flex; /* Use flex to align text and pseudo-element icon */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center text when there's no icon */
  gap:1rem;
  transition: all 0.3s ease;

}
.button:hover{
        background-color:white;
        color:var(--accent-color);

    }
.button-list{
        display:flex;
        flex-flow:row wrap;
        gap:3rem;
        justify-content: center;

     
    }
.--justify-left{
            justify-content: flex-start;
        }
.--ghost-accent{
    border:1px solid var(--accent-color);
    
    background-color:transparent;
    color:var(--accent-color);
}
.--ghost-accent:hover{
        color:white;
        background-color:var(--accent-color);
        
    }
.--ghost-primary{
    border:1px solid var(--primary-color);
    
    background-color:transparent;
    color:var(--primary-color);
}
.--ghost-primary:hover{
        color:white;
        background-color:var(--primary-color);
        
    }
.--link{
    padding:1rem 0;
    background-color:transparent;
    color:var(--accent-color);
}
.--link:hover{
        background-color:transparent;
    }
.icon-chevron{

    position: relative;

}
.icon-chevron:after{
    content:url('data:image/svg+xml,<svg width="6" height="5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m3.288 4.284 2.134-2.94a.54.54 0 0 0-.056-.69.391.391 0 0 0-.31-.11.413.413 0 0 0-.29.172L2.96 3.204 1.155.716a.413.413 0 0 0-.29-.174.391.391 0 0 0-.312.112.54.54 0 0 0-.055.69l2.134 2.94c.04.055.09.1.147.13a.382.382 0 0 0 .362 0 .44.44 0 0 0 .147-.13Z" fill="%23FF7D00"/></svg>');
    padding-left: .5rem;
    }
.icon-hour:before{
        content:url('data:image/svg+xml,<svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.906.019 7.5.066c-2.472.28-4.756 1.83-6.012 4.078C1.03 4.962.7 5.98.559 7c-.056.39-.056 1.61 0 2 .329 2.381 1.597 4.4 3.585 5.706 2.615 1.725 6.11 1.719 8.737-.012a7.99 7.99 0 0 0 3.607-6.96c-.032-.853-.138-1.462-.394-2.234a7.677 7.677 0 0 0-.9-1.875c-.3-.466-.435-.619-.566-.66-.322-.096-.606.229-.453.516.034.06.188.294.34.525.81 1.197 1.204 2.5 1.204 3.972 0 1.169-.238 2.2-.735 3.203a7.167 7.167 0 0 1-3.312 3.307c-1.031.506-1.997.728-3.16.73-1.159 0-2.162-.227-3.184-.73A7.256 7.256 0 0 1 1.55 9.99a7.527 7.527 0 0 1-.128-3.472A7.389 7.389 0 0 1 2.95 3.375 7.255 7.255 0 0 1 7.725.812C8.153.762 9.247.787 9.656.86a7.509 7.509 0 0 1 2.731 1.044c.22.138.394.134.535-.006.187-.188.181-.369-.013-.553-.128-.122-.7-.444-1.153-.65-.587-.272-1.384-.5-2.131-.616C9.313.031 8.15-.009 7.906.018Z" fill="%23003347"/><path d="M13.387 1.938c-.112.043-.23.212-.23.33 0 .157.071.276.252.42.125.096.185.124.282.124.171 0 .29-.068.356-.206.078-.168.047-.306-.116-.475-.21-.212-.362-.268-.543-.193ZM8.45 3.19a.47.47 0 0 0-.172.11l-.075.081-.015 2.213-.016 2.212-1.113 1a41.052 41.052 0 0 0-1.18 1.085c-.145.187-.05.48.184.578.193.081.253.037 1.53-1.106.663-.594 1.235-1.125 1.276-1.179l.069-.1V3.413l-.079-.097c-.075-.085-.125-.113-.265-.144a.382.382 0 0 0-.144.019Z" fill="%23003347"/></svg>');
        margin-right:1rem;
        display:inline-block;
        height: 20px;
        vertical-align: middle;
    }
.icon-location:before{
        content:url('data:image/svg+xml,<svg width="13" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.781.047A5.945 5.945 0 0 0 .706 4.659c-.331 1.482-.062 3.103.719 4.357.087.137 1.122 1.618 2.303 3.287a351.995 351.995 0 0 1 2.147 3.056c0 .01-.928.016-2.063.016-1.728 0-2.08.006-2.153.044-.206.109-.206.428 0 .537.132.066 9.55.066 9.682 0 .206-.11.206-.428 0-.537-.072-.038-.425-.044-2.154-.044-1.134 0-2.062-.006-2.062-.016s.334-.49.744-1.072c.968-1.372.912-1.28.912-1.415a.327.327 0 0 0-.234-.297c-.19-.047-.24.012-1.153 1.303-.478.678-.878 1.231-.894 1.231-.013 0-1.04-1.434-2.278-3.187-1.847-2.616-2.288-3.26-2.453-3.578a5.287 5.287 0 0 1-.366-3.891A5.333 5.333 0 0 1 5.61.703a5.436 5.436 0 0 1 2.72.25c3 1.113 4.352 4.588 2.887 7.422-.116.225-.416.684-.794 1.216-.331.471-.613.89-.625.93-.038.154.078.335.237.37.188.04.26-.032.885-.92.325-.462.665-.971.756-1.13.825-1.438.984-3.254.431-4.847A5.944 5.944 0 0 0 5.781.047Z" fill="%23003347"/><path d="M5.937 3.184a2.843 2.843 0 0 0-2.159 2.05c-.056.204-.069.335-.069.704 0 .368.013.5.069.703a2.863 2.863 0 0 0 2.087 2.037c.322.081 1.01.072 1.338-.019a2.847 2.847 0 0 0 2.019-2.018c.056-.203.068-.335.068-.703 0-.37-.012-.5-.068-.704a2.853 2.853 0 0 0-2.019-2.018c-.363-.094-.919-.11-1.266-.032Zm.978.61A2.18 2.18 0 0 1 8.45 4.975c.315.647.315 1.278-.003 1.931-.119.247-.188.34-.413.566-.225.225-.319.294-.565.412-.654.32-1.285.32-1.938 0-.247-.118-.34-.187-.566-.412-.221-.222-.293-.319-.415-.566a2.1 2.1 0 0 1 0-1.937c.122-.247.194-.344.415-.566.222-.222.32-.294.566-.415a2.115 2.115 0 0 1 1.384-.194ZM9.16 11.481c-.273.15-.157.582.152.582a.33.33 0 0 0 .313-.31.315.315 0 0 0-.466-.272Z" fill="currentColor"/></svg>');
        margin-right:1rem;
        display:inline-block;

        height: 20px;
        vertical-align: middle;
            width: 17px;
    text-align: center;
    }
.icon-search button{
        background: transparent;
        border:none;
        
        cursor: pointer;
        
        display: flex;
        justify-content: center;
        align-content: center;
    }
.tag{

    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    align-items: center;
}
.tag-item{
        background-color:var(--secondary-color);
        display:inline-block;
        padding:0rem 1rem;
        color:var(--accent-color);
        font-size:1rem;
        text-transform:uppercase;
        border-radius:5px;
        border:1px solid transparent;
        line-height:2rem;

    }
.tag-item.--tag-ngo{
            color:var(--purple);
            text-transform: none;
            font-size:1.4rem;
        }
.tag.--ghost .tag-item{
            border:1px solid var(--accent-color);
        }
.date{
    color:#8099A3;
 transition:all .3s;
}
.date.--date-small{
    font-size:1.3rem;
 }
.date.--date-bigger{
    font-size:9.6rem;line-height: 8rem;
 }
.heading{
    padding: 15rem 0;
    background-color:var(--secondary-color);
}
.heading.--archive{
        background-color:var(--blue-light-color);

        padding-bottom:5rem;
    }
.heading.--archive .heading-content {
                grid-column-end: 7 span;
            }
.heading.--bg-purple-light {
               background-color: var(--purple-light-color);
           }
.heading-news h1:after{
                content:none;
            }
.heading-tender .heading-content{
            
            grid-column-end: 8 span;
        }
.heading-flex{
        display:flex;
        gap:5rem;
        flex-wrap: wrap;
        

        justify-content: center;
    }
@media (min-width: 1240px) {
.heading-flex{
        justify-content: space-between
    }
        }
.heading-flex-item-1{
            flex: 1 1 36rem;
            order: 1;
        }
@media (min-width: 720px) {
.heading-flex-item-1{
                order:0
        }
            }
.heading-flex-item-2{

        }
.tagline{
    font-family: var(--font-stack-B);
    font-size:1rem;
    font-weight:normal;

    	font-size:16px;
	line-height:24px;
    
    color:var(--accent-color);
    text-transform:uppercase;
line-height: 1.8rem;
   
}
.tagline.--line:before{
            content:'';
            width: 5rem;
            height: 1px;
            border-bottom:1px solid var(--accent-color);
            display: inline-block;
            margin-bottom: 3px;
            margin-right: 1rem;
        }
.breadcrumb{
    padding-top:2rem;
    background-color:var(--secondary-color);
}
.breadcrumb.--archive{
         background-color:var(--blue-light-color);
    }
.breadcrumb.--bg-purple-light{
        background-color: var(--purple-light-color);
    }
.breadcrumb ul{
        display:flex;
        
        font-family: 'Inter';
        font-size: 1.4rem;
        
        color:var(--primary-color);
        
    }
.breadcrumb ul li{
            text-wrap: nowrap;
        }
.breadcrumb ul li a{
                color:inherit;
                 font-weight: bold;
            }
.breadcrumb ul li:first-child:before{
                    content:none;
                }
.breadcrumb ul li:before{
                content:url('data:image/svg+xml,<svg width="8" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.64 4.795 1.64.21A1.063 1.063 0 0 0 .91.004C.647.026.403.144.234.33a.867.867 0 0 0-.228.669c.023.241.15.465.353.62L5.437 5.5.36 9.38A.896.896 0 0 0 .004 10a.867.867 0 0 0 .228.67c.17.187.413.304.678.326.264.022.526-.053.73-.208l6-4.584a.933.933 0 0 0 .266-.316.855.855 0 0 0 0-.778.933.933 0 0 0-.265-.315Z" fill="%23FF7D00"/></svg>');
                padding-left:1rem;
                padding-right:1rem;
            }
.breadcrumb ul li:last-child{
                    display: inline-block;
              
                        width: 20rem;
                        /* Adjust the width as needed */
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
            }
@media (min-width: 768px) {
.breadcrumb ul li:last-child{
                
                            width: auto;
                            overflow: visible;
                            white-space: normal;
                            text-overflow: clip
            }
                        }
.wide-image picture{
        display: block;
    }
.wide-image picture img{
            display:block;
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
        }
body{
    margin-top:7rem;
}
@media (min-width: 980px) {
body{
               margin-top:10rem
}

        }
.hero{
    padding:5rem 0;
    padding-bottom:20rem;
    background-color:var(--primary-color);
    overflow: hidden;
    

}
.hero-swiper.swiper{
            padding-bottom: 10rem;
        }
.hero:before {
            content: '';
            width: 100%;
            height: 10rem; /*calc(var(--navigation-height)*1rem);*/
            background-color: inherit;
    
            display: block;
            position: absolute;
            top: -10rem;
            left: 0;
    }
.hero h1{
        font-family: var(--font-stack-A);
        font-size: 3.6rem;
        font-weight: bold;
        line-height: 3.8rem;


        margin-bottom:4rem;
    }
@media (min-width: 980px) {
.hero h1{
            font-family: var(--font-stack-A);
            font-size: 5.2rem;
            font-weight: bold;
            line-height: 5.8rem;
            letter-spacing:2px
    } 
        }
.hero h1 {

        color:white;
}
.hero h1:after{
            content:none;
        }
.hero p{
        font-family: var(--font-stack-B);
        font-size: 1.6rem;
        line-height: 2.4rem;
        margin-bottom:4rem;

        color:var(--secondary-color);
    }
.hero .container{
        position:relative;
    }
@media (min-width: 980px) {
            .hero .container:after{
                content:'';
                        display: block;
                        width:64rem;
                        height:64rem;
                        background-color:#B0D6F5; /*Bleu uranien*/
                        position: absolute;
                        z-index:1;
                        right:0;
                        top:0;
                        
                        transform: translateX(100%);
                        border-radius:50%;
            }
        }
.hero-item{
        display:flex;
        gap:2rem;
        align-items:center;

        flex-direction:column;
        padding:2rem;
    }
@media (min-width: 980px) {
.hero-item{
           flex-direction:row;
            padding:0rem
    } 
            }
.hero-item section{
            order:1;
        }
@media (min-width: 980px) {
.hero-item section{
                order:0
        }
            }
.hero-item picture{
        

            flex:1 0 auto;
            
            /* &:after{
                content:'';
                display: block;
                width:100%;
                height:100%;
                background-color:#B0D6F5; 
                position: absolute;
                right:-100%;
                top:0;
                
                border-radius:50%;
            } */
        }
/* position:relative; */
.hero-item picture img{
                display:block;
                width:64rem;
                border-radius:50%;
                
            }
.hero-pagination span {
                width: 1.3rem;
                height: 1.3rem;
            }
.hero-pagination span.swiper-pagination-bullet-active {
                    background-color: var(--accent-color);
                }
.card-title{
        font-family: var(--font-stack-A);
        font-size: 2rem;
        font-weight: bold;
        color:var(--primary-color);
    }
.card-title a{
        color:inherit;
       }
.card-title {

        margin-top:2rem;
        transition:all .3s;
}
.feature .container-row{
        gap:3rem;
        flex-wrap:wrap;
    }
.feature {
    margin-top:-9rem;
}
.card-feature{
    max-width:26rem;
    width:100%;
    height:29rem;
    perspective: 1000px; /* Gives a 3D space perspective */
    position:relative;
    
  

 


}
.card-feature .card-feature-front, .card-feature .card-feature-back{
        
       
    height:29rem;
        border-radius: 1.5rem;

        padding:3rem 2rem;
        
        display: flex;
        flex-flow: column nowrap;
        gap:2rem;

        justify-content: center;
        align-items: center;
        
        
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;

        transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);

 
        
    }
.card-feature-text{
        color:var(--primary-color);
        font-family: var(--font-stack-A);
        font-size: 2rem;
        font-weight:400;
        
        text-align: center;
    }
.card-feature-icon{
        
        background-color:rgba(255, 125, 0, 0.2);
        width:11rem;
        height:11rem;
        
        display:flex;
        justify-content: center;
        align-items: center;
        
        border-radius: 50%;
    
        
    }
.card-feature-icon svg{
              width:5rem;
              height: 5rem;  
        }
.card-feature-front{
        background-color:white;

     }
.card-feature-back{ /* Initial position for the back */

    }
.card-feature-back .card-feature-icon{
            background-color:white;
        }
.card-feature-back .card-feature-text{
            font-family: var(--font-stack-A);
            font-size: 2rem;
            font-weight: bold;
            color:var(--accent-color);
        }
.card-feature-back .card-feature-text a{
                color:var(--accent-color);

            }
.card-feature-back {
        background-color:#FFE5CC;
    transform: rotateY(180deg);
}
/* Flip Effect */
.card-feature.--flipped .card-feature-front {
  transform: rotateY(180deg);
}
.card-feature.--flipped .card-feature-back {
  transform: rotateY(0deg);
}
.card-feature:hover .card-feature-back {
  transform: rotateY(0deg);
}
.card-feature:hover .card-feature-front {
  transform: rotateY(180deg);
}
.card-news{

    border-radius:1.5rem;
    max-width:38rem;
    background-color:white;
    width:100%;

    padding:4rem 2rem;

    border:2px solid var(--secondary-color);
}
.card-news-header{
        display:flex;
        justify-content:space-between;
    }
.card-news-title{
        font-family: var(--font-stack-A);
        font-size: 2.4rem;
        font-weight: bold;
        color:var(--primary-color);

        margin-top:2rem;
    }
.card-news-footer{
        text-align:left;
        margin-top:5rem;
    }
/*Animation*/
.card-news{
    background-color:transparent;
    position: relative;
    overflow: hidden;
    z-index:0;

}
.card-news:before{
            content:'';
            display:block;
            width:100%;
            height:100%;
            background-color:#F5EDE8;
            background-color:white;
            position: absolute;
            right:0;
            bottom:0;
            z-index:-1;
        }
.card-news:after{
            content:'';
            display:block;
            width:1rem;
            height:1rem;
                opacity:0;
            background-color:var(--secondary-color);
            position: absolute;
            right:20%;
            bottom:20%;
            border-radius:50%;
            transition: all .6s;
            z-index:-1;
        }
.card-news:hover:after{
            transform: scale(100);
            opacity:1;
            
        }
.card-news:hover .card-title{
         color:var(--accent-color);   
        }
.card-news:hover .tag-item{
            background-color:white;
            border:1px solid var(--accent-color);
        }
.card-news:hover .date{
            color:var(--orange-light-color);
        }
.card-member{
    background-color:white;
    max-width:27rem;
    border-radius:5px;
    height:29rem;
    
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10rem 5rem;
	padding:0;

/*

    &:hover{
        background-color:var(--secondary-color);
    transition:all .3s;

    border-radius:15px;

    }
    */
}
.card-event{
    
    border-radius:1.5rem;
    max-width:38rem;
    width:100%;
    background-color:white;

    padding:2rem;

    border:2px solid var(--secondary-color);

    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
.card-event-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        
    }
.card-event-header .date span:first-child{
                display:block;
                color:var(--accent-color);
                
                font-size:6.2rem;
                line-height: normal;
                margin-top:0rem;
                
            }
.card-event-header .date span{
               color:var(--primary-color);
                font-size:1rem;
                text-align: center;
                display:block;
                text-transform: uppercase;
                margin-top:-15px
            }
.card-event-ngo{
    margin:0;
    align-self: flex-start;


    }
/* color:var(--primary-color);
        font-size:2rem;
        margin-top:2rem; */
.card-event-title + ul{
            /* margin-top:1.5rem; */
            font-size:1.3rem;
            font-weight:500;
             color:#8099A3;
            }
.card-event-title + ul li{
                display:flex;
                align-items:center;
             }
.card-event-title + ul svg{
                margin-right:1rem;
             }
.card-event-footer{
        text-align:right;
    }
/* Animation */
.card-event{

 
    background-color:transparent;
    position: relative;
    overflow: hidden;
    z-index:0;
}
.card-event:before{
            content:'';
            display:block;
            width:100%;
            height:100%;
            background-color:#F5EDE8;
            background-color:white;
            position: absolute;
            right:0;
            bottom:0;
            z-index:-1;
        }
.card-event:after{
            content:'';
            display:block;
            width:1rem;
            height:1rem;
                opacity:0;
            background-color:var(--secondary-color);
            position: absolute;
            right:20%;
            bottom:20%;
            border-radius:50%;
            transition: all .6s;
            z-index:-1;
        }
.card-event:hover:after{
            transform: scale(100);
            opacity:1;
            
        }
.card-event:hover .card-event-ngo.--tag-ngo{
            border-color:transparent;
        }
.card-event:hover .card-title{
         color:var(--accent-color);
        }
.card-event:hover .card-title + ul{
                color:var(--accent-color);
            }
.card-event:hover .tag-item{
            background-color:white;
            border:1px solid var(--accent-color);
        }
.card-event:hover .date{
            color:var(--orange-light-color);
        }
.card-event:hover .date span{
                   color:var(--accent-color);
            }
.card-job{
        
    border-radius:1.5rem;
    max-width:38rem;
    width:100%;

    background-color:white;

    padding:2rem;

    border:2px solid var(--secondary-color);
    
    
    
}
.card-job-header{
        display:flex;
        justify-content:flex-end;
    }
.card-job-header .date{
                
                
            }
.card-job-ngo{
        color:var(--purple);
        margin:0;
    }
.card-job-title + ul{
            margin-top:1.5rem;
            font-size:1.3rem;
            font-weight:500;
             color:#8099A3;
            }
.card-job-title + ul li{
                display:flex;
                align-items:center;
             }
.card-job-title + ul svg{
                margin-right:1rem;
             }
.card-job-footer{
        text-align:right;
    }
.flip{
    perspective: 1000px; /* Gives a 3D space perspective */
    position:relative;
 max-width:26rem;
    width:100%;

    background-color:transparent;

    cursor:pointer;

}
.flip .flip-front, .flip .flip-back{
        width: 100%;
        height:100%;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;

        transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);  
    }
.flip-front{
        background-color:white;

    }
.flip-front-item{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
.flip-back{
        background-color:white;

        transform: rotateY(180deg);
    }
.flip-back-item{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
/*flip effect*/
.flip.--flipped .flip-front {
        transform: rotateY(180deg);
        }
.flip.--flipped .flip-back {
        transform: rotateY(0deg);
        }
/*flip on Hover*/
.flip:hover .flip-front {
        transform: rotateY(180deg);
        }
.flip:hover .flip-back {
        transform: rotateY(0deg);
        }
.card-ressource{
    border-radius:15px;
    border:2px solid var(--secondary-color);
    padding:1rem 2rem 2rem 2rem; /*1rem 2rem;*/
    background-color:white;

    max-width:40rem;
    
    --color:var(--accent-color);
}
.card-ressource > span{
        text-align: right;
        display:block;
        color:var(--color);
    }
.card-ressource-content{
        display:flex;
        align-items:center;
        gap:2rem;
    }
.card-ressource-header{
        font-size:2rem;
        color:var(--primary-color);
    }
.card-ressource-header h3{
            margin:0;
            font-family: var(--font-stack-A);
            font-size: 2rem;
            font-weight: bold;
                line-height: 2.2rem;
        }
.card-ressource-header a{
            color:inherit;
            color:var(--primary-color) !important;
        }
.card-ressource .icon svg{
            border-radius: 50%;
            width:5rem;
            height:5rem;
            background-color:var(--color);
            padding:1rem;
            
        }
.flex-section{
    
    /* background-color:pink; */
    display:flex;
    flex-flow:row wrap;
    gap:4rem;
    align-items: center;
    
    justify-content: center;
}
/*
    &.--small{
        max-width:60rem;
        margin: 0 auto;
    }
    */
.flex-section.--reverse{
      flex-direction: row-reverse;  
    }
.flex-section-item:first-child{
            flex: 1 1 40rem;
        }
.flex-section-item img{
            border-radius:50%;
        }
/*Decoration */
@media (min-width: 980px) {

    .flex-section{
        position: relative;
    }
            .flex-section-item picture{
                display: block;
                width:100%;
                height:100%;
            }
                .flex-section-item picture:after{
                    content:'';
                    width:46rem;
                    height:46rem;
                    background-color: var(--blue-uranus);
                    position: absolute;
                    border-radius: 50%;
                    bottom:0;
                    right:0;
                        transform: translateX(100%);
                }
                .flex-section.--reverse picture:after{
                transform: translateX(-100%);  
                    right:unset;
                    left:0;
                }
}
.form{
    display:block;


}
.form-inline{
        display:flex;
        gap:2rem;
    }
.form-inline.--center{
            align-items:center;
        }
.form .field-wrapper{
        min-width:40rem;
        max-width:50rem;
        width:100%;
    }
.form button{
        font-family: var(--font-stack-B);
        font-size: 1.6rem;
        line-height: 2.4rem;
        font-weight: 400;
        text-wrap: nowrap;
    }
.form input{
        font-family: var(--font-stack-B);
        font-size: 1.6rem;
        line-height: 2.4rem;

    }
input{
width:100%;
max-width:49rem;
border-radius:.5rem;
border:1px solid #ccc;

padding:1rem 2rem;
}
select{
width:100%;
max-width:49rem;
border-radius:.5rem;
border:1px solid #ccc;

padding:1rem 2rem;
}
.figures-item{
        display:flex;
        justify-content: center;
        align-items: center;
        

        background-color: red;
      /*reduced from 30 to 20rem - cf:1.2*/
        height:20rem;
        width:20rem;
        border-radius: 50%;

        font-family: var(--font-stack-A);

        font-size: 2rem;

        font-weight: bold;

    }
.figures-item-value{
            /*Page template and Archive template*/
            font-family: var(--font-stack-A);
            font-size: 6.2rem;
            font-weight: bold;
            line-height: 107%;
              font-size:6.2rem;
            color:white;
            text-align: center;
        }
.figures-item-label{
            text-transform: uppercase;
            color:white;
            text-align: center;

            font-size:1.6rem;
            line-height: 2.2rem;
            max-width:15rem;

        }
/* Les différents background*/
.figures-item.--bg-primary{
            background-color:var(--primary-color);
        }
.figures-item.--bg-primary .figures-item-label{
                color:var(--accent-color);
            }
.figures-item.--bg-purple{
            background-color:var(--purple);

        }
.figures-item.--bg-purple .figures-item-label{
                color:var(--accent-color);
            }
.figures-item.--bg-orange{
            background-color:var(--accent-color);

        }
.figures-item.--bg-orange .figures-item-label{
                color:var(--primary-color);
            }
.figures-item.--bg-uranus{
            background-color:var(--blue-uranus);

        }
.figures-item.--bg-uranus .figures-item-label{
                color:var(--primary-color);
            }
.figures-item.--bg-orange{
            background-color:var(--accent-color);

        }
.figures-item.--bg-orange .figures-item-label{
                color:var(--primary-color);
            }
.figures-item.--bg-isabeline{
            background-color:var(--secondary-color);

        }
.figures-item.--bg-isabeline .figures-item-label{
                color:var(--accent-color);
            }
.figures-item.--bg-isabeline .figures-item-value{
                color:var(--accent-color);
            }
.logo.--bg-rounded,.disc.--bg-rounded{
        height: 27rem;
        width:27rem;
        border-radius: 50%;

        background-color:white;

        display:flex;
        justify-content:center;
        align-items:center;

        flex: 0 27rem;
    }
.--rounded{
    border-radius: 50%;
    width:34rem;
    height:34rem;
    overflow: hidden;
}
.label-category{
    
    display: flex;
    flex-flow: row wrap;
    gap:2rem;

    max-width:89rem;
}
.label-category-item{
        padding:2rem;
        background-color:white;
        
        color:var(--primary-color);
        
        border-radius: 1rem;
        
        display: flex;
        gap: 1rem;
        align-items: center;

         box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.05);
    }
.filter{
    background-color:white;
    padding:4rem;

    border-radius:1rem;
    box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.05);
}
.filter-form{
        display: flex;
         flex-wrap:wrap;
        gap:1rem;
    }
.filter-form label{
            font-family: var(--font-stack-B);
            font-size: 1.3rem;
            font-weight: 400;
            line-height: normal;
            color:var(--primary-color);
            font-weight:600
        }
.filter-form .field-wrapper{
            min-width:unset;
        max-width: 50rem;
        width: 100%;

        flex: 1 1 20rem;
        }
.filter-tag{
        margin-top:3rem;
    }
.filter-tag ul{
            
            display:flex;
             flex-wrap:wrap;
            gap:1.5rem;
        }
.filter-tag ul li{
                display: inline-block;
            }
.filter-tag ul li a{
                    border-radius: .5rem;
                    padding:.5rem 1.5rem;
                    background-color: rgba(255, 125, 0, 0.2);
                    color: var(--accent-color);
                    line-height: 1.2rem;
                    font-size: 1rem;

                    display:flex;
                    align-items:center;
                    gap:1rem;
                }
.filter-tag ul li a svg{
                        width:8px;
                    }
.filter-tag ul li a:hover{
                        background-color:var(--accent-color);
                        color:white;
                    }
.results{
    font-family: var(--font-stack-A);
    font-size: 2.4rem;
    font-weight: bold;

    color:#8099A3;

    margin-top:3rem;
}
.paginate{
    font-family: var(--font-stack-A);
    font-size: 2rem;
    font-weight: bold;
    font-weight:400;
}
.paginate ul{
        display:flex;
        align-items:center;
    }
.paginate a{
        color:black;

        
    }
.paginate .active a{

            display: inline-block;
            background-color:var(--blue-uranus);
            color:white;

            height:5rem;
            width:5rem;

            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
        }
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99991; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 51, 71, 0.8);

}
/* Semi-transparent blue background */
.modal-content {
        position: relative;
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 5rem;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
        box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius:1rem;
    }
.modal.show {
    display: block;
    animation: fadeIn 0.5s forwards; /* Ensures it stays visible after animating */
    }
.modal.hide {
        animation: fadeOut 0.5s forwards;
    }
.modal .close {
    color: #aaa;
    position: absolute;
    right: 25px;
    top: 0;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    }
.modal .close:hover,
    .modal .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
/*Definir les couleurs de background identifié sur les templates */
.--bg-primary{
    background-color:var(--primary-color);
    color:white;
}
.--bg-primary h2, .--bg-primary p { color: white; }
.--bg-dark{
    background-color:black;
}
.--bg-white{
    background-color:white;
}
.--bg-grey-light{
    background-color:#CFD0D1;
}
.--bg-orange-light{
    background-color:#FFBE80;
    background-color:rgba(245, 237, 232, 0.5);
}
.--bg-blue-light{
    background-color:#F2F5F6;
}
.--bg-purple-light{
    background-color:var(--purple-light-color);
}
.--accent-color{
    color:var(--accent-color);
}
.--primary-color{
    color:var(--primary-color);
}
/*Definir les couleurs de texte identifié sur les templates */
/*Definir les espacement (margin, padding, gap) identifié sur les templates et les harmoniser */
.--p-none{
    padding:0;
}
.--p-1{
    padding:1rem;
}
.--p-2{
    padding:2rem;
}
.--pt-1{
    padding-top:1rem;
}
.--pt-2{
    padding-top:2rem;
}
.--pt-3{
    padding-top:3rem;
}
.--pt-4{
    padding-top:4rem;
}
.--pt-5{
    padding-top:5rem;
}
.--pb-1{
    padding-bottom:1rem;
}
.--pb-2{
    padding-bottom:2rem;
}
.--pb-3{
    padding-bottom:3rem;
}
.--pb-4{
    padding-bottom:4rem;
}
.--pb-5{
    padding-bottom:5rem;
}
.--ph-1{
    padding-left:1rem;    
    padding-right:1rem;
}
.--ph-2{
    padding-left:2rem;    
    padding-right:2rem;
}
.--ph-3{
    padding-left:3rem;    
    padding-right:3rem;
}
.--ph-4{
    padding-left:4rem;    
    padding-right:4rem;
}
.--ph-5{
    padding-left:5rem;    
    padding-right:5rem;
}
.--m-none{
    margin:0;
}
.--mb-1{
    margin-bottom:1rem;
}
.--mb-2{
    margin-bottom:2rem;
}
.--mb-3{
    margin-bottom:3rem;
}
.--mb-4{
    margin-bottom:4rem;
}
.--mb-5{
    margin-bottom:5rem;
}
.--gap-1{
    gap:1rem;
}
.--gap-2{
    gap:2rem;
}
.--gap-3{
    gap:3rem;
}
.--gap-4{
    gap:4rem;
}
.--gap-5{
    gap:5rem;
}
.--align-left {
    text-align: left;
}
.--align-center {
    text-align: center;
}
.--align-right {
    text-align: right;
}
.--upper {
    text-transform: uppercase;
}
.--small{
    font-family: var(--font-stack-B);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: normal;
}
.svg-icon {
    stroke-width: 1px;
    width: 18px;
    height: 20px;

    fill:transparent;
}
.--box-shadow{
        box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.05);
    }
.--overflow-hidden{
    overflow:hidden;
}
.no-feature-image{
    
}
.--border-gray{
    border:solid 1px #F5EDE8;
}
.section-text-image.--bg-primary .container-section h2{
		color:white;
	}
.section-text-image.--bg-primary .container-section header span{
			font-size:1.4rem;
		}
.section-text-image.--bg-primary .container-section p{
			color:var(--blue-uranus);
		}
.footer-menu-footer-sponsor.menu-footer-sponsor img{
        width:200px
    }
.card-job, .card-news{
        display: flex;
    flex-flow: column;
}
.card-job ul,.card-news ul{
        flex-grow: 2
    }
.card-job .card-news-title,.card-news .card-news-title{
        flex-grow:2;
    }
.single-acodev_event .container .button{
        color:white;
    }
.single-acodev_event .container .button:hover{
            color:var(--accent-color);
            border:1px solid var(--accent-color);
        }
.single-acodev_event .container .button:hover:after{
                content:none;
            }
.single-acodev_event .container .button:after{
            content:none;
        }
.no-test{
    color:inherit;
}
/*forminitaor form */
.forminator-col{
    padding:0 !important;
    
}
.forminator-col input,.forminator-col textarea{
        border:1px solid #CFD0D1;
        border-radius: 15px !important;
        
        font-size:1.3rem !important;
    }
.forminator-col .forminator-button-upload{
        background-color:#CFD0D1;
        color:black;
    }
.forminator-col .forminator-button-upload:hover{
            background-color:#CFD0D1 !important;
        }
.forminator-col button{
        background-color: var(--accent-color);
        color: white;
        position: relative;
        padding: 1rem 2rem;
        border: 1px solid transparent;
        border-radius: 1rem !important;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        transition: all 0.3s ease;
    }
.forminator-col button:hover{
            background-color:var(--accent-color);
           
                
            box-shadow: unset !important;

        }
/*openstreetmap*/
.--osm .leaflet-map.leaflet-container{
        height: 100% !important;
    }
.banner-section .container-section-header{
margin-bottom: 4rem ;
    }
.banner-section .container-section-header h2{
        color:white;  max-width:70rem;
       width:100%;
       margin-left:auto;
       margin-right:auto;

       margin-bottom:3rem;

        font-family: var(--font-stack-A);

        font-size: 4.2rem;

        font-weight: bold;

        line-height:normal;
    }
.banner-section .container-section-header p{
        color:white;
    }
.feature-section .container-section{
        padding-top: 1px;
        padding-bottom:0;
    }
/*optional*/
.feature-section .container-section-main{
            margin-top:-10rem;
        }
.featured-section{
    margin-top: -12rem;

}
.featured-section img{
        border-radius:2rem;
    }
.featured-section .featured-image-description{
        font-family: var(--font-stack-B);
        font-size:1rem;
        font-weight:normal;
        margin-top:-7px;
    }
.featured-section picture{
            display: block;
        text-align: center;
    }
.wysiwyg{

    --color:#333;

    color:var(--color);
    padding-top:10rem;
    padding-bottom:10rem;


}
.wysiwyg.--job-detail{
        padding-top:5rem;
    }
.wysiwyg.--job-organization{
        padding:0rem;
    }
.wysiwyg h2,.wysiwyg p,.wysiwyg ul,.wysiwyg ol{
        margin-bottom:4rem;
    }
.wysiwyg h3,.wysiwyg h4{
      margin-bottom:3rem;  
    }
.wysiwyg blockquote{
        margin-bottom:5rem;

        padding-left:4rem;
        padding-right:4rem;

        border-left:1px solid var(--accent-color);


        font-family: var(--font-stack-A);


        font-size: 2.4rem;


        font-weight: bold;
        font-weight:300;
        line-height:3.4rem;
    }
.wysiwyg blockquote p{
            padding:0;
            margin:0;
            font-size:inherit;
            font-weight:inherit;
            line-height:3.4rem;
        }
.wysiwyg blockquote {

        padding-top:2rem;
        padding-bottom:2rem;
}
.wysiwyg h3{
        color:var(--primary-color);
    }
.wysiwyg ul, .wysiwyg ol{
        padding-left:5rem;

          list-style: disc outside none;
            color: var(--accent-color);
        }
/* This changes both the text and bullet colors */
.wysiwyg ul li,.wysiwyg ol li{
                color:var(--color);
            }
.wysiwyg ul li::marker,.wysiwyg ol li::marker{
                     color: var(--accent-color); 
                }
.wysiwyg ol{
        list-style: decimal;
    }
.wysiwyg a{
    color:var(--accent-color);

    }
.wysiwyg a[target="_blank"]:after{
        content:url('data:image/svg+xml,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path d="M313 76.3c-5 2.4-8.1 5.1-10.5 9.1-5.4 9.3-4.1 19.1 3.4 26.6 6.5 6.5 9.2 7 34.2 7h21.4l-60.7 60.7c-42.1 42.2-61.2 61.9-62.3 64.5-3.3 8.1-1.1 19.2 5.1 25 6 5.6 16.4 7.5 24.2 4.3 2.6-1.1 22.3-20.2 64.5-62.3l60.7-60.7v21.4c0 25 .5 27.7 7 34.2 10.4 10.4 26.7 8.3 34-4.4l3-5.2v-52.3c0-57 .1-56.3-5.8-62.6-1.5-1.6-4.5-3.7-6.7-4.7-3.7-1.7-7.4-1.9-56.5-1.8-37.9 0-53.2.4-55 1.2z" fill="%23ff7d00"/><path d="M131.5 95.1c-21.7 3.2-40.4 16.9-50 36.5-6.8 14-6.5 7.8-6.5 134 0 110.3.1 114.3 2 121.8 4.6 17.9 17.6 34.3 33.7 42.3 15.4 7.7 8.6 7.4 138.8 7.1l116-.3 8-3c18.9-7.2 33.4-21.6 40.1-39.9 4-11.1 4.5-19.9 4.2-70.2l-.3-47.1-3-4.9c-1.9-2.9-4.9-6-7.8-7.8-9.3-5.7-22.6-3.2-28.8 5.5-4.7 6.6-4.9 9.1-4.9 59.7 0 46.2-.1 47.7-2.1 51.9-2.5 5.1-7.6 9.6-12.8 11.2-2.8.8-34.1 1.1-112.9 1.1h-109l-5.3-2.8c-3.9-2-6.2-4.1-8.4-7.7l-3-4.8-.3-109.6c-.2-79.5 0-110.7.9-113.7 1.5-5.5 5.9-10.7 11.2-13.3 4.2-2 5.7-2.1 51.3-2.1 28.3 0 48.7-.5 51.4-1.1 6.4-1.4 11.4-5.1 14.6-10.5 6.1-10.3 2.5-23.3-8-29.9l-4.9-3-49.1-.1c-27-.1-51.8.2-55.1.7z" fill="%23ff7d00"/></svg>');
        }
body.archive .breadcrumb{
	background-color:var(--blue-light-color);

    }
body.blog .breadcrumb{
	background-color:var(--blue-light-color);
    }
.search main article{
            margin:0;padding:0;
        }
.search main article h2{
                font-size:2.4rem;
                margin-bottom:0;
               
            }
.search main article h2 a{
                    color:var(--primary-color);
                }
.search main article {
            border-bottom:1px solid #eee; padding-bottom:2rem;
}
.search .--search .heading-flex-item-1 span{
				margin-top:3rem;
				color:var(--accent-color);
				font-size:6.2rem;
				text-align:center;
				display:inline-block;
			}