/**
 * =================================================
 *          STYLES PAGE COURS ANNÉE SCOLAIRE
 * =================================================
 * 
 * Structure: Layout en 2 colonnes avec navigation sticky
 * - Colonne gauche: Cards de navigation (20%)
 * - Colonne droite: Contenu principal (80%)
 * - Responsive: Passage en colonne unique sur mobile
 */

/* ================================================= */
/*                  STYLES DE BASE                  */
/* ================================================= */

/**
 * Styles généraux pour le contenu produit
 */
.page-cours-anne-scolaire .product-page {
  margin-left: 100px;
}

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

.page-cours-anne-scolaire .product-page h3 {
  font-family: var(--font-primary);
  color: var(--color-white);
  font-size: 14px;
}

/**
 * Listes à puces
 */
.page-cours-anne-scolaire .product-page ul {
  list-style-type: disc;
  padding-left: 20px;
}

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

/**
 * Séparateur visuel entre sections
 */
.page-cours-anne-scolaire .divider {
  transform: translate(-10%, 0);
  width: 150%;
  height: 1px;
  border: none;
  background-color: var(--color-grey);
}

/* ================================================= */
/*            CONTENU PRINCIPAL - COLONNE DROITE   */
/* ================================================= */

.page-cours-anne-scolaire .courses-public {
  width: 80%;
}

/* ================================================= */
/*               PÉRIODE D'INSCRIPTION              */
/* ================================================= */

/**
 * Section complète des périodes d'inscription
 */
.page-cours-anne-scolaire .registration-period {
  margin: 100px 0px;
}

/**
 * Description des cours d'été
 */
.registration-period.cours-ete .description{
  margin-bottom: var(--space-lg);
}

/**
 * Cards spécifiques pour les cours d'été
 */
.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item {
  border: none;
  border-radius: var(--border-radius-lg);
}

.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:first-child {
  background-color: var(--color-green);
}

.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:last-child {
  background-color: var(--color-teal-dark);
}

.registration-period.cours-ete .note{
  margin-top: var(--space-lg);
}

/**
 * Styles spécifiques pour les dates des cours d'été
 */
.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item--date {
  font-size: var(--font-size-xxl);
  color: var(--color-white);
  margin-bottom: 5px;
}

.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item--title {
  font-size: var(--font-size-md);
}

/**
 * Container des cards d'inscription - Layout Flexbox
 */
.page-cours-anne-scolaire .registration-cards {
  display: flex;
  gap: 15px;
}

/**
 * Card individuelle d'inscription
 * - Bordure blanche, coins arrondis
 * - Layout vertical avec espacement
 */
.page-cours-anne-scolaire .registration-cards__item {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 25px;
  border: 1px solid var(--color-light-grey-rgba);
  border-radius: var(--border-radius-l);
}

/**
 * Date dans chaque card d'inscription
 */
.page-cours-anne-scolaire .registration-cards__item--date {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  color: var(--color-white);
  margin-bottom: 5px;
}

/**
 * Titre de chaque card d'inscription
 */
.page-cours-anne-scolaire .registration-cards__item--title {
  font-family: var(--font-primary);
  font-size: 25px;
  color: var(--color-white);
  line-height: 1.2;
}

/* ================================================= */
/*                   LISTE DES COURS                */
/* ================================================= */

/**
 * Section principale de la liste des cours
 * - Partage les styles avec .page-prealables
 */
.page-prealables .courses-list, .page-cours-anne-scolaire .courses-list {
  margin: 100px 0px;
}

/**
 * Espacement des éléments de liste
 */
.page-prealables .courses-list .es-wysiwyg ul li, .page-cours-anne-scolaire .courses-list .es-wysiwyg ul li {
  margin-bottom: 1rem;
}

/**
 * Section individuelle de cours
 */
.page-prealables .courses-list__section {
  margin: 100px 0px;
}

.page-cours-anne-scolaire .courses-list__section {
  padding: 100px 0px;
}

.page-prealables .courses-list__section h3, .page-cours-anne-scolaire .courses-list__section h3 {
  margin-bottom: 40px;
}

/**
 * Grille des cours - 2 colonnes en desktop
 */
.page-prealables .courses-list__row, .page-cours-anne-scolaire .courses-list__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/**
 * Item de cours individuel
 * - Layout horizontal avec image et texte
 */
