/*Variables*/
@import "variables/font.css";
@import "variables/color.css";
@import "variables/scale.css";
@import "components.css";

*{
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body {
  margin:0px auto;
  padding:0px;
  background-color:var(--neutral-white);
  max-width: 2560px;
  width: 100%;
  position: relative;
}

#uci_link {
    display:none;
}

/*---------Typography---------*/
h1, h2, h3, h4, h5 {
    font-family: var(--font-primary);
    line-height: var(--font-lh-title);
    font-weight: var(--font-fw-black);
    color: var(--neutral-black);
    margin: 0 0 24px 0;
    text-transform: uppercase;
}
h1 {font-size: var(--font-fs-title-1);}
h2 {font-size: var(--font-fs-title-2);}
h3 {font-size: var(--font-fs-title-3);}
h4 {font-size: var(--font-fs-title-4);}
h5 {font-size: var(--font-fs-title-5);}

p, li, a, label, div {
    font-size: var(--font-fs-body);
    line-height: var(--font-lh-body);
    color: var(--neutral-black);
    font-family: var(--font-secondary);
    margin: 0 0 8px 0;
}
caption {
    font-size: var(--font-fs-caption);
    line-height: var(--font-lh-caption);
    margin-bottom: 0;
}
ol, li {
    list-style-type: none;
}
a {
    color: var(--primary-shade-1);
    font-weight: var(--font-fw-medium);
    text-decoration: none;
}
a.intern-link {
    position: relative;
    color: var(--neutral-black);
    display: inline-block;
    transition: color .2s cubic-bezier(.25,.01,.25,1) 0s;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}
a.intern-link:hover {
    color: var(--neutral-white);
}
a.intern-link:before, a.extern-link:before  {
    position: absolute;
    content: "";
    bottom: 5px;
    left: -2px;
    width: calc(100% + 4px);
    height: 2px;
    border-radius: 2px 2px 0 0;
    background-color: var(--primary-shade-2);
    z-index: -1;
    transition: height .2s cubic-bezier(.25,.01,.25,1) 0s;
}
a.intern-link:hover:before {
    height: calc(100% - 8px);
}
a.extern-link {
    background-image: url();/*icon new window*/
    padding-right: 28px;
}
a.external-link:hover:before {
    background-color: var(--info-base);
}


/*---------Breakpoints---------*/
/*---Desktop---*/
@media (max-width: 1140px) {
  
}
/*---Laptop---*/
@media (max-width: 960px) {
  
}
/*---Tablet---*/
@media (max-width: 720px) {
  
}
/*---Phone---*/
@media (max-width: 576px) {
  
}


/**/
header {
    display: flex;
    padding: 0px 10%;
    position: relative;
}
#topbar {
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 10%;
    background-color: white;
    left: 0;
    transition: all 0.2s ease;
}
#topbar.nav-up {
    transform: translateY(-100%);
    box-shadow: none;
}
#topbar.nav-down, #topbar.nav-up {
    position: fixed;
    top: 0;
    margin-bottom: 0px;
}

    .icones-mobile {
        display: none;
    }



header a.logo {
    margin-top: 10px;
}
header ul.main-nav__list {
    display: flex;
    margin: 0;
}
header .menubar {
    width: 100%;
    margin-bottom: 0px;
}
header .menu-icones, header .menu-icones a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 32px;
    margin: 0;
}
header .icones {
    display: flex;
    gap: 16px;
    margin: 0;
}
.icones a {
    margin: 0;
}
header .menubar-fond {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}
header div#raccourcisbar a {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}


div#raccourcisbar {
    display: none;
}
@media (min-width: 1599px) {
    header li.main-lvl1-nav__item {
        padding: 8px 16px;
        height: 108px;
        display: flex;
        align-items: center;
        position: relative;
        margin: 0;
    }
    header li.main-lvl1-nav__item ul {
        display: none;
        flex-direction: column;
        background-color: white;
        width: 100%;
    }
    
    header li.main-lvl1-nav__item:hover ul {
        display: flex;
    }
    
    header li.main-lvl1-nav__item a {
        text-transform: uppercase;
        margin: 0;
    }
    header li.main-lvl1-nav__item ul {
        z-index: 10;
        width: max-content;
        position: absolute;
        background-color: #FFFFFF;
        left: 0;
        top: 101%;
        border-radius: 0 0 8px 8px;
        padding: 24px 10px;
        grid-gap: 60px;
        gap: 0;
        -ms-grid-columns: 1fr 1fr 1fr;
        border-top: 4px solid var(--yellow-base);
        /* grid-template-columns: 1fr 1fr 1fr; */
    }
    header li.main-lvl2-nav__item a {
        padding: 8px 16px;
        font-size: var(--font-fs-body);
        color: var(--neutral-black);
    }
    
  .main-lvl3-nav__list{
    list-style: none;
    padding: 0 0 0 10px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 97%;
    margin: 0 auto 0 auto;
    width: 260px;
  }
  li.main-lvl2-nav__item {
    position: relative;
    }
  .main-lvl2-nav__item:hover .main-lvl3-nav__list{
    opacity: 1;
    visibility: visible;
    background: transparent;
    padding: 0 16px;
    left: 100%;
    top: -24px !important;
    border-top: 0;
    border-radius: 8px;
  }  
  .main-lvl3-nav__item{
    background-color: #FFF;
    padding: 0px;
    margin: 0;
  }
  .main-lvl3-nav__link {
    display: block;
    font-size: 1.3rem;
    color: #0aa2c7;
    font-weight: 400;
    padding: 4px 16px !important;
    border-radius: 4px;
    letter-spacing: -0.5px;
  }
  .main-lvl3-nav__list li:first-of-type {
    border-radius: 8px 8px 0 0;
    }
    .main-lvl3-nav__list li:last-of-type {
    border-radius: 0px 0px 8px 8px;
    }
    .main-lvl3-nav__link:hover {
        color: var(--blue-base);
        background-color: var(--neutral-tint-3);
    } 
    
    /* niveau 4 : caché pour le moment */
    .main-lvl4-nav__list {
    list-style: none;
    padding: 0 0 0 10px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 97%;
    margin: 0 auto 0 auto;
    width: 260px;
    }    
       
}
@media (max-width: 1700px) {
    #topbar {
        padding: 0 5%;
    }
}

