/* CSS for special templates */

/* p-home.php  et autres (pas dans un plugin mais dans la template theme) */

/* tumbnail en full screen cover */
/* texte description : ACF en sticky sur la cover */
/* et si contenu il se mets sous la cover */
/* et cover fait pile 100% ecran, enlever margin classique sous le menu */



/* eviter bug de depassement */
html, body {
  /*overflow-x: hidden;*/
  position: relative;
}

/* ---------- menu ---------- */
/* menu mobile */
.super-back-cool-menu {
  background: #fff9df;
  text-transform: none;
  font-size: 30px;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .super-back-cool-menu .menu-item {
      padding: 18px 10px;

        display: flex;
        justify-content: center;
  }
}

.super-back-cool-menu .menu-item a {
  display: block;
  position: relative;
  width: auto;
}

.super-back-cool-menu .menu-item-has-children > a::after {
  position: absolute;
  top: 3px;
  right: -18px;
  width: 12px;
  /* border: 1px solid red; */
  height: 20px;
}

.super-back-cool-menu .sub-menu {
  background-color: #fff9df;
  background-color: #babca5;
}

.super-back-cool-menu .submenu-back-button {
  text-transform: lowercase;
  font-size: 18px;
}


.page_container-template-home {
  position: relative;
  background-color: #fff9df3c;
}

.cover-template-home {
  position: relative;
  width: 100%;
  height: 100vh;
  /* height: 100dvh; /* hauteur iphone safari ? */
  background-image: url('url-dans-page'); /* Remplacez par la fonction PHP pour l'URL de l'image */
  background-size: cover; /* Permet à l'image de se comporter comme une couverture */
  background-position: center; /* Centre l'image dans le conteneur */
  background-repeat: no-repeat; /* Empêche la répétition de l'image */

  opacity: 0; /* Initialement invisible */
  animation: fadeInBackground 1.5s ease-out forwards; /* Animation pour faire apparaître l'arrière-plan */
}

/* fleche droite sur ordinateur version mobile*/
@media screen and (max-width: 768px) {
  .cover-template-home {
    height: 89vh; /* hauteur ecran iphone avec barre de recherche */
  }
}

/* Animation d'apparition du fond */
@keyframes fadeInBackground {
  0% {
      opacity: 0;
      transform: scale(1.1); /* Petit zoom out */
  }
  100% {
      opacity: 1;
      transform: scale(1); /* Revient à sa taille normale */
  }
}

.titre-template-home {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 70%;
  color: white; /* Optionnel */
  text-align: left;
}

.titre-template-home {
  position: absolute;
  border: var(--border_grosseur) solid black;
  top: calc(var(--menu_hauteur) - var(--border_grosseur));
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;

  opacity: 0; /* Initialement invisible */
  animation: fadeInText 2s ease-out 1s forwards; /* Animation pour faire apparaître le texte avec un délai */
}

/* Animation d'apparition du texte */
@keyframes fadeInText {
  0% {
      opacity: 0;
      transform: translateY(50px); /* Le texte démarre légèrement en bas */
  }
  100% {
      opacity: 1;
      transform: translateY(0); /* Le texte se place normalement */
  }
}

.titre-template-home h1 {
  font-size: 130px;
    font-size: 11vw;
    line-height: 9vw;
    /*border: 1px solid red;*/
    padding: 10px 3vw 90px;
    max-width: 80%;
    color: #fff9df;
}

@media screen and (max-width: 768px) {
  .titre-template-home h1 {
    font-size: 14vw;
    line-height: 11.5vw;
    padding: 10px 3vw 50px;
    max-width: 100%;
    color: #fff9df;
  }
}

.page_content-template-home {
  border: var(--border_grosseur) solid black;
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--border_grosseur)* -1); /* = -4px */

}


/* page content if some */
.page-content .content{
  border: var(--border_grosseur) solid black;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--border_grosseur)* -1); /* = -4px */
}



/* fil d'ariane */
.brut-breadcrumb-v1 {
  border: 4px solid black;
  padding: 20px; 

  /*if border: */
  margin-top: -4px;
}



/* le studio page : template t-sliderfull */
.page_content-template-sliderfull {

  border: var(--border_grosseur) solid black;
  padding: 10px;
  display: flex;
  flex-direction: column;

  margin-top: calc(var(--border_grosseur)* -1); /* if = -4px */
  margin-top: calc(var(--menu_hauteur) - var(--border_grosseur)); /* or = menu et -4px */

  /*height: calc(100vh - var(--menu_hauteur) - var(--border_grosseur));*/
  /*min-height: calc(100vh - var(--menu_hauteur) - var(--border_grosseur));*/

  position: relative;
}

.page_content-template-sliderfull .content {
  border: var(--border_grosseur) solid black;
  margin-top: calc(var(--border_grosseur)* -1); /* if = -4px */
  padding: 10px;
}

.titre-slider-full {
  border: var(--border_grosseur) solid black;
  padding: 10px;        
}

.color-message-galerie {
  margin-top: calc(var(--border_grosseur)* -1); /* if = -4px */
}

