/* ========== button fiche pierre =========*/

.buttonpierre {
    background-color: #a82e25; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Pour permettre les marges */
    font-size: 16px; /* Taille de la police */
    margin-bottom: 0.8em;
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s; /* Transition pour le changement de couleur */
    text-decoration: none !important; /* Enlève le soulignement du lien */
    width: auto; /* Largeur automatique pour s'adapter au contenu */
    max-width: 100%; /* S'assure que le bouton ne dépasse pas la largeur de son conteneur */
    box-sizing: border-box; /* Inclut les bordures et les marges dans le calcul de la largeur */
}

@media screen and (max-width: 768px) {
    .buttonpierre {
        font-size: 14px; /* Réduit la taille de la police sur petits écrans */
        padding: 8px 15px; /* Ajuste les espacements internes */
    }
}


/* État au survol */
.button:hover {
    background-color: #45a049; /* Couleur de fond au survol */
}


/* ========== button fiche pierre =========*/


/* ===========button sizeguide=============*/
/* Style du bouton qui ouvre le pop-up */
.SizeGuide {
  background-color: #E25657; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  padding: 10px 20px; /* Marges internes */
  font-size: 16px; /* Taille du texte */
  font-weight: bold; /* Texte en gras */
  border: none; /* Pas de bordure */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer; /* Curseur en forme de main */
  transition: background-color 0.3s ease; /* Animation de la couleur de fond */
}

.SizeGuide:hover {
  background-color: #a82e25; /* Couleur de fond au survol */
}

/* Styles pour l'overlay */
#sizeGuideOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Styles pour le pop-up */
#sizeGuidePopup {
  position: relative;
  background-color: #fff;
  padding: 20px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styles pour la croix de fermeture */
.closeCross {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

/* Styles pour le bouton de fermeture */
.closeSizeGuideButton {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #e25657;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.closeSizeGuideButton:hover {
  background-color: #a82e25; /* Couleur de fond au survol */
}

/* ===========button sizeguide fin=============*/


img {
  border-radius: 20px;
}

:root {
  --Red: #a82e25;
  --Grey: #3b3936;
}
/* ========PAGE PIERRES INDIVIDUELLE=========*/
body {
  font-family: "Outfit";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* style en commun */
.section-block {
  width: 85%;
  margin: 0 auto;
}

/* fin style en commun */

/* nom de la pierre */
.section-pierre {
  margin-top: 2%;
  display: flex;
  margin-bottom: 5%;
}

.section-pierre-image {
  flex: 0 0 27%; /* Réduit à 20% pour les grands écrans */
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 9px rgb(150, 150, 150);
  border-radius: 10px;
}

.section-pierre-image::before {
  content: "";
  display: block;
  padding-top: 100%
}

.section-pierre-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que l'image s'adapte au conteneur */
  border-radius: 10px;
}

.section-pierre-content {
  flex: 0 0 70%;
  padding-left: 5%;
}

.section-pierre-titles {
    display: flex;
    align-items: baseline; /* Aligne les éléments selon leur base de ligne */
    gap: 10px; /* Espace entre les deux titres */
}

.section-pierre-titre {
  font-size: 24px;
  font-weight: bold;
}

.section-pierre-sous-titre {
  font-size: 15px;
  margin-bottom: 10px;
}

.section-pierre-trait {
  width: 100%;
  height: 4px;
  background-color: var(--Red);
  margin-bottom: 2%;
}

.section-pierre-paragraphe {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.section-pierre-logos {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: inset 5px 5px 15px #d4d4d4, inset 5px -5px 9px #ffffff;
}

.section-pierre-logos div {
  flex: 33%;
  text-align: center;
}
.section-pierre-logos img {
  width: 100%;
  height: 100%;
}

.section-pierre-logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 12px;
}

.section-pierre-logo-titre {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

@media screen and (max-width: 550px) {
  .section-pierre-logos {
    width: 100%;
  }

  .section-pierre-logos div {
    flex: 50%;
  }
}

@media screen and (max-width: 768px) {
  .section-pierre {
    flex-direction: column; /* Change à colonne sur mobile */
  }

  .section-pierre-image {
    flex: 0 0 100%; /* Prend toute la largeur sur mobile */
    margin-bottom: 20px; /* Espacement en bas */
  }

  .section-pierre-content {
    padding-left: 0; /* Supprime le padding gauche */
  }
}

/* fin nom de la pierre */


/* les vertus de la pierre */

.section-vertus {
  margin-bottom: 5%;
}

.section-vertus-content {
  margin: 0 auto;
}

.section-vertus-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-vertus-tiret {
  width: 100%;
  height: 4px;
  background-color: var(--Red);
  margin-bottom: 10px;
}

.section-vertus-paragraph {
  font-size: 16px;
  line-height: 1.5;
}

/* fin vertus de la pierre */

/* fiche info */
/* Styles généraux */
.section-info {
  background-color: var(--Red);
  color: white;
  display: flex;
  align-items: center;
  padding: 3%;
  width: 100%;
}

.section-info-logo {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 700;
  font-size: 1.2em;
  text-align: center;
}

.section-info-logo img {
  width: 100%;
  max-width: 40% !important; /* Utilisation de !important */
  height: auto;
}

.section-info-list {
  width: 50%;
  margin-left: 20px;
  list-style: none;
}

.section-info-list li {
    margin-bottom: 10px; /* Espace entre les éléments */
    line-height: 1.2; /* Line height pour les textes longs */
}

/* Media query pour les écrans intermédiaires (tablettes) */
@media only screen and (max-width: 1023px) {
  .section-info {
    flex-direction: column;
    align-items: center;
  }

  .section-info-logo {
    width: 50%;
    max-width: 100%;
    margin: 0 0 5% 0;
  }

  /* Réduire la taille de l'image spécifiquement pour les tablettes */
  .section-info-logo img {
    max-width: 50% !important; /* Utilisation de !important */
  }

  .section-info-list {
    width: 100%;
    margin: 0;
    padding: 0 20px;
    text-align: center;
  }
}

/* Media query pour les petits écrans (mobiles) */
@media only screen and (max-width: 768px) {
  .section-info-logo {
    width: 80%;
    max-width: 100%;
    margin: 0 0 5% 0;
  }

  /* Réduire encore plus la taille de l'image pour les petits écrans */
  .section-info-logo img {
    max-width: 30% !important; /* Utilisation de !important */
  }
}


/* fin fiche info */



/* l'histoire de la pierre */

.section-history {
   margin-top: 5%;
   margin-bottom: 5%;
}

.section-history-content {
  margin: 0 auto;
}

.section-history-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-history-tiret {
  width: 100%;
  height: 4px;
  background-color: var(--Red);
  margin-bottom: 10px;
}

.section-history-paragraph {
  font-size: 16px;
  line-height: 1.5;
}

/* ========PAGE PIERRES INDIVIDUELLE=========*/