body{
  margin: auto;
  height: auto;
  
}

/* ----------------------------------Bannière publicitaire------------------------------------*/
.banniere{
  background-color: rgb(219, 228, 252);
  font-family: Georgia,  serif;
  text-align: right;
  width: 100%;
  height: 50px;
  margin: auto;
  display: flex;
  align-items: center;     /* Centre verticalement */
  justify-content: flex-end; /* Aligne à droite */
  overflow: hidden; /* Cache le texte qui dépasse du conteneur */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */ 
}
.banniere h1 {
  display: inline-block; /* Permet l'animation du texte */
  animation: scroll 40s linear infinite; /* Animation du texte */
  margin: 0; /* Supprime les marges par défaut */
  font-size: 34px;
}
@keyframes scroll {
  from {
    transform: translateX(100%); /* Démarre à droite */
  }
  to {
    transform: translateX(-100%); /* Fin à gauche */
  }
}

/* -------------------------------Menu principal du site---------------------------------------*/

.menu_navigation {
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 50px;
  padding-right: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: rgb(255, 255, 255); 
  box-sizing: border-box;
}

/* Alignement horizontal pour navigation_1 et navigation_2*/
.navigation_1, .navigation_2 {
  display: flex;
  align-items: center;
}

/* Alignement du logo */
.menu_logo img {
  height: auto; /* Ajuste la hauteur du logo selon les besoins */
}

/* Styles des liens du menu */
.menu_link {
  text-decoration: none;
  color: black;
  margin-left: 30px; /* Espace entre les éléments de navigation */
  padding: 15px;
  font-size: 24px; /* Ajuste la taille de police selon les besoins */
  text-align: center;
  border: 2px solid #000;     /* 🔥 bordure noire */
  border-radius: 6px;         /* optionnel : coins arrondis */
  display: inline-block;      /* important pour voir la bordure */
}

.menu_link:hover, .menu_5:hover{
  color: #ff7300; /* Change la couleur au survol pour un effet interactif */
  background-color: rgb(255, 222, 190);
}

/* Styles pour le menu principal */
.menu_5 {
  position: relative;
  /*display: inline-block;*/
  cursor: pointer;
  border: 2px solid orange; /* Bordure de 2px, couleur orange */
  background-color: #fcf0e7;
  border-radius: 10px;      /* Coins arrondis de 10px */
  margin-left: 20px;
  padding: 10px;        /* Espace intérieur pour un meilleur affichage */
  font-size: 16px; /* Ajuste la taille de police selon les besoins */
  text-align: center;
  font-weight: bold;
  flex-basis: 100%; /* Prend la largeur restante (100%) */
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoPrincipal{
  margin-left: 10px;
}

/*---------------------------------------Sous-Menu Principal---------------------------------------------*/

/*--------------------------------------Option Cours--------------------------------------------*/

/* Style du menu parent "Cours" */
.menu_1 {
  position: relative; /* Le sous-menu sera positionné par rapport à ce parent */
}

/* Style du sous-menu */
#courseSubMenu {
  display: none; /* Le sous-menu est caché par défaut */
  position: absolute; /* Positionné absolument par rapport au menu parent */
  top: 100%; /* Aligne le sous-menu juste en bas du menu parent */
  left: 0;
  width: 400px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0; /* Supprime les espaces au-dessus et au-dessous du sous-menu */
  background-color: rgb(255, 255, 255);
  border-left: 3px solid #7a7a79;
  border-bottom: 3px solid #7a7a79;
  border-right: 3px solid #7a7a79;
}

/* Colonne à l'intérieur du sous-menu */
.column {
  width: 100%; /* Chaque colonne occupe 50% du sous-menu */
  padding: 10px;
}

/* Liens dans le sous-menu */
#courseSubMenu a {
  display: block;
  padding: 10px 20px;
  color: black;
  text-decoration: none;
  font-size: x-large;
}

/* Hover effect sur les liens */
#courseSubMenu a:hover {
  background-color: rgb(255, 222, 190);
  color: #ff7300;
}

/* Afficher le sous-menu lorsque la souris survole le menu "Cours" */
.menu_1:hover #courseSubMenu {
  display: flex;
}
/*------------------------------------------Fin Option Cours---------------------------------------------*/


/*-----------------------------------------Option Enseignants---------------------------------------------*/
/* Style pour le sous-menu d'Enseignant */
#teacherSubMenu {
  display: none;
  position: absolute;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ajout de l'ombre portée */
  background-color: white;
  border-left: 3px solid #7a7a79;
  border-bottom: 3px solid #7a7a79;
  border-right: 3px solid #7a7a79;
  width: 250px;
}

#teacherSubMenu .column {
  display: flex;
  flex-direction: column; /* Colonne unique pour le sous-menu */
}

#teacherSubMenu a {
  padding: 8px 5px;
  text-decoration: none;
  color: black;
  font-size: x-large;
}

#teacherSubMenu a:hover {
  background-color: rgb(255, 222, 190);
  color: #ff7300;
}

/* Ajout de style pour le lien "Diffuser un cours" */
.full-width {
  width: 100%; /* Prend toute la largeur disponible */
  text-align: left; /* Aligne le texte à gauche */
}

/*-----------------------------------------Fin Option Enseignants------------------------------------*/

/*----------------------------------------Opton MyTip------------------------------------------------*/
/* Style pour le sous-menu de MyTip */
#myTipSubMenu {
  display: none;
  position: absolute;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ajout de l'ombre portée */
  background-color: white;
  border-left: 3px solid #7a7a79;
  border-bottom: 3px solid #7a7a79;
  border-right: 3px solid #7a7a79;
}

#myTipSubMenu .column {
  display: flex;
  flex-direction: column; /* Colonne unique pour le sous-menu */
}

#myTipSubMenu a {
  padding: 8px 5px;
  text-decoration: none;
  color: black;
  font-size: x-large;  
}

#myTipSubMenu a:hover {
  background-color: rgb(255, 222, 190);
  color: #ff7300;
}