/* la galerie */
.quentin-images-liste-gallery {
  margin-top: calc(var(--border_grosseur)* -1); /* if = -4px */
  max-height: 80vh;
}

.quentin-images-liste-gallery .slick-list {
  height: auto;
  height: 60vh; 
}

.quentin-images-liste-gallery .slick-slide {
  height: auto;
  border: 8px solid blue;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.quentin-images-liste-gallery .slick-slide img{
  max-height: 100%;
  height: 100%;
  object-fit: cover;
}





/* carousel : le studio */

.supertestentourgalerie .child-info-panel {
  /*border: 1px solid red;*/

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  font-size: 15px;
  font-weight: 400;

  background: rgb(255 255 255);
  border-left: 0px solid black;
  padding: 20px;
}

.supertestentourgalerie .child-info-panel h3 {
  margin-top: 0;
  /* border: 1px solid red; */
  font-size: 60px;
  font-weight: 700;
  padding: 0 0 45px 0;
}

.supertestentourgalerie .child-info-panel p {
  margin-top: 0;
  /*border: 1px solid red;*/
  padding: 2px 0;
}

.supertestentourgalerie .child-info-panel .qil_bottom_info {
  margin-top: auto; /* max espace au top */
  /*border: 1px solid blue;*/
  padding: 2px 0;
}





@media screen and (max-width: 800px) {
  .page_content-template-sliderfull .supertestentourgalerie {
    /*border: 3px solid green; */
    height: auto !important;
  }

  .supertestentourgalerie .child-info-panel {
    /*border: 1px solid red;*/
    position: relative;
    height: 90vh;
    width: 100%;

    font-size: 17px;
    font-weight: 500;

    opacity: 0;

    transition: right 0.7s ease-out, opacity 0.7s ease-in-out 0.5s;

  } 
  
  .supertestentourgalerie .child-info-panel.active {
    opacity: 1;
  } 

  .toggle-info-button {
    display: none !important;
  }
}



/* ---------- projets page ---------- */

.snap-this-container-projet {
  border: 0px solid purple;
    display: flex;
    flex-direction: column;
    row-gap: 18px;
} 

.snap-this-container-projet .container-quentin-images-list_display-withinfo {
  border: 0px solid black; 
  margin-top: -0px;
}

/* if caption */
.snap-this-container-projet .quentin-images-liste_display-withinfo p {
  bottom: unset;
  top: 10px;
  left: 10px;
  background: transparent;
  border: 0;
  padding: 10px;

  font-size: 18px;
  font-weight: 600;
}

/* titres projets et archi */
.snap-this-container-projet .container-titre-projets {
  padding: 10px;
  position: absolute;
  bottom: 40px;
  left: 20px;

  font-size: 28px;
  font-weight: 800;
}

.snap-this-container-projet .b-projet-titre {
  display: flex;
}

.snap-this-container-projet .b-projet-titre p {
  padding-right: 5px;
}

.snap-this-container-projet .b-projet-titre .color {
  color: #fff9df;
}

@media screen and (max-width: 800px) {
  .snap-this-container-projet .container-titre-projets {
    padding: 10px;
    position: absolute;
    bottom: 80px;
    left: 20px;
  
    font-size: 18px;
    font-weight: 800;
  }
}

.snap-this-container-projet .container-titre-projets::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11px;
  width: 100%;
  max-width: 200px;
  height: 2px;
  background-color: #fff9df;
}

