/*
==========================================================
LIBURU

popup.css

Gestion des fenêtres popup

==========================================================
*/


/******************************************************
 OVERLAY GENERAL
******************************************************/

.popup_overlay
{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(6px);

    z-index:1000;

    justify-content:center;

    align-items:center;

    padding:20px;

}



/******************************************************
 FENETRE POPUP
******************************************************/

.popup_addEvent
{

    position:relative;

    width:100%;

    max-width:720px;

    max-height:90vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:

        0 20px 60px rgba(0,0,0,0.20);


    animation:

        popupOpen .25s ease;

}



/******************************************************
 ANIMATION OUVERTURE
******************************************************/

@keyframes popupOpen
{

    from
    {

        opacity:0;

        transform:

            translateY(25px)

            scale(.98);

    }


    to
    {

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}



/******************************************************
 BOUTON FERMER
******************************************************/

.popup_close
{

    position:absolute;

    top:15px;

    right:15px;


    width:36px;

    height:36px;


    border:none;

    border-radius:50%;


    background:#f1f1f1;


    color:#555;


    font-size:20px;

    line-height:1;


    cursor:pointer;


    display:flex;

    align-items:center;

    justify-content:center;


    transition:.2s;

}



.popup_close:hover
{

    background:#e5e5e5;

    color:#222;

}

/******************************************************
 TITRE POPUP
******************************************************/

.popup_titre
{

    margin-bottom:25px;

}


.popup_titre h2
{

    font-size:26px;

    font-weight:600;

    color:#222;

    margin-bottom:8px;

}



.popup_titre p
{

    color:#666;

    font-size:15px;

    line-height:1.5;

}



/******************************************************
 ETAPES
******************************************************/

.etape_popup
{

    width:100%;

}



/******************************************************
 CHAMPS
******************************************************/

.champ
{

    margin-bottom:20px;

}



.champ label
{

    display:block;

    margin-bottom:7px;

    font-size:14px;

    font-weight:500;

    color:#444;

}

.champ input
{
    width:100%;

    padding:13px 15px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#ffffff;

    font-family:inherit;

    font-size:15px;

    color:#333;

    transition:.2s;
}


.champ input:focus
{
    outline:none;

    border-color:#7c8cff;

    box-shadow:
        0 0 0 3px rgba(124,140,255,.15);
}


.champ input::placeholder
{
    color:#aaa;
}

/******************************************************
 DATE SELECTIONNEE
******************************************************/

.date_choisie
{

    padding:12px 15px;

    background:#f5f5f5;

    border-radius:10px;

    font-weight:500;

    color:#333;

}



/******************************************************
 SELECT
******************************************************/

.champ select
{

    width:100%;

    padding:13px 15px;


    border:

        1px solid #ddd;


    border-radius:12px;


    background:#fff;


    font-size:15px;


    color:#333;


    cursor:pointer;


    transition:.2s;

}



.champ select:focus
{

    outline:none;

    border-color:#7c8cff;

    box-shadow:

        0 0 0 3px rgba(124,140,255,.15);

}



.champ select:disabled
{

    background:#f3f3f3;

    color:#999;

    cursor:not-allowed;

}



/******************************************************
 TEXTAREA
******************************************************/

.champ textarea
{

    width:100%;

    min-height:110px;


    padding:14px;


    border:

        1px solid #ddd;


    border-radius:12px;


    resize:vertical;


    font-family:inherit;


    font-size:15px;


    color:#333;


    transition:.2s;

}



.champ textarea:focus
{

    outline:none;

    border-color:#7c8cff;


    box-shadow:

        0 0 0 3px rgba(124,140,255,.15);

}



/******************************************************
 BOUTONS BAS POPUP
******************************************************/

.popup_boutons
{

    display:flex;

    justify-content:flex-end;

    gap:12px;


    margin-top:25px;

}



.popup_boutons button
{

    padding:12px 22px;


    border:none;


    border-radius:12px;


    font-size:15px;


    font-weight:500;


    cursor:pointer;


    transition:.2s;

}



/******************************************************
 BOUTON SECONDAIRE
******************************************************/

.btn_secondaire
{

    background:#eeeeee;

    color:#444;

}



.btn_secondaire:hover
{

    background:#dddddd;

}
/*******************************************************
BOUTON RETOUR POPUP
*******************************************************/

.popup_retour
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;


    padding:10px 18px;


    border:none;

    border-radius:12px;


    background:#eeeeee;

    color:#444;


    font-size:15px;

    font-weight:500;


    cursor:pointer;


    transition:.2s;


    margin-bottom:20px;
}