/* Ajout de style pour le lien "Mettre en ligne une vidéo" */
.full-width {
  width: 75%; /* Prend toute la largeur disponible */
  text-align: left; /* Aligne le texte à gauche */
}
/*------------------------------------Fin Option MyTip-----------------------------------------------*/

/*-----------------------------------------Option Se Connecteur------------------------------------------*/

/* Styles pour la flèche du menu */
.menu_5 .arrow {
  margin-left: 5px;
  font-size: 12px;
}

/* Sous-menu "Mon Compte" */
#connectSubMenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;          /* plus logique que left:0 pour un menu à droite */
  width: 220px;
  padding: 10px;
  z-index: 9999;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-left: 3px solid #7a7a79;
  border-bottom: 3px solid #7a7a79;
  border-right: 3px solid #7a7a79;
}

#connectSubMenu.open {
  display: block;
}


/* Lien à l'intérieur du sous-menu */
#connectSubMenu a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  font-size: 10px; /* Même taille de police que le menu principal */
  text-align: left; /* Alignement à gauche */
}

/* Séparateur horizontal */
#connectSubMenu hr {
  margin: 8px 0;
  border: 0;
  border-top: 2px solid #ccc;
}

/* Ajouter un effet de survol */
#connectSubMenu a:hover {
  background-color: rgb(255, 222, 190);
  color: black;
}

/* Styles pour le titre du sous-menu "Créer un compte" */
#connectSubMenu .submenu-title {
  padding-bottom: 5px;
  margin-bottom: 5px;
  text-align: left;
  font-size: 15px; /* Même taille de police que le menu principal */
  color: rgb(133, 128, 128); /* Couleur en noir pour le titre */
  background-color: white;
}

/* Styles pour les éléments du sous-menu */
#connectSubMenu .submenu-item {
  padding-left: 10px;
  font-size: 16px; /* Même taille de police pour sous-éléments */
  background-color: white;
  color: #333333;
}

/* Style du menu connecté */
.menu_5[data-initial] {
  background-color: rgb(129, 9, 241); /* Fond noir */
  color: white; /* Texte blanc */
  border: 2px solid rgb(129, 9, 241);
  border-radius: 50%; /* Cercle pour la lettre */
  width: 40px; /* Taille fixe pour un cercle parfait */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}


/* Style du sous-menu */
/*----------------------------------------Fin Option Se Connecter---------------------------------------*/

/*------------------------------------------------Option Logo-------------------------------------------*/
.menu_0 {
  position: relative;
}

.dropdown-menu {
  display: none; /* Cacher le menu déroulant par défaut */
  position: absolute;
  top: 100%; /* Positionner en dessous du logo */
  left: 0;
  width: 260px; /* Prendre 20% de la largeur du parent */
  background-color: white; /* Couleur de fond du menu */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* S'assurer que le menu est au-dessus des autres éléments */
  padding-left: 10px; /* espaces interne à gauche du sous-menu */
  padding-top: 10px; /* espaces en haut du sous-menu */
  background-color: white;
  border-left: 3px solid #7a7a79;
  border-bottom: 3px solid #7a7a79;
  border-right: 3px solid #7a7a79;
  font-size: large;
}

.separator {
  border-top: 2px solid #ccc; /* Séparateur */
  margin: 10px 0; /* Marges autour du séparateur */
}

.columns-container {
  display: flex; /* Utiliser flexbox pour aligner horizontalement */
  justify-content: flex-start; /* Aligner les colonnes à gauche */
}

.columnL {
  width: 80%; /* Prendre 80% de la largeur du parent */
  padding: 0 10px; /* Espacement entre les colonnes */
}

.item {
  margin: 5px 0; /* Espacement entre les éléments */
}

.item a {
  text-decoration: none; /* Supprimer le soulignement des liens */
  color: black; /* Couleur du texte */
  display: block; /* Faire en sorte que le lien prenne toute la largeur */
  padding: 5px; /* Ajout d'un peu de rembourrage */
  transition: background-color 0.3s; /* Animation pour l'effet de survol */
}

.item a:hover {
  background-color: rgb(255, 222, 190); /* Couleur de fond au survol */
  color: #ff7300;
}

/* Nettoyer le float */
.menu_0::after {
  content: "";
  display: table;
  clear: both;
}

.menu-title {
  font-weight: bold; /* Mettre en gras le titre */
  margin-bottom: 10px; /* Espacement sous le titre */
  font-size: x-large; /* Taille de police x-large */
}

/*------------------------------------------------Option Logo-------------------------------------------*/

/*---------------------------------------------------Equipe---------------------------------------------*/

.conteneurPrincipalEquipe{
  width: 100%; /* Prend 95% du body */
  margin: auto; /* Centre le conteneur */
  display: flex; /* Flexbox pour organiser les enfants */
  justify-content: space-around; /* Espace égal entre les blocs enfants */
  background-color: rgb(241, 241, 241);
  box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
  overflow: hidden; /* Évite le débordement du contenu */
}

.conteneurPrincipalEquipeTexte {
  width: 60%; /* Occupe 60% du conteneur parent */
  margin-left: 30px;
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  justify-content: left;
  padding-top: 15px;
}

.conteneurPrincipalEquipeImage {
  width: 40%; /* Occupe 40% du conteneur parent */
  display: flex;
  justify-content: center; /* Centre l'image horizontalement dans le bloc */
  align-items: center; /* Centre l'image verticalement dans le bloc */
  overflow: hidden; /* Évite le débordement du contenu */
}

.texteQuiSommesNous_1 .texteQuiSommesNous_2{
  font-size: large;
}


/*---------------------------------Bloc parent conteneur principal 2------------------------------------*/
                            
.conteneurPrincipal_1 {
  display: flex;
  width: 100%;
  height: 60vh;              /* 95% de la hauteur du navigateur */
  margin: auto;
  justify-content: space-around;
  background-color: rgb(241, 241, 241);
  box-sizing: border-box;
  overflow: hidden;
}



.cpTexte {
  width: 60%; /* Occupe 60% du conteneur parent */
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  align-items: center; /* Centre horizontalement */
  text-align: center; /* Centre le texte */
  padding-top: 30px;
}

