/*
Theme Name: Astra Child
Template: astra
*/

/**/
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.oeuvre-actions {
  position: absolute;
  height: 70px;
  top: -105px;
  right: 45px;
}

.oeuvre-actions form {
  margin-bottom: unset;
}

/* ============================
   Catalogue - Œuvres
   ============================ */
/* conteneur global du slider œuvres */
.oeuvres-slider { position: relative; max-width: 1040px !important; margin: auto; }

/* piste */
.oeuvres-slider .slider{
  display: flex;
  gap: 10px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin: 0 auto;
  background: rgba(0,0,0,.05);
  border-radius: 7px;
  box-shadow: 0 0 30px 1px rgba(0,0,0,.1);
}

/* cartes */
.oeuvres-slider .card{
  width: 340px;               /* desktop */
  height: 450px;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 10px; border-radius: 7px; background:#fff;
}
.oeuvres-slider .card_img{
  width: 320px; height: 200px; object-fit: cover; object-position: top; border-radius: 7px;
}

.oeuvres-slider .slider .card_title { width:100%; display:flex; justify-content:flex-start; font-size: 1em; }
.oeuvres-slider .slider .card_title h3 {font-size: 1em; position: relative;}
.oeuvres-slider .slider .card_title h3::after{
  display: inline-block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #000000;

}
.desc_container {
  height: 180px;
}
.oeuvres-slider .card_description{ width:100%; text-align:justify; }
.oeuvres-slider .cta{ width:100%; display:flex; justify-content:flex-end; }

/* flèches */
.oeuvres-slider .arrows_container{
  position:absolute; top: 30%; width:100%; margin: 0 auto;
  display:flex; justify-content:space-between; align-items:center; padding: 0 10px; pointer-events:none;
}

.oeuvres-slider .arrow{
  width:35px; height:35px; border-radius:50%;
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer; pointer-events:auto; border:none;
  font-size:1.3rem; 
  font-weight:900; 
  /* color:#DCA54A; */
  color: #035b96;
  display: flex;
  justify-content: center;
  align-items: center;
}


.single-oeuvre-hero {

    box-shadow: 0 0 30px 5px rgba(0, 0, 0, .2);
    border-radius: 12px;
}

/* ============= Expositions : 2 colonnes flex + alternance ================= */
.expositions-wrapper, .actualites-wrapper{
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 4rem);
}

.expo-item, .actu-item{
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
}
.expo-item.even, .actu-item.even{ flex-direction: row-reverse; }

.expo-image, .actu-image{ width: min(640px, 48%); flex: 0 0 auto; }
.expo-content, .actu-content{ flex: 1 1 auto; max-width: 64ch; }

.expo-date, .actu-date { margin: 0 0 .6rem; color:#667085; font-weight:600; }
.expo-title, .actu-title{ 
  display: inline-block;
  position: relative;
  margin: 0 0 .6rem; 
  font-size: clamp(1.6rem, 2.2vw, 2rem); 
  line-height: 1.2;
  margin-bottom: 10px;
}
.expo-title::after,.actu-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000000;
}
.expo-description, .actu-description{ line-height: 1.65; }

.expo-actions,.actu-actions{ margin-top: 1rem; display:flex; gap:.5rem; }

/* ====================== Slider ===================== */
.slider_container{ position: relative; width:100%; }
.slider_container.is-single .arrows{ display:none; }

/* flèches */
.slider_container .arrows{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;          /* pour laisser passer les clics sauf sur boutons */
  z-index: 1;
}

.slider_container .arrows .previous,
.slider_container .arrows .next{
  width: 35px; height: 35px; border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  /* color: #DCA54A;  */
  color: #035b96;
  font-size: 1.3em; 
  font-weight: 900;
  cursor: pointer;
  pointer-events: all;           /* réactive le clic sur ces boutons */
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}


.slider_container .slide{
  width: 100%;
  aspect-ratio: 16 / 10;        /* toile stable */
  overflow: hidden;
  display: flex;
  border-radius: 7px;
  box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
  position: relative;
  margin: auto;
}
.slider_container .slide::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.08);
  border-radius: 7px;
  pointer-events: none;
}

/* chaque image occupe exactement la largeur visible */
.slider_container .slide .img{
  flex: 0 0 100%;
  width: 100%; 
  height: 100%;
  object-fit: cover; 
  object-position: 50% 30%;
  display:block;
}

.is-portrait, .is-landscape {

  display: block;
  margin: auto;
  border-radius: 7px;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
}
.is-landscape {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.is-portrait{
  object-fit: cover;
  height: 80vh;
}
.button_info {
  background: orange;
  height: 35px;
}

.button_danger, .button_danger:hover {
  background: red;
}

/*custom hero*/
.is-single-oeuvre {
  position: relative;
}

.is-single-oeuvre .site-header {
  position: absolute;
  top: -250px;
}

/*oeuvre / actualité*/
.site-content .oeuvres{
  width: 60%;
  margin: auto;
}

.site-content .oeuvres .button_container .oeuvre-actions {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-content .oeuvres .button_container .oeuvre-actions form {
  margin: unset;
}

/*why???*/
#ast-scroll-top .ast-icon.icon-arrow svg {
  margin-top: 10px;
}


/*media queries*/

@media (max-width: 1024px){
  .expo-item.even, .expo-item.odd, .actu-item.even, .actu-item.odd{ flex-direction: column-reverse; }
  .expo-image,.actu-image{ width: 100%; }
  .expo-content,.actu-content{ max-width: 100%; }
  .is-portrait { width: 100%; height: unset; object-fit: unset;}
}
/*MOFO ASTRA*/
@media (min-width: 922px) {
  .page-id-2513 .site-content .ast-container {
    display: block !important;
  }
}

@media (max-width:1024px){
  .oeuvres-slider { max-width: 690px !important;}
}

@media screen and (max-width:768px){
  .site-content .oeuvres {
    width: 100%;
  }
}
@media screen and (max-width: 425px) {
  .oeuvre-actions{
    width: 70%;
  }
}