.popup_retour:hover
{
    background:#dddddd;

    color:#222;
}


/******************************************************
 BOUTON PRINCIPAL
******************************************************/

.btn_principal
{

    background:#667eea;

    color:white;

}



.btn_principal:hover
{

    background:#5568d3;

}

/******************************************************
 LISTE DES TACHES
******************************************************/

.liste_tasks
{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:20px;

}



/******************************************************
 CARTE TACHE
******************************************************/

.task_item
{

    display:flex;

    align-items:flex-start;


    gap:12px;


    padding:15px;


    background:#fafafa;


    border:

        1px solid #e5e5e5;


    border-radius:14px;


    transition:.2s;

}



.task_item:hover
{

    background:#f7f8ff;


    border-color:#cfd5ff;

}



/******************************************************
 CHECKBOX
******************************************************/

.task_item input[type="checkbox"]
{

    width:20px;

    height:20px;


    margin-top:3px;


    cursor:pointer;


    accent-color:#667eea;

}



/******************************************************
 CONTENU TACHE
******************************************************/

.task_contenu
{

    flex:1;

}



.task_titre
{

    font-size:15px;

    font-weight:500;

    color:#333;


    margin-bottom:8px;

}



/******************************************************
 DATE TACHE
******************************************************/

.task_date
{

    display:flex;

    align-items:center;

    gap:10px;


}



.task_date label
{

    font-size:13px;

    color:#777;

}



.task_date input[type="date"]
{

    padding:8px 10px;


    border:

        1px solid #ddd;


    border-radius:10px;


    font-family:inherit;


    font-size:13px;


    background:white;

}



.task_date input[type="date"]:disabled
{

    background:#eeeeee;

    color:#999;

    cursor:not-allowed;

}



/******************************************************
 TACHE OBLIGATOIRE
******************************************************/

.task_item.obligatoire
{

    border-color:#667eea;

    background:#f8f9ff;

}



.task_item.obligatoire .task_titre::after
{

    content:"Obligatoire";

    display:inline-block;


    margin-left:8px;


    padding:3px 8px;


    border-radius:20px;


    font-size:11px;


    font-weight:500;


    background:#667eea;


    color:white;

}



/******************************************************
 CHARGEMENT
******************************************************/

.tasks_loading
{

    padding:20px;

    text-align:center;


    color:#777;


    font-size:14px;

}



/******************************************************
 MESSAGE AUCUNE TACHE
******************************************************/

.tasks_empty
{

    padding:20px;


    text-align:center;


    background:#f7f7f7;


    border-radius:12px;


    color:#777;

}

/******************************************************
 RESPONSIVE MOBILE
******************************************************/


@media (max-width:768px)
{


    .popup_overlay
    {

        padding:10px;

        align-items:flex-end;

    }



    .popup_addEvent
    {

        width:100%;

        max-height:95vh;

        padding:20px;


        border-radius:20px 20px 0 0;


        animation:

            popupMobileOpen .25s ease;

    }



    .popup_titre h2
    {

        font-size:22px;

    }



    .popup_titre p
    {

        font-size:14px;

    }



    .popup_boutons
    {

        flex-direction:column-reverse;

        gap:10px;

    }



    .popup_boutons button
    {

        width:100%;

        padding:14px;

    }



    .task_item
    {

        flex-direction:column;

        gap:10px;

    }



    .task_date
    {

        flex-direction:column;

        align-items:flex-start;

    }



    .task_date input[type="date"]
    {

        width:100%;

    }



}



/******************************************************
 PETITE ANIMATION MOBILE
******************************************************/

@keyframes popupMobileOpen
{

    from
    {

        opacity:0;

        transform:

            translateY(100px);

    }


    to
    {

        opacity:1;

        transform:

            translateY(0);

    }

}



/******************************************************
 ACCESSIBILITE
******************************************************/


button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible
{

    outline:

        3px solid rgba(102,126,234,.35);

    outline-offset:2px;

}



/******************************************************
 SCROLLBAR POPUP
******************************************************/


.popup_addEvent::-webkit-scrollbar
{

    width:8px;

}



.popup_addEvent::-webkit-scrollbar-track
{

    background:#f5f5f5;

    border-radius:10px;

}



.popup_addEvent::-webkit-scrollbar-thumb
{

    background:#cccccc;

    border-radius:10px;

}



.popup_addEvent::-webkit-scrollbar-thumb:hover
{

    background:#aaaaaa;

}

/******************************************************
 AUTH
******************************************************/