.cpTexte h1 {
  width: 100%; /* S'assure que le h1 occupe toute la largeur */
  font-size: 42px; /* Définit la taille de police à 42px */
  text-align: center; /* Centre le texte horizontalement */
}

.cpTexte p {
  width: 100%; /* S'assure que le paragraphe occupe toute la largeur */
  font-size: 22px; /* Définit la taille de police à 24px */
  text-align: center; /* Centre le texte horizontalement */
}

.cpImage {
  width: 100%; /* Occupe 40% du conteneur parent */
  height: auto;
  margin: auto;
  display: block;  /* nécessaire pour margin auto */
  object-fit: contain;
}


/*---------------------------------Bloc parent conteneur principal 2------------------------------------*/

.conteneurPrincipal_2 {
  width: 100%;
  margin: auto;   /* Centre le conteneur */
  display: flex; /* Utilise Flexbox pour aligner les blocs horizontalement */
  justify-content: space-around; /* Espace égal entre les blocs enfants */
  align-items: center; /* Centre verticalement */
  background-color: rgb(241, 241, 241); /* Couleur de fond du bloc parent */
  box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
  overflow: hidden; /* Évite le débordement du contenu */
}

.csEleve, .csEnseignant {
  width: 43%; /* Chaque bloc enfant occupe 40% du conteneur parent */
  min-height: 160px; /* Vous pouvez ajuster la hauteur minimum */
  box-sizing: border-box; /* Inclut le padding dans la taille totale */
  margin-bottom: 20px; /* Crée un espace entre les blocs */
  margin-top: 2px;
  padding: 20px; /* Ajoute un peu de padding pour l'espacement interne */
  text-align: left; /* Texte aligné à gauche */
  font-size: 16px;
}

/* Pour réduire l'espace au-dessus des titres h1 dans csEleve et csEnseignant */
.csEleve h2, .csEnseignant h2 {
  margin-top: 10px; /* Réduction de l'espace au-dessus du h2 */
  margin-top: 0; /* Réduction de l'espace en-dessus du h2 */
}

.csEleve {
  border-radius: 20px;
  border-top: 10px solid rgb(255, 230, 0); /* Bordure jaune pour le bloc csEleve */
  background-color: #fdff9c;
}

.csEnseignant {
  border-radius: 20px;
  border-top: 10px solid blue; /* Bordure bleue pour le bloc csEnseignant */
  background-color: #c0d9ff;
}

/* Style des liens dans les blocs csEleve et csEnseignant */
.csEleve a, .csEnseignant a {
  color: white; /* Texte du lien en blanc */
  background-color: darkviolet; /* Fond violet du lien */
  padding: 10px; /* Ajoute un peu d'espace interne pour le lien */
  text-decoration: none; /* Supprime le soulignement du lien */
  border-radius: 5px; /* Ajoute des coins arrondis au lien */
  font-size: 18px;
  font-weight: bold;
}

.csEleve a:hover, .csEnseignant a:hover {
  background-color: violet; /* Change la couleur de fond au survol */
}

/* Centrage du contenu et application de la police */
.blocLecoursduprof {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;      /* Centre verticalement si nécessaire */
  height: 100px;            /* Ajuster la hauteur si nécessaire */
  text-align: center;       /* Centre le texte à l'intérieur du bloc */
  font-family: 'Edu AU VIC WA NT Guides', sans-serif; /* Applique la police */
  background-color: white;  /* Applique une couleur de fond blanche */
}

.blocLecoursduprof span {
  font-size: 20px; /* Ajuster la taille de la police si nécessaire */
  color: rgb(16, 39, 238); /* Couleur du texte */
  font-weight: bold;
}


/* --------------------- Bloc parent savoirFaire---------------------- */

.savoirFaire {
  display: flex;                  /* Aligne les blocs enfants horizontalement */
  justify-content: space-between; /* Espace uniforme entre les blocs enfants */
  align-items: stretch;           /* Étire tous les blocs enfants pour qu'ils aient la même hauteur */
  width: 100%;                    /* Assure que le bloc parent prend toute la largeur de "main" */
  margin: 0 auto;                 /* Centrage horizontal du bloc parent */
  background-color: white; /* Conserve la couleur de fond */
  padding: 10px;
  box-sizing: border-box;         /* Inclut le padding dans le calcul de la largeur */
}

/* Style des blocs enfants acces, myTip, creation */
.acces, .myTip, .creation {
  flex-basis: 28%;                /* Chaque bloc occupe environ 28% de l'espace disponible */
  background-color: #f9f9f9;      /* Couleur de fond pour les blocs enfants */
  padding: 10px;                  /* Espace interne */
  border-radius: 15px;            /* Coins légèrement arrondis */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombre portée */
  display: flex;                  /* Utilisation de flexbox pour centrer verticalement */
  flex-direction: column;         /* Empile les éléments verticalement */
  justify-content: center;        /* Centre le contenu verticalement */
  align-items: center;            /* Centre le contenu horizontalement */
  box-sizing: border-box;         /* Inclut le padding dans la largeur */
  text-align: center;             /* Centrer le contenu du texte */
}

/* Images avec bordures arrondies */
.acces img, .myTip img, .creation img {
  width: 80%;                    /* Les images occupent toute la largeur disponible */
  height: auto;                   /* Ajuste la hauteur automatiquement */
  border-radius: 20px;            /* Bordures arrondies de 20px */
}

/*-------------------------------   FORMULAIRE    ----------------------------*/

/* Bloc principal contenant le formulaire */
.conteneurPrincipalCreerCompte {
  display: flex; /* Organise les éléments en ligne flexible */
  justify-content: center; /* Centre les éléments horizontalement */
  justify-content: space-between; /* Espace entre les éléments */
  flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  margin: auto; /* Centre le conteneur dans la page */
  padding: 20px; /* Ajoute de l'espace autour du conteneur */
  background-color: rgb(241, 241, 241); /* Couleur de fond */
  box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
  overflow: hidden; /* Évite le débordement du contenu */
}