.page-prealables .course-item, .page-cours-anne-scolaire .course-item a {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/**
 * Section titre du cours
 * - Chevauchement avec l'image (-70px margin-left)
 * - Fond semi-transparent
 */
.page-prealables .course-item__title, 
.page-cours-anne-scolaire .course-item__title {
  z-index: 0;
  height: 130px;
  width: 60%;
  padding: 24px 15px;
  margin-left: -70px;
  padding-left: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  background-color: #3131317a;
}

.page-prealables .course-item__title h3, .page-cours-anne-scolaire .course-item__title h3 {
  margin-bottom: 0px;
}

.page-prealables .course-item__title span, 
.page-cours-anne-scolaire .course-item__title span {
  line-height: 1;
}

/**
 * Section niveaux du cours
 */
.page-prealables .course-item__levels, .page-cours-anne-scolaire .course-item__levels {
  height: 130px;
  width: 40%;
  padding: 24px 15px;
  background-color: #3131317a;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-white);
}

.page-prealables .course-item__levels spa, .page-cours-anne-scolaire .course-item__levels span{
  color: var(--color-white);
}

/**
 * Section CTA avec cards de niveaux
 */
.content__details .cta-simple {
  margin: 60px 0;
}

/**
 * Container des cards de niveaux - Layout Flexbox
 */
.secondary-levels-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

/**
 * Card individuelle de niveau
 * - Style bouton avec fond coloré
 * - Transitions fluides pour hover
 * - Typographie cohérente
 */
.level-card {
  display: inline-block;
  padding: 15px 25px;
  border-radius: var(--border-radius-xl);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--font-size-md);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

/**
 * Couleurs spécifiques par niveau
 */
/* .level-card--s1 {
  background-color: var(--color-turquoise);
}

.level-card--s2 {
  background-color: var(--color-yellow);
}

.level-card--s3 {
  background-color: var(--color-light-green);
}

.level-card--s4 {
  background-color: var(--color-teal-light);
}

.level-card--s5 {
  background-color: var(--color-purple-light);
} */

/**
 * Effets hover pour toutes les cards
 */
.level-card:hover {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  transition: all 0.3s ease;
}

/**
 * Background circulaire pour l'image du cours
 */
.page-prealables .header-product__title--background, .page-cours-anne-scolaire .header-product__title--background {
  z-index: 1;
  border-radius: 100px;
  height: 130px;
  width: 130px;
  flex-shrink: 0;
  padding: 25px;
}

.page-prealables .header-product__title--background img, .page-cours-anne-scolaire .header-product__title--background img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

/* ================================================= */
/*                   CALENDRIER                     */
/* ================================================= */

/**
 * Section calendrier des cours
 */
.page-prealables .calendar, .page-cours-anne-scolaire .calendar {
  margin-top: 100px;
}

.page-cours-anne-scolaire .download-btn-wrapper {
  text-align: center;
}

.page-prealables .calendar .main-btn, .page-cours-anne-scolaire .calendar .main-btn {
  margin-top: var(--space-lg);
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Bouton bleu du calendrier
 */
.page-cours-anne-scolaire .btn-blue {
  font-family: var(--font-primary);
  font-weight: normal;
  border-radius: 25px;
  padding: 15px 25px;
  text-transform: uppercase;
  background-color: var(--color-turquoise);
  border: 1px solid var(--color-turquoise);
  color: var(--color-black);
}

@media (max-width: 1180px) {

   /**
   * Grille des cours devient une colonne
   * - Passage de 2 colonnes à 1 colonne
   */
  .page-prealables .courses-list__row, .page-cours-anne-scolaire .courses-list__row {
    grid-template-columns: 1fr;
  }

  .page-cours-anne-scolaire .courses-list__section {
    padding: 60px 0px;
  }
}

/**
 * =================================================
 *              RESPONSIVE MOBILE/TABLETTE
 * =================================================
 * 
 * Breakpoint: 1024px et moins
 * Changements principaux:
 * - Layout passe de 2 colonnes à 1 colonne
 * - Navigation cards deviennent horizontales et sticky
 * - Grilles deviennent des colonnes uniques
 * - Adaptation des espacements pour mobile
 */

@media (max-width: 1024px) {
  
  /* ================== LAYOUT RESPONSIVE ================== */
    
  /* ================== CONTENU RESPONSIVE ================== */

  .page-cours-anne-scolaire .courses-public {
    width: 100%;
  }
  
  /* ================== GRILLES RESPONSIVE ================== */
  
  /**
   * Grille des cartes d'inscription devient une colonne
   * - Empilement vertical sur mobile
   */
  .page-cours-anne-scolaire .registration-cards {
    flex-direction: column;
  }
  
  /**
   * Grille des cours devient une colonne
   * - Passage de 2 colonnes à 1 colonne
   */
  .page-prealables .courses-list__row, .page-cours-anne-scolaire .courses-list__row {
    grid-template-columns: 1fr;
  }
  
  /**
   * Barre de recherche prend toute la largeur
   * - Suppression de la contrainte 50% du desktop
   * - Repositionnement à gauche
   */
  .page-prealables .courses-search, .page-cours-anne-scolaire .courses-search {
    width: 100%;
    margin-left: 0;
  }
  
  /* ================== COURSE ITEMS RESPONSIVE ================== */
  
  /**
   * Course items gardent le layout horizontal
   * - Layout row maintenu pour garder image + 2 blocs de texte côte à côte
   * - Centrage vertical des éléments
   * - Hauteur adaptative selon le contenu
   */
  .page-prealables .course-item, .page-cours-anne-scolaire .course-item {
    flex-direction: row;
    align-items: center;
    min-height: 120px;
  }
  
  /**
   * Background circulaire adapté pour mobile
   * - Prend 100% de la hauteur du course-item parent
   * - Largeur ajustée pour garder les proportions
   */
  .page-prealables .header-product__title--background, .page-cours-anne-scolaire .header-product__title--background {
    width: 100px;
    height: 100px;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /**
   * Section titre adaptée pour mobile
   * - Garde le chevauchement mais ajusté pour mobile
   * - Hauteur fixe pour égaliser avec la section niveaux
   */
  .page-prealables .course-item__title, .page-cours-anne-scolaire .course-item__title {
    width: 60%;
    margin-left: -50px;
    padding: 15px 10px;
    padding-left: 60px;
    height: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /**
   * Section niveaux adaptée pour mobile
   * - Hauteur fixe identique à la section titre
   * - Padding ajusté pour mobile
   */
  .page-prealables .course-item__levels, .page-cours-anne-scolaire .course-item__levels {
    width: 40%;
    padding: 15px 10px;
    height: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .page-cours-anne-scolaire .registration-cards__item{
    gap: 20px;
  }
  
  .page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item--date {
    font-size: var(--font-size-xl);
  }
  .page-cours-anne-scolaire .registration-period {
    margin: 40px 0px;
  }

  .page-cours-anne-scolaire .courses-list__section {
    padding: 40px 0px;
  }
  
  .page-prealables .courses-list__row, .page-cours-anne-scolaire .courses-list__row{
    gap: 1rem;
  }

  .page-prealables .courses-list, .page-cours-anne-scolaire .courses-list {
    margin: 70px 0px;
  }

}

/**
 * =================================================
 *          RESPONSIVE TRÈS PETITS ÉCRANS
 * =================================================
 * 
 * Breakpoint: 320px et moins
 * Changements principaux:
 * - Course items passent en layout vertical empilé
 * - Image circulaire en haut, puis titre et niveaux empilés
 * - Adaptation des largeurs pour optimiser l'espace
 */

@media (max-width: 320px) {
  
  /* ================== COURSE ITEMS TRÈS PETITS ÉCRANS ================== */
  
  /**
   * Course items passent en layout vertical
   * - Empilement: Image en haut, puis titre, puis niveaux
   * - Suppression du min-height pour hauteur adaptative
   */
  .page-prealables .course-item, .page-cours-anne-scolaire .course-item {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    gap: 0;
  }
  

  
  /**
   * Section titre prend toute la largeur
   * - Suppression du chevauchement (margin-left: 0)
   * - Padding uniforme
   * - Hauteur automatique selon contenu
   */
  .page-prealables .course-item__title, .page-cours-anne-scolaire .course-item__title {
    width: 100%;
    margin-left: 0;
    padding: 15px;
    padding-left: 15px;
    height: auto;
    min-height: auto;
  }
  
  /**
   * Section niveaux prend toute la largeur
   * - Hauteur automatique selon contenu
   * - Padding uniforme avec titre
   */
  .page-prealables .course-item__levels, .page-cours-anne-scolaire .course-item__levels {
    width: 100%;
    padding: 15px;
    height: auto;
    min-height: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.page-cours-anne-scolaire .bubble-columns .step-item__number, .page-cours-anne-scolaire .bubble-columns .step-item__info {
  background-color: var(--color-yellow);
}

.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:first-child {
  background-color: var(--color-yellow);
}
.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:first-child .registration-cards__item--date {
  color: var(--color-black);
}
.page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:first-child .registration-cards__item--title, .page-cours-anne-scolaire .registration-period.cours-ete .registration-cards__item:first-child .registration-cards__item--title p {
  color: var(--color-black);
}

/**
 * =================================================
 *                    FIN DU FICHIER
 * =================================================
 */