@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


:root{
  --black:#020202;
  --darker:#1D1128;
  --green:#023618;
  --lighter: #005C69;
  --white:#F7F0F5;
  --light-green:#60A561;

  --content-radius:25px;
  --backdrop-height:0px;
  --backdrop-width:0px;

  --top-height:1rem;
  --padding:10px;

  --light-green-transparent: hsl(120.9 27.7% 51.2% /0.2);
  --lighter-transparent: hsl(187.4 100% 20.6% / 0.7);
  --radius:1rem;
  --vignette-size: 18rem;
  --vignette-debordement: -7rem;

  --presentation-debordement: 3rem;
  --vignette-offset :  calc(var(--vignette-size) / 3);
}

html
{
  font-size: 1em;
   font-family: "Urbanist", sans-serif;
    /*font-size: 16px;*/
    font-style: normal;
  color:var(--black);
  scroll-behavior: smooth;
  text-align: justify;
  background-color: var(--green);
  box-sizing: border-box;
}

body{
  margin: 0;
  overflow-x: hidden;
/*  display: grid;*/
  width: 100%;
}

a
{
    text-decoration: none;
    color: var(--lighter);

}

a:hover {
  background-color: var(--lighter);
  transition: .5s all ease-out;
  color: var(--white);
}

nav, footer{

}

i {
 margin: 0 1rem 0 1rem;
}

@media only screen and (max-width: 603px) {
  html{
    font-size: 12px;
  }
  .justified{
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/*--- utils ---*/
.flex{
  display: flex;
  gap: var(--gap, 1rem);
  align-items: center;
  flex-wrap: nowrap;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
  width: 100%;
  align-items: center;
}

.grid3{
  display:grid;
  grid-template-columns: 4fr 1fr 1fr;
  /*width: 100%;*/
  align-items: center;
}

.grid4{
  display:grid;
  grid-template-columns: 2fr 3fr 1fr 1fr;
  width: 100%;
  align-items: center;
}

.one-third{
  /*flex-basis: 33.33%;*/
  flex: 2 1 auto;
}

.two-third{
  /*flex-basis: 66.66%;*/
  flex: 1 1 auto;
}

.row{
  flex-flow: row wrap;
  flex-direction: row;
}

.reverse-rows{
  flex-direction: row-reverse;
}

.col{
  flex-flow: column;
}

.spread{
  justify-content: space-between;
  flex-wrap: wrap;
}

.separate{
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.center{
  align-items: center;
  align-content: center;
  justify-content:center;
}

.center-text{
  text-align: center;
}

.autobr{
  display: block;
  content: "";
  margin: 1rem;
}

.condensed{
  justify-content: space-around;
  --gap:0px;
}

.no-wrap{
  flex-wrap: nowrap;
}

.top{
  align-items:flex-start;
  height: var(--top-height);

  a{
    padding: 0.3rem;
  }
  a:hover{
    color:var(--darker);
    background: var(--light-green);
  }
}

.end{
  justify-content: space-around;
}

.buttons{
  margin-top: 5rem;
  height: 6rem;
}

.buttons > li > a {
  padding: 1.5rem;
  background-color: var(--darker);
  border-radius: 20px;
  color: var(--white);
}

.buttons > li > a:hover{
  background:var(--light-green);
  transition: 1s ease-out;
  color: var(--darker);
  box-shadow: inset 0 0 10px;
}

.container {
  margin: 0 auto;
  max-width: 1000px;
  width: 90%;
  padding: 0;
}



.hideonsmall{
  display:inherit;
}

.circle{
  border-radius: 50%;
  /*overflow: hidden;*/
}

.lang{
  height: 1rem;
  width: auto;
}

.left-text{
  text-align:left;
  margin-top: 1rem;
}

.right{
  text-align: right;
}

.justified{
  text-align: justify !important;
  font-family: "EB-Garamond", serif;
  font-size: 1.2rem;
  line-height: 1.5rem;

  > p {
    max-width: 600px;
    margin: auto;
    padding-top: 1rem;
  }
  > ul {
    margin-left: 2rem;
    > li {
      border: none !important;
    }
  }
}

.no-margin{
  margin: 0;
}

.block{
  display: block;
}

figure > * > img{
  max-width: 100%;
  height: auto;
  margin-inline: 1rem;
}

figcaption{
  font-size: .65rem;
  font-family: "Urbanist", sans-serif;

   font-style: normal;
   text-align: right;
}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
}

.spip-admin-bloc {
  position: relative !important;
  right: 0px !important;
  width: 20vw !important;
  /*float: right;*/
}

.no-bullets{
      list-style: none;
      padding: 0;
      margin: 0;
}

.no-border{
  border: none !important;
}

.backdrop{
  z-index: -1000;
  /*overflow-y: hidden;*/
  /*height: var(--backdrop-height);*/
  object-fit:cover;
  object-position:center;
  /*transform-origin: 50% 50%;*/
  /*width: 100%;*/
  height: auto;
  width: var(--backdrop-width);
  min-height: var(--backdrop-height);
  block-size: auto;
  aspect-ratio: 16/9;
  opacity: .5;
  position: absolute;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border-width:0;
}

.transparent{
  background: transparent !important;
  border: none !important;
}

.top-padded{
  /*padding: var(--top-padding)  0 0 0  ;
  height: calc(100% - var(--top-padding));*/
  padding-top: var(--presentation-debordement) ;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding-bottom: 1rem;
}

/*
.top-padded:has( > .vignette){
  margin-top: 2rem;
}*/
/*--- header ----*/
nav{

}

#madheader > div{
  padding:var(--padding) 0 var(--padding) 0;
}

#logo{
  margin: 2rem;
  margin-left: 0px;
  h1{
    font-size: 2rem;
  }
  img{

    height: 5rem;
    aspect-ratio:1;
    margin-left:0px;
    margin-right: 1rem;
  }
}