@media (max-width: 1599px) {
    header a.main-lvl1-nav__link img {
        display: none;
    }  
    header a.main-lvl1-nav__link img {
        display: none;
    }
    header .menu-icones {
        gap: 16px;
    }
    header .icones {
        display: flex;
        gap: 8px;
    }
    header a.logo img {
        width: 140px;
    }
    div#raccourcisbar {
        display: flex;
    }
    nav#menu a img {
        display: none;
    }

}
@media (max-width: 720px) {
    header .icones {
        display: none;
    }
    .icones-mobile {
        display: flex;
        gap: 16px;
        justify-content: flex-end;
        margin: 0;
        background: #eeeeee;
        padding: 8px 5% 0;
    }
    #topbar {
        padding: 0;
    }
    header .menubar-fond {
    padding: 0 5%;
}
}
/**/
footer {
    border-top: 4px solid var(--blue-base);

}
footer .col-4 {
    display: flex;
    justify-content: space-between;
    padding: 56px 10% 24px;
    background-color: var(--neutral-tint-3);
    gap: 24px;
}
footer .col-4 .col:last-of-type {
    background-color: white;
    border: 4px solid;
    border-radius: 24px 24px 50px;
    padding: 24px;
    height: fit-content;
    position: relative;
}
footer .col-4 .col:nth-last-child(3) span {
    font-weight: var(--font-fw-bold);
}
footer .col-4 .col:nth-last-child(2) ul, footer .col-4 .col:nth-last-child(3) ul {
    padding: 0;
    margin: 0;
}
footer .row-1 {
    text-align: center;
    background-color: white;
    text-transform: uppercase;
    padding: 16px 0;
}
footer p.citykomi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
footer .btn-primary {
    display: inline-block;
}


@media (max-width: 1140px) {
    footer .col-4 {
        flex-wrap: wrap;
    }
    footer .col-4 .col {
        width: 48%;
    }
}
@media (max-width: 900px) {
    footer .col-4 .col {
        width: 100%;
    }
}
@media (max-width: 720px) {
    footer .col-4 .col {
        width: 100%;
        text-align: center;
    }
}

/*----------------------------------------------PAGES------------------------------------------*/
.section {
    padding: 56px 10%;
    position: relative;
}
.col-2 .col {
    width: 50%;
}
@media (max-width: 720px) {
    .section {
        padding: 56px 5%;
    }
}
/*---------------HOME------------------*/
.section-banner .txt {
position: absolute;
    z-index: 3;
    /* top: 24%; */
    padding-left: 10%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, rgb(50 34 1 / 66%) 0%, rgba(100, 69, 2, 0) 100%);
    backdrop-filter: blur(1.2px);
}

.section-banner .slogan {
    font-size:20px;
    margin-right:20px;
    color:#fff;
}

.section-banner .slick-initialized .slick-slide {
    display: flex;
    height: 500px;
    object-fit: cover;
    align-items: center;
}
.section-banner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 300px;
    background-image: url(../images/motifs/motif-banner.svg);
    bottom: -8px;
    left: 0;
    z-index: 3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.section-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 2560px;
    max-width: 100%;
}
.section-banner .slick-slider {
    width: 100%;
}
.section-banner {
    position: relative;
    margin-top: 106px;
}
@media (max-width: 1620px) {
    .section-banner {
        position: relative;
        margin-top: 76px;
    }
}

