/* CSS for special templates */


/* feuille de style qui ecrase celle de bBrut par le style de Lune*/

/* fonts */
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Light.woff2') format('woff2'),
       url('./fonts/Satoshi-Light.woff') format('woff'),
       url('./fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Regular.woff2') format('woff2'),
       url('./fonts/Satoshi-Regular.woff') format('woff'),
       url('./fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Medium.woff2') format('woff2'),
       url('./fonts/Satoshi-Medium.woff') format('woff'),
       url('./fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Bold.woff2') format('woff2'),
       url('./fonts/Satoshi-Bold.woff') format('woff'),
       url('./fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Black.woff2') format('woff2'),
       url('./fonts/Satoshi-Black.woff') format('woff'),
       url('./fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

/* Style pour chaque div */
.satoshi-light {
  font-family: 'Satoshi', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  padding: 10px;
}

.satoshi-regular {
  font-family: 'Satoshi', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  padding: 10px;
}

.satoshi-medium {
  font-family: 'Satoshi', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 20px;
  padding: 10px;
}

.satoshi-bold {
  font-family: 'Satoshi', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 20px;
  padding: 10px;
}

.satoshi-black {
  font-family: 'Satoshi', 'Arial', sans-serif;
  font-weight: 900;
  font-size: 20px;
  padding: 10px;
}


.josefin-sans {
  font-family: 'Josefin Sans', 'Arial', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* je peux ecraser les hooks ?*/
/* ------- hooks ------- */
:root {
  --border_grosseur: 0px; 
  --font-menu-2024: 'Satoshi', 'Arial', sans-serif;
  --font-generale: 'Satoshi', 'Arial', sans-serif;
  --menu_hauteur: 40px;
}

/* lune couleurs */
.brut-v1a-header {

  color: #0e1416; /* background footer */

  color: #babca5; /* vert second slide menu */

  color: #fff9df; /* texte footer, bg menu, ... */

}

/* ------- menu ------- */
.brut-v1a-header {
  border: var(--border_grosseur) solid black;
  border-bottom: 1px solid #dbdbdb;
  padding: 0 20px;
}

/* logo */
.brut-header-titre-v1b img {
  max-width: 65px;
}

/* around menu */
.around-menu_cbl1 {
  padding: 0px;
  font-size: 17px;
}

.brut-v1a-header .menu {
  column-gap: 25px;
}

.brut-v1a-header .menu li {
  margin-right: 0px; 
}

/* page */
.page_container-full_pagenew {
  align-items: center;
  justify-content: center;
  max-width: 1200px;
}

/* titre container */
.pagenew_titre-container {
  /*background-color: antiquewhite;*/
  max-width: 1200px;
  width: 100%;

  min-height: 240px;
}


/* titre */
.pagenew_colonne-titres h1 {
  border: 0px dotted green;
  width: 40%;
  width: 46%;
  max-width: 220px;
  max-width: 231px;
  font-size: 45px;
  line-height: 40px;
}

.pagenew_blocseparateur {
  width: calc(100% - 40px);
  border-bottom: 1px solid grey;
  margin: 10px 20px;
  max-width: 1200px;
  position: relative;
  left: 50%;
  transform: translateX(calc(-50% - 20px));
}

/* content */
.page-content {
  width: 100%;
}

/* download plan technqiue */
.plan-technique {
  display: flex;
  align-items: center;

  font-family: 'Josefin Sans', 'Arial', 'Helvetica', sans-serif;
  font-size: 15px;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 5px;
}

.plan-technique a {
  display: flex;
  border-bottom: 1px solid black;
  color: black;
  opacity: 0.5;
}

.plan-technique a:hover {
  display: flex;
  border-bottom: 1px solid black;
  color: black;
  opacity: 1;
}

.plan-technique img{
  /*border: 1px solid red;*/
  max-width: 27px;
  padding: 2px 5px 2px 2px;
}

.plan-technique p {
  display: flex;
  align-items: center;
  padding: 3px 1px 0px 1px;
}

.plan-technique p:first-of-type {
  padding-right: 5px;
}

/* fil d'ariane */
.brut-breadcrumb-v1 {
  border: 0;

  padding: 100px 20px 20px;
  margin-top: -4px;
  max-width: 1200px;
  background: transparent;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.brut-breadcrumb-titre {
    padding: 1px;
    font-weight: 500;
    border-bottom: 2px solid black;
    margin: 10px;}

.brut-breadcrumb-liens a {
  border-bottom: 0px solid black;
  padding: 5px 2px 2px;
  margin: 0 5px;
}

/* galerie de page page pour les produits */
.quentin-images-liste-gallery {
  column-gap: 15px; /* 15 x 2 = 30px */
  row-gap: 15px;
}
.quentin-images-liste-gallery .image-item {
  border: 0px;
  padding: 0px;
  flex: 0 0 calc(33.33% - 10px); /* 10 x 3 = 30px */
  position: relative;
  overflow: hidden; /* Assure que l'image ne dépasse pas du cadre */
  height: 100%;
}

.quentin-images-liste-gallery .image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  aspect-ratio: 1/1; 
}

.qil-caption {
  border: 0;
    color: grey;
    padding: 5px 0 0 0;
    position: relative;
    bottom: 0;
    font-family: 'Josefin Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 15px;
    font-optical-sizing: auto;
    font-weight: 300;
    line-height: 1.2;
}



/* page : le studio - template : t-sliderfull */
.page_content-template-sliderfull {
  border: var(--border_grosseur) solid black;
  padding: 0;
  display: flex;
  flex-direction: column;

  margin-top: calc(var(--border_grosseur)* -1);
  margin-top: calc(var(--menu_hauteur) - var(--border_grosseur));

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

  position: relative;
}

/* titre page 1 _caché */
.page_content-template-sliderfull .titre-slider-full {
  display: none;
}

/* info active toggle, contenu et slider _caché */
.page_content-template-sliderfull .color-message-galerie {
  display: none;
}

/* contenu page _caché */
.page_content-template-sliderfull .content {
  display: none;
}

/* slider carousel slick version sliderfull */
.page_content-template-sliderfull .slick-list {
  height: calc(100vh - var(--menu_hauteur));
  height: 80vh;
}
.page_content-template-sliderfull .slick-slide {
  border: 0px solid blue;
}


/* page produits */

.container-quentin-images-list, .container-quentin-images-list_display-cover {
  border: 0;
    padding: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
    justify-content: center;
    flex-direction: row;
    margin-top: 0;
    position: relative;
    border-bottom: 1px solid grey;
    margin-bottom: 10px;

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

/* dans t-produit-sousenfant.php */
.container-condition-1 {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.container-condition-2 {
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;

  /*display: none;*/
}



.child-info {
  border: 0;
}

.quentin-images-liste .image-entry,
.quentin-images-liste_display-cover .image-entry {
    border: 0;
    padding: 10px;
}

.quentin-images-liste .image-entry {
  border: 0px;
  padding: 0px;
  flex: 0 0 calc(33.33% - 10px); /* 10 x 3 = 30px */
  position: relative;
  overflow: hidden; /* Assure que l'image ne dépasse pas du cadre */
  height: 100%;
}

.quentin-images-liste .image-entry img {
  width: 100%;
  height: auto;
  object-fit: cover; 
  aspect-ratio: 1/1; 
}

.quentin-images-liste .qil-caption {
  border: 0;
    color: grey;
    padding: 5px 0 0 0;
    position: relative;
    bottom: 0;
}

/* all gallery */
.supertestentourgalerie {
  border: 0px solid red;
  max-width: 80%;
  margin: 0 auto;
}

.supertestentourgalerie .quentin-images-liste-gallery{
  border: 0px solid orange;
  max-height: none;
}


/* page : le studio (fullslider template) */
.page_content-template-sliderfull .supertestentourgalerie {
  /*border: 5px solid green;*/
  height: calc(100vh - var(--menu_hauteur));

  width: 100%;
  max-width: 100%;
}

.page_content-template-sliderfull .supertestentourgalerie .quentin-images-liste-gallery{
  height: auto;
  height: 100%;
  max-height: none;

  /*border: 5px solid blue;*/
}

.page_content-template-sliderfull .slick-list {
  height: 100%;
}

@media screen and (max-width: 768px) {
  .page_content-template-sliderfull .supertestentourgalerie {
    height: calc(89vh - var(--menu_hauteur));
  }
}



/* ------------ partenaires ------------- */

.pagenew_colonne-titres .content {
  /*border: 1px solid red;*/
  font-size: 17px;

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

    width: 90%;
}

/* ------------ les produits ------------- */

.page-les-produits {
  /*border: 2px solid orange;*/
  padding: 0;
  /*background: #ddd;*/
}

.pagenew_colonne-titres {
  border: 0px;
  padding: 10px 35px;
}

.pagenew_colonne-titres h2 {
  font-size: 20px;
}

.page-les-produits .pagenew_titre-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 20px;

  /*border: 1px solid blue;*/
  background-color: transparent;

  margin-bottom: 90px;
  margin-top: 10px;
}

.mini_on-top-titre {
  display:none;
}

.page-les-produits .pagenew_colonne-titres h1 {
  /*border: 1px dotted purple;*/
  /* border: 0px; */

  width: 100%;
  max-width: 270px;

  max-width: 340px;
}

.content {
    font-size: 14px;
}

.child-info {
  font-size: 14px;
}

.child-info h3 {
  border-bottom: 1px solid grey;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
}

.child-info img {
  border-bottom: 1px solid grey;
  padding: 0px 0 4px 0;
  margin: 0 0 10px 0;
  max-height: 40px;
}

@media screen and (max-width: 768px) {
  .page-les-produits .pagenew_titre-container {
    flex-direction: column;
    margin-bottom: 170px;
  }

  .page-les-produits .pagenew_colonne-titres h1 {
    width: 100%;
    max-width: 270px;
  }
}

/* page : le produit */

.spacer-fin-produit {
  height:70px
}



/* panier page content etc... */
.content {


  font-size: 16px;
    max-width: 900px;
    margin: 20px auto;
    /* border: 2px solid black; */
    /* border-radius: 20px; */
    background: #f9f9f9;
    padding: 20px;
}