html, body {
    margin: 0;
    padding: 0;
    background-color: #dce7e7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    font-family: arial;
    box-sizing: border-box;
    z-index: -100;
}

.center_body {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.carte_patient {
    width: 400px;
    background-color: white;
    height: 500px;
    border-radius: 20px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
    transform-style: preserve-3d; /* Permet de gérer les transformations 3D */
    cursor: pointer;
}

.carte_patient:hover {
    transform: translateY(-5px) translateX(-5px); 
    box-shadow: 10px 20px 10px rgba(0,0,0, 0.05);
}

.carte_patient .face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    backface-visibility: hidden; /* Cache l'autre face quand elle n'est pas visible */
    display: flex;
    flex-direction: column;
}

.face.front {
    background-color: white;
}

.face.back {
    background-color: white;
    transform: rotateY(180deg); /* La face arrière est retournée par défaut */
}

.carte_patient.is-flipped {
    transform: rotateY(180deg); /* Retourne toute la carte lorsqu'on ajoute cette classe */
}

/*------------------------------ FACE FRONT CARTE PATIENT -----------------------------*/

.carte_header {
     background-image: url("images/motif_fond_patient.png");
    /*background-color: #ffe680ff;*/
    background-size: cover;
    height: 140px;
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.image_patient {
    background-color: #dce7e7ff;
    height: 100px;
    Width: 100px;
    border: 3px solid #b37c7cff;
    border-radius: 20px;
    border-top-right-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image_patient_png {
    height: 80px;
}

.infos_patient {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /*Permet de prendre toute la place restante du row*/
}

.barre_nom {
    background-color: #b37c7cff;
    color: white;
    padding: 5px;
    display: flex;
    flex-direction: row; 
    gap: 5px;
    align-items: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.barre_nom_info.sexe {
    background-color: #5a8686ff;
    height: 20px;
    border-radius: 20px;
    padding: 2px 10px;
}

.barre_nom_info.age {
    background-color: #5a8686ff;
    height: 20px;
    border-radius: 20px;
    padding: 2px 10px;
}

.box_constantes {
    display: flex;
    flex-direction: row;
    padding: 5px;
}

.colonne_constantes {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 5px;
}

.constante_individuelle_ligne {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.constante_individuelle_box {
    background-color: #b37c7cff;
    height: 20px;
    padding: 5px 5px;
    border-radius: 10px;
    color: white;
}

.constante_individuelle_valeur {
    color: #5a8686ff;
}

/*---------------------------CARTE BODY -----------------------------*/

.carte_body {
    display: flex;
    padding: 20px 15px;
}

.box_texte_1 {
    background-color: #f2f2f2ff;
    border-radius: 20px;
    padding: 15px;
    border: 2px solid #5a8686ff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box_texte_1.rouge {
    border: 2px solid red;
}

.box_texte_1_titre_box {
    display: flex;
    justify-content: center;
}

.box_texte_1_titre {
    display: flex;
    background-color: #5a8686ff;
    color: white;
    width: 50%;
    justify-content: center;
    padding: 5px;
    border-radius: 10px;
    margin-top: -25px;
}

.box_texte_1_titre.rouge {
    background-color: red;
}

.box_texte_1_contenu {
    text-align: justify;
    color: #767676ff;
}

/*-------------------- Carte footer ----------------------------*/

.carte_footer {
    display: flex;
    flex-direction: row;
    margin-top: auto;
    align-items: center;
    padding: 10px;
}

.instructions_footer {
    background-color: #f2f2f2ff;
    padding: 10px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    color: #767676ff;
    border-radius: 20px;
    position: relative; /* Pour que le doigt img soit positionné correctement */
}

#doigt_img {
    height: 50px;
    position: absolute; /* Positionner l'image précisément dans le conteneur */
    margin-right: -20px;
    margin-bottom: -20px;
    opacity: 0; /* L'image est initialement invisible */
    transform: translateY(20px); /* Un petit décalage vertical pour l'animation */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transition fluide pour l'opacité et le mouvement */
}

.carte_patient:hover #doigt_img {
    opacity: 1; /* L'image devient visible au survol */
    transform: translateY(0); /* L'image se déplace vers sa position d'origine */
}

/* -------------------------------------------------- PUPH jugeur -------------------------------------------------------------------------------*/



.puph_jugeur {
    width: 0;
    height: 0;
    position: relative;
}

.professeur_jugeur_img {
    position: absolute;
    z-index: -10;
    height: 150px;
    top: -130px;
    left: -500px;
}

#paroles_PUPH {
    position: absolute;
    z-index: -10;
    height: 150px;
    top: -125px;
    left: -395px;
    font-size: 12Px;
    padding: 10px;
    width: 80px;
}






/* -------------------------------------------------- CARTE PEC -------------------------------------------------------------------------------*/

.carte_PEC {
    width: 600px;
    background-color: white;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.carte_PEC_header {
    background-color: #ffe680ff;
    /*background-image: url("motif_fond_patient.png");
    background-size: cover;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    color: #5a8686ff;
    border-bottom: 3px solid #b47e7cff;
    height: 60px; /* Hauteur fixe */
    flex-shrink: 0; /* Empêche le header de rétrécir */
}

.carte_PEC_header_onglet {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    gap: 10px;
    font-size: 13px;
    box-sizing: border-box;
    flex-grow: 1;
}

.carte_PEC_header_onglet:hover {
    background-color: #e4cc43ff;
}

.carte_PEC_header_onglet.Active {
    background-color: #5a8686ff;
    color: white;
    box-shadow:  0 7px 0 #386767ff;
}

.carte_PEC_header_onglet_image {
    height: 30px;
    width: 30px;
    background-color: #b47e7cff;
    border-radius: 40px;
    /*border-top-right-radius: 0px;*/
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carte_PEC_header_onglet_titre {
    /*border-top: 3px solid #b47e7cff;*/
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.icone_onglet {
    height: 20px;
}

.carte_PEC_body {
    display: none;
}


.carte_PEC_body.un {
    flex-direction: row;
    gap: 15px;
    padding: 20px;
    font-size: 13px;
    flex-wrap:  wrap;
    flex-grow: 1; 
    box-sizing: border-box;
    overflow-y: auto; /* Active le scroll vertical si besoin */
    justify-content: flex-start;
    align-content: flex-start;
}

.carte_PEC_body.un.Active {
    display: flex;
}


.mini_carte_examen_clinique {
    display: flex;
    flex-direction: column;
    border: 2px solid #5a8686ff;
    /*background-color: #f2f2f2ff;*/
    background-image: url("images/fond_carte.jpg");
    background-size: cover;
    padding: 10px;
    border-radius: 20px;
    width: 100px;
    height: 120px;
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Transition fluide */
    transform-style: preserve-3d; /* Permet de gérer les transformations 3D */
    cursor: pointer;
}

.mini_carte_examen_clinique_bord2 {
    border: 1px solid #5a8686ff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px;
    position: relative;
}

.mini_carte_examen_clinique:hover {
    transform: translateY(-4px) translateX(-3px); 
    box-shadow: 2px 7px 10px rgba(0,0,0, 0.05);
}

.mini_carte_examen_clinique_titre {
    font-weight: bold;
    /*background-image: url("motif_fond_patient.png");*/
   /* background-color: #ffe680ff; */
    background-color: #f2f2f2ff;
    padding: 5px;
    border-radius: 10px;
    color: #767676ff;
    display: flex;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.mini_carte_examen_clinique_img {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.img_carte {
    height: 60px;
}

/* --------------------------------------------------BODY examens cliniques ---------------------------------------------------*/

.carte_PEC_body.deux {
    display: none;
    padding: 20px;
    font-size: 13px;
    flex-grow: 1; 
    box-sizing: border-box;
    overflow-y: auto; /* Active le scroll vertical si besoin */
    flex-direction: column;
}

.carte_PEC_body.deux.Active {
    display: flex;
}

.exams_complementaires_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.exams_complementaires_recherche_div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.img_input {
    height: 20px;
}

.input_1 {
    background-color: #f9f3dbff;
    border: none;
    padding: 10px;
    border-radius: 10px;
}

.exams_complementaires_resultats_div {
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2ff;
    padding: 10px;
    border-radius: 10px;
    gap: 5px;
}

.Resultat_exam_complementaire_liste {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.exams_complementaires_resultats_text {
    color: #767676ff;
    font-style: italic;
}

.exams_complementaires_resultats_text.Nouveau {
    font-weight: bold;
    font-style: normal;
}

.exams_complementaires_resultats_dot {
    height: 10px;
    width: 10px;
    background-color: red;
    border-radius: 10px;
    display: none;
}

.exams_complementaires_resultats_dot.Nouveau {
    display: block
}

.exams_complementaires_classes_div {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    border: 1px solid #f2f2f2ff;
    border-radius: 10px;
    padding: 10px;
    justify-content: space-around;
}

.exams_complementaires_classe {
    display: flex;
    flex-direction: column;
}

.exams_complementaires_classe_titre {
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.exams_complementaires_classe_contenu {
    height: 200px;
    background-color: #f2f2f2ff;
    width: 150px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 5px;
    overflow-y: auto;
}

.img_exams_comp {
    height: 20px;
}

.check_box_1 {
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #5a8686ff;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    color: #767676ff;
}

/*.check_box_1:hover {
    border: 1px solid #5a8686ff;
}*/

.exams_complementaires_prescrire_div {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    height: 40px;
}

.button_1 {
    background-color: #5a8686ff;
    color: white;
    border: 1px solid #386767ff;
    border-bottom: 4px solid #386767ff;
    font-weight: bold;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Transition fluide */
    transform-style: preserve-3d; /* Permet de gérer les transformations 3D */
}

.button_1:hover {
    transform: translateY(2px) translateX(2px);
    border-bottom: 1px solid #386767ff;
}

.img_button_1 {
    height: 20px;
}


/*-------------------------------------------------------------------------------BODY ONGLET TROIS PRISE EN CHARGE ----------------------------------------------------------------------------------*/

.carte_PEC_body.trois {
    display: none;
    padding: 20px;
    font-size: 13px;
    flex-grow: 1; 
    box-sizing: border-box;
    overflow-y: auto; /* Active le scroll vertical si besoin */
    flex-direction: column;
    gap: 20px;
}

.carte_PEC_body.trois.Active {
    display: flex;
}

.button_center {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}


/*-------------------------------------------------------------------------POP-UPS FENETRES-------------------------------------------------------------------------------------------------------------*/


.popup_fond_ecran {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.pop_up_box {
    background-color: white;
    border-radius: 20px;
    height: 450px;
    width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pop_up_box_2 {
    background-color: white;
    border-radius: 20px;
    height: 450px;
    width: 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pop_up_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #ffe680ff;
    padding: 20px;
}

.popup_Titre {
    font-size: 15px;
}

.popup_bouton_quitter {
    padding: 10px;
    border-radius: 10px;
    color: white;
    background-color: #386767ff;
    font-size: 15px;
    font-weight: bold;
}

.pop_up_contenu {
    border: 1px solid #f2f2f2ff;
    border-radius: 20px;
    padding: 30px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*-------------------------------------------------------------------------AUTRES GENERALITES -------------------------------------------------------------------------------------------------------------*/

.table_1 {
    border-collapse: collapse;
    background-color: white;
    width: 100%;
}
.table_1 th, td {
    padding: 5px;
    text-align: center;
    border: 1px solid #b37c7cff;
}

.table_1 th {
    background-color: #b37c7cff;
    color: white;
}

.icone_table {
    height: 20px;
}

.Gras {
    font-weight: bold;
}

.box_texte_2 {
    background-color: #f2f2f2ff;
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box_texte_2_titre_box {
    display: flex;
    
}

.box_texte_2_titre {
    display: flex;
    background-color: #5a8686ff;
    color: white;
    padding: 5px 30px;
    justify-content: center;
    border-radius: 10px;
    margin-top: -25px;
}

.box_texte_2_contenu {
    text-align: justify;
    color: #767676ff;
}

.check_box_2 {
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    color: #767676ff;
}

.check_box_2.rouge {
    background-color: red;
    color: white;
}

.icone_check_box {
    height: 20px;
}

.select_1 {
    width: 130px;
    text-align: center;
}

.button_2 {
    background-color: #b37c7cff;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
}

.button_2:hover {
    background-color: #d89f9fff;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
}