header{

  /*height: calc(var(--backdrop-height) + var(--top-height) + 2 * var(--padding));*/
  margin-bottom: calc(-1 * calc(var(--presentation-debordement)));
  /*height: calc(100% + var(--vignette-offset));*/
  /*padding-bottom: var(--vignette-offset);*/
  h1, h2, h3{
    margin: 0;
    padding: 0;
    color: var(--white);
    text-align: left;
  }

  color: var(--white);
  a {
    color: var(--white);
  }
  --gap:2rem;
}


/*--- Presentation ---*/
.zero{
  height: 0px;
}

.presentation{
  /*display: none;*/
  width: min(50vw, 600px);
  z-index: 1;
  /*margin-bottom: calc(-1 * var(--backdrop-height) / 2);*/
  /*margin-bottom: calc((2 * var(--translationY)) - var(--corner-radius) - 5px);/* - 2rem - var(--corner-radius));*/
  border-radius:var(--corner-radius);
  /*color: var(--white);
  position: relative;
    h1{
      margin-top: 0;
      padding-top: 0;
    }*/
    /*top: var(--vignette-offset);*/

    margin-top: var(--vignette-offset);
  /*  margin-bottom: calc(-1 * var(--presentation-debordement));*/

    padding: 2rem;
    h1{
      font-size: 2rem;
    }
}

#presentation:has(.vignette), .trombi-item:has(.vignette):not(.transparent){
  --corner-radius:20px;
  background: var(--lighter);
  border-bottom-left-radius: var(--corner-radius);
  border-bottom-right-radius: var(--corner-radius);
  color: var(--white);
  position: relative;
    h1{
      margin-top: 0;
      padding-top: 0;
    }

  /*  padding: 2rem;*/

}
.sommaire{
/*    --translationY: calc(-1 * var(--backdrop-height) / 2);
    transform: translateY(var(--translationY));
    --vignette-offset: calc(2 * var(--vignette-size) / 3);*/

}

@media(max-width: 993px){
  .presentation{
    width: 80%;
  }

}

/* --- vignette ---*/
body:has(.sommaire){
  --presentation-debordement:7rem;
}

.sommaire >*> .vignette{
    --displacement: calc(-1 * var(--vignette-size)/3);
    /*transform: translate(var(--displacement), calc(-1 * var(--displacement)));*/
    margin-top: var(--displacement);
    margin-right: var(--displacement);
    /*margin-bottom: calc(-1* var(--displacement));*/
}

.vignette, .bigger-vignette{
  width: min(var(--vignette-size), 50vw);
  height: auto;
  aspect-ratio:1;
  object-fit: cover;
  border: 1rem;
  border-color: var(--lighter);
  border-style: solid;
  position: relative;
  margin-top: var(--vignette-debordement);
  margin-left: calc(-0.5 * var(--vignette-debordement));
  margin-right: 0px;
  box-sizing:border-box;
}