.section-banner .txt p, .txt h1 {
    color: white;
}
.en-un-clic .links {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.en-un-clic h2 span {
    color: var(--yellow-base);
}
.en-un-clic h2 {
    margin: 0;
}

.en-un-clic .links a {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    text-align: center;
    font-size: var(--font-fs-title-4);
    font-weight: var(--font-fw-bold);
    text-transform: uppercase;
    margin: 0;
    line-height: normal;
    width: calc(100% / 5);
}
.en-un-clic {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 12px;
    width: 1140px;
    padding: 12px 50px;
    position: absolute;
    z-index: 5;
    background-color: white;
    right: 0;
    bottom: -18%;
    border-radius: 24px 0 0 100px; 
}
.en-un-clic .links img {
    width: 56px;
}
.en-un-clic .links a:hover img {
    border-radius: var(--radii-rounded);
    border: 1px solid #f1a60563;
    background-color: #f1a6052e;
}
.section-actualites {
    background-color: var(--neutral-tint-3);
    padding-top: 152px;
    padding-bottom: 90px;
    margin: 0;
}
.section-actualites p.date {
    color: var(--blue-base);
    margin: 8px 0 8px 0;
}
.actu {
    margin: 0 12px 32px;
}
.actu img {
    width: 100%;
    border-radius: 8px;
}
.section-actualites .actu-principale {
    display: flex;
    position: relative;
}
.section-actualites .actu-principale .col:first-of-type {
    width: 70%;
    border-radius: 8px;
}
.section-actualites .actu-principale .col:first-of-type img {
    width: 100%;
    max-width: 1400px;
}

.actu-principale-img {
    height:560px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/logo.png');    
}



.section-actualites .actu-principale .col:last-of-type {
    /*background-color: var(--blue-base);*/
    background-color: #355781cc;
    padding: 24px;
    border-radius: 8px 8px 100px 8px;
    position: absolute;
    bottom: 4px;
    right: 0;
    margin-bottom: 4px;
    max-width: 800px;
    width: 100%;
}
.section-actualites .actu-principale .col:last-of-type p, .actu-principale .col:last-of-type a, .actu-principale .col:last-of-type h3 {
    color: white;
}
.section-actualites .actu-principale {
    display: flex;
    margin-bottom: 32px;
}
.section-actualites h2 {
    font-size: var(--font-fs-title-2);
    position: absolute;
    left: 68%;
    top: 20%;
}

@media (max-width: 720px) {
    .actu-principale-img {
        height:250px;    
    }
    .section-actualites .actu-principale .col:last-of-type {
        background-color: var(--blue-base);
        
    }    
}

a.actu:hover .img {
    overflow: hidden;
    border-radius: 8px 8px 100px 8px;
    transition: 0.2s ease-out;
}
a.actu .img {
    border-radius: 8px 8px 8px 8px;
    transition: 0.4s ease-out;
    height:230px;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/logo.png');
}
a.actu.slick-slide:hover .img img {
    transform: scale(1.1);
    /* overflow: hidden; */
    transition: 0.2s ease-out;
}
.section-actualites .btn-tertiary {
    text-transform: uppercase;
}
.section-actualites .btn-tertiary:after {
    background-color: var(--neutral-white);
}
.section-actualites .btn-primary {
    position: absolute;
    left: calc(10% + 152px);
    bottom: 52px;
}

.page-actualites {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.page-actualites .actu {
    margin:0;
    width:calc(33% - 20px);
    border: 0 !important;
}

@media (max-width: 1600px) {
    .page-actualites .actu {
        width:calc(50% - 20px);
    }
}

@media (max-width: 720px) {
    .page-actualites .actu {
        width:100%;
    }
    .en-un-clic {
        padding: 24px 5%;
    }
}
.section.section-agenda .row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.section.section-agenda h2 {
    color: var(--red-base);
    margin: 0;
}
.section.section-agenda {
    background-color: var(--red-tint-4);
    border-bottom: 2px solid var(--red-base);
    padding-bottom: 92px;
}
.evenement .img {
    position: relative;
    width: -webkit-fill-available;
    margin-bottom: 16px;
    height:210px;
    width:100%;
 
}


.evenement .img img {
    object-fit: cover;
    object-position: center;

    border-radius: 8px;
    width: -webkit-fill-available;
    max-height: 100%;
    height: 100%;
}
.evenement:hover .img  {
    overflow: hidden;
    border-radius: 8px;
}

.evenement:hover .img img {
    transform: scale(1.1);
    transition: 0.2s ease-out;
}


.evenement .dates p {
    color: white;
    margin: 8px 0;
    text-transform: uppercase;
}
.evenement p.date-fin:before {
    content: "-";
    position: absolute;
    left: 5px;
}
.evenement p.date-fin {
    padding-left: 24px;
    position: relative;
}
.evenement .dates {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--red-base);
    color: white;
    padding: 0 8px;
    border-radius: 0 8px;
    margin:0;
}
.evenement {
    margin: 0 12px;
}
.section-agenda .btn-primary {
    background-color: var(--red-tint-5);
    color: var(--red-base);
    border: 4px solid var(--red-base);
}


.page-agenda {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.page-agenda .evenement {
    margin:0;
    width:calc(33% - 20px);
    border: 0 !important;
}

@media (max-width: 1140px) {
    .page-agenda .evenement {
        width:calc(50% - 20px);
    }
}

@media (max-width: 720px) {
    .page-agenda .evenement {
        width:100%;
    }
}
/*
.section.section-explorer .col-2 .col:first-of-type img, .section-projet .col-2 .col:last-of-type img {
    border-radius: 32px 32px 200px;
    position: relative;
    width: 100%;
}
*/

.section.section-explorer .col-2 .col:first-of-type img  {
    border-radius: 32px 32px 200px;
    position: relative;
    width: 100%;
}

.section.section-explorer .chiffres {
    display: flex;
    justify-content: space-evenly;
        flex-wrap: wrap;
}
.section.section-explorer .chiffres div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.section.section-explorer .chiffres .chiffre {
    font-size: var(--font-fs-title-2);
    font-weight: var(--font-fw-bold);
    margin: 0;
}
.section.section-explorer .chiffres div .chiffre:after {
    content: "";
    height: 32px;
    width: 32px;
    background-color: var(--yellow-base);
    position: absolute;
    border-radius: var(--radii-rounded);
    top: 2px;
    left: -19px;
    z-index: -1;
}
.section.section-explorer .chiffres div:first-of-type .chiffre:after {
    left: 4%;
}
.section.section-explorer .chiffres p {
    font-size: var(--font-fs-title-4);
    font-weight: var(--font-fw-bold);
    margin: 0px;
    text-transform: uppercase;
}
.section.section-explorer .chiffres {
    margin: 50px 0;
    text-align: center;
}
.section.section-explorer .chiffre {
    font-size: 2em;
    font-weight: bold;
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}
.section.section-explorer .chiffre.visible {
    transform: scale(1);
}
.section.section-explorer .col-2 .col {
position: relative;
}

.section.section-projet {
    padding-top: 0;
}
.section.section-projet .col-2, .section.section-explorer .col-2 {
    display: flex;
    gap: 52px;
}
.section-projet .col-2 .col:first-of-type, .section-explorer .col-2 .col:last-of-type {
    display: flex;
    
    flex-direction: column;
    justify-content: center;
}
.section-projet .projets {
    display: flex;
    flex-wrap:wrap;
    gap: 16px;
    margin-top: 20px;
    z-index: 3;
}
.section-projet .projet a {
    background-color: var(--yellow-base);
    padding: 6px 12px;
    border-radius: 24px 8px 24px 8px;
    border: 4px solid;
    text-transform: uppercase;
    font-weight: var(--font-fw-bold);
}
.section-projet .projet a:hover {
    border-radius: 8px 8px 8px 8px;
    transition: 0.2s ease-out;
}
.section-projet .container-map {
    position: relative;
    width: fit-content;
}
.section-projet .container-map:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 96px;
    background-image: url(../images/motifs/motif-2.svg);
    bottom: -6%;
    right: -56px;
    background-size: cover;
    transform: scaleX(-1);
    rotate: -96deg;
}
@media (max-width: 1720px) {
    .section.section-projet:after, .section.section-explorer .col-2 .col:first-of-type:after, .section.section-citykomi .citykomi:after {
        display: none;
    }
    .section-projet .container-map {
        width: auto;
    }
    .section-actualites h2 {
        font-size: var(--font-fs-title-2);
        position: absolute;
        left: 68%;
        top: 20%;
    }
}
@media (max-width: 1520px) {
    .section-actualites h2 {
        position: relative;
        left: 0;
    }

}

@media (max-width: 1140px) {
    .section.section-agenda:after {
        display: none;
    }
        .section-projet .container-map:after {
        display: none;
    }
    .section-projet .btn-tertiary {
        text-align: center;
        margin: 0 auto;
    }
    .section-projet .col-2 .col:first-of-type, .section-explorer .col-2 .col:last-of-type {
        text-align: center;
    }
    .section-projet .projets {
        justify-content: center;
    }
    .section-banner:after {
        display: none;
    }
    .section-actualites {
        padding-top: 56px;
    }
    .section-banner .txt {
        top: 0;
        height: 65.4%;
    }
    .section-banner {
        position: relative;
        display: block;
    }
    .section.section-explorer .col-2 .col:first-of-type img {
        border-radius: 32px 32px 124px;
    }
    .en-un-clic {
        width: 100%;
        position: relative;
        gap: 24px;
        flex-direction: column;
        border-radius: 0;
        border-bottom: 6px solid var(--yellow-base);
    }
    
    .en-un-clic .links a {
        width:auto;
    }
    
    .section-actualites h2 {
        position: relative;
        left: 0;
    }
    .section-actualites .actu-principale .col:last-of-type {
        max-width: 100%;
    }
    .col-2 .col {
        width: 100%;
    }
    .section.section-projet .col-2, .section.section-explorer .col-2 {
        flex-wrap: wrap;
    }
    .section.section-projet .col-2 {
        flex-direction: column-reverse;
    }
    .section-actualites .actu-principale {
        flex-direction: column;
    }
    .section-actualites .actu-principale .col:last-of-type {
        position: relative;
        margin-top: -16px;
    }
    .section-actualites .actu-principale .col:first-of-type {
        width: 100%;
    }
    .section-actualites .actu-principale .col:last-of-type {
        border-radius: 0px 0px 100px 8px;
    }
}

.section-citykomi .citykomi span {
    color: #E9540D;
}
.section-citykomi .citykomi .col-2 {
    display: flex;
}
.section-citykomi .citykomi {
    margin: 0 auto;
    background: var(--neutral-tint-3);
    padding: 0 32px;
    border-radius: 24px;
    border: 6px solid #E9540D;
}
.section-citykomi .citykomi .col-2 p {
    margin-bottom: 24px;
}
.section-citykomi .btn-primary {
    background-color: white;
    color: #e9560e;
    border: 4px solid #e9560e;
    padding: 8px 16px;
}
.section.section-citykomi .col-2:last-of-type {
    display: flex;
    align-items: center;
}
.section.section-citykomi .col-2 .col:first-of-type {
    text-align: center;
    margin: 0px;
}
/*.section.section-citykomi .citykomi:after {
content: "";
    position: absolute;
    width: 130px;
    height: 96px;
    background-image: url(../images/motifs/motif-orange.svg);
    bottom: 0%;
    right: 168px;
    bottom: 38px;
    background-size: cover;
}*/

@media (max-width: 1400px) {
.section.section-citykomi .col-2 {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.section.section-citykomi .citykomi img {
    width: 100%;
}
.section-citykomi .citykomi {
    padding: 32px;
}
}
@media (max-width: 900px) {
    .en-un-clic .links {
        display: grid;
        align-items: flex-start;
        gap: 32px;
        grid: auto-flow / 1fr 1fr 1fr;
    }
}
@media (max-width: 720px) {
    .section-projet .projet a {
        width: 100%;
    }
    .section-projet .projets {
        justify-content: center;
        flex-direction: column;
    }
    .section-agenda .btn-primary {
        position: absolute;
        bottom: 44px;
        right: 64px;
        width: 142px;
    }
    .section-actualites .btn-primary {
        bottom: 44px;
        width: 152px;
        right: 64px;
        left: inherit;
    }
.projet {
    display: flex;
}
}


/*---------Interne---------*/
.section-interne {
    display: flex;
}
.section-breadcrumbs {
    padding-top: 0px;
    margin-top: 116px;
    margin-bottom: 0;
    padding-bottom: 0px;
    background-color: var(--yellow-tint-4);
}
ol.breadcrumb li, .breadcrumb a {
    margin-bottom: 0;
}
.section-intern-banner {
    height: 440px;
    background-image: url(../images/banner-intern-test.jpg);
}
.section-intern-banner {
    position: relative;
    background-size: cover;
}
.section-intern-banner h1 {
    background-color: #f6f1e2eb;
    width: 70%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px;
    padding: 24px 24px 12px;
    border-radius: 8px 0 0 0;
    backdrop-filter: blur(3px);
}
.sticky li {
    padding: 4px 16px;
    margin: 0;
}
.sticky li a:hover {
    color: var(--blue-base);
}
.sticky ul {
    padding: 0;
    margin: 8px 0;
}
.sticky h3 {
    background-color: var(--blue-base);
    color: white;
    padding: 8px 16px;
    margin: 0;
    border-radius: 4px 4px 0 0;
}

.sticky {
    position: fixed;
    position: sticky;
    top: 159px;
    /*margin-top: 10px;*/
}
.sticky-menu {
    width: 300px;
    border: 2px solid var(--blue-base);
    border-radius: var(--radii-8);
    background-color: var(--neutral-tint-3);
}
.sticky-link {
    width: 300px;
    border: 2px solid var(--blue-base);
    border-radius: var(--radii-8);
    background-color: var(--neutral-tint-3);
    padding: 16px;
    text-transform: uppercase;
    font-weight: var(--font-fw-bold);
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.sticky-link a{
    display: flex;
    gap: 8px;
    align-items: center;
}
.section-int .col:last-of-type ul {
    padding: 0 0 0 20px;
}
.section-int h2 {
    /*margin-top: 32px;*/
}
.section-int img {
    max-width: 100%;
    border-radius: 8px;
}
.section-int .col:last-of-type  ul li {
    list-style-type: disc;  
}
.section-int .col:last-of-type  li::marker {
    color: var(--red-base);
  }
.section-int .col:first-of-type {
    width: 28%;
}
.section-int .col:last-of-type {
    width: 72%;
}
.section-int {
    display: flex;
    background-color: var(--neutral-white);
    padding-top: 30px;
}
.section-int .slick-slider img{
    width: 100%;
    border-radius: var(--radii-8);
}
.section-int .slick-slider li button {
    background-color: var(--blue-shade-4);
    border-radius: var(--radii-2);
}
.section-int .slick-slider li.slick-active button:before {
    background-color: var(--yellow-base);
    opacity: 1;
    border-radius: var(--radii-2);
}
.section-int .slick-slider .slick-dots li button:before {
    content: "";
}
.section.section-int .col:last-of-type a {
    color: var(--red-base);
    border-bottom: 2px solid;
    font-weight: 600;
}
.section.section-int .col:last-of-type h2 {
    color: var(--blue-base);
    margin:12px 0;
}
.section.section-int .col:last-of-type h3 {
    color: var(--yellow-base);
    text-transform: none;
    margin:10px 0;
}
.section.section-int .col:last-of-type h4 {
    color: var(--blue-base);
    text-transform: none;
    margin:8px 0;
}

.section.section-int .col:last-of-type h5 {
    text-transform: none;
    margin:6px 0;
}

@media (max-width: 1400px) {
    .section-int .col:first-of-type {
        display: none;
    }
    .section-int .col:last-of-type {
        width: 100%;
    }
    .section-intern-banner h1 {
        left: 5%;
        border-radius: 8px 8px 0 0;
    }
    .section-intern-banner h1 {
        width: 90%;
        text-align: center;
    }
}

@media (max-width: 1620px) {

.section-breadcrumbs {
    margin-top: 84px;
}
}
















.section.section-projet:after {
    content: "";
    position: absolute;
    width: 251px;
    height: 150px;
    background-image: url(../images/motifs/motif-4.svg);
    left: 0;
    bottom: 4%;
    z-index: 2;
    background-size: cover;
}
footer .col-4 .col:last-of-type:after {
    content: "";
    position: absolute;
    width: 37px;
    height: 28px;
    background-image: url(../images/motifs/motif-5.svg);
    bottom: -6px;
    right: -18px;
    rotate: 353deg;
}
.section.section-agenda:after {
    content: "";
    position: absolute;
    width: 215px;
    height: 115px;
    background-image: url(../images/motifs/motif-3.svg);
    bottom: 5%;
    right: 0;
    /* rotate: 353deg; */
}
.section-actualites .actu-principale .col:last-of-type:after {
    content: "";
    position: absolute;
    width: 48px;
    height: 46px;
    background-image: url(../images/motifs/motif-1.svg);
    bottom: -2%;
    right: -21px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    rotate: 261deg;
}
.section.section-explorer .col-2 .col:first-of-type:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 96px;
    background-image: url(../images/motifs/motif-2.svg);
    bottom: 0%;
    right: -29px;
    background-size: cover;
}

/* PAGINATION */
#pagination {
    margin:20px auto;
}
.pagination__list {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
    gap:20px;
}

.pagination__item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
    
	color: var(--blue-base);
	border: 1px solid var(--blue-base)!important;
    transition:all 0.5s ease-in; 
    text-decoration:none;
    border-radius:5px;
}

