body
{
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #ffffff;
}

*{
    --blanc_1: #ffffff;
    --blanc_2: #f9feff;
    --blanc: #F5FEFF;
    --noir: #151A1F;
    --griz: #494947;
    --griz_faible: #ededed;
    --base_1_couleur: #31487a;
    --base_1_couleur_nuance_1: #486ab5;
    --base_1_couleur_nuance_2: #b5cdff;
    --base_2_couleur: #8fb3e2;
    --base_3_couleur: #1f1539;
    --base_4_couleur: #9e7bf7;
    --base_5_couleur: #ece5fd;
    --vert: #4eb365ff;
    --vert_faible: #d6ffe0;
    --vert_nuance_1: #3c844dff;
    --bleu: #005eff;
    --rouge: #dc3545;
    --jaune: #F8C61E;
    box-sizing: border-box;
    --box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 4px 0px;
    --fond_noir_transparent : rgba(0, 0, 0, 0.5);
    font-family: var(--app-font);
}
/* effet */
.skeleton {
    background-color: #e2e2e2;/* La couleur de fond de base (gris clair) */  
    background-image: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0.5) 60%, 
        rgba(255, 255, 255, 0)
    );/* On crée le reflet avec un dégradé linéaire */  
    background-size: 200% 100%; /* On agrandit le fond pour pouvoir le faire défiler */  
    animation: shimmer 1.5s infinite; /* L'animation */
}
.block-scroll
{
    overflow: hidden;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}