/* arrow projets */
.snap-this-container-projet .slick-arrow {
  z-index: 1;
  border: 0px solid black;
  height: 32px;
  width: 32px;
  padding: 7px;
  border-radius: 50%;
  top: calc(50% - 16px);
  transform: none;
  background: #fff9df;
  color: red;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.snap-this-container-projet .slick-arrow:hover {
  opacity: 1;
}
/*
.snap-this-container-projet .slick-arrow {
border: 1px solid #fff;
}*/

.snap-this-container-projet .slick-prev:before, .snap-this-container-projet .slick-next:before {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1;
  opacity: 1;
  color: #000;
}

.snap-this-container-projet .slick-prev:before{
  padding: 1px 2px 0 0;
}

.snap-this-container-projet .slick-next:before {
  padding: 1px 0px 0 2px;
}





/* ----------- animation ------------ */
.cover-animation-appar_1 {
  opacity: 0; /* Initialement invisible */
  animation: fadeInBackground 1.5s ease-out forwards; /* Animation pour faire apparaître l'arrière-plan */
}
.text-animation-appar_1 {
  opacity: 0; /* Initialement invisible */
  animation: fadeInText 2s ease-out 1s forwards; /* Animation pour faire apparaître le texte avec un délai */
}

.text-animation-appar_2 {
  opacity: 0; /* Initialement invisible */
  animation: fadeInText_2 2.5s ease-in-out 0.8s forwards; /* Animation avec un délai et une courbe d'animation différente */
}

/* Animation d'apparition du texte (variante) */
@keyframes fadeInText_2 {
  0% {
      opacity: 0;
      transform: translateY(-20px); /* Le texte démarre légèrement à gauche */
  }
  100% {
      opacity: 1;
      transform: translateY(0); /* Le texte se place normalement */
  }
}

.text-animation-appar_3 {
  opacity: 0; /* Initialement invisible */
  animation: opaopacity_1 2.5s ease-in-out 0.8s forwards; /* Animation avec un délai et une courbe d'animation différente */
}

/* Animation d'apparition du texte (variante) */
@keyframes opaopacity_1 {
  0% {
      opacity: 0;
      transform: translateY(10px); /* Le texte démarre légèrement à gauche */
  }
  100% {
      opacity: 1;
      transform: translateY(0); /* Le texte se place normalement */
  }
}



/* ------------ notre equipe ------------- */

.full-container-version-equipe .pagenew_colonne-titres h1 {
  /*border: 1px dotted green;*/
  width: 40%;
  max-width: 280px;
  font-size: 45px;
  line-height: 40px;
}


/* Style de base pour le conteneur */
.team-member-container {
  display: flex;
  gap: 20px;
  /* background-color: #f0f8ff; /* Bleu pâle */

  margin: 10px auto 200px;
  max-width: 1200px;
  padding: 0 35px;
}

.font_general_lune_a {
  font-family: 'Josefin Sans', 'Arial', 'Helvetica', sans-serif;
  font-size: 17px;
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.3;
  font-style: normal;
}

/* Flex en colonne sur mobile */
@media (max-width: 800px) {
  .team-member-container {
      flex-direction: column;
      padding: 0 10px;
  }
}

/* Style de base pour chaque membre */
.team-member {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content auto;
    grid-template-areas:
        "title image"
        "description image";
  gap: 10px;
  /* background-color: #e6f7e6; /* Vert pâle */
  align-items: center; /* Centrer les éléments verticalement */

  border-top: 1px solid grey;
  padding: 10px 0;
  margin: 10px 20px;
  width: 50%;
}

/* Organisation du contenu en deux colonnes sur desktop */
/* Réinitialiser les marges des titres et descriptions */
.member-info h2,
.member-description p {
    margin: 0; /* Supprimer les marges par défaut */
}

/* Organisation du contenu en deux colonnes sur desktop */
.member-info {
    grid-area: title;
    align-self: start;
}

.member-description {
    grid-area: description;
    align-self: start;
}

.member-image {
    grid-area: image;
    align-self: start; /* Aligner en haut */
    background: #f9f9f9;
}

/* Grille spéciale pour mobile */
@media (max-width: 800px) {
  .team-member {
      grid-template-columns: 50% 50%; /* Deux colonnes sur mobile */
      grid-template-areas: 
          "image title"
          "description description"; /* Description en dessous sur toute la largeur */

          width: 100%;

          margin: 0;
  }

  /* Image prend 50% à gauche */
  .member-image {
      grid-column: 1 / 2;
      grid-area: image;

      padding: 0 10px 0 0;
  }

  /* Titre à droite de l'image */
  .member-info {
      grid-column: 2 / 3;
      grid-area: title;
  }

  /* Description occupe 100% en dessous */
  .member-description {
      grid-column: 1 / 3;
      grid-area: description;
  }
}

/* Styles des sections individuelles */
.member-info {
  /* background-color: #ffe6e6; /* Rouge pâle */
}

.member-description {
  /* background-color: #fff5e6; /* Orange pâle */
}

.member-image {
  /* background-color: #e6e6ff; /* Violet pâle */
}

/* Styles supplémentaires */
.team-member img {
  max-width: 100%;
  height: auto;
}


/* ----------- contacts ---------- */

/* css background dans la page contact */




/* ----- nouveaux ajouts ------ */

/* brut v1.2.mir4 */
/* ----- if medaille products */
/* Style global pour la section des produits sous .medailles-products */
.medailles-products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

.medailles-products .single-product {
  width: 100%;
  max-width: 800px;
}

.medailles-products .product-cover img {
  width: 100%;
  height: auto;
  /*object-fit: cover;*/
}

.medailles-products .single-product .short-description {
  font-size: 40px;
  font-weight: bold;
  padding: 10px;

  margin-top: -40px;

  position: relative;
    z-index: 1;
}

.short-description a {
  border-bottom: 2px dotted black; /* Ligne en pointillés */

}


/* Style pour le prix sous .medailles-products */
.medailles-products .single-product p span.woocommerce-Price-amount {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e60000; /* Rouge pour le prix */
}

.medailles-products .single-product del {
  font-size: 1.2rem;
  color: #999; /* Couleur grisée pour les anciens prix */
  text-decoration: line-through;
  margin-right: 10px;
}

/* Prix actuel sous .medailles-products */
.medailles-products .single-product ins {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e60000; /* Rouge pour le prix actuel */
}

/* Responsivité : ajuster pour les petits écrans sous .medailles-products */
@media (max-width: 768px) {
  .medailles-products .single-product {
      width: 100%; /* Les produits prennent toute la largeur sur petits écrans */
      padding: 0px;
  }

  .medailles-products .product-gallery img {
      width: 70%;
      margin: 0 auto;
      display: block;
  }
}