.bigger-vignette{
  height: var(--vignette-size);
  width: auto;
  aspect-ratio: 16/9;
  border-radius: calc(var(--corner-radius) * 5);
  margin-left: 0px;
}

.small-vignette{
  --vignette-size: 5rem;
  margin-top: 0px;
  margin-inline:0px;
}

.center-vignette{
  margin-left: -0.1rem;
  margin-right: 0px;
}

.link-block > a{
  display: block;
  color: var(--white);
  border-bottom-right-radius: var(--corner-radius);
  border-bottom-left-radius: var(--corner-radius);
  border: none;
  height: 100%;
}

.link-block > a:hover, .link-block > a:hover > img{
  background:var(--darker);
  color: var(--light-green);
  border-bottom-right-radius: var(--corner-radius);
  border-bottom-left-radius: var(--corner-radius);
  border-color: var(--darker);
  transition: .25s ease-out all;
}

.link-block > a:hover{
  border: 0px;
  height: 100%;
}


.link-block > img{
  transition: .25s ease-in all;
  background-color: var(--darker);

}


.presentation>*>.two-third{
  margin-right: calc(-0.3 * var(--vignette-size));
  /*background: red;*/
}


@media(max-width: 993px){
  .sommaire > * >.vignette{
    /*transform: translate(0, calc(-2.5 * var(--displacement)));*/
    --displacement: calc(var(--vignette-size) / -2);
    /*transform: translate(0, calc(-1 * var(--displacement)));*/
    margin-top:var(--displacement);
    margin-right: 0px;
    margin-left: calc(-0.5 * var(--displacement));
  }
}

/*--- Actu ---*/

main
{
  background: var(--light-green);
  /*justify-content: center;
  align-items: center;*/
  position: relative;

}

.content{
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 0;
  top:0;

  width: 100%;

  flex-direction: row-reverse;
  align-items: flex-start;

}
.actu, .more{
  /*--top-padding : calc(1 * var(--backdrop-height)/2 + var(--padding));*/

    text-align: center;


    /*width: 100%;*/
    /*padding: var(--top-padding)  0 0 0  ;*/
   height: calc(100% - var(--presentation-debordement));

}

.table-cell{
  display: table-cell;
}

.carte{
  background: transparent;
  color: var(--white);
  position:relative;
  padding: 5rem 0 2rem 0;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
 .lieu{
   font-family: "Urbanist", sans-serif;
   font-weight: bold;
 }
 ul{
   list-style: none;
   text-align: left;
 }
}


.more{
  /*--gap:5rem;*/
  justify-content: space-between;
  display: flex;

}

.actu{
  background: var(--white);
  vertical-align: middle;
  padding-left: 1rem;
  padding-right: 1rem;

  h1{
    font-weight: lighter;
    font-size: 3rem;
    margin-bottom:2rem;
  }
  ul li:not(:last-of-type){
    border-bottom: dotted thin var(--darker);
  }
}

.actu-list{
  justify-content:center;
  flex-wrap: 0;
  flex-direction: column;

}

.actu-resume{
  font-weight: bold;
  text-align: left;
  margin-right: 1.5rem;

}

.actu-mini{
  font-family: "EB-Garamond", serif;
  font-size: 0.8em;
}

.actu-date{

}
.actu-link{

}

.actu-item{
  --gap:5rem;
  align-items: center;
  padding-bottom: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;

}

.actu-item a:hover > :first-child {
    background-color: var(--lighter-transparent);
    border-radius: var(--radius);
    transition: 0.25s all;

}

.social-net{
  --bo-rad: 20px;
  background: var(--darker);
  padding: 2rem 0 2rem 0;
  width: 100%;
  color:var(--white);
  border-top-left-radius: var(--bo-rad);
  border-top-right-radius: var(--bo-rad);
  bottom: 0px;
  align-self: flex-end;
  font-size: 2rem;

  h1{
    font-size: 3rem;
  }

  a {
    padding: .3rem;
    border-radius: 10px;
  }

  a:hover{
    color: var(--white);
  }
}

.pagination-items{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
  gap:1rem;
  li{
    border: none !important;
  }
  li > a {
    padding: 1rem;
  }
}

.padded{
  padding: 1rem;
  border-radius: var(--radius);
}

@media(max-width: 993px){
  .content{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
    margin: auto;
    align-items: center;
  }

  .actu-item{
    width: 90%;
  }

  .actu-list{
  /* justify-content: center;*/
  }

  .actu{
/*    padding-left: 0;
    padding-right: 0;*/

  }

  .table-cell{
    width: 100%;
  }

  .more{
    padding: 0;
    margin: 0;
    a:hover{
      color: var(--white);
    }
  }

  .carte img, .carte{
    
    padding-top: 0;
  }
}
/*--- Nav ---*/

