@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body{
  font-family: 'Montserrat', sans-serif;
  overflow-y: scroll;
}

ol li{
  padding:10px;
}


/* Base style for buttons */
.btn_napperon_niveau_menu {
  box-shadow: 0px 5px 7px -7px #000000;
  padding: 14px 20px; /* Adjust padding for better visual */
  border: 2px solid transparent; /* Start with a transparent border */
  background-color: #f8f8f8;
  margin: 0 10px; /* Add some spacing between buttons */
  color: #333; /* Dark text for contrast */
  text-transform: uppercase; /* Capitalize text */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  text-decoration: none; /* If they are links */
  cursor: pointer; /* Pointer cursor on hover */
  border-bottom: 4px solid transparent;
}

/* Hover state for buttons */
.btn_napperon_niveau_menu:hover {
  background-color: #eeeeee;
  border-bottom: 4px solid #395289;
  color: #395289; /* Slightly darker text on hover */
}

/* Focus state for accessibility */
.btn_napperon_niveau_menu:active,
.btn_napperon_niveau_menu:focus {
  outline: 0 !important;
  box-shadow: 0px 5px 7px -7px #000000;
}
/*Accueil */
#btn_niveau_menu_accueil {
  box-shadow: 0px 5px 7px -7px #000000;
  padding: 16px 24px; /* Adjust padding for better visual */
  border: 2px solid transparent; /* Start with a transparent border */
  background-color: #f8f8f8;
  margin: 0 10px; /* Add some spacing between buttons */
  color: #333; /* Dark text for contrast */
  text-transform: uppercase; /* Capitalize text */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  text-decoration: none; /* If they are links */
  cursor: pointer; /* Pointer cursor on hover */
  border-bottom: 4px solid transparent;
}

/* Hover state for buttons */
#btn_niveau_menu_accueil:hover {
  background-color: #eeeeee;
  border-bottom: 4px solid #007bff;
  color: #007bff; /* Slightly darker text on hover */
}

/* Focus state for accessibility */
#btn_niveau_menu_accueil:active,
#btn_niveau_menu_accueil:focus {
  outline: 0 !important;
  box-shadow: 0px 5px 7px -7px #000000;
}

/* Accueil active */
.napperon_accueil_menu_active{
  background-color: #ebebeb!important;
  border-bottom: 4px solid #007bff!important;
  font-weight: bold!important;
  color: #007bff!important;
  transform: scale(1.2)!important;
}
/* Active button style */
.napperon_niveau_menu_active {
  background-color: #ebebeb;
  border-bottom: 4px solid #395289; /* Add a solid bottom border on active item */
  font-weight: bold;
  color: #395289; /* Match border color */
  transform: scale(1.1);
}




