
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.es-section {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.product-page .es-product-description p {
  font-family: var(--font-primary);
  font-weight: normal;
  line-height: 1.5;
}

.product-page .es-product-description h2 {
  font-family: var(--font-primary);
  color: var(--color-white);
  margin-bottom: 30px;
  font-size: 1rem;
  font-weight: bold;
}

.product-page .es-product-description h3 {
  font-family: var(--font-primary);
  color: var(--color-white);
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.product-page .es-product-description ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0 0 var(--space-md) 0;
  font-size: ;
}

.product-page .es-product-description li {
  color: var(--color-white);
  font-family: var(--font-primary);
  line-height: 1.5;
}

.product-page .divider {
  height: 1px;
  border: none;
  background-color: var(--color-light-grey);
}

/* #endregion Fin styles de base */

/* #region début formes animées */


/* #region Début header-product */
.product-page .header-product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 75px 0px 100px 0px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.product-page .header-product__title {
  display: flex;
  width: 80%;
  align-items: center;
  gap: 25px;
}

.product-page .header-product__title--background {
  padding: 30px;
  border-radius: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

.product-page .header-product__title--name {
  display: flex;
  flex-direction: column;
}

.product-page .header-product__title img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.product-page .header-product__title h1 {
  font-family: var(--font-primary);
  font-size: 55px;
  margin: 0;
}

.product-page .header-product__title span {
  font-family: var(--font-primary);
  font-size: 40px;
}

.product-page .header-product__number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 35%;
  text-align: right;
}

.product-page .header-product__number .session-type-bubble {
  padding: 10px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-page .header-product__number .session-type-bubble.ete-bubble {
  background-color: var(--color-yellow);

}

.product-page .header-product__number .session-type-bubble.anne-scolaire-bubble {
  background-color: var(--color-green);
}


.product-page .header-product__number .session-type-bubble span {
  font-weight: bold;
  color: var(--color-black);
  line-height: 1.2;
}

.product-page .header-product__number h1 {
  font-family: var(--font-primary);
  font-weight: normal;
  font-size: 40px;
  text-align: left;
  margin: 0;
}

.header-product__number .course-level-code {
  font-family: var(--font-primary);
  font-weight: normal;
  font-size: 34px;
  text-align: left;
  line-height: 1.2;
  margin: 0;
}

.product-page .header-product__number span {
  text-align: center;
  font-family: var(--font-primary);
  font-weight: normal;
  text-transform: uppercase;
  white-space: pre-line;
}

@media (max-width: 768px) {
  .product-page .header-product {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .product-page .header-product__title {
    width: 100%;
    gap: 15px;
  }

  .product-page .header-product__number {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 20px;
  }

  .header-product__title--background {
    padding: 10px;
    width: 108px;
    height: 108px;
  }
}

@media (max-width: 320px) {
  .product-page .header-product__title {
    flex-direction: column;
  }

  .product-page .header-product__number {
    flex-direction: column-reverse;
  }
}

/* #region Début courses-materials Liste du matériel requis pour suivre nos cours */


.product-page .courses-list {
  margin: 75px 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.product-page .courses-list__item {
  display: flex;
  gap: 15px;
  border-bottom: 1px solid var(--color-grey);
  padding-bottom: 20px;
}

.product-page .courses-list__item i {
  color: var(--color-white);
}

.product-page .product-custom-content section {
  margin: 0;
  padding: 0;
}

.product-page .product-custom-content section.checklist-wrapper .checklist-footer-note {
  
}


/* #endregion Fin courses-materials Liste du matériel requis pour suivre nos cours */

/* #region Début prix */
.product-page .product-price {
  margin: 100px 0px;
}

/* #endregion Fin prix */

/* END Fiche produit (single-product.php) */

/* FICH PRODUIT GPT */
.product-price {
  font-size: 1.5rem;
  margin: 1rem 0;
}

.product-description {
  margin-top: 3rem;
}
/* END Fiche produit GPT */


/* PAGE ETUDIER QUEBEC */
.page-etudier-quebec h1 {
  color: var(--color-red);
}

.page-etudier-quebec .cls-1 {
  fill: #fc4733;
}

.page-etudier-quebec .cls-1,
.page-etudier-quebec .cls-2,
.page-etudier-quebec .cls-3,
.page-etudier-quebec .cls-4,
.page-etudier-quebec .cls-5 {
  stroke-width: 0px;
}

.page-etudier-quebec .cls-2 {
  fill: #f5bf42;
}

.page-etudier-quebec .cls-3 {
  fill: #025f63;
}

.page-etudier-quebec .cls-4 {
  fill: #7743f9;
}

.page-etudier-quebec .cls-5 {
  fill: #fff;
}

/* Masquer initialement tous les groupes animés au chargement */
/* #ecole-rouge,
#ecole-mauve,
#ecole-jaune,
#ecole-vert {
  opacity: 0;
  visibility: hidden;
} */

#ecole-rouge,
#ecole-mauve,
#ecole-jaune,
#ecole-vert {
  opacity: 1;
}

/* Permettre aux animations JS de restaurer la visibilité */
#ecole-rouge.animation-completed,
#ecole-mauve.animation-completed,
#ecole-jaune.animation-completed,
#ecole-vert.animation-completed {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Styles pour l'animation des cercles */
/* #ecole-cercle-rouge,
#ecole-cercle-mauve,
#ecole-cercle-jaune,
#ecole-cercle-vert {
  transition: opacity 0.3s ease;
  opacity: 0;
  /* Cachés par défaut jusqu'à l'animation
} */

#ecole-cercle-rouge,
#ecole-cercle-mauve,
#ecole-cercle-jaune,
#ecole-cercle-vert {
  transition: opacity 0.3s ease;
  opacity: 1;
  /* Cachés par défaut jusqu'à l'animation */
}

/* #endregion animation forms */
/* END PAGE ETUDIER QUEBEC */


/* PAGE PARTENAIRES */
.partenaire-scolaire .turquoise-box {
  background-color: var(--color-turquoise);
  color: var(--color-black);
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
}

.partenaire-scolaire .turquoise-box p, .partenaire-scolaire .turquoise-box h2 {
  color: var(--color-black);
}

.partenaire-scolaire .cls-1 {
  fill: #fc4733;
}

.partenaire-scolaire .cls-1,
.partenaire-scolaire .cls-2,
.partenaire-scolaire .cls-3,
.partenaire-scolaire .cls-4,
.partenaire-scolaire .cls-5 {
  stroke-width: 0px;
}

.partenaire-scolaire .cls-2 {
  fill: #f5bf42;
}

.partenaire-scolaire .cls-3 {
  fill: #025f63;
}

.partenaire-scolaire .cls-4 {
  fill: #7743f9;
}

.partenaire-scolaire .cls-5 {
  fill: #fff;
}
/* END PAGE PARTENAIRES */