.popup_auth
{
	width:100%;
    max-width:520px;
}

.auth_switch button
{
    border:none;
    background:#667eea;
    color:white;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    cursor:pointer;

    font-weight:500;

    transition:.2s;
}


.auth_switch button:hover
{
    background:#5568d3;
}

/******************************************************
 PHOTOS
******************************************************/

.event_photos
{
    display:flex;
    align-items:center;
    gap:10px;
}


.btn_ajout_photo
{

    width:32px;
    height:32px;

    border:none;

    border-radius:50%;

    background:#667eea;

    color:white;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}


.btn_ajout_photo:hover
{

    background:#5568d3;

}

/* ==================================================
   POPUP CONTACTS
================================================== */

#popupFriends
{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.5);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:1000;
}



/* ==================================================
   CONTENU POPUP
================================================== */

#popupFriends .popup
{
    position:relative;

    width:90%;
    max-width:500px;

    max-height:90vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:12px;

    padding:25px;

    box-sizing:border-box;

    box-shadow:0 5px 25px rgba(0,0,0,0.25);
}



/* ==================================================
   FERMETURE
================================================== */

#popupFriends .popup_close
{
    position:absolute;

    top:10px;
    right:15px;

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

    color:#777;
}


#popupFriends .popup_close:hover
{
    color:#222;
}



/* ==================================================
   TITRE
================================================== */

#popupFriends .popup_titre
{
    text-align:center;

    margin-bottom:25px;
}


#popupFriends .popup_titre h2
{
    margin:0;
}



/* ==================================================
   SECTIONS
================================================== */

#popupFriends .friends_section,
#popupFriends .friends_invitation
{
    margin-top:20px;
}


#popupFriends h3
{
    margin-bottom:12px;
}

/* ==================================================
   SEPARATION
================================================== */

.friends_section
{
    border-top:1px solid #ddd;

    padding-top:20px;
}



/* ==================================================
   LISTES
================================================== */

#friends_requests,
#friends_list
{
    display:flex;

    flex-direction:column;

    gap:8px;
}



/* ==================================================
   CONTACT
================================================== */

.friend_ligne
{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px;

    border-radius:6px;

    background:#f7f7f7;
}


.friend_nom
{
    font-weight:500;
}


.friend_email
{
    font-size:0.85em;

    color:#777;
}



/* ==================================================
   BOUTONS CONTACT
================================================== */

.friend_action
{
    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;
}


.friend_action:hover
{
    transform:scale(1.1);
}



/* ==================================================
   CONTACT BLOQUE
================================================== */

.friend_ligne.bloque
{
    color:#d33;
}


.friend_ligne.bloque .friend_email
{
    color:#d33;
}

/* ==================================================
   FORMULAIRE INVITATION CONTACT
================================================== */

.friends_invitation_form
{
    display:flex;
    flex-direction:column;
    gap:10px;
}


/* ==================================================
   EMAIL INVITATION
================================================== */

.friends_invitation_form input[type="email"]
{
    width:100%;

    padding:13px 15px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#ffffff;

    box-sizing:border-box;

    font-family:inherit;

    font-size:15px;

    color:#333;

    transition:.2s;
}


.friends_invitation_form input[type="email"]:focus
{
    outline:none;

    border-color:#7c8cff;

    box-shadow:
        0 0 0 3px rgba(124,140,255,.15);
}


.friends_invitation_form input[type="email"]::placeholder
{
    color:#aaa;
}


/* ==================================================
   MESSAGE PERSONNEL
================================================== */

.friends_invitation_form textarea
{
    width:100%;

    min-height:110px;

    padding:14px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#ffffff;

    box-sizing:border-box;

    resize:vertical;

    font-family:inherit;

    font-size:15px;

    color:#333;

    transition:.2s;
}


.friends_invitation_form textarea:focus
{
    outline:none;

    border-color:#7c8cff;

    box-shadow:
        0 0 0 3px rgba(124,140,255,.15);
}


.friends_invitation_form textarea::placeholder
{
    color:#aaa;
}


/* ==================================================
   BOUTON INVITATION
================================================== */

.friends_invitation_form .popup_boutons
{
    margin-top:5px;
}

/* ==========================================================
   BOUTONS LISTES CONTACTS
========================================================== */

#popupFriends .friends_toggle
{
    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:13px 15px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#ffffff;

    color:#333;

    font-family:inherit;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    box-sizing:border-box;

    transition:.2s;
}


#popupFriends .friends_toggle:hover
{
    background:#f7f8ff;

    border-color:#cfd5ff;
}


