#beginnerPage {
  --white: #f3f4f4;
  --gray: #7a7a7a;
  --brand-primary: #7c00ff;
  --brand-secondary: #fd5016;
  --base-color: #1d1f24;
}

#beginnerPage .highlight__txt {
  color: initial;
}

#beginnerPage .highlight::after {
  border: 1px solid var(--gray);
}


.background-bloc {
  padding: 20px;
  position: relative;
  z-index: 1; 
}

.background-bloc::before {
  content: ''; 
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw; 
  transform: translateX(-50%); 
  background-color: #f9f3fe; 
  height: 100%;
  z-index: -1; 
}


.beginnerPage_intro {
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  width: 100%; 
  box-sizing: border-box; 
  padding:0 0 40px;
}

.beginnerPage_intro p {
  font-size: 1rem;
  max-width: 600px;
  text-align: center;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    gap: 20px;
}


.beginnerPage-col3 {
    flex: 0 0 calc(66.66% - 20px); 
    max-width: calc(66.66% - 20px);
}

.beginnerPage-col4 {
    flex: 0 0 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px);
}

.beginnerPage-col5 {
    flex: 0 0 calc(66.66% - 20px); 
    max-width: calc(66.66% - 20px);
}

.beginnerPage-col6 {
    flex: 0 0 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px);
}

.beginnerPage-col7 {
    flex: 0 0 calc(66.66% - 20px); 
    max-width: calc(66.66% - 20px);
    text-align: center;
}

.beginnerPage-col8 {
    flex: 0 0 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px);
    text-align: right;
}
.beginnerPage-col10 {
    flex: 0 0 calc(66.66% - 20px); 
    max-width: calc(66.66% - 20px);
    text-align: center;
}

.beginnerPage-col9 {
    flex: 0 0 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px);
}

.beginnerPage-col1,
.beginnerPage-col2 {
    flex: 0 0 calc(50% - 20px); 
    max-width: calc(50% - 20px);
}

@media (max-width: 1024px) {
    .beginnerPage-col3,
    .beginnerPage-col4,
    .beginnerPage-col1,
    .beginnerPage-col2,
    .beginnerPage-col5,
    .beginnerPage-col6,
    .beginnerPage-col7,
    .beginnerPage-col8,
    .beginnerPage-col9,
    .beginnerPage-col10
     {
        flex: 0 0 100%; 
        max-width: 100%;
    }
}

.beginnerPage-col1 h2, .beginnerPage-col2 h2, .beginnerPage-col3 h2, .beginnerPage-col4 h2,  .beginnerPage-col5 h2, .beginnerPage-col6 h2, .beginnerPage-col7 h2, .beginnerPage-col8 h2, .beginnerPage-col9 h2, .beginnerPage-col10 h2
{
  font-size:1.6rem;
}

.beginnerPage-col1 h3, .beginnerPage-col2 h3, .beginnerPage-col3 h3, .beginnerPage-col4 h3
{
  font-size:.9375rem;
  color: var(--brand-primary);
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
}

.beginnerPage-col1 p, .beginnerPage-col2 p, .beginnerPage-col3 p, .beginnerPage-col4 p
{
  font-size:.9375rem;
}

.beginnerPage-col4 p{
  padding-bottom:20px;  
  font-size:.9375rem;                  
}

.beginnerPage-col5 p{
  padding-bottom:20px;  
  font-size:.9375rem;
  text-align: left;
}


.beginnerPage-col7 p{
  padding-bottom:20px;  
  font-size:.9375rem;
  text-align: right;
}

.beginnerPage-col8 p{
  padding-bottom:20px;  
  font-size:.9375rem;
  text-align: right;
}

.beginnerPage-col9 p{
  padding-bottom:30px;  
  font-size:.9375rem;
  text-align: left;
}


.beginnerPage-container p {
  padding-bottom:30px;
  font-size:.9375rem
}

.extra-content.active {
display: block; 
}
.extra-content  {
display: none;
}