.pagination__item.active {
	color: #FFF!important;
	background-color: var(--blue-base);
}

.pagination__item.inactive {
	cursor: default;
	opacity: 0.33;
}

.pagination__item:hover {
	color: #FFF!important;
	background-color: var(--blue-base);
    text-decoration:none;
}


@media only screen and (max-width: 701px) {
  .pagination__item_indice {
    display:none;
  }
}

/*page active dans sous menu */
.current_page_item {
    color: var(--blue-base);
}


/* bloc infos-pratiques */

.infos-pratiques {
        width:100%; 
        margin:20px auto 20px auto; 
        padding:0;      
}

.infos-pratiques-entete {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
}



.infos-pratiques-entete div {
    text-transform:uppercase;
    color:#000;
    font-weight:600;
    font-size:1.4rem;
    white-space:nowrap;
}

.infos-pratiques-entete span {
    width:100%;
    background-color:#ccc;
    height:1px;
}


.infos-pratiques .infos-pratiques-content {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        
}



.infos-pratiques .info-pratique {
    font-size:12px;
    color:#000;
    padding:0px;
    
    gap:10px;
    display:flex;
    align-items:center;
    width:calc(50% - 10px);
}

.infos-pratiques .info-pratique-icon {
    background-repeat:no-repeat;
    background-position: center;
    background-size:contain;
    width:30px;
    height:30px;
}