/* Conteneur pour l'image à côté du formulaire */
.creerCompteImage {
  flex-basis: 45%; /* Largeur de base de 45% pour l'image */
  height: auto; /* Hauteur automatique pour respecter la proportion */
  display: flex; /* Active le mode de boîte flexible */
  justify-content: center; /* Centre l'image horizontalement */
  align-items: flex-start; /* Aligne l'image en haut du conteneur */
  padding: 20px; /* Ajoute de l'espace autour de l'image */
}

/* Réduction de la taille de l'image */
.creerCompteImage img {
  max-width: 60%; /* Limite la largeur de l'image à 80% du conteneur */
  height: auto; /* Maintient les proportions de l'image */
  padding: 10px; /* Ajoute de l'espace autour de l'image */
}

.creerCompteImage h2 {
  color: blue;
}

/* Formulaire stylé */
.creerCompteFormulaire {
  display: flex; /* Active le mode flexible */
  justify-content: center; /* Centre le formulaire horizontalement */
  align-items: center; /* Centre verticalement */
  padding: 20px; /* Ajoute un espace autour du formulaire */
  flex-basis: 45%; /* Largeur de base de 50% pour le formulaire */
}

/* Conteneur du formulaire */
#formulaire {
  flex-basis: 80%; /* Largeur de base de 80% pour le formulaire */
  height: auto;
  display: flex; /* Active le mode de boîte flexible */
  flex-direction: column; /* Organise les éléments verticalement */
}

/* Mettre les labels à gauche */
.creerCompteFormulaire label {
  display: block; /* Affiche chaque label sur une ligne séparée */
  margin-bottom: 5px; /* Espace sous chaque label */
  text-align: left; /* Aligne le texte à gauche */
  margin-left: 60px; /* Décalage de 60px à gauche */
  width: 100%; /* Largeur de 100% du conteneur */
}

/* Styles pour les inputs et la liste déroulante */
input, select {
  padding: 10px; /* Espace interne pour les champs */
  margin-left: 60px; /* Décalage de 60px à gauche */
  margin-bottom: 10px; /* Espace en dessous de chaque champ */
  width: 60%; /* Largeur de 60% du conteneur */
  box-sizing: border-box; /* Inclut le padding dans la largeur */
  border: 2px solid #ccc; /* Bordure grise de 1px */
  border-radius: 4px; /* Bords arrondis de 4px */
}

/* Conteneur des boutons */
.bouton-container {
  display: flex; /* Active le mode flexible */
  justify-content: center; /* Centre les boutons horizontalement */
  align-items: center; /* Centre les boutons verticalement */
  margin: 15px; /* Espace autour du conteneur des boutons */
}

/* Styles pour les boutons Envoyer et Annuler */
.btn {
  margin: 20px; /* Espace autour de chaque bouton */
  padding: 10px 20px; /* Espace interne des boutons */
  cursor: pointer; /* Affiche le pointeur survol */
  width: 35%; /* Largeur de 35% pour chaque bouton */
  border: 2px solid orange; /* Bordure orange de 2px */
  background-color: #ffe6d4; /* Couleur de fond pour les boutons */
  color: rgb(2, 2, 2); /* Couleur du texte en noir */
  border-radius: 10px; /* Bords arrondis de 10px */
  transition: background-color 0.3s; /* Animation de transition sur la couleur de fond */
  font-weight: bold; /* Texte en gras */
  font-size: large; /* Taille de police large */
}

/* Effet au survol des boutons */
.btn:hover {
  background-color: var(--button-bg-hover); /* Change la couleur de fond au survol */
}

/* Style pour les champs de saisie */
input {
  padding: 5px; /* Espace interne des champs */
  font-size: 14px; /* Taille de police des champs */
  height: auto; /* Hauteur automatique */
}

/* Conteneur pour les cases à cocher des niveaux scolaires */
.checkbox-container {
  margin-left: 1px; /* Aligne les cases avec le reste du formulaire */
  display: grid; /* Utilise le modèle de grille CSS */
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
  grid-gap: 1px; /* Espace entre les éléments de la grille */
  max-width: 100%; /* Ajustez la largeur maximale selon vos besoins */
  overflow: hidden; /* Évite les débordements en cachant le contenu qui dépasse */
  align-items: center; /* Centre verticalement les éléments dans chaque cellule */
  justify-items: center; /* Centre horizontalement les éléments dans chaque cellule */
}

/* Style des labels */
.checkbox-container label {
  display: flex; /* Affiche chaque case avec son label */
  align-items: center; /* Centre verticalement la case et le label */
  justify-content: center; /* Centre horizontalement le contenu du label */
  font-weight: bold;
  color: rgb(50, 50, 50); /* Couleur du texte gris foncé */
  font-size: medium;
  width: 75%; /* Prend toute la largeur disponible */
  box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur */
  gap: 0; /* Supprime l'espace entre la case et le texte */
  justify-content: flex-start; /* Aligne le contenu à gauche */
  overflow: hidden; /* Évite les débordements de texte */
  text-overflow: ellipsis; /* Ajoute des points de suspension si le texte déborde */
  white-space: nowrap; /* Évite que le texte ne passe à la ligne */
  margin: 1px;
}

/* Supprime l'espace par défaut à droite de la case */
.checkbox-container input[type="checkbox"] {
  margin-top: 10px; /* Légère marge à droite de la case */
}

/* Styles pour le légende du formulaire */
#formulaire legend {
  font-size: large; /* Vous pouvez ajuster la taille selon vos besoins (e.g., large, 20px, etc.) */
  font-weight: bold; /* Met le texte en gras pour plus de visibilité */
  color: rgb(255, 102, 0); /* Couleur du texte (gris foncé) */
  margin-bottom: 10px; /* Espace en bas pour séparer du contenu suivant */
}

/*--------------------------------------       ACCEUIL COURS LIVRES ------------------------------------*/

.conteneurPrincipalCoursLibres{
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between; /* Espace entre les sous-blocs */
  align-items: center;
  flex-wrap: wrap; /*les éléments vont à la ligne lorsqu'il n'y a plus la place*/
}

.coursLibres_Titre{
  width: 85%;
  height: 50px;
  margin: auto;
  margin-top: 5px;
  text-align: left;
  padding-left: 10px;
  background-color: rgb(18, 102, 7);
  display: flex;
  justify-content: space-between;
  border-radius:20px 0px 20px 0px ;
}