.BTbeginner {
    background-color: var(--brand-primary); 
    color: #ffffff; 
    border: none; 
    border-radius: 30px; 
    padding: 2px 20px 2px 20px;
    font-size: 1rem; 
    cursor: pointer; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.BTbeginner:hover {
    transform: scale(1.05); 
}

.BTbeginner:active {
    transform: scale(1); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

.BTbeginner.active {
    background-color: var(--brand-primary); 
    color: #ffffff; 
}

.starBeginner {
    color: var(--brand-primary); 
    font-size: 12px; 
    margin: 0 2px; 
    text-align:center;
}


.table-container {
  margin-bottom: 30px;
  overflow-x: auto; 
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.table1beginner
{
    border: 1px solid #ffffff;
    background-color: #fcfcfc;
    color: var(--brand-primary);
    font-size:1rem;
    text-transform: uppercase;
    text-align:left;
    vertical-align: text-top;
    font-weight: 300;
}

.titleTableBeginner
{
  font-size:0.8rem;
  color:#c3c3c3;
  font-weight: 300;
}

.textTable
{
  text-align: center;
  font-weight: normal;
}

td {
  text-align: right;
  border: 1px solid #d7d7d7;
  padding: 5px;
  font-weight: bold;
}

th {
  background-color: #fcfcfc;
  text-align: center;
  border: 1px solid #d7d7d7;
  padding: 5px;
}

tr:nth-child(odd) {
    background-color: #f2f2f2; 
}

tr:nth-child(even) {
    background-color: #fcfcfc; 
}

tr:hover {
  background-color: #f2f2f2;
}

/* Responsive */
@media (max-width: 768px) {
  th, td {
      font-size: 14px;
      padding: 8px;
  }
}
@media (max-width: 480px) {
  th, td {
      font-size: 12px;
      padding: 6px;
  }
}

.liBeginner
{
 color: var(--brand-primary); 
 font-size:16px;
    list-style-type: disc;
    color: #333;
    margin: 0;
}

.titlemoduleBeginner 
{
  background-color:#f9f3fe;
  padding:40px 0 0 0;
}

.titlemoduleBeginner h2, .titlemoduleBeginner2 h2
{
  color: var(--brand-primary); 
  font-size:2.2rem;
  margin: 0;
  padding: 0;
}

.titlemoduleBeginner2 
{
  padding:40px 0 0 0;
  text-align: right;
}

.flex-container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 20px; 
    margin: 0 auto;
    padding: 0;
    background-color:#f9f3fe;
}

.beginnerPage-col5 {
    flex: 0 0 calc(30% - 10px); 
    max-width: calc(30% - 10px);
    margin: 0;
    padding: 0;
}

.beginnerPage-col6 {
 flex: 0 0 calc(70% - 10px); 
    max-width: calc(70% - 10px);
    margin: 0;
    padding: 0;
    text-align:center;
}

.beginnerPage-col6 h2, .beginnerPage-col7 h2, .beginnerPage-col10 h2 {
  text-align:center;
  margin-bottom:30px;
}

.essentials-box, .essentials-box2 {
    border: 2px solid #fc5015;
    border-radius: 10px;
    padding: 10px;
    background-color: transparent;
    position: relative;
}

.essentials-box {
    max-width: 350px;
}



.essentials-title {
    color: #fc5015;
    font-size: 1rem;
    font-weight: 300 !important;
    background-color:#f9f3fe;
    text-transform: uppercase;
    padding: 0 10px;
    position: absolute;
    top: -12px;
    left: 20px;
    font-family: 'Montserrat', sans-serif;
}


.essentials-title-right {
    color: #fc5015;
    font-size: 1rem;
    font-weight: 300 !important;
    text-transform: uppercase;
    background-color:#ffffff;
    padding: 0 10px;
    position: absolute;
    top: -12px;
    left: 180px;
    font-family: 'Montserrat', sans-serif;
}

.essentials-list-right {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    direction: rtl;
    text-align: right;
    line-height: 1rem;
}
.essentials-list-right li::marker {
    color: #fc5015; /* Puce en orange */
}


.essentials-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}


.essentials-list li, .essentials-list-right li {
    margin-bottom: 10px;
    font-size: .9375rem;
    font-weight:bold;
}

.essentials-list li::marker, .essentials-list-right li::marker {
    color: #fc5015; 
}

.textAvBouton
{
  font-size:1.1rem;
  text-align: center;
  padding-top:20px;
}

.highlights__grid {
  display: flex;
  justify-content: center; 
  gap: 20px; 
}

.highlights__item {
  flex: 0 0 30%; 
  max-width: 220px;
  text-align: center; 
}

.empty {
  display: none;
}

@media (max-width: 768px) {
  .highlights__grid {
    grid-template-columns: repeat(2, 1fr); 
  }
}

.essentials-box2 {
  position: relative;
  border: 2px solid #fd5016;
  border-radius: 10px;
  padding: 15px;
  margin: 20px 0;
}

.essentials-title-right {
  position: absolute;
  top: -12px;
  right: 15px;
  background-color: white;
  padding: 0 10px;
  margin: 0;
  color: #fd5016;
  font-weight: bold;
}

.essentials-list-right {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.8rem;
}

.essentials-list-right li {
  text-align: right;
  padding-right: 15px;
  position: relative;
  margin-bottom: 5px;
}

/* Le point orange à droite */
.essentials-list-right li::after {
  content: "•";
  color: #fd5016;
  position: absolute;
  right: 0;
  top: 0;
  font-size:2rem;
}

/* Style pour les valeurs numériques */
.value {
padding-right:5px;
}

.bhighlights .active {
    display: grid!important;
}
.bhighlights .inactive {
    display: none!important;
}

.bhighlights {
    --white: #f3f4f4;
    --gray: #7a7a7a;
    --brand-primary: #7c00ff;
    --brand-secondary: #fd5016;
}
.bhighlights__grid {
    position: relative;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px 60px;
}
.bhighlights__grid .default {
    grid-column: 1 / span 2;
    text-align: center;
}
@media (min-width: 576px) {
    .bhighlights__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .bhighlights__grid .default {
        grid-column: 1 / span 3;
    }
}
@media (min-width: 768px) {
    .bhighlights__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .bhighlights__grid .default {
        grid-column: 1 / span 3;
    }
}
@media (min-width: 992px) {
    .bhighlights__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .bhighlights__grid .default {
        grid-column: 1 / span 3;
    }
}
.bhighlight {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 1rem;
  background-clip: padding-box;
  z-index: 0;
}

.bhighlight::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  border-radius: inherit;
  background: linear-gradient(to top right,var(--brand-primary),var(--brand-secondary));
  opacity: 0;
  transition: all 0.3s;
}
.bhighlight::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--white);
  border-radius: 10px;
}