#popupFriends .friends_toggle:focus
{
    outline:none;

    border-color:#7c8cff;

    box-shadow:
        0 0 0 3px rgba(124,140,255,.15);
}


#popupFriends .friends_toggle_icon
{
    font-size:13px;

    color:#777;

    transition:.2s;
}

/* ==========================================================
   DEMANDES DE CONTACT
========================================================== */

.friend_request
{
    display:flex;

    flex-direction:column;

    gap:10px;

    padding:12px;

    background:#f7f7f7;

    border:1px solid #e5e5e5;

    border-radius:10px;
}


/* ==========================================================
   EMAIL DEMANDE
========================================================== */

.friend_request_email
{
    font-size:14px;

    font-weight:500;

    color:#333;
}


/* ==========================================================
   MESSAGE DEMANDE
========================================================== */

.friend_request_message
{
    padding:8px 10px;

    background:#ffffff;

    border-radius:8px;

    color:#666;

    font-size:13px;

    line-height:1.4;

    border:1px solid #eeeeee;
}


/* ==========================================================
   BOUTONS DEMANDE
========================================================== */

.friend_request_buttons
{
    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:2px;
}


.friend_request_buttons button
{
    padding:8px 14px;

    border:none;

    border-radius:9px;

    font-family:inherit;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

    transition:.2s;
}


/* ==========================================================
   ACCEPTER
========================================================== */

.friend_request_buttons .btn_principal
{
    background:#667eea;

    color:#fff;
}


.friend_request_buttons .btn_principal:hover
{
    background:#5568d3;
}


/* ==========================================================
   REFUSER
========================================================== */

.friend_request_buttons .btn_secondaire
{
    background:#eeeeee;

    color:#444;
}


.friend_request_buttons .btn_secondaire:hover
{
    background:#dddddd;
}


/* ==========================================================
   BOUTONS DESACTIVES
========================================================== */

.friend_request_buttons button:disabled
{
    opacity:.6;

    cursor:not-allowed;
}

/******************************************************
 BOUTONS POPUP SUPPRESSION COMPTE
******************************************************/

#delete-compte .contact-actions
{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:20px;
}


#delete-compte .contact-actions button
{
    padding:12px 24px;

    border:none;

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:.2s;
}


/******************************************************
 BOUTON ANNULER
******************************************************/

#delete-compte .contact-actions .footer-popup-close
{
    position:static;

    width:auto;
    height:auto;

    background:#eeeeee;

    color:#444;

    font-size:15px;

    line-height:normal;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:8px;
}


#delete-compte .contact-actions .footer-popup-close:hover
{
    background:#dddddd;

    color:#222;
}


/******************************************************
 BOUTON SUPPRIMER
******************************************************/

#delete-compte #btnDeleteCompte
{
    background:#c0392b;

    color:#fff;
}


#delete-compte #btnDeleteCompte:hover
{
    background:#a93226;
}

/******************************************************
 GALERIE PHOTOS EVENEMENT
******************************************************/

.galerie_event
{
    display:grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:12px;

    margin-top:15px;
}


/******************************************************
 PHOTO
******************************************************/

.photo_item
{
    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    border-radius:12px;

    background:#f5f5f5;
}


/******************************************************
 IMAGE
******************************************************/

.photo_event
{
    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    cursor:pointer;

    transition:.2s;
}


.photo_event:hover
{
    transform:scale(1.03);
}


/******************************************************
 BOUTON SUPPRESSION
******************************************************/

.photo_item .supprimer_photo
{
    position:absolute;

    top:6px;
    right:6px;

    width:30px;
    height:30px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-size:16px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:5;
}


.photo_item .supprimer_photo:hover
{
    background:#c0392b;
}


/******************************************************
 PARTAGE PHOTO
******************************************************/

.photo_item .share_container
{
    position:absolute;

    left:6px;
    bottom:6px;

    z-index:5;
}


.photo_item .share_toggle
{
    padding:6px 9px;

    border:none;

    border-radius:8px;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-size:12px;

    cursor:pointer;
}


/******************************************************
 TABLETTE
******************************************************/

@media (max-width:900px)
{
    .galerie_event
    {
        grid-template-columns:
            repeat(2, 1fr);

        gap:10px;
    }
}


/******************************************************
 MOBILE
******************************************************/

@media (max-width:500px)
{
    .galerie_event
    {
        grid-template-columns:
            repeat(2, 1fr);

        gap:8px;
    }


    .photo_item .supprimer_photo
    {
        width:28px;

        height:28px;

        font-size:14px;
    }
}