/* btn */
.rotate
{
    display: inline-block;
    animation: rotation 2s linear infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.btn_form_login
{
    width: 100%;
    outline: none;
    background: var(--base_1_couleur);
    color: var(--blanc);
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    margin: 10px 0px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    text-decoration: none;
}
.btn_form_login:active
{
    opacity: .5;
}
/* login */
.container_login
{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--blanc_1);
}
.div_login
{
    width: 80%;
    background: var(--blanc);
    height: 80%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 10px;
}
.div_slide_login
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.slide_login
{
    width: 50%;
    height: 100%;
    padding: 10px;
}
.info_login
{
    width: 100%;
    height: 100%;
    background: #31487A;
    background: linear-gradient(117deg, var(--base_2_couleur) 20%, var(--base_1_couleur) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
.logo_info_login
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: var(--blanc_1);
    font-size: 20px;
    font-weight: 800;
}
.logo_info_login
img
{
    width: 100px;
    padding: 10px;
    background: var(--blanc_1);
    border-radius: 10px;
}
.div_texte_login
{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: var(--blanc_1);
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 10px 10px;
}
.petit_text_login
{
    font-size: 14px;
    margin-bottom: 20px;
}
.grand_text_login
{
    font-size: 16px;
    font-weight: 800;
}
.div_form_login
{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
}
.titre_login_form
{
    padding: 20px 0px;
    margin: 0 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--base_1_couleur);
}
.div_form_login
{
    width: 100%;
}
.form_login
{
    width: 100%;
}
.label_form_login
{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--noir);
    margin-top: 10px;
    display: block;
    width: 100%;
}
.input_textarea_form_login
{
    width: 100%;
    resize: none;
    outline: none;
    border: none;
    padding: 5px;
    font-size: 16px;
    color: var(--noir);
    background: var(--blanc_1);
    height: 100px;
    overflow: auto;
    border: 1px solid var(--griz);
    border-radius: 5px;
}
.div_input_form_login
{
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
.input_form_login
{
    background: var(--blanc_1);
    color: var(--noir);
    font-size: 16px;
    outline: none;
    border: none;
    border: 1px solid var(--griz);
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    z-index: 1;
}
.input_form_login.password_form_login
{
    padding-right: 35px;
}
.icone_form_login
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    font-size: 14px;
    color: var(--griz);
    cursor: pointer;
}
.icone_form_login:active
{
    opacity: .5;
    border-left: 1px solid var(--griz);
}
.mot_de_passe_oublie_form_login
{
    width: 100%;
    text-align: right;
}
.mot_de_passe_oublie_form_login
a
{
    font-size: 14px;
    color: var(--bleu);
    outline: none;
    text-decoration: underline;
}
.texte_form_login
{
    font-size: 16px;
    color: var(--noir);
    margin: 10px 0px;
    text-align: center;
}
.texte_form_login
a
{
    color: var(--bleu);
    outline: none;
    text-decoration: underline;
}
.profile_editer_profile
{
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profile_editer_profile
img
{
    width: 100px;
    border-radius: 50%;
}

/* banniere */
header
{
    height: 50px;
    width: 100%;
    margin-bottom: 10px;
    position: fixed;
    z-index: 5;
}
.div_entete_page
{
    position: absolute;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blanc_1);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin: 0 0;
}
.separateur_banniere
{
    height: 65px;
}
.logo_entete_page
{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo_entete_page
img
{
    height: 35px;
}
.logo_entete_page
a
{
    font-size: 20px;
    color: var(--base_1_couleur);
    font-weight: 800;
    outline: none;
    text-decoration: none;
}
nav
{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: hidden;
}
.div_list_nav_entete_page
{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
.list_nav_entete_page
{
    display: inline-block;
    margin: 0 5px;
}
.list_nav_entete_page
a
{
    font-size: 14px;
    color: var(--noir);
    outline: none;
    text-decoration: none;
    padding: 0px 0px;
}
.list_nav_entete_page
a:hover
{
    color: var(--base_2_couleur);
}
.div_barre_de_recherche_entete_page
{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: relative;
}
.input_recherche_entete_page
{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid var(--griz);
    padding: 5px;
    color: var(--noir);
    font-size: 16px;
    padding-right: 35px;
    outline: none;
}
.icone_input_recherche_entete_page
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
}
.div_profile_actions_entete_page
{
    width: 25%;
    height: 100%;
    display: flex;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
}
.profile_actions_entete_page
{
    width: 100%;
    height: auto;
    padding: 0px 10px;
}
.bouton_entete_page
{
    display: inline-block;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
}
.bouton_entete_page:active
{
    opacity: .5;
}
.div_icone_notif_entete_page
{
    height: 100%;
    width: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    position: relative;
    cursor: pointer;
}
.div_icone_notif_entete_page:active
{
    opacity: .5;
}
.div_icone_notif_entete_page.menu
{
    display: none;
}
.div_icone_notif_entete_page
i
{
    font-size: 18px;
    color: var(--noir);
}
.nombre_notif_entete_page
{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: -15px;
    right: -15px;
    width: 25px;
    height: 25px;
    background: var(--rouge);
    color: var(--blanc_1);
    font-weight: 600;
    border-radius: 50%;
}
.div_profile_entete_page
{
    height: 100%;
    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
}
.profile_entete_page
{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
}
.profile_entete_page
img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.parent_menu_mobile
{
    display: none;
    position: fixed;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.background_menu_mobile
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.menu_mobile
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: var(--blanc_1);
    width: 90%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: auto;
    padding-top: 65px;
}
.banniere_menu_mobile
{
    position: fixed;
    top: 0;
    right: 0;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    background: var(--blanc);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* categorie accueil */
.parent_container_page_accueil
{
    width: 100%;
    padding: 10px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    background: var(--blanc_2);
}
.affichage_des_categorie_cours
{
    width: 25%;
    padding: 10px;
}
.sous_affichage_des_categorie_cours
{
    background: var(--blanc_1);
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.titre_gestion_categorie_cours
{
    width: 100%;
    font-size: 20px;
    font-weight: 800;
    color: var(--noir);
}
.icone_titre_gestion_categorie_cours
{
    display: none;
}
.div_list_categorie_gestion_categorie
{
    width: 100%;
    padding: 10px 0px;
}
.list_categorie_gestion_categorie
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px 0px;
}
.nom_categorie_gestion_categorie
{
    width: 70%;
    text-align: left;
    font-size: 16px;
    color: var(--noir);
}
.nombre_categorie
{
    width: 30%;
    padding: 0px 10px;
    text-align: right;
}
.nombre_categorie
span
{
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    border-radius: 50%;
}
.voir_plus_list_categorie_gestion_categorie
{
    width: 100%;
    color: var(--bleu);
    cursor: pointer;
}
.voir_plus_list_categorie_gestion_categorie:active
{
    opacity: .5;
}
.details_concours
{
    display: block;
    background-color: var(--blanc);
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0px;
    text-decoration: none;
    color: var(--noir);
    outline: none;
}
.details_concours.populaire_concours
{
    background-color: var(--base_5_couleur);
}
.div_entete_concours
{
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0px;
}
.badge_concours
{
    width: 40%;
}
.badge_concours
span
{
    background: var(--base_1_couleur_nuance_2);
    color: var(--base_1_couleur);
    padding: 5px;
    border-radius: 10px;
    font-size: 14px;
}
.populaire_concours
.badge_concours
span
{
    background: var(--base_4_couleur);
    color: var(--blanc_1);
    padding: 5px;
    border-radius: 10px;
    font-size: 14px;
}
.date_concours
{
    width: 60%;
    text-align: right;
    font-size: 14px;
}
.titre_concours
{
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: var(--noir);
    margin: 10px 0px;
}
.text_concours
{
    font-size: 14px;
    color: var(--noir);
    margin: 10px 0px;
}
.div_pied_concours
{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    margin: 10px 0px;
}
.nombre_participants
{
    width: 50%;
    color: var(--noir);
    text-align: left;
}
.badge_pied_concours
{
    width: 50%;
    text-align: right;
}
.badge_pied_concours
span
{
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    padding: 5px;
    border-radius: 10px;
}
.populaire_concours
.badge_pied_concours
span
{
    background: var(--base_3_couleur);
    color: var(--blanc_1);
    padding: 5px;
    border-radius: 10px;
}
/* file d'actualité */
.div_file_actualite
{
    width: 75%;
    padding: 10px;
    display: block;
}
.div_badge_file_actualite
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: 10px;
    background: #31487A;
    background: linear-gradient(117deg, var(--base_1_couleur_nuance_1) 0%, rgba(31, 21, 57, 0.74) 100%);
    color: var(--blanc_1);
    border-radius: 10px;
}
.text_details_badge_file_actualite
{
    padding: 10px;
    width: 75%;
}
.titre_badge_file_actualite
{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--noir);
}
.texte_badge_file_actualite
{
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--noir);
}
.div_button_badge_file_actualite
{
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.btn_badge_file_actualite
{
    display: inline-block;
    outline: none;
    border: none;
    font-size: 16px;
    color: var(--base_1_couleur);
    border-radius: 10px;
    background: var(--blanc_1);
    padding: 10px;
    margin: 0px 5px;
    cursor: pointer;
}
.btn_badge_file_actualite.main
{
    background: var(--base_1_couleur_nuance_1);
    color: var(--blanc_1);
}
.btn_badge_file_actualite:active
{
    opacity: .5;
}
.logo_details_badge_file_actualite
{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: var(--blanc_1);
    font-weight: 800;
}
.div_choix_categorie_file_actualite
{
    width: 100%;
    margin: 20px 0px;
}
.choix_categorie_file_actualite
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 50px;
    background: var(--blanc_1);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
}
.detail_choix_categorie_file_actualite
{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}
.detail_choix_categorie_file_actualite:active
{
    opacity: .5;
}
.background_detail_choix_categorie_file_actualite
{
    position: absolute;
    width: 25%;
    top: 0;
    left: 0%;
    bottom: 0;
    border-bottom: 5px solid var(--base_1_couleur_nuance_1);
    z-index: 1;
    transition: .5s;
}
.div_publier_file_actualite
{
    margin: 10px 0px;
    background: var(--blanc_1);
    border-radius: 10px;
    width: 100%;
    box-shadow: var(--box-shadow);
}
.profile_text_publier_file_actualite
{
    padding: 10px;
}
.parent_input_profile_publier_file_actualite
{
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid var(--griz);
    display: flex;
    flex-wrap: wrap;
}
.div_image_profile_publier_file_actualite
{
    width: 10%;
    padding: 0px 10px;
}
.div_image_profile_publier_file_actualite
img
{
    width: 100%;
    border-radius: 50%;
}
.div_input_publier_file_actualite
{
    width: 90%;
    padding: 0px 10px;
}
.div_input_publier_file_actualite
input
{
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 10px;
    border: none;
    background: var(--griz_faible);
    color: var(--noir);
    border-radius: 5px;
    outline: none;
}
.div_type_publication
{
    margin: 5px 0px;
}
.detail_type_publication
{
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    color: var(--noir);
    cursor: pointer;
}
.detail_type_publication:active
{
    opacity: .5;
}
.div_publication_video
{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    background: var(--blanc_1);
    margin: 30px 0px;
}
.div_profile_publication_video
{
    display: flex;
    flex-wrap: wrap;
}
.profile_publication_video
{
    width: 10%;
    padding: 0px 10px;
}
.profile_publication_video
img
{
    width: 100%;
    border-radius: 50%;
}