.bhighlight:hover,
.bhighlight:active,
.bhighlight:focus {
  color: #1d1f24;
  transform: scale(1.1);
}
.bhighlight:hover::before,
.bhighlight:active::before,
.bhighlight:focus::before {
    opacity: 1;
    transition: all 0.4s;
}
.bhighlight:hover::after,
.bhighlight:active::after,
.bhighlight:focus::after {
    background-color: var(--white);
    z-index: -1;
}
.bhighlight:hover .bhighlight__btns,
.bhighlight:active .bhighlight__btns,
.bhighlight:focus .bhighlight__btns {
    opacity: 1;
    transition: all 0.4s;
}
.bhighlight:hover .bhighlight__txt,
.bhighlight:active .bhighlight__txt,
.bhighlight:focus .bhighlight__txt {
    opacity: 0;
    transition: all 0.4s;
}

.bhighlight__ttl {
  text-transform: uppercase;
  font-family: 'Gotham condensed', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
}
.bhighlight__flavor {
  font-weight: bold;
}
.bhighlight__overlap {
  position: relative;
  min-height: 30px;
 /* margin-top: 1rem;*/
}
.bhighlight__overlap .btn {
    width: 95%;
    padding: 0.20rem 0;
    margin: 0.2rem 0;
    font-size: 0.8rem;
}

.bhighlight__txt {
  font-size: 0.9rem;
  transition: all 0.4s;
  color: #1d1f24;
  line-height:1rem;
}
.bhighlight__btns {
  opacity: 0;
  width: 100%;
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}
.bhighlight__btns .btn-primary--outline {
  color: #1d1f24;
}
.bhighlight__btns .btn-primary--outline:hover,
.bhighlight__btns .btn-primary--outline:active,
.bhighlight__btns .btn-primary--outline:focus {
  background-color: #7c00ff;
  color: var(--white);
}


/* ————————————————————————————————
   1) Contour noir sur chaque bloc
   ———————————————————————————————— */
/* Si vous utilisez la classe .highlight (hook personnalisé) */
#beginnerPage .bhighlight::after {
  border-color: #000 !important; /* override du gris actuel */ 
}
/* Si vous utilisez le composant .bhighlight */
.bhighlight::after {
  border: 1px solid #000 !important;
}

.bhighlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: center;
  grid-gap: 30px 20px;
  margin: 0 auto;
}