.infos-pratiques .info-pratique-icon[data-info="lieu"] {
    background-image:url('../images/assets/infos-noir/carte.svg');
}
.infos-pratiques .info-pratique-icon[data-info="horaires"] {
    background-image:url('../images/assets/infos-noir/clock.svg');
}
.infos-pratiques .info-pratique-icon[data-info="tarif"] {
    background-image:url('../images/assets/infos-noir/tarif.svg');
}
.infos-pratiques .info-pratique-icon[data-info="contact"] {
    background-image:url('../images/assets/infos-noir/portail.svg');
}
.infos-pratiques .info-pratique-icon[data-info="tel"] {
    background-image:url('../images/assets/infos-noir/phone.svg');
}
.infos-pratiques .info-pratique-icon[data-info="e-mail"] {
    background-image:url('../images/assets/infos-noir/mail.svg');
}
.infos-pratiques .info-pratique-icon[data-info="url"] {
    background-image:url('../images/assets/infos-noir/globe.svg');
}
.infos-pratiques .info-pratique-icon[data-info="facebook"] {
    background-image:url('../images/assets/infos-noir/facebook.svg');
}
.infos-pratiques .info-pratique-icon[data-info="transport"] {
    background-image:url('../images/assets/infos-noir/bus.svg');
}
.infos-pratiques .info-pratique-icon[data-info="public"] {
    background-image:url('../images/assets/infos-noir/people.svg');
}