.main-menu{

  min-height: 3rem;
  align-content: center;
  display: table;

  li {
    display:table-cell;
    vertical-align: middle;
    transition: .5s all ease-out;
  }

  li > a{
    padding: 2rem;
    border-radius: 2px;
    display: block;
    text-align: center;
  }

  a:hover{
    background: transparent;
    background-color: var(--lighter-transparent);
    border-radius: var(--radius);
    backdrop-filter: blur(.5rem);
    box-shadow: inset 0 0 10px var(--darker);

  }
  .active{
    background-color: var(--light-green-transparent);
    border-radius: var(--radius);
    backdrop-filter: blur(.3rem);
  }
  --gap:0px;
}

.mobile-nav-toggle{
  display: none;
}

.searchBox{
  width: 0px;
  height: 0px;
  transform: scaleX(0%);
  text-align: right;
}

.searchBox[data-visible="true"]{
    width: auto;
    height: auto;
    z-index: 2000;
    transform: scaleX(100%);
    transition: transform 350ms ease-out;
}
@media(max-width: 993px){

  .main-menu{
    --gap:2.5rem;
    --top-height:0px;
    display: flex;
    position: fixed;
    inset:0 0 0 30%;
    flex-direction: column;
    padding: min(20vh,10rem) 3em;
    background: hsl(0 0% 0% / 0.7);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 350ms ease-out;
    font-size: 18px !important;
    @supports(backdrop-filter: blur(1rem)){
      /*background: hsl(0 0% 100% / 0.3);*/
      background: var(--lighter-transparent);
      backdrop-filter: blur(.5rem);
    }

    ul{
      width: 100%;
      align-items: center;
    }

    li{


    }

    li > a {
      padding: min(3vh,10rem) 3rem;
    }

    > i {
       font-size: 30px !important;
    }
  }

  .main-menu[data-visible="true"]{
    transform: translateX(0%);
  }

  .mobile-nav-toggle{
    display: block;
    position: fixed;
    background: none;
    background: var(--lighter-transparent);
    backdrop-filter: blur(.5rem);
    color: var(--white);
    z-index:9999;
    border: 0;
    /*width: 2rem;*/
    aspect-ratio: 1;
    top: 2rem;
    right: 2rem;
    transform: rotate(0deg);
    transition: transform 350ms ease-out;

  }
  .mobile-nav-toggle[aria-expanded="true"]{
    transform: rotate(180deg);
  }
}


/* Footer */
footer{
  min-height: 150px;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--white);
  .contact-footer{
    font-size: 2rem;
    padding: 1rem;
  }

}

/* Rubriques */

.rubrique-titre{
  font-size: 4rem;
  text-align: center;
}

.trombi-item{
  --corner-radius:20px;
  width: calc(var(--vignette-size) - 4px);
  margin-top: calc(calc(-1 * var(--vignette-debordement)) + calc(2rem + var(--padding)));
  padding-left: 0px;
  padding-right: 0px;
  border-bottom-right-radius: var(--corner-radius);
  border-bottom-left-radius: var(--corner-radius);

}

.trombi-card{
  margin: 1rem;
}

.align-stretch{
  align-self: stretch;
}

.flex-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--vignette-size), 1fr));
  gap: 1rem;
}

/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important;
  }
}

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .hide-on-med-and-up {
    display: none !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .hide-on-med-only {
    display: none !important;
  }
}

@media only screen and (min-width: 993px) {
  .hide-on-large-only {
    display: none !important;
  }
}

@media only screen and (min-width: 1201px) {
  .hide-on-extra-large-only {
    display: none !important;
  }
}

@media only screen and (min-width: 1201px) {
  .show-on-extra-large {
    display: block !important;
  }
}

@media only screen and (min-width: 993px) {
  .show-on-large {
    display: block !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .show-on-medium {
    display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  .show-on-small {
    display: block !important;
  }
}

@media only screen and (min-width: 601px) {
  .show-on-medium-and-up {
    display: block !important;
  }
}

@media only screen and (max-width: 992px) {
  .show-on-medium-and-down {
    display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  .center-on-small-only {
    text-align: center;
  }
}


.sr-only:not(:focus):not(:active){
  /* for screen readers only */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}