.bhighlight {
  width: 200px;
  max-width: 200px;
  min-height: 330px;      
  padding: 16px;
  box-sizing: border-box;

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

.bhighlight img {
  width: 100%;
  height: 200px;           
  object-fit: cover;       
  margin-bottom: 12px;
}


.conseils
{
position: relative;
  top: -288px;
  width: 65%;
}


/* NOUVELLES MODIFICATIONS POUR L'AFFICHAGE MOBILE */

@media (max-width: 768px) {
  /* Ajustement des sections en version mobile */
  .flex-container, .flex-container2 {
    flex-direction: column;
    padding: 0 15px;
  }
  
  /* Ajustement des colonnes pour l'affichage mobile */
  .beginnerPage-col5, 
  .beginnerPage-col6,
  .beginnerPage-col7,
  .beginnerPage-col8,
  .beginnerPage-col9,
  .beginnerPage-col10 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 ;
    padding: 0;
  }
  
  /* Centrage des textes en mobile */
  .beginnerPage-col8 p {
    text-align: center;
  }
  
  /* Ajustement des titres en version mobile */
  .titlemoduleBeginner, .titlemoduleBeginner2 {
    text-align: center;
    padding: 30px 15px 0 15px;
  }
  
  .titlemoduleBeginner h2, .titlemoduleBeginner2 h2 {
    font-size: 1.8rem;
    text-align: center;
  }
  
  /* Ajustement de la boîte "Les essentiels" en mobile */
  .essentials-box {
    max-width: 100%;
    margin: 20px auto;
  }
  
  /* Centrage et ajustement de la boîte "Les essentiels" en version mobile */
  .essentials-box2 {
    max-width: 100%;
    margin: 30px auto 10px;
  }
  
  .essentials-title-right {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size:0.9rem;
    padding: 0px;
    right:0px;

  }
  
  .essentials-title {
    font-size:0.9rem;
  }


.bhighlights__grid {
 grid-gap: 0;
}

  /* Ajustements des listes en mobile */
  .essentials-list-right {
    direction: ltr;
    text-align: left;
    padding-left: 20px;
    line-height: 1.5rem;
  }
  
  .essentials-list-right li {
    text-align: left;
    padding-right: 0;
    padding-left: 15px;
  }
  
  /* Repositionnement des points en version mobile */
  .essentials-list-right li::after {
    right: auto;
    left: 0;
  }
  
  /* Ajuster les grilles de produits en mobile */
  .bhighlights__grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }
  
  /* Amélioration de l'affichage des highlights en mobile */
  .highlights__grid {
    flex-direction: column;
    align-items: center;
  }
  
  .highlights__item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  
  /* Ajustement des boutons en mobile */
  .BTbeginner {
    display: block;
    margin: 0px auto;
    padding: 5px 25px;
  }
  
  /* Adaptation de la zone de texte avant bouton */
  .textAvBouton {
    padding: 10px 15px;
    margin-bottom: 15px;
  }
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
  .titlemoduleBeginner h2, .titlemoduleBeginner2 h2 {
    font-size: 1.5rem;
  }
  
  /* Réduction des éléments dans le tableau pour petit écran */
  .table-container {
    margin: 10px -15px;
  }
  
  /* Adapter l'image de la seconde colonne */
  .beginnerPage-col2 img {
    width: 100%;
    height: auto;
  }
  
  /* Assurer que les titres et textes s'adaptent bien */
  .beginnerPage-col1 h2, .beginnerPage-col3 h2, .beginnerPage-col4 h2 {
    font-size: 1.4rem;
    padding-top: 10px;
  }
  
  .beginnerPage-col1 h3, .beginnerPage-col3 h3, .beginnerPage-col4 h3 {
    font-size: 0.85rem;
  }
  
  /* Adaptation du padding pour les textes */
  .beginnerPage-container p, 
  .beginnerPage-col4 p, 
  .beginnerPage-col5 p, 
  .beginnerPage-col8 p, 
  .beginnerPage-col9 p {
    padding-bottom: 15px;
  }
  
  /* Adaptation des boutons */
  .BTbeginner {
    font-size: 0.9rem;
  }
}

/* Amélioration supplémentaire pour la section "Ma première expérience de vape" en mobile */
@media (max-width: 768px) {
  .background-bloc {
    padding: 15px;
  }
  
  /* Assurer que le fond s'étend correctement en mobile */
  .background-bloc::before {
    width: 100vw;
  }
  
  /* Adapter l'espacement en mobile */
  .beginnerPage_intro {
    padding: 0 15px 20px;
  }
  
  /* Améliorer l'affichage des images de produits en mobile */
  .bhighlight img {
    max-width: 60%;
  }
  
  /* Assurer une bonne visibilité des éléments en mobile */
  .bhighlight {
    margin-bottom: 0px;
    width: 160px;
    max-width: 160px;
    padding: 0px;
    min-height: 300px;
  }
}



@media (max-width: 767px) {
  .conseils {
    position: static; /* Réinitialise la position */
    top: 0;           /* Supprime le décalage vertical */
    width: 100%;      /* Adapte la largeur à 100% */
  }

  .conseils h2
  {
    padding-top:10px;
  }

beginnerPage h2
{
  padding-top:10px;
}

}