@media (max-width: 600px) {
    .infos-pratiques {
        width:100%;        
    }
    .infos-pratiques-content {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:0px;
        
    } 
    .info-pratique {
        width:calc(50% - 10px);
    }
    
    .infos-pratiques .info-pratique {
        width:100%;
    }
}    


/* publications */
#publications-wrapper {
  height: auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
  gap:20px;
  flex-wrap:wrap;
}

.publications-wrapper-home {
    flex-wrap:nowrap!important;
}


.publications--item {
  margin: 0 0 5px 0;

  
  overflow: hidden; 
  width:50%;
}

.publications--liste {

}

.publications--liste .publications--item {
    width:calc(25% - 20px);
}

.publications--item .publications--image {
    width:100%;
    height:320px;
    position:relative;
    border-radius: 5px;

}

.publications--item .publications--image picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.publications--item .publications--image picture img {
  width: 100%;
  border-radius: 5px;
}

@supports (object-fit: cover) {
  /* IF object-fit IS SUPPORTED */
  .publications--item .publications--image picture img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

.publications--item .no-photo {

    background-color:#F6f6f6;
    background-image:url('../images/logo-footer.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:30%;
}

.publications--btns {
    position:absolute;
    bottom:10px;
    left:10px;
    z-index:99;
    display:flex;
    gap:10px;
}

.publications--btns a {
    background-color:rgba(255,255,255,0.8);
    display:block;
    background-repeat:no-repeat;
    background-position:center;    
    border-radius: 5px;
    transition:0.5s all ease-in;
    width:36px;
    height:36px;    
-webkit-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);
-moz-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);
box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);     
}

.publications--btns a:hover {
    background-color:rgba(255,255,255,1);
    -webkit-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9);