.coursLibres_Titre h1{
  width: 40%;
  height: auto;
  margin-top: 5px;
  padding-left: 10px;
  text-align: left;
  font-size: xx-large;
  color: white;
  display: flex;
}

.coursLibres_Titre h2{
  width: 55%;
  height: auto;
  margin-top: 5px;
  padding-left: 10px;
  text-align: left;
  font-size: xx-large;
  color: white;
  display: flex;
}

.coursLibres{
  width: 85%;
  height: 150px;
  margin: auto;
  margin-top: 15px;
  padding: 5px;
  background-color: rgb(241, 241, 241);
  border-bottom: 2px solid rgb(124, 124, 124);
  display: flex;
  transition: box-shadow 0.3s ease; /* Animation douce lors de l'ajout de l'ombre */
}

/* Ombre sur le bloc parent au survol */
.coursLibres:hover {
  box-shadow: 0 4px 15px rgb(255, 131, 48); /* Ombre douce autour du bloc */
}

.niveau {
  font-size: 12px; /* Réduit la taille de la police pour petits écrans */
}

.niveau{
background-color: rgb(241, 241, 241);
flex: 1; /* Prend tout l'espace restant disponible à côté de l'image */
font-size: 20px; /* Taille du texte, ajustable selon besoin */
text-align: left; /* Aligne le texte à gauche */
margin-top: 0;
padding-top: 5px;
}

.IM0001 {
margin-right: 10px; /* Espace de 5px entre l'image et le texte */
max-width: 80%; /* Largeur maximale de l'image, ajustable */
height: 150px; /* Préserve le ratio de l'image pour éviter la distorsion */
object-fit: contain; /* Assure que l'image s'ajuste bien à sa boîte */
}

.coursLibresLienComplet{
flex: 1; /* Prend tout l'espace restant disponible à côté de l'image */
display: flex; /* Le lien prend toute la largeur du conteneur et aligne les enfants */
text-decoration: none; /* Supprimer la décoration par défaut du lien */
color: inherit; /* Garde la couleur du texte */
}
/*----------------------------------------------------Progression--------------------------------------------------------------*/
.conteneurPrincipalTableMatieres{
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between; /* Espace entre les sous-blocs */
  align-items: center;
  flex-wrap: wrap; /*les éléments vont à la ligne lorsqu'il n'y a plus la place*/
}
.presentationTableMatieres{
  width: 85%;
  height: 70px;
  margin: auto;
  margin-top: 5px;
  text-align: left;
  padding-left: 10px;
  background-color: rgb(18, 102, 7);
  display: flex;
  border-radius:20px 0px 20px 0px ;
  color: white;
}

.presentationTableMatieres h1 {
  padding-left: 10px;
  font-size: 24px; /* Ajuster la taille selon tes besoins */
}

.presentationTableMatieres h2 {
  padding-left: 200px; /* Considérer d'ajuster ceci pour les petits écrans */
  font-size: 20px; /* Ajuster la taille selon tes besoins */
}

.progression h3 {
  font-size: 18px; /* Ajuster la taille selon tes besoins */
}

.progression ol a {
  font-size: 18px; /* Ajuster la taille des liens dans les ol */
  text-decoration: none; /* Supprimer le soulignement par défaut */
}

.progression ol a:hover {
  font-size: 20px;
  color: blueviolet;
}

.infoProgression{
  width: 85%;
  height: 80px;
  margin: auto;
  margin-top: 5px;
  padding-left: 10px;
  display: flex;
  justify-content: center;
  background-color: white;
}

.tableMatieres{
  width: 85%;
  height: auto;
  margin: auto;
  margin-top: 5px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
}

.presentationVideo{
  width: 60%;
  height: auto;
  margin: auto;
  margin-top: 5px;
  padding-left: 10px;
  display: flex;
  justify-content: center;
  background-color: rgb(231, 40, 40);
}
.progression{
  width: 65%;
  height: auto;
  text-align: left;
  background-color: #fdff9c;
}

.theme {
  margin-bottom: 10px;
}

.theme-title {
  display: inline;
  font-weight: bold;
  cursor: pointer;
}

.toggle-arrow {
  font-size: 16px;
  margin-left: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}

.toggle-arrow.open {
  content: "▼";
}

.lessons {
  margin-left: 20px;
  padding-top: 5px;
}

/*-----------------------------------------MON BUREAU ---------------------------------------------------*/
.conteneurPrincipalMonbureau {
  width: 100%;
  height: auto;
  margin: auto;
  padding-bottom: 10px;
  background-color: rgb(241, 241, 241);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* les éléments vont à la ligne lorsqu'il n'y a plus de place */
}

.enteteBureau {
  width: 95%;
  height: auto;
  margin: auto;
  margin-top: 5px;
  padding: 1px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Espace entre les enfants */
  align-items: center; /* Aligne verticalement les enfants */
  border: 1px solid rgb(119, 116, 116); /* Bordure rouge */
}

.infosProf {
  text-align: left; /* Aligne le texte à gauche */
  flex: 1; /* Laisse l'élément s'étendre si nécessaire */
  flex-basis: 70%; /* Prend 70% de l'espace disponible */
}

.cadrephotoProf {
  overflow: hidden; /* Cache les parties qui débordent */
  width: 100px; /* Taille fixe */
  height: 100px; /* Même valeur que la largeur */
  border-radius: 50%; /* Rend les bords arrondis, créant un cercle */
  display: flex; /* Pour centrer l'image */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  margin-right: 80px; /* Déplace le conteneur comme souhaité */
}

.photoProf {
  width: 100%; /* L'image remplit le conteneur */
  height: 100%; /* L'image reste dans les dimensions du conteneur */
  object-fit: cover; /* Adapte l'image pour remplir le cercle sans déformation */
  cursor: pointer; /* Ajoute un curseur interactif */
}



.fenetreTempon {
  display: none; /* Masqué par défaut */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: relative;
  margin: auto;
  top: 20%;
  max-width: 80%;
  background-color: white;
}