.details_profile_publication_video
{
    width: 90%;
    padding: 0px 10px;
    margin-bottom: 10px;
}
.nom_profile_publication_video,
.nom_profile_publication_video
a
{
    width: 100%;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 600;
    color: var(--noir);
    text-decoration: none;
    outline: none;
}
.badge_publication_video
{
    background: var(--blanc);
    color: var(--base_1_couleur);
    padding: 5px;
    font-size: 12px;
    font-weight: normal;
    border-radius: 10px;
}
.badge_publication_video.entrepreneur
{
    background: var(--vert_faible);
    color: var(--vert_nuance_1);
}
.texte_profile_publication_video
{
    width: 100%;
    font-size: 12px;
    color: var(--griz);
    padding: 10px 0px;
}
.div_tags_publication_video
{
    margin: 10px 0px;
}
.div_tags_publication_video
a
{
    outline: none;
    text-decoration: none;
    margin: 5px;
    padding: 5px;
    background: var(--griz_faible);
    color: var(--noir);
    border-radius: 5px;
    font-size: 12px;
}
.div_video_publication_video
{
    width: 100%;
    margin: 10px 0px;
    padding: 10px;
}
.div_video_publication_video
video
{
    width: 100%;
    height: 400px;
    display: block;
    background: var(--noir);
    padding: 10px;
    border-radius: 10px;
}
.comment_video_publication_video
{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.like_comment_partage_video_publication_video
{
    width: 50%;
    text-align: left;
}
.details_like_comment_partage_video_publication_video
{
    display: inline;
    font-size: 12px;
    color: var(--griz);
    margin-right: 5px;
    cursor: pointer;
}
.details_like_comment_partage_video_publication_video:active
{
    opacity: .5;
}
.details_like_comment_partage_video_publication_video.liked
{
    color: var(--rouge);
}

.nombre_de_vu_publication_video,
.bouton_action_publication_video
{
    width: 50%;
    text-align: right;
    font-size: 12px;
    color: var(--griz);
}
.bouton_action_publication_video
a
{
    outline: none;
    text-decoration: none;
    background: var(--base_1_couleur);
    padding: 5px;
    color: var(--blanc_1);
    border-radius: 5px;
}
.div_images_publication_video
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}
.div_images_publication_video.full
{
    grid-template-columns: repeat(1, 1fr);
}
.publication_image
{
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.publication_image
img
{
    width: 100%;
    object-fit: cover;
    z-index: 1;
    cursor: pointer;
}
.publication_image
img:active
{
    opacity: .5;
}
.publication_image.full
{
    height: 500px;
}
.publication_image
{
    position: relative;
}
.plus_publication_image
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fond_noir_transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div_affiche_like
{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    font-size: 50px;
    color: var(--rouge);
}
.div_affiche_like.active
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.div_affiche_like
i
{
    transition: .5s;
    opacity: 0;
}
.div_affiche_like
i.active
{
    opacity: 1;
}
.plus_publication_image
p
{
    font-size: 30px;
    font-weight: 800;
    color: var(--blanc_1);
}
.div_detail_publication_job
{
    width: 100%;
    padding: 10px;
}
.div_icone_publication_job
{
    display: flex;
    flex-wrap: wrap;
}
.icone_publication_job
{
    width: 10%;
    padding: 0px 10px;
}
.icone_publication_job
i
{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    font-size: 20px;
}
.details_publication_job
{
    width: 90%;
    padding: 0px 10px;
}
.nom_details_publication_job
{
    font-size: 16px;
    font-weight: bold;
    color: var(--noir);
    display: block;
    width: 100%;
    padding-bottom: 10px;
}
.tags_details_publication_job
{
    padding: 5px 0px;
}
.tags_details_publication_job
span
{
    font-size: 14px;
    display: inline-block;
    padding: 5px;
    color: var(--base_1_couleur);
    background: var(--blanc);
    margin-right: 5px;
}
.div_bouton_publication_job
{
    padding: 10px 0px;
    width: 100%;
}
.div_bouton_publication_job
a
{
    display: block;
    width: 100%;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    outline: none;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
}
.div_texte_publication_job
{
    width: 100%;
}
.texte_publication_job
{
    padding: 0 0;
    margin: 0 0;
    font-size: 16px;
    color: var(--noir);
    padding: 20px 0px;
}
a.hashtag
{
    color: var(--noir);
    background: var(--blanc);
    text-decoration: none;
    padding: 2.5px;
    font-size: 14px;
    border-radius: 5px;
}

/* compte */
.corps_compte
{
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.div_parent_slide_profile
{
    width: 25%;
    padding: 10px;
}
.div_profile_compte
{
    width: 100%;
    margin-bottom: 10px;
}
.div_image_profile_compte
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
}
.div_image_profile_compte
img
{
    width: 100px;
    border-radius: 50%;
}
.nom_profile_compte
{
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: var(--noir);
    text-align: center;
    padding: 5px 0px;
}
.description_profile_compte
{
    width: 100%;
    font-size: 14px;
    text-align: center;
    color: var(--noir);
}
.div_bouton_profile_compte
{
    padding: 20px 0px;
    text-align: center;
}
.div_bouton_profile_compte
a
{
    display: inline-block;
    padding: 10px;
    background: var(--griz_faible);
    color: var(--noir);
    text-decoration: none;
    border-radius: 10px;
    margin: 5px 5px;
}
.div_bouton_profile_compte
a:active
{
    opacity: .5;
}
.div_bouton_profile_compte
a.active
{
    background: var(--base_1_couleur);
    color: var(--blanc_1);
}
.parent_certificat_competence_profile_compte
{
    padding: 10px;
    margin: 10px 0px;
    background: var(--griz_faible);
    border-radius: 10px;
}
.div_competence_profile_compte
{
    margin: 10px 0px;
}
.titre_competence_profile_compte
{
    font-size: 16px;
    color: var(--noir);
    padding: 10px 0px;
    font-weight: 600;
}
.details_competence_profile_compte
span
{
    display: inline-block;
    padding: 5px;
    background: var(--blanc);
    border-radius: 5px;
    margin: 5px;
}
.details_certificat_profile_compte
{
    width: 100%;
    position: relative;
    padding-left: 35px;
}
.details_certificat_profile_compte
i
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--jaune);
}
.div_parent_publication_compte_utilisateur
{
    width: 75%;
    padding: 10px;
}
.div_boutton_logout
{
    width: 100%;
    text-align: right;
    padding: 10px;
}
.bouton_logout
{
    outline: none;
    text-decoration: none;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
}
.bouton_logout:active
{
    opacity: .5;
}
.div_changer_photo_de_profile
{
    width: 100%;
    padding: 20px 0px;
    text-align: center;
}
.bouton_changer_photo_de_profile
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    font-size: 16px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    outline: none;
    border: none;
}
.bouton_changer_photo_de_profile:active
{
    opacity: .5;
}
.div_changer_photo_de_profile
input
{
    visibility: hidden;
    width: 1px;
    height: 1px;
}
.zone_de_crop_changer_photo_de_profile
{
    visibility: hidden;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    padding: 10px;
    height: 400px;
}
.zone_de_crop_changer_photo_de_profile.active
{
    visibility: visible;
}