-moz-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9);
box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9); 
}

.publications--btns a.publications--btn-download {
    background-image:url('../images/assets/download.svg');
}
.publications--btns a.publications--btn-view {
    background-image:url('../images/assets/view.svg');
}

.publications--item--titre {
    margin:10px 0;
}

@media (max-width: 1140px) {
  .publications--liste .publications--item {
    width:calc(33% - 20px);
  }
}

@media (max-width: 900px) {
  .publications--liste .publications--item {
    width:calc(50% - 20px);
  }
}

@media (max-width: 720px) {

  .publications--liste .publications--item {
    width:100%;
    margin-bottom:20px;
  }
}

/* ------------------------
    RECHERCHE
------------------------ */
#popin-recherche {
            display:none;
            position:fixed;
            z-index: 999999;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:rgba(255,255,255,0.7);
            backdrop-filter: blur(10px); 
            
        }
#popin-recherche-content {
            width:100%;
            height:100%;        
            display:flex;
            align-items: center;
            justify-content: center; 
        }

#search-champs {
    
}   
#search-mots {
    color: #444;
    font-weight: 300;
    width: 300px;
    margin-bottom: 10px;
    padding: 8px 16px;
    border-radius:5px;
    border:1px solid #fff;
    background-color: rgb(255,255,255,0.8);
}

#search-btns {
    display:flex;
    justify-content: space-between; 
}

#search-submit, #search-cancel {
    color: #FFF;
    font-weight: 300;
    background-color: #ccc;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 16px;
    border-radius:5px;
    margin:0;
}  

#search-submit{
    background-color: var(--yellow-base);
    opacity:0.95;
}
#search-submit:hover {
    background-color: var(--yellow-base);
    opacity:1;
}  

#search-cancel{
    background-color: #444444;
}
#search-cancel:hover {
    background-color: #000000;
}     



/* résultats recherche */
.recherche-terms {
    margin-bottom:10px;
    color: var(--yellow-base);
}
.recherche-item {
    display:flex;
    gap:20px;
    margin-bottom:20px;
    text-decoration:none;
    color:#000;
}
.recherche-item:hover {
    text-decoration:none;
}

.recherche-item:hover h3 {
    color: rgba(250,184,0,1);
}

.recherche-item-photo {
    width:130px;
    height:90px;
    position:relative;
    border-radius: 5px;
    background-color:#F1EEE8;
    background-image:url('../images/logo-footer.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:70%;
}

.recherche-item-picture {
    height: 100%;
    width:130px;
    border-radius: 5px;  
    background-repeat:no-repeat;  
    background-size:cover;
}

/* barre recherche dans les listes */
#recherche-barre {
    background-color:#eee;
    padding:5px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:10px;    
    
}
#recherche-barre-champs {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:20px;
    margin:0;
}
#recherche-barre-btns {
    display:flex;
    align-items:center;
    gap:20px;
    margin:0;
}

#recherche-barre-btns input {
    margin:0;
}

@media (max-width: 800px) {
  #recherche-barre {
      display:flex;
      flex-direction:column;
      gap:10px;
  }
  #recherche-barre-champs {
      display:flex;
      flex-direction:column;
      gap:10px;
      width:100%;
  }
  #recherche-barre-champs > * {
    width:100%;
  }
  
  #recherche-barre-btns {
    justify-content:space-between;
    width:100%;
  }
    
}

/* forms */
.form-container {
    margin:20px 0;
    padding:15px 20px;
    background-color:#eee;
    border-radius:5px;
}
.form-ligne {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:10px;
}
.form-ligne-erreur {
    background-color:#A00;
    color:#fff;
    padding:5px;
    border-radius:5px;
}
.form-ligne-done {
    background-color:#0A0;
    color:#fff;
    padding:5px;
    border-radius:5px;
}
.form-item {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.form-item label {

    color:var(--blue-base);
}
.form-required {

}
.form-required::after {
    content:'*';
    color:#a00;
    margin-left:5px;
}
/*
.form-container input, .form-container select, .form-container textarea {
    padding:6px;
    font-size:14px;
    border:1px solid #888;
    border-radius:4px;
    
}
.form-container input[type=submit] {
    border:0;
    cursor:pointer;
    margin:10px auto;
}
*/

.form-info {
    font-size:12px;
    text-align:justify;
}

@media (max-width: 600px) {
  .form-ligne {
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-bottom:10px;
  }
}


/** carte accueil **/
        #carte{
            width: 700px;
            max-width: 100%;
            height: 400px;
            z-index: 99;
            border-radius: 100px 8px 100px 8px;
            border: 6px solid #f3cf80;
        }
        
        .leaflet-control-attribution, .leaflet-control-attribution * {
            font-size:12px!important;
            opacity:0.9;
        }
        
        .leaflet-html-layer {
            width:1000px!important;
            margin:0!important;
        }
        
        .index-map-overlay {
            display:block;
            padding:1px 4px;
            background-color:rgba(0,0,0,0.6);
            color:#F1A605!important;
            font-size:15px;
            border-radius:5px;
            
            transform-origin: left bottom !important;
            
            top: -35px !important;
            
            transition:0.5s all ease-in;
            border:2px solid #000;
            margin:0!important;
        }

        .index-map-overlay-default-left {
            left:20px !important;
        }
        
        .index-map-overlay:hover, .index-map-overlay-over {
            background-color:#000;
            color:#F1A605!important;        
            transform: scale(1.1) !important;
        }



        /* Responsive */
        @media (max-width: 950px) {

            #carte{
                width: 100%;
                height: 50vh;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                border-bottom-left-radius: 0;
            }

        }
        