.modal-content img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.close {
  position: absolute;
  top: 0;
  right: 20px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

.spacing_1 {
  margin-left: 5px;
}
.spacing_2 {
  margin-left: 5px;
}
.spacing_3 {
  margin-left: 5px;
}

.bureau {
  width: 95%;
  height: auto;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 5px;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  align-content: center;
}

.aideAuBureau {
  width: 15%;
  height: auto;
  background-color: #333333;
  color: white;
  text-align: left;
  font-size: large;
  padding-left: 30px;
}

.cours {
  width: 80%;
  height: auto;
  text-align: center;
  font-size: large;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}


.btnCreerCours {
  background-color: #4CAF50;
  width: 280px;
  height: 40px;
  color: white;
  font-size: x-large;
  text-align: center;
  margin-top: 10px;
  margin-left: 200px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btnCreerCours:hover {
  background-color: #2aa530;
}

.filtreClasse {
  width: 200px;
  height: 50px;
  margin-top: 10px;
  margin-left: 150px;
  margin-right: 100px;
  padding: 8px;
  font-size: medium;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.tableProgression {
  width: 95%;
  height: auto;
  margin: auto;
  margin-top: 5px;
  padding: 5px;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}

/* Styles pour la modale */
.modal {
  display: none; /* Caché par défaut */
  position: fixed; /* Rester à la même position */
  z-index: 1; /* Au-dessus des autres éléments */
  left: 0;
  top: 0;
  width: 100%; /* Pleine largeur */
  height: 100%; /* Pleine hauteur */
  overflow: auto; /* Activer le défilement si nécessaire */
  background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% du haut et centré */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Peut être ajusté */
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.titreCreation{
  background-color: #126aee;
  width: 100%;
  height: auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#formProgression{
  width: 100%;
}

.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}

.form-group {
  display: flex;
  align-items: center;
  width: 50%; /* Chaque élément prendra environ 25% de la largeur totale */
  padding: 5px;
}

label {
  font-weight: bold;
  width: 40%; /* Le label occupe 65% de la largeur */
}

select {
  width: 55%; /* Le champ <select> occupe 35% pour atteindre environ 10% de la largeur totale de la fenêtre */
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 10px;
}

textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#contenu {
  width: 100%;
}

#btnEnregistrer {
  display: block;
  width: 30%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
  margin-left: 20%;
}

#btnEnregistrer:hover {
  background-color: #45a049;
}
/*-----------------------------------------------login----------------------------------------------*/

#conteneurLogin {
  width: 50%;
  height: 95%;            /* 95% du parent */
  margin-left: auto;      /* Aligne à droite */
  margin-right: 1%;       /* Décalage de 5% depuis la droite */
  align-self: center;     /* Centre verticalement */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgb(241, 241, 241);
  box-sizing: border-box;
  overflow: hidden;
}

#conteneurProcessus {
  width: 50%;
  height: 95%;            /* 95% du parent */
  margin-left: auto;      /* Aligne à droite */
  margin-right: 1%;       /* Décalage de 5% depuis la droite */
  align-self: center;     /* Centre verticalement */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgb(241, 241, 241);
  box-sizing: border-box;
  overflow: hidden;
}

.loginFormulaire {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: 100%;
  flex: 1;                     /* Occupe tout l’espace disponible */

  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}


/* Mettre les labels à gauche */
.loginFormulaire label {
  display: block; /* Affiche chaque label sur une ligne séparée */
  margin-bottom: 20px; /* Espace sous chaque label */
  padding: 10px;
  text-align: left; /* Aligne le texte à gauche */
}

/* Mettre les labels à gauche */
.loginFormulaire input {
  display: block; /* Affiche chaque label sur une ligne séparée */
  margin-bottom: 20px; /* Espace sous chaque label */
  text-align: left; /* Aligne le texte à gauche */
}

.loginFormulaire form{
  width: 90%;
  height: auto;
}

.loginFormulaire fieldset{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 95%;
  height: auto;  
}

.ligne-champ {
  display: flex;
  align-items: center;      /* Alignement vertical */
  width: 100%;
  margin-bottom: 15px;
}

/* Label */
.ligne-champ label {
  width: 25%;
  margin: 0;
  padding-left: 20px;
  text-align: left;
}


.creerLoginImage {
  flex-basis: 45%; /* Largeur de base de 45% pour l'image */
  display: flex; /* Active le mode de boîte flexible */
  justify-content: center; /* Centre l'image horizontalement */
  align-items: center; /* Aligne l'image au centre verticalement */
  text-align: center;
}

.creerLoginImage img {
  max-width: 50%; /* Limite la largeur de l'image au conteneur */
  height: auto; /* Maintient les proportions de l'image */
  padding: 10px; /* Ajoute de l'espace autour de l'image */
}

/* Conteneur des boutons */
.bouton-continuer-login {
  display: flex; /* Active le mode flexible */
  justify-content: center; /* Centre les boutons horizontalement */
  width: 30%; /* Largeur de 70% pour occuper tout l'espace disponible */
  margin-left: 50px;
}

.bouton-continuer-login button {
  width: 100%; /* Largeur de 100% pour occuper tout l'espace disponible */
  height: 50px;
  background-color: #e02d00;
  color: white;
  font-size: large;
  font-weight: bold;
  border: none;
  border-radius: 5px; /* Ajoute des coins arrondis */
  cursor: pointer;
}

.bouton-continuer-login button:hover {
  background-color: #e66a00; /* Change la couleur au survol pour un effet */
}

.form-label {
  color: #000; /* Couleur par défaut du label */
}

.error-message {
  color: rgb(197, 67, 6);
  font-size: large;
  font-weight: bold;
  display: block; /* Masque le message d'erreur par défaut*/ 
  margin-top: 5px;
  margin-bottom: 15px;
  background-color: #ffceba;
  width: 98%;
  height: auto;
  padding: 5px;
  min-height: 30px; /* Ajoute une hauteur minimale pour l'erreur */
}

.form-label.error {
  color: red; /* Couleur du label lorsqu'il y a une erreur */
}