/* pop up */
.div_parent_pop_up
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 7;
    display: none;
}
.div_parent_pop_up.active
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.background_pop_up
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.div_pop_up_container
{
    width: 70%;
    height: 80vh;
    overflow: auto;
    background: var(--blanc_1);
    box-shadow: var(--box-shadow);
    padding: 50px;
    border-radius: 10px;
    z-index: 2;
}
.titre_pop_up_container
{
    width: 100%;
    padding: 10px 0px;
    font-size: 16px;
    color: var(--noir);
    font-weight: 600;
    text-align: center;
}
.charger_image_publication_pop_up_container
{
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}
.charger_image_publication_pop_up_container
input
{
    visibility: hidden;
    width: 0px;
    height: 0px;
}
.btn_new_image_publication_pop_up_container
{
    display: inline-block;
    background: var(--base_1_couleur);
    color: var(--blanc_1);
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.social-link-card
{
    text-decoration: none;
    color: inherit;
}
.social-hero-card
{
    margin: 10px 0px 20px 0px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(72, 106, 181, 0.12), rgba(143, 179, 226, 0.25));
    box-shadow: var(--box-shadow);
}
.social-publisher-card
{
    overflow: visible;
}
.social-publisher-inputs
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.social-textarea-main
{
    min-height: 110px;
    border: none;
    background: var(--griz_faible);
}
.social-textarea,
.social-select
{
    width: 100%;
    border: 1px solid var(--griz_faible);
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-family: var(--app-font);
    outline: none;
    background: var(--blanc_1);
    color: var(--noir);
}
.social-textarea
{
    min-height: 120px;
    resize: vertical;
}
.social-publisher-toolbar
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.social-toolbar-left,
.social-toolbar-right
{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.social-file-trigger
{
    border-radius: 10px;
    background: var(--blanc);
}
.social-publish-button,
.social-inline-btn,
.social-secondary-btn
{
    width: auto;
    margin: 0;
}
.social-secondary-btn
{
    background: var(--blanc);
    color: var(--base_1_couleur);
    border: 1px solid var(--base_2_couleur);
}
.social-upload-preview
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.social-image-preview-card,
.social-video-preview-card
{
    position: relative;
    width: min(100%, 320px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--blanc);
    box-shadow: var(--box-shadow);
}
.social-image-preview-card img,
.social-video-preview-card video
{
    width: 100%;
    display: block;
    max-height: 240px;
    object-fit: cover;
    background: var(--noir);
}
.social-remove-preview
{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: var(--blanc_1);
    cursor: pointer;
}
.social-popup-container
{
    max-width: 900px;
}
.social-crop-layout
{
    display: none;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
.social-crop-layout.active
{
    display: grid;
}
.social-crop-frame
{
    min-height: 420px;
    background: var(--griz_faible);
    border-radius: 14px;
    overflow: hidden;
}
.social-crop-frame img
{
    display: block;
    width: 100%;
    max-width: 100%;
}
.social-crop-actions
{
    background: var(--blanc);
    border-radius: 14px;
    padding: 16px;
}
.social-crop-actions p
{
    margin-top: 0;
    color: var(--griz);
    font-size: 14px;
}
.social-preview-item
{
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: var(--blanc);
    color: var(--base_1_couleur);
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
}
.social-section-grid
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0px;
}
.social-mini-panel,
.social-side-card,
.social-form-card,
.social-content-card
{
    background: var(--blanc_1);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--box-shadow);
}
.social-mini-panel h3,
.social-side-card h3,
.social-form-card h2,
.social-section-heading h2,
.social-page-hero h1
{
    margin-top: 0;
    color: var(--base_1_couleur);
}
.social-mini-card,
.social-side-item
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-decoration: none;
    color: var(--noir);
    background: var(--blanc);
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
}
.social-page-shell
{
    width: 100%;
    padding: 20px;
}
.social-page-hero
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.social-theme-grid,
.social-card-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.social-card-grid-single
{
    grid-template-columns: repeat(1, 1fr);
}
.social-theme-card
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--noir);
    background: linear-gradient(180deg, var(--blanc_1), var(--blanc));
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--box-shadow);
}
.social-theme-card i
{
    font-size: 22px;
    color: var(--base_1_couleur);
}
.social-two-column
{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}
.social-column-main,
.social-column-side
{
    min-width: 0;
}
.social-content-meta,
.social-card-footer
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--griz);
}
.social-card-footer
{
    margin-top: 15px;
    align-items: center;
}
.social-stack-form
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-chip
{
    display: inline-block;
    margin: 0px 5px 5px 0px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--blanc);
    color: var(--base_1_couleur);
    font-size: 12px;
}
.social-repeat-list
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-repeat-item
{
    padding: 14px;
    background: var(--blanc);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.social-portfolio-list
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-portfolio-card
{
    background: var(--blanc);
    border-radius: 12px;
    padding: 14px;
}
.social-portfolio-card a,
.details_certificat_profile_compte a
{
    color: var(--base_1_couleur);
    text-decoration: none;
}
.social-inline-form
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.social-replies
{
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-left: 18px;
    border-left: 2px solid rgba(72, 106, 181, 0.12);
}
.social-replies.active
{
    display:flex;
}
.social-reply-item,
.social-comment-item
{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--blanc);
    padding: 12px;
    border-radius: 12px;
}
.social-comment-item img
{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.social-comment-body,
.social-message-thread
{
    width: 100%;
}
.social-comment-meta
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--griz);
}
.social-message-thread
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-message-bubble
{
    max-width: 80%;
    background: var(--blanc);
    border-radius: 16px;
    padding: 14px;
}
.social-message-bubble.mine
{
    align-self: flex-end;
    background: var(--base_2_couleur);
}
.contest-hero
{
    align-items: flex-start;
}
.contest-open-modal-btn
{
    width: auto;
    gap: 8px;
}
.contest-list-card
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contest-card-actions
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.contest-create-popup
{
    max-width: 760px;
}
.contest-detail-shell
{
    padding-top: 10px;
}
.contest-back-link
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--base_1_couleur);
    margin-bottom: 12px;
}
.contest-hero-actions
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.contest-summary-grid
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.contest-summary-lines
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contest-summary-lines p,
.contest-chat-help,
.contest-empty-state,
.contest-reward-line,
.contest-update-author,
.contest-update-winner
{
    margin: 0;
}
.contest-participant-list
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contest-participant-item
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--blanc);
    border-radius: 12px;
}
.contest-participant-item img
{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}
.contest-participant-item span,
.contest-update-author,
.contest-chat-help,
.contest-empty-state
{
    display: block;
    font-size: 13px;
    color: var(--griz);
}
.contest-detail-grid
{
    align-items: start;
}
.contest-inline-form
{
    margin-bottom: 18px;
}
.contest-winner-select.is-disabled
{
    opacity: .55;
}
.contest-update-item,
.contest-chat-item
{
    background: var(--blanc);
}
.contest-update-item .social-comment-body,
.contest-chat-item .social-comment-body
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contest-chat-list
{
    max-height: 420px;
    overflow: auto;
    margin-bottom: 18px;
}
.messages-layout
{
    align-items: flex-start;
}
.mention
{
    color: var(--base_1_couleur_nuance_1);
    font-weight: 600;
}
.mention-link
{
    text-decoration: none;
}
.social-comment-text
{
    margin-top: 6px;
    color: var(--noir);
    line-height: 1.5;
}
.social-comment-text p
{
    margin: 0;
}
.social-comment-actions
{
    margin-top: 8px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.social-comment-reply-btn
{
    border: none;
    background: transparent;
    padding: 0;
    color: var(--base_1_couleur);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.social-comment-toggle-replies
{
    border:none;
    background:transparent;
    padding:0;
    color:var(--griz);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}
.social-comment-item.is-reply
{
    background: rgba(245, 254, 255, 0.9);
}
.social-action-btn
{
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
}
.social-publication-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.social-publication-delete
{
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.12);
    color: #d33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
}
.social-publication-delete:hover
{
    background: rgba(220, 53, 69, 0.18);
}
.social-publication-delete:active
{
    transform: scale(.96);
}
.social-header-badge
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rouge);
    color: var(--blanc_1);
    font-size: 11px;
    margin-left: 6px;
}
.social-hero-badge
{
    min-width: 180px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--base_1_couleur), var(--base_1_couleur_nuance_1));
    color: var(--blanc_1);
    box-shadow: var(--box-shadow);
}
.social-hero-badge strong
{
    display: block;
    font-size: 28px;
}
.social-hero-badge span
{
    font-size: 13px;
}
.social-side-item.is-active
{
    border: 1px solid var(--base_2_couleur);
}
.social-side-item.has-pending
{
    background: var(--base_5_couleur);
}
.social-side-item small
{
    color: var(--griz);
}
.social-account-shell
{
    padding-top: 10px;
}
.social-account-hero
{
    background: linear-gradient(135deg, rgba(72, 106, 181, 0.12), rgba(181, 205, 255, 0.35));
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--box-shadow);
}
.social-account-hero.is-public
{
    background: linear-gradient(135deg, rgba(143, 179, 226, 0.18), rgba(245, 254, 255, 1));
}
.social-account-hero-main
{
    display: flex;
    gap: 18px;
    align-items: center;
}
.social-account-avatar img
{
    width: 120px;
    height: 120px;
    object-fit: cover;
}
.social-account-stats
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.social-account-actions
{
    text-align: right;
}
.social-account-notifications,
.social-account-content
{
    margin-top: 24px;
}
.social-account-content
{
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
}
.social-public-message-card
{
    margin-top: 24px;
}
.social-account-activity-grid
{
    grid-template-columns: repeat(2, 1fr);
    max-width: 1080px;
}
.social-account-publications-wrap
{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.social-account-publications
{
    width: 100%;
    padding: 0;
    max-width: 980px;
    margin: 0 auto;
}
.social-repeat-item p,
.social-repeat-item span
{
    margin: 0;
}
.social-comment-meta strong a,
.social-message-bubble strong a,
.social-card-footer span a,
.contest-summary-lines p a,
.contest-participant-item strong a,
.social-repeat-item strong a,
.popup_container_commentaires .username a
{
    color: var(--base_1_couleur);
    text-decoration: none;
}
@media(min-width: 1024px)
{
    .social-account-shell
    {
        max-width: 1440px;
        margin: 0 auto;
    }
    .social-account-content .social-column-main
    {
        padding-left: 12px;
    }
    .social-account-publications
    {
        max-width: 900px;
    }
}
.btn_new_image_publication_pop_up_container:active
{
    opacity: .5;
}
.div_crop_image_pop_up_container
{
    width: 100%;
    height: 300px;
    margin: 10px 0px;
}
.div_zone_de_crop_photo_de_publication
{
    display: none;
    width: 100%;
    padding: 10px;
}
.div_zone_de_crop_photo_de_publication.active
{
    display: block;
}
.div_text_publication_pop_up_container
{
    margin: 10px 0px;
    width: 100%;
}
.div_text_publication_pop_up_container
textarea
{
    width: 100%;
    resize: none;
    padding: 10px;
    font-size: 16px;
    color: var(--noir);
    height: 100px;
    overflow: auto;
}
.validation_publication_pop_up_container
{
    padding: 10px 0px;
    text-align: right;
}
.validation_publication_pop_up_container
button
{
    display: inline-flex;
    outline: none;
    border: none;
    color: var(--blanc_1);
    background: var(--base_1_couleur);
    padding: 10px;
    border-radius: 10px;
}
.validation_publication_pop_up_container
button:active
{
    opacity: .5;
}

/* pop up image */
.div_parent_pop_up_affiche_image
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 7;
    display: none;
    justify-content: center;
    align-items: center;
}
.div_parent_pop_up_affiche_image.active
{
    display: flex;
}
.background_pop_up_affiche_image
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.div_pop_up_affiche_image
{
    height: 80vh;
    width: 50%;
    padding: 10px;
    border-radius: 10px;
    background: var(--blanc_1);
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
}
.div_pop_up_affiche_image
img
{
    border-radius: 10px;
}

