
/* ///////////////////////////
/////////////////////////////
////////// Desktop /////////
////////////////////////////
/////////////////////////// */

@media screen and (min-width: 1024px) {

  blockquote p{
    font-size: 0.9rem !important;
  }

  p{
    font-size: 1rem !important;
  }

  ul{
    font-size: 1rem !important;
    font-weight: 300;
  }

  .groupe-texte-background2{
    margin-left: 75px!important;
    margin-right: 75px!important;
  }
  .container-calendar-cost{
    margin-left: 75px!important;
    margin-right: 75px!important;
  }

  .big-title{
    padding-left: 75px!important;
    padding-right: 75px!important;
  }

  .container-text-slider-acualités{
    padding-left: 75px!important;
    padding-right: 75px!important;
  }

  .test-container-post article{
    
    width: 400px !important;
    object-fit: cover !important;
  }

  .test-container-post article img{
    height: 300px !important;
    object-fit: fill !important;
  }

  .container, .container2 {
    position: relative;
    width: 100%;
  }
  
  .divA, .divA2 {
    opacity: 0;
    transform: translateY(100px); /* Initial position en bas */
    transition: all 0.2s ease; /* Transition de 0.5s pour l'animation */
  }
  
  .container.visible .divA, .container2.visible .divA2 {
    opacity: 1;
    transform: translateY(25px); /* La div A remonte à sa position d'origine */
  }

  .spectra-image-gallery{
    height: 100% !important;
  }
  .spectra-image-gallery__media picture img{
    /*object-fit: contain !important;*/
  }
  .spectra-image-gallery__media-wrapper--isotope{
    position: initial !important;
  }
  
  .swiper-button-prev, .swiper-button-next{
    display: flex !important;
    background: none !important;
  }

  .swiper-button-prev::after, .swiper-button-next::after{
    font-weight: bold !important;
    font-size: 20px !important;
  }

  .container-partner figure img{
    height: 12vh !important;
    border-radius: 4px !important;
    width: auto;
  }

  .uagb-container-inner-blocks-wrap{
    max-width: 100% !important;
    margin: 0 !important;
  }

  .texte-media-with-caption-right, .texte-media-with-caption-left{
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .ultp-prev-page-numbers,
  .ultp-next-page-numbers{
    display: none !important;
  }
  
}

/* ///////////////////////////
/////////////////////////////
////////// Tablet ///////////
/////////////////////////////
/////////////////////////// */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  blockquote p{
    font-size: 0.8rem !important;
  }

  p{
    font-size: 0.9rem!important;
  }

  ul{
    font-size: 0.9rem !important;
    font-weight: 300;
  }

  .groupe-texte-background2{
    margin-left: 5px!important;
    margin-right: 5px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }

  .swiper-button-prev,
  .swiper-button-next{
    display: none;
  }

  .texte-media-with-caption-right{
    flex-wrap: wrap !important;
  }

  .texte-media-with-caption-right div{
    max-width: 100% !important;
  }

  .title-calendar h3{
    padding-top: 2rem !important;
  }

  .container-calendar-travaux{
    max-width: 100% !important;
    padding: 0 5% !important;
  }

  .container-calendar-travaux p{
    font-size: 0.75rem !important;
  }

  .img-calendar-test{
    max-width: 20% !important;
  }

  .img-calendar-test figcaption{
    font-size: 0.7rem !important;
  }
}

/* ///////////////////////////
/////////////////////////////
////////// Mobile ///////////
/////////////////////////////
/////////////////////////// */

@media screen and (max-width: 767px) {

  h2{
    font-size: 1.9rem !important;
  }

  h6{
    font-size: 1.7rem;
  }

  blockquote p{
    font-size: 0.7rem !important;
  }

  p{
    font-size: 0.8rem!important;
  }

  ul{
    font-size: 0.8rem !important;
    font-weight: 300;
  }

  .groupe-texte-background2{
    margin-left: 5px!important;
    margin-right: 5px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }

  .swiper-content{
    padding: 0 !important;
  }

  .container-partner{
    flex-wrap: wrap;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .swiper-button-prev,
  .swiper-button-next{
    display: none;
  }
  }

  .container-partner figure{
    width: auto;
    height: auto !important;
  }

  .container-partner figure img{
    height: 4vh;
    width: auto;
  }

  .text-partner{
    max-width: 100% !important;
  }
}

.swiper-button-prev, .swiper-button-next, .swiper-pagination{
  display: none;
}

.container-text-slider{
  padding-top: 1rem;
  padding-right: 5vw;
  padding-bottom: 3rem;
  padding-left: 5vw;
  gap: 0;
}

.uagb-slider-container{
  padding: 0;
}

.container-calendar-cost div{
  flex: 1 !important;
}

.texte-media-with-caption-right, .texte-media-with-caption-left{
  padding-left: 0;
  padding-right: 0;
}

.container-calendar-cost div:nth-child(2) {
  align-items: center !important;
}

.container-calendar-cost{
  align-items: center!important;
}

.container-calendar-cost h3{
  border-radius: 10px;
}

.container-calendar .title-calendar{
  align-self: center!important;
}

.container-calendar .container-date{
  margin-top: 2rem;
}

.container-cost{
  align-self: flex-start!important;
}

.container-cost h3{
  margin-top: 20%;
}

.container-calendar-date{
  align-items: center!important;
}

.container-infos-mail{
  flex-basis: auto!important;
}


.item-trav-def{
  position: relative;
  row-gap: 1%;
  padding: 20px !important;
  border-radius: 8px;
  overflow: hidden !important;
}

.date-travaux, .title-travaux, .text-travaux{
  margin: 0;
}

.post-grid{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 5vw !important;
  padding-right: 5vw !important;
  max-width: 100vw;
  column-gap: 4vw !important;
}

.post-grid article{
  display: flex !important;
  flex-direction: column;
}

.post-grid article img{
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0 !important;
}

.post-grid article h4{
  flex-grow: 1;
  font-size: 1.2rem;
  font-weight: bold;
}

.post-grid article .uagb-post__excerpt{
  flex-grow: 1;
  font-size: 0.9rem;
}

.title-travaux{
  font-size: 1rem !important;
}

.date-simplifiee {
  font-weight: bold;
  color: #333;
}

.text-travaux{
  flex-grow: 1;
  font-size: 0.8rem;
}

.ggggggg .spectra-image-gallery__media-wrapper{
  padding: 0px 55px !important;
}

.item-trav-def img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ancien-container-trav{
  display: none;
}

.container-calendar-travaux div{
  width: 30% !important;
}

.container-calendar-travaux p{
  margin: 0;
}

.img-slider-1 img{
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* Grille principale */
.ultp-block-items-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Chaque carte */
.ultp-block-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33.333% - 2rem); /* 3 colonnes */
  box-sizing: border-box;
  min-height: 100%;
  background-color: #F7F5F2;
  border-radius: 8px;
  padding-bottom: 5% !important;
}

/* Conteneur interne */
.ultp-block-content-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Contenu principal */
.ultp-block-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 4%;
  padding-right: 4%;
}

/* Titre qui prend de la place */
.ultp-block-title {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
}

.ultp-block-title a{
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

.ultp-block-title a:hover{
  color: #e1d169 !important;
}

/* Extrait, même s’il est vide */
.ultp-block-excerpt {
  flex-grow: 1;
}

/* Bouton read more toujours en bas */
.ultp-block-readmore {
  margin-top: auto;
  padding-bottom: 5%;
}

.ultp-block-image{
  width: 100% !important;
}

.ultp-block-image img{
  width: 100% !important;
  height: 300px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px 8px 0 0 !important;
}