.bienvenu-message {
  color: rgb(255, 255, 255);
  font-size: large;
  font-weight: bold;
  display: block; /* Masque le message d'erreur par défaut*/ 
  margin-top: 5px;
  margin-bottom: 15px;
  background-color: #085be9c1;
  width: 98%;
  height: auto;
  padding: 5px;
  min-height: 30px; /* Ajoute une hauteur minimale pour l'erreur */
  text-align: center;
}

/* Icône œil DANS l’input */
.toggle-password{
  position: absolute;
  right: 2px;
  top: 35%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}


/* 1) Une ligne = label + champ alignés */
.ligne-champ{
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;              /* espace entre label et champ */
  margin-bottom: 15px;
}

/* 2) Le label garde une largeur fixe */
.ligne-champ label{
  width: 35%;
  margin: 0;
  padding-left: 20px;
  text-align: left;
  box-sizing: border-box;
}

/* 3) Le "bloc champ" (input email OU wrapper password) a la même largeur */
.ligne-champ > input,
.ligne-champ .password-wrapper{
  width: 60%;
  margin: 0;              /* enlève les margin-left anciens */
  box-sizing: border-box;
}
/* 4) Input email + input password ont la même taille */
.ligne-champ{
  width: 100%;
  height: 45px;
  box-sizing: border-box;
}
/* 4) Input email + input password ont la même taille */
input.form-control{
  width: 50%;
  height: 45px;
  box-sizing: border-box;
}


/*---------------------------------------------------Pied de page--------------------------------------------------*/
.pied_page{
  width: 100%;
  height: auto;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgb(241, 241, 241);
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
  border-top: 3px solid #c9c3c3; /* Gris foncé pour la bordure du haut */
  display: flex;
  justify-content: center;
  align-items: center;     /* Centre verticalement */
  flex-wrap: wrap; /*les éléments vont à la ligne lorsqu'il n'y a plus la place*/
}

.logo{
  margin-right: 25px;
}

a {
  color: black; /* Couleur noire par défaut */
  text-decoration: none; /* Optionnel : retire le soulignement */
}

a:visited {
  color: black; /* Couleur noire après avoir cliqué */
}

a:hover{
  text-decoration: none;
}

p{
  font-family: Arial, Helvetica, sans-serif;
}
.cpTexte .lecoursduprof_P1{
  color: #e02d00;
}

/*---------------------------------------------------table creation --------------------------------------*/

/* Styles pour le conteneur tableProgression */
.tableProgression {
  width: 95%;
  display: flex;
  justify-content: center; /* Centrer le tableau dans le conteneur */
  margin-top: 20px;
  padding: 5px;
  background-color: #f9f9f9; /* Couleur de fond pour le cadre */
  border: 1px solid #ddd; /* Bordure légère */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

/* Styles pour le tableau */
.tableProgression table {
  width: 100%; /* Le tableau occupe 80% de la largeur du conteneur */
  border-collapse: collapse; /* Fusion des bordures pour un design propre */
  text-align: center; /* Alignement du texte à gauche */
  background-color: #fff; /* Couleur de fond du tableau */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre douce pour le tableau */
}

/* Style pour les en-têtes du tableau */
.tableProgression table thead th {
  background-color: #706764e5; /* Couleur de fond des en-têtes */
  color: white; /* Texte blanc */
  padding: 10px; /* Espacement interne */
  font-weight: bold;
  border: 1px solid #ddd; /* Séparation entre les colonnes */
}

/* Style pour les cellules */
.tableProgression table tbody td {
  padding: 10px; /* Espacement interne */
  border: 1px solid #ddd; /* Bordure légère */
  font-size: 14px; /* Taille de police */
}

/* Style pour les lignes impaires */
.tableProgression table tbody tr:nth-child(odd) {
  background-color: #f2f2f2; /* Alternance de couleur */
}

/* Style pour les lignes paires */
.tableProgression table tbody tr:nth-child(even) {
  background-color: #ffffff; /* Blanc pour les lignes paires */
}


/* Ajustement des colonnes */
.tableProgression table th,
.tableProgression table td {
  width: auto; /* Largeur par défaut, modifiable */
  text-align: center; /* Alignement centré */
  padding: 10px; /* Espacement interne */
}

/* Largeur spécifique pour chaque colonne */
.tableProgression table th:nth-child(1), /* Colonne "Date" */
.tableProgression table td:nth-child(1) {
  width: 8%; /* de la largeur totale */
}

.tableProgression table th:nth-child(2), /* Colonne "N° de Cours" */
.tableProgression table td:nth-child(2) {
  width: 4%; /* de la largeur totale */
}

.tableProgression table th:nth-child(3), /* Colonne "Classe" */
.tableProgression table td:nth-child(3) {
  width: 4%; /* de la largeur totale */
}

.tableProgression table th:nth-child(4), /* Colonne "Matière" */
.tableProgression table td:nth-child(4) {
  width: 10%; /* de la largeur totale */
}

.tableProgression table th:nth-child(5), /* Colonne "Cours" */
.tableProgression table td:nth-child(5) {
  width: 20%; /* 20% de la largeur totale */
}

.tableProgression table th:nth-child(6), /* Colonne "Progression" */
.tableProgression table td:nth-child(6) {
  width: 24%; /* de la largeur totale */
}

.tableProgression table th:nth-child(7), /* Colonne "Statut" */
.tableProgression table td:nth-child(7) {
  width: 15%; /* de la largeur totale */
}

.tableProgression table th:nth-child(8), /* Colonne "Action" */
.tableProgression table td:nth-child(8) {
  width: 5%; /*  de la largeur totale */
}

.boiteOutil{
  width: 90%;
  height: auto;
  color: white;
  font-weight: bold;
  text-align: center;
}

.statutEnAttente {
  width: 90%;
  height: auto;
  padding: 10px;
  background-color: violet; /* Couleur du texte */
  font-size: larger;
  font-weight: bold; /* Optionnel : Mettre en gras */
  font-style: italic; /* Optionnel : Mettre en italique */
  text-align: center;
}

/* Bouton "Contenu" : Texte bleu */
.btn-contenu {
  color: blue; /* Couleur de la police */
  background-color: transparent; /* Fond transparent */
  border: 1px solid blue; /* Bordure bleue */
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px; /* Coins arrondis (facultatif) */
}

/* Bouton "Supprimer" : Texte orange */
.btn-supprimer {
  color: orangered; /* Couleur de la police */
  background-color: transparent; /* Fond transparent */
  border: 1px solid orangered; /* Bordure orange */
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px; /* Coins arrondis (facultatif) */
}

/* Ajouter un effet au survol des boutons */
.btn-contenu:hover {
  background-color: blue;
  color: white;
}

.btn-supprimer:hover {
  background-color: orangered;
  color: white;
}


/* Aligne les blocs enfants de la classe infos-cours horizontalement */
.infos-cours {
  display: flex; /* Active le mode flexbox */
  flex-direction: row; /* Aligne les éléments horizontalement */
  justify-content: center; /* Centre horizontalement les éléments enfants */
  align-items: center; /* Aligne verticalement au centre */
  gap: 30px; /* Espace entre les blocs */
  padding: 10px; /* Ajoute un peu de marge interne */
  background-color: #f1f1f1; /* Couleur de fond douce pour la section */
  border: 1px solid #ddd; /* Bordure légère */
  border-radius: 51px; /* Coins arrondis */
  width: 94%; /* La largeur s'ajustera selon le contenu */
  height: 10px; /* Utilise toute la hauteur de la fenêtre pour un centrage vertical complet */
  margin: 0 auto; /* Centre le bloc horizontalement */
  margin-top: 5px;
}

/* Style des blocs enfants */
.infos-cours > div {
  flex: 1; /* Chaque bloc prend la même largeur */
  text-align: center; /* Centrer le texte dans les blocs */
  padding: 5px;
  background-color: #fff; /* Couleur de fond blanche pour les blocs */
  border: 1px solid #ccc; /* Bordure fine pour les blocs */
  border-radius: 5px; /* Coins arrondis */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Style pour le texte dans les blocs */
.infos-cours > div p {
  margin: 0; /* Supprime les marges par défaut des paragraphes */
  font-size: 14px; /* Taille de police adaptée */
  color: #333; /* Couleur du texte */
}

.outils-edition {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  height: 10px; /* Utilise toute la hauteur de la fenêtre pour un centrage vertical complet */
  width: 95%; /* Prend toute la largeur disponible */
  height: auto;
  margin: 0 auto; /* Centre le bloc horizontalement */
  margin-top: 5px;
  border: 1px solid #ddd; /* Bordure légère */
}

.outils-edition h4{
  padding-left: 10px;
  padding-right: 10px;
}

/* Conteneur global */
.ajout-contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  height: 10px; /* Utilise toute la hauteur de la fenêtre pour un centrage vertical complet */
  width: 95%; /* Prend toute la largeur disponible */
  height: auto;
  margin: 0 auto; /* Centre le bloc horizontalement */
  margin-top: 5px;
  border: 1px solid #c1c2c1; /* Bordure légère */
  gap: 10px; /* Espace entre les blocs */
}  

/* Titre du formulaire */
.ajout-contenu h4 {
  width: 8%;
  height: 30px;
  text-align: center; /* Centre le titre */
  padding: 10px;
  margin-left: 10px;
  color: #333;
  background-color: #eef1f5;
}

/* Style global pour le formulaire */
.formulaire-ajout-contenu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  width: 85%;
  height: auto;
}