.btn_napperon_style {
  box-shadow: 0px 5px 7px -7px #000000;
  border-radius: 8px; /* Softer rounded corners */
  padding: 12px 20px; /* Slightly more horizontal padding for a balanced look */
  border: 2px solid transparent; /* Starting with a transparent border */
  background-color: #e7e7e7;
  margin: 6px;
  color: #333; /* Dark text for contrast */
  font-weight: 400; /* Regular font weight */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Hover state for non-menu buttons */
.btn_napperon_style:hover {
  background-color: #d6d6d6;
  color: #000; /* Slightly darker text on hover */
  transform: translateY(-4px); /* Subtle lift effect on hover */
  box-shadow: 0px 5px 7px -7px #000000;
}
.btn_napperon_style:hover,
.btn_napperon_style:active,
.btn_napperon_style:focus{
  outline: 0 !important;
  box-shadow: 0px 5px 7px -7px #000000;
}


.btn_question_reflexion i{
  opacity: 0.2;
}
.btn_question_reflexion{
  box-shadow: 0px 5px 7px -7px #000000;
  border-radius: 8px; /* Softer rounded corners */
  padding: 12px 20px; /* Slightly more horizontal padding for a balanced look */
  border: 2px solid transparent; /* Starting with a transparent border */
  background-color: #e9e9e9;
  margin-right: 6px;
  margin-bottom:6px;
  color: #1a1a1a; /* Dark text for contrast */
  font-weight: 400; /* Regular font weight */
  font-size: 16px;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  cursor: pointer; /* Pointer cursor on hover */
}
.btn_question_reflexion:hover{
  background-color: #d6d6d6;
  color: #000; 
  box-shadow: 0px 5px 7px -7px #000000;
}
.btn_question_reflexion_active{
  font-weight: bold;
  background-color: #d6d6d6;
  color: #000; /* Slightly darker text on hover */
  transform: translateY(-4px); /* Subtle lift effect on hover */
  box-shadow: 0px 5px 7px -7px #000000;
}
.btn_question_reflexion_active i{
  opacity: 1;
}


.btn_display_cas_active{
  background-color: #d6d6d6;
  color: #000; /* Slightly darker text on hover */
  transform: translateY(-4px); /* Subtle lift effect on hover */
  box-shadow: 0px 5px 7px -7px #000000;
}

.select_napperon{
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  padding: 4px 4px 4px 50px;
  margin: 10px;
}

.select_napperon:hover{
  filter: brightness(1.2);
  transform: translateY(-2px); /* Subtle lift effect on hover */
  background-color: #0000001a;
  border-radius: 10px;
  cursor:pointer;
  box-shadow: 0px 0px 6px 2px #0000003b;
}
.hr_dotted {
  border-top: 1px dotted white; 
  border-width: 1px;
  border-bottom: none; 
  color: transparent; 
  background-color: transparent; 
}

.all_img_marks{
  position: absolute;
  left:-40px;
  width:28px;
}


.text_highlight_individuelle{
  color: #e99f6e;
}
.text_highlight_contextuelle{
  color: #d37d43;
}
.text_highlight_social{
  color: #8d410f;
}
.text_highlight_caracteristique{
  color: #92d050;
}
.text_highlight_realisation{
  color: #00b050;
}
.text_highlight_holistique{
  color: #538135;
}
.text_highlight_scolaire{
  color: #6ba5d9;
}
.text_highlight_differencie{
  color: #2e74b5;
}
.text_highlight_educative{
  color: #1b4c7a;
}
.text_highlight_bienparent{
  color: #8d1bc2;
}

.user_text_highlight{
  padding: 10px 0px;
  line-height: 2;
}

.user_text_highlight:hover{
  cursor: pointer;
  /* filter: brightness(0.7); */
  /* outline: 1px solid #00000079; /* Or use a contrasting color for better visibility */
  /* outline-offset: -1px; Optional: brings the outline inside the element */
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
  /* background-color: #e7e7e7; */
  outline: 1px solid #b8b8b8; /* Or use a contrasting color for better visibility */
  outline-offset: -1px; /* Optional: brings the outline inside the element */
}

/* pour petite ecran */
@media (max-width: 768px) {
 /* h1{
  font-size: 40px!important;
 }
 h3{
  font-size: 18px!important;
 }
 p,li{
  font-size: 14px!important;
 }

 .all_img_marks{
  left:-26px;
  width:20px;
 } */

 .select_napperon{
  margin-bottom: 30px;
}

}

@media print {
  /* Hide everything by default */
  body * {
    visibility: hidden;
  }
  /* Avoid printing the modal backdrop */
  .modal-backdrop {
    display: none !important;
  }
  /* Show the modal dialog */
  .modal.show {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    page-break-after: avoid;
    page-break-before: avoid;
    page-break-inside: avoid;
  }

  .modal .modal-dialog{
    min-width: 90%!important;
  }
  
  /* Ensure the modal header and title are displayed */
  .modal.show .modal-header,
  .modal.show .modal-header .modal-title {
    visibility: visible;
    display: block !important;
  }

  .modal.show .modal-body .row .col-12 {
    display: flex;
    flex-direction: row; /* Assuming you want a row layout */
    justify-content: flex-start; /* Align items to the start of the container */
  }
  
  .modal.show .modal-body .modal_display_all_reponse_niveau_3 .display_question_reflexion_reponse .btn_question_reflexion {
    display: inline-block !important; /* inline-block for individual buttons */
  }

  /* Ensure the modal content and its active section are displayed */
  .modal.show .modal-body .modal_display_all_reponse_niveau_3.modal_response_active * {
    visibility: visible;
    display: block !important;
    width: auto;
    height: auto;
    overflow: visible;
  }
}





.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }