/* variables */
:root {
    --vert_principale : #83CD60;
    --vert_claire : #3fc701;
    --bonton-appuier : #226d00;
}

/* landing page */

body {
    margin: 0px;
}
.haut-de-page {
    display: flex;
    justify-content: space-between;
}
.titre {
    width: 700px;
    display: flex;
    justify-content: flex-start;
    align-items:center ;
    margin: 15px;
}
.Connexion {
    width: 160px;
    display: flex;
    justify-content: flex-end;
    justify-content: space-around;
    align-items: center;
    border: solid black 3px;
    border-radius: 25px;
    margin: 15px;
}
.liens-connexion {
    text-decoration: none;
    color: black;
}
.premier_h1 {
    display: flex;
    justify-content: center;
    font-size: large;
}
.commencer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bouton-commencer {
    padding: 11px;
    margin: 50px;
    background-color: #83CD60;
    border-radius: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;

}
.liens-commencer {
    text-decoration: none;
    color: black;
}
.image_commencer {
    display: flex;
    justify-content: center;
}
.blocs-fonctionnalites {
    display: flex;
    justify-content: space-around;
    margin: 100px;
    padding: 25px;
    width: 85%;
}
article {
    background-color: #83CD60;
    margin: 45px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.deuxieme-h1 {
    display: flex;
    justify-content: left;
    justify-content: space-around;
    align-items: center;
    font-size: large;
}
.troisieme-h1 {
    display: flex;
    justify-content: center;
    font-size: large;
}
.image_longue {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
footer {
    background-color: #83CD60;
    padding: 34px;
    display: flex;
    justify-content: space-around;
    
}


/* Inscription et connexion */

.image-fond {
    background-image: url("../image/football-tir-1024x526.webp");
    background-repeat: no-repeat;
    background-position: center;
}
.retour-index {
    text-decoration: none;
    color: black;
}
.formulaire-inscription {
    display: flex;
    justify-content: center;
    align-items: center;
}
.formulaire {
    padding: 45px;
    margin: 50px;
    background-color: #83CD60;
    border-radius: 30px;
    font-size: 20px;
    width: 28%;
    display: flex;
    align-items: center;
    flex-direction: column;
    
}
input {
    width: 250px;
    padding: 9px;
    font-size: large;
}
.avoir-compte {
    display: flex;
    justify-content: center;
}
.bouton-avoir-compte {
    display: flex;
    text-decoration: none;
    color: #0088ff;
    font-size: medium;
    
}
.titre-inscription {
    display: flex;
    justify-content: center;
    background-color: #83CD60;
    font-size: 29px;
}
.titre-sinscrire {
    display: flex;
    justify-content: center;
}
.bouton-inscription {
    border: solid black 1px;
    padding: 5px;
    width: 50%;
    background-color: var(--vert_claire);
    border-radius: 15px;
}
.bouton-inscription-liens {
    text-decoration: none;
    color: black;
    display: flex;
    justify-content: center;
}


/* page feed */

.grand-h1-publication {
    text-decoration: underline;
}
.publication-antoine {
    background-color: var(--vert_claire);
    padding: 15px;
    border-radius: 25px;
}
.publication-francois {
    background-color: var(--vert_claire);
    padding: 15px;
    border-radius: 25px;
    margin-top: 34px;
}
.pp-antoine {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-right: 20px;
}
.pp-francois {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-right: 20px;
}
.profil-francois {
    display: flex;
    align-items: center;
    padding-block-end: 55px;  
    padding: 15px;
    margin: 10px;
    border-radius: 15px;
    background-color: var(--vert_principale);
}
.profil-antoine {
    display: flex;
    align-items: center;
    padding-block-end: 55px;
    padding: 15px;
    margin: 10px;
    border-radius: 15px;
    background-color: var(--vert_principale);
}
.titre-publication {
    width: 40%;
}
.stats-publication {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 99%;
}
.stats {
    margin: 20px;
}
h5 {
    margin: 43px;
    color: #9c9494;
}
.amis-feed {
    display: flex;
    align-items: center;
    background-color: var(--vert_claire);
    width: 68%;
    border-radius: 15px;
    margin: 10px;
}
.icone-amis {
    margin-right: 35px;
    margin-left: 35px;
}
.notification-feed {
    display: flex;
    align-items: center;
    background-color: var(--vert_claire);
    width: 68%;
    border-radius: 15px;
    margin: 10px;
}
.icone-notif {
    margin-right: 35px;
    margin-left: 35px;
}
.video-feed {
    display: flex;
    align-items: center;
    background-color: var(--vert_claire);
    width: 68%;
    border-radius: 15px;
    margin: 10px;    
}
.icone-video {
    margin-right: 35px;
    margin-left: 35px;    
}
.parametre-feed {
    display: flex;
    align-items: center;
    background-color: var(--vert_claire);
    width: 68%;
    border-radius: 15px;
    margin: 10px;      
}
.icone-parametre {
    margin-right: 35px;
    margin-left: 35px;     
}
.message-feed {
    display: flex;
    align-items: center;
    background-color: var(--vert_claire);
    width: 68%;
    border-radius: 15px;
    margin: 10px;    
}
.icone-message {
    margin-right: 35px;
    margin-left: 35px;     
}
.profil-feed {
    display: flex;
    align-items: center;
    width: 25px;
    margin: 20px;
}
.nav-feed {
    background-color: var(--vert_principale);
    width: 19%;
    padding-top: 20px;
    padding-block-end: 100px;
    margin-block-end: 55px;
}
.contenu {
    display: flex;
    height: 100vh;
}
.nav-feed {
    width: 29%;
    overflow: auto;
    padding: 20px;
    border: solid black 2px;
}
.publication-feed  {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background-color: var(--bonton-appuier);
    border: solid black 2px;
}
.liens-nom-utilisateur {
    text-decoration: none;
    color: black;
}
.liens-feed {
    text-decoration: none;
    color: black;
    width: 68%;
}
/*source du scroll à droite mais pas à gauche (un peut modifier dans mon code) : https://benfrain.com/independent-scrolling-panels-body-scroll-using-just-css/ */


/* page profil */

.baniere-profil {
    background-color: #83CD60;
    padding: 15px;
}
.retour-page-feed {
    display: flex;
    justify-content: left;
    background-color: var(--vert_claire);
    width: 50px;
    border-radius: 50px;
    padding: 10px;
}
.parametre-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--vert_claire);
    width: 50px;
    border-radius: 50px;
    padding: 10px;
}
.bloc-retour {
    display: flex;
    justify-content: left;
    margin: 15px;
    width: 20%;
}
.bloc-parametre {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 25px;
    margin: 15px;
}
.retour-parametre {
    display: flex;
    justify-content: space-between;
}
.photo-profil {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--vert_claire);
    width: 50%;
    border-radius: 25px;
    margin-block-end: 25px;
    margin-top: 22px;
}
.utlilisateur-club {
    display: flex;
    flex-direction: column;
}
.stats-profil {
    background-color: var(--vert_claire);
    border: solid black 2px;
    display: flex;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 44px;
}
.publication {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: solid black 2px;
    padding: 45px;
    border-radius: 25px;
    background-color: var(--vert_principale);
    width: 15%;
}
.followers {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: solid black 2px;
    padding: 45px;
    border-radius: 25px;
    background-color: var(--vert_principale);
    width: 15%;
}
.suivi {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: solid black 2px;
    padding: 45px;
    border-radius: 25px;
    background-color: var(--vert_principale);
    width: 15%;
}
.a-propos-de-moi {
    background-color: var(--vert_principale);
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bio {
    background-color: var(--vert_claire);
    padding: 50px;
    width: 75%;
    display: flex;
    justify-content: center;
    border-radius: 25px;
    border: solid black 2px;
}
.contenu-perso {
    background-color: var(--vert_claire);
    padding: 32px;
    border: solid black 2px;
    display: flex;
    align-items: center;
    flex-direction: column;
}


/* parametres */

.categorie-parametres {
    width: 29%;
    overflow: auto;
    padding: 20px;
    background-color: var(--vert_principale);
    border: solid black 2px;
}
.contenu-parametre {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background-color: var(--vert_claire);
    border: solid black 2px;
}

.utilisateur-compte {
    background-color: var(--bonton-appuier);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    justify-content: space-around;
    margin: 10px;
}
.accesibilité {
    background-color: var(--vert_claire);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    justify-content: space-around;
    margin: 10px;
}
.notification {
    background-color: var(--vert_claire);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    justify-content: space-around;
    margin: 10px;
}
.langue-region {
    background-color: var(--vert_claire);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    justify-content: space-around;
    margin: 10px;
}
.politique-confidentialité {
    background-color: var(--vert_claire);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    justify-content: space-around;
    margin: 10px;
}
.infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--vert_principale);
    padding: 5px;
    border-radius: 25px;
    margin: 15px;
}
.bloc-titre-parametre {
    flex-direction: column;
}
.déconnexion {
    text-decoration: none;
    color: rgb(196, 33, 33);
}
.déconnexion-bloc {
    display: flex;
    justify-content: center;
}
.titre-parametres {
    background-color: var(--vert_principale);
    width: 100%;
    padding: 17px; 
    border: solid black 2px;
    font-size: large;
}


/* Messages */

.contact-antoine {
    background-color: var(--bonton-appuier);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 18px;
    margin: 10px;
}
.contact-francois {
    background-color: var(--vert_claire);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 18px;
    margin: 10px;
}
.contact-moi {
    background-color: var(--vert_claire);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 18px;
    margin: 10px;
}
.pp-antoine {
    width: 68px;
    height: 68px;
}
.pp-francois {
    width: 68px;
    height: 68px;
}
.contacts {
    background-color: var(--vert_principale);
    width: 29%;
    overflow: auto;
    padding: 20px;
    border: solid black 2px;
}
.conversation-antoine {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background-color: var(--vert_claire);
    border: solid black 2px;
}
.en-tete-conversation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    background-color: var(--vert_principale);
    padding: 10px;
    margin: 3px;
    border-radius: 25px;
    border: solid black 2px;
}
.pseudo-antoine {
    display: flex;
    align-items: center;
}
.appel {
    align-items: center;
}
.appel-video {
    margin-left: 25px;
    margin-right: 25px;
}
.premier-msg {
    background-color: var(--vert_principale);
    padding: 15px;
    margin: 15px;
    margin-top: 45px;
    width: 22%;
    border-radius: 25px;
}
.second-msg {
    background-color: var(--vert_principale);
    padding: 15px;
    margin: 15px;
    margin-top: 45px;
    width: 55%;
    border-radius: 25px;
}
.barre-msg {
    display: flex;
    align-items: end;
    margin-top: 200px;
    background-color: var(--vert_principale);
    padding: 24px;
    border-radius: 25px;
    border: solid black 2px;
}
.photo-msg {
    margin-right: 23px;
    margin-left: 23px;
}
.titre-message {
    background-color: var(--vert_principale);
    width: 100%;
    padding: 10px; 
    border: solid black 2px;
    font-size: large;
}


/* Amis */

.titre-amis {
    background-color: var(--vert_principale);
    width: 100%;
    padding: 10px; 
    border: solid black 2px;
    font-size: large;
    display: flex;
    flex-wrap: wrap;
}
.pp-utilisateur-2 {
    width: 78px;
    height: 78px;
    border-radius: 55px;
}
.en-attente {
    background-color: var(--vert_principale);
    width: 45%;
    overflow: auto;
    padding: 10px;
    border: solid black 2px;
}
.suggestion {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background-color: var(--vert_claire);
    border: solid black 2px;
}
.demande-en-attente {
    background-color: var(--vert_claire);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 9px;
    border-radius: 25px;
    justify-content: space-between;
}
.accepter {
    background-color: var(--bonton-appuier);
    padding: 11px;
    border-radius: 25px;
}
.refuser {
    background-color: red;
    padding: 11px;
    border-radius: 25px;
}
.accepter-refuser {
    display: flex;
    flex-direction: column;
}
.compte-utilisateur-1 {
    display: flex;
    align-items: center;
}
.pp-utilisateur-3 {
    width: 78px;
    height: 78px;
    border-radius: 55px;
}
.utilisateur-3 {
    background-color: var(--vert_principale);
    padding: 9px;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block-end: 40px;
}
.compte-utilisateur-3 {
    display: flex;
    align-items: center;
}
.envoyer {
    display: flex;
    align-items: center;
    background-color: var(--bonton-appuier);
    padding: 9px;
    border-radius: 25px;
}
.pp-utilisateur-4 {
    width: 78px;
    height: 78px;
    border-radius: 55px;
}
.utilisateur-4 {
    background-color: var(--vert_principale);
    padding: 9px;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block-end: 40px;
}
.compte-utilisateur-4 {
    display: flex;
    align-items: center;
}
.pp-utilisateur-5 {
    width: 78px;
    height: 78px;
    border-radius: 55px;
}
.utilisateur-5 {
    background-color: var(--vert_principale);
    padding: 9px;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block-end: 40px;
}
.compte-utilisateur-5 {
    display: flex;
    align-items: center;
}

/* Police Titre */


.titre-total {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}