.bloque_1{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-content: center;
  width: 100%;
  height: auto;
}

.bloque_1_1{
  display: flex;
  flex-wrap: wrap;

}

.bloque_1_2{
  display: flex;
  flex-wrap: wrap;

}
/* Groupe label + input/textarea */
.formulaire-ajout-contenu label {
  width: 26%;
  height: 30px;
  padding: 10px;
  margin-top: 10px;
  font-size: 16px; /* Taille de la police du label */
  text-align: center;
  color: #333;
}

/* Style des champs de saisie */
.formulaire-ajout-contenu input {
  width: 60%; /* Prend toute la largeur disponible */
  height: 50px;
  margin-top: 10px;
  font-size: 14px;
  border: 1px solid #c9c9c9; /* Bordure des champs */
  border-radius: 5px; /* Coins arrondis */
  box-sizing: border-box; /* Inclut padding et bordures dans la largeur totale */
}

/* Style des champs de saisie */
.formulaire-ajout-contenu textarea {
  width: 90%; /* Prend toute la largeur disponible */
  margin-top: 10px;
  font-size: 14px;
  border: 1px solid #c9c9c9; /* Bordure des champs */
  border-radius: 5px; /* Coins arrondis */
  box-sizing: border-box; /* Inclut padding et bordures dans la largeur totale */
}

/* Bouton d'enregistrement */
.formulaire-ajout-contenu button {
  align-self: center; /* Centre le bouton */
  padding: 10px 20px; /* Taille du bouton */
  margin:10px;
  background-color: #007bff; /* Couleur principale du bouton */
  color: #fff; /* Couleur du texte */
  border: none;
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Effet de transition */
}

.formulaire-ajout-contenu button:hover {
  background-color: #0056b3; /* Couleur au survol */
}

/* Aligne les blocs enfants de la classe infos-cours horizontalement */
.contenus-enregistres {
  display: flex; /* Active le mode flexbox */
  flex-direction: row; /* Aligne les éléments horizontalement */
  justify-content: center; /* Centre horizontalement les éléments enfants */
  align-items: center; /* Aligne verticalement au centre */
  gap: 30px; /* Espace entre les blocs */
  background-color: #fcfcfc; /* Couleur de fond douce pour la section */
  border: 1px solid #ddd; /* Bordure légère */
  width: 95%; /* La largeur s'ajustera selon le contenu */
  height: auto;
  margin: 0 auto; /* Centre le bloc horizontalement */
  margin-top: 5px;
}

.progression-enregistres{
  display: flex;
  flex-wrap: wrap;
}



button.modifier {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button.supprimer {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button.modifier:hover {
  background-color: #0056b3;
}

button.supprimer:hover {
  background-color: #c82333;
  color: white;
}