/* pop up comment */

.popup_container_commentaires{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
padding:20px;
background:rgba(16,24,40,.42);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}
.popup_container_commentaires.active{
display:flex;
}
.popup_container_commentaires
.popup-content{
background:var(--blanc_1);
width:min(100%,780px);
max-height:min(90vh,880px);
border-radius:24px;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 30px 80px rgba(15,23,42,.22);
border:1px solid rgba(255,255,255,.55);
}
.popup_container_commentaires
.popup-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 22px;
border-bottom:1px solid rgba(15,23,42,.08);
background:linear-gradient(180deg, rgba(72,106,181,.08), rgba(245,254,255,.92));
font-size:16px;
font-weight:700;
color:var(--noir);
}
.popup_container_commentaires
.popup-header
button
{
outline:none;
border:none;
width:40px;
height:40px;
border-radius:50%;
background:var(--blanc_1);
color:var(--base_1_couleur);
font-size:16px;
font-weight:800;
cursor:pointer;
box-shadow:0 8px 24px rgba(72,106,181,.18);
}
.popup_container_commentaires
.popup-header
button:active
{
opacity:.6;
}
.popup_container_commentaires
.popup-body{
overflow-y:auto;
padding:20px 22px;
background:linear-gradient(180deg, rgba(245,254,255,.9), rgba(255,255,255,1));
}
.popup_container_commentaires
.original-post{
position:relative;
padding:16px;
margin-bottom:18px;
border:1px solid rgba(72,106,181,.1);
border-radius:18px;
background:var(--blanc_1);
box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.comment-popup-media-preview
{
display:none;
position:absolute;
top:16px;
left:16px;
z-index:2;
}
.comment-popup-media-preview.active
{
display:block;
}
.comment-popup-media-card
{
width:72px;
height:72px;
border-radius:16px;
overflow:hidden;
background:rgba(15,23,42,.08);
box-shadow:0 12px 28px rgba(15,23,42,.18);
position:relative;
}
.comment-popup-media-card img,
.comment-popup-media-card video
{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.comment-popup-media-card.is-video span
{
position:absolute;
right:8px;
bottom:8px;
width:24px;
height:24px;
border-radius:50%;
background:rgba(15,23,42,.72);
color:var(--blanc_1);
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
}
.popup_container_commentaires
.user{
display:flex;
align-items:center;
gap:12px;
padding-left:92px;
}
.popup_container_commentaires
.user img{
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
}
.popup_container_commentaires
.post-text{
margin:12px 0 0 92px;
color:var(--noir);
line-height:1.6;
}
.popup_container_commentaires
.post-media{
width:100%;
border-radius:10px;
}
.popup_container_commentaires
.comments{
display:flex;
flex-direction:column;
gap:14px;
}
.popup_container_commentaires
.reply-box{
border-top:1px solid rgba(15,23,42,.08);
padding:16px 20px 18px 20px;
display:flex;
flex-direction:column;
gap:12px;
background:var(--blanc_1);
}
.popup_container_commentaires
.comment-reply-target{
display:none;
justify-content:space-between;
align-items:center;
gap:10px;
padding:11px 14px;
border-radius:14px;
background:rgba(72,106,181,.1);
color:var(--base_1_couleur);
font-size:13px;
font-weight:600;
}
.popup_container_commentaires
.comment-reply-target.active{
display:flex;
}
.popup_container_commentaires
.comment-reply-target
button{
border:none;
background:none;
padding:0;
font-family:inherit;
font-weight:600;
color:var(--base_1_couleur);
cursor:pointer;
}
.popup_container_commentaires
textarea{
resize:none;
min-height:82px;
max-height:140px;
padding:14px 16px;
border-radius:18px;
border:1px solid rgba(72,106,181,.16);
background:rgba(245,254,255,.85);
font-family:var(--app-font);
font-size:14px;
color:var(--noir);
outline:none;
}
.popup_container_commentaires
.reply-actions{
display:flex;
justify-content:flex-end;
align-items:center;
}
.popup_container_commentaires
.reply-btn
{
background:var(--base_1_couleur);
border:none;
color:var(--blanc_1);
padding:11px 18px;
border-radius:999px;
cursor:pointer;
font-weight:700;
box-shadow:0 10px 24px rgba(72,106,181,.26);
}
.popup_container_commentaires
.image-upload{
cursor:pointer;
font-size:20px;
}
.popup_container_commentaires
#previewImage{
max-width:120px;
border-radius:8px;
display:none;
}

/* MOBILE */

@media(max-width:700px){
.popup_container_commentaires
.popup-content{
width:100%;
height:100%;
max-height:100vh;
border-radius:0;
}
.comment-popup-media-card
{
width:64px;
height:64px;
}
.popup_container_commentaires
.user{
padding-left:84px;
}
.popup_container_commentaires
.post-text{
margin-left:84px;
}

}











.null{
    display: none;
}