/* blocs sous pages */

#sous-pages {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  margin:20px 0 20px 0;
  padding:0;
  gap:20px;
}

#sous-pages a {
    display:flex;
    flex-direction:column;
    gap:1px;
    text-decoration:none;
    width:calc(33% - 20px);
    transition:0.5s all ease-in;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);
    -moz-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);
    box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.3);      
    margin:0;
    border-radius: 8px;
    border:0;
    
    position:relative;
}
@media (max-width: 1020px) {
    #sous-pages a {
        width: calc(100% / 2 - 20px);
    }
}
@media (max-width: 720px) {
    #sous-pages a {
        width: 100%;
    }
}

#sous-pages a:hover {
    -webkit-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9);
    -moz-box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9);
    box-shadow: 0px 2px 10px 0px rgba(184,184,184,0.9); 
}

#sous-pages a .image-wrapper {
    width:100%;
    height:240px;
    background-color:#F6f6f6;
    background-image:url('../images/logo-footer.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:30%;
    overflow: hidden;
    margin-bottom: 0 !important;   
}

#sous-pages a .image-wrapper #image-bandeau {
    background-size: cover;
    background-repeat:no-repeat;
    height: 100%;
    width: 100%;
    border-radius: 8px 8px 0 0;
    

}
#sous-pages a:hover .image-wrapper #image-bandeau {
    transform: scale(1.1);
    transition: 0.2s ease-out;
    border-radius: 8px 8px 0 0;
}
#sous-pages a:hover .sous-page-titre {
    color: var(--red-base);
}
@supports (object-fit: cover) {
  /* IF object-fit IS SUPPORTED */
  #sous-pages a.image-wrapper picture img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

.sous-page-titre {
    padding: 8px;
    text-align: center;
    color: #444;
    font-size: 1.4rem;
    font-weight: 600;
    
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    margin-bottom: 0 !important;        
}
     
#sous-pages a:hover .sous-page-titre {
    background-color: rgba(255, 255, 255, 0.95);
}        
        
/* video intégree via champ ACF */
._embed_video {
    width:100%;
    max-width:100%;
    height:500px;
}

@media (max-width: 1000px) {
    ._embed_video {
        height:400px;
    }
}
@media (max-width: 700px) {
    ._embed_video {
        height:330px;
    }
}

/*-------------------ASSOCIATIONS--------------------------------*/
.grid-associations .type-assos {
    color: var(--blue-base);
}
.grid-associations {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.grid-associations .association .description p {
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
}
.grid-associations .association {
    display: flex;
    width: calc(100% / 2 - 24px);
    align-items: center;
    border: 2px solid var(--yellow-base);
    border-radius: var(--radii-8);
    padding: 8px 16px;
    gap: 16px;
}
.grid-associations .img img {
    border-radius: 26px 8px 26px 8px;
    border-radius: 0;
    width: 144px;
    height: 144px;
    object-fit: contain;
}
.grid-associations .description {
    width: -webkit-fill-available;
}

.grid-associations .img {
    width: 144px;
    height: 144px;
}
.grid-associations .association a, .info-assos a {
    color: var(--blue-shade-4) !important;
    border-bottom: none !important;
}

@media (max-width: 720px) {
.grid-associations .association {
    width: 100%;
}
}
/*-------------------ASSOCIATIONS DETAILS--------------------------------*/
.info-assos .infos {
    display: grid;
    grid-row: 1 1 1;
    grid-template-columns: 1fr 1fr;
}
.info-assos {
    background: var(--neutral-tint-3);
    border: 4px solid var(--yellow-base);
    border-radius: 8px 8px 8px;
    padding: 24px;
}
.info-assos p {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.type-assos {
    color: var(--blue-base);
    text-transform: uppercase;
    margin-top: 0px;
}
.info-assos h3 {
    display: flex;
    gap: 8px;
        align-items: center;
}
.info-assos h3 img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 0px;
}
.info-assos a {
    position: relative;
}
.info-assos a:after {
    content: "";
    background: var(--neutral-black);
    height: 4px;
    width: 32%;
    position: absolute;
    bottom: -8px;
    left: 0;
    border-radius: var(--radii-8);
}
.info-assos a:hover:after {
    background: var(--blue-base);
    width: 50%;
    transition: 0.2s ease-out;
}
@media (max-width: 720px) {
    .info-assos .infos {
        grid-template-columns: 1fr;
    }
}

#user_connecte {
    background-color:#eee;
    padding:5px 15px;
    color:var(--red-base);
    font-weight:600;
}

.demarches {
    margin-bottom:20px;
}
.demarches a {
    border:0!important;
}
.demarches a:hover {
    text-decoration:underline;
}
.demarches a.externe {
    background-image:url('../images/assets/external.svg');
    background-repeat:no-repeat;
    background-position:right center;
    background-size:20px;
    display:inline-block;
    padding-right:30px;
}

/* tableaux de données */
.tableau-produit {
    border:1px solid #ddd;
    border-spacing: 0px;
    width:100%;
}

.tableau-produit td, .tableau-produit th{
    padding:4px;
    margin:0;
    border:1px solid #ddd;
}