#accueil, #authentification, #films, #series {
    color: #ffffff;
    padding: 15px;
    text-decoration: none;
    background-color: #151515;
    margin: 5px;

    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright:50px;
    -moz-border-radius-bottomleft:50px;
    -moz-border-radius-bottomright:50px;
    -webkit-border-top-left-radius:50px;
    -webkit-border-top-right-radius:50px;
    -webkit-border-bottom-left-radius:50px;
    -webkit-border-bottom-right-radius:50px;
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
}

/* Fin partie notation étoilée*/

/* ************************************ */

@media screen and (max-width: 680px) { /* affichage téléphone */
    img {
        height: 400px;
        width: 290px;
    }

    #affiche {
        height: 50vh; width: 80%;
        margin: 5% 0 0 0;
    }

    html {
        padding: 0;
    }

    main {
        padding-top: 30%;
        width: 100%;
    }

    main h1 {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 300%;
        margin-left: 3%;
        text-decoration: underline;
    }
    
    main h2, main p {
        color: #ffffff;
        font-size: 100%;
        font-family:Arial, Helvetica, sans-serif;
        margin-bottom: 5%;
        margin-left: 3%;
    }

    #infos-film {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #151515;
        margin: 2% 5% 0 5%;
    }

    #fiche-technique {
        margin: 2% 5% 2% 5%;
        width: 100%;
        text-align: left;
    }

    #résumé {
        color: #ffffff;
        font-family:Arial, Helvetica, sans-serif;
        margin-left: 3%;
        margin-right: 3%;
        font-size: 110%;
    }

    #note { 
        color: #ffffff;
        margin: 2% 5% 0% 3%;      
        font-family:Arial, Helvetica, sans-serif;
        
    }

    #Critiques {
        display: row;
        margin: 2% 5% 0 5%;
        height: 700px;
    }
    
    #note { 
        color: #ffffff;
        margin: 2% 5% 0% 3%;      
        font-family:Arial, Helvetica, sans-serif;
        
    }
    
    #une-critique {
        margin: 3% 3% 3% 3%;
        width: 93.6%;
        height: 30%;
        display: flex;
        position: relative;
    }

    #formulaire-supprimer-critique { 
        display: none;
        margin-bottom: 0;
    }
    
    #bouton-supprimer-critique {
        color: #DD31FF;
        right: 0;
        font-size:xx-large;
    }
    
    #bouton-supprimer-critique:hover {
        border: #DD31FF solid 1px;
    }

    #une-critique:hover {
        cursor: pointer;
    }
    
    #une-critique:hover>#formulaire-supprimer-critique {
        color: #DD31FF;
        display: block;
    }
    
    #Photo-de-profil {
        margin: 10% 5% 5% 5%;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        /*border: 3px red inset;*/
    }
    
    #boite-de-texte {
        margin: 2% 2% 2% 2%;
        width: 200%;
        overflow-y: hidden;
    }
    
    #contenu-de-la-critique {
        color: #ffffff;
    }
    
    #lien-profil-internaute {
        width: 15%;
    }
    
    #formulaire_ajout_critique, #toutes-les-critiques {
        background-color: #151515;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        margin: 3% 0 3% 0;
    }
    
    #boite_form_titre_critique {
        margin-top: 0;
        width: 99%;
        margin-bottom:0;
    }
    
    #boite_form_contenu_critique {
        width: 99%;
        margin-top:0;
        margin-bottom:0;
    }

    button {
        background-color: #151515;
        border: none;
    }
    
    button:hover {
        background-color: #151515;
        border: none;
        cursor: pointer;
    }
    
    #input-titre_critique {
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: #151515;
        border: none;
        width: 75%;
    }
    
    #input-titre_critique:focus, #input_contenu_critique:focus {
        outline:  none;
    }
    
    #input_contenu_critique {
        padding-bottom: 8%;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: #151515;
        border: none;
    }
    
    #affichage-note {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        margin: 0 2% 2% 0; padding-top: 1%;
    }

    #une-critique {
        display: flex;
        flex-direction: row;
        height: 100px; width: 100%;
        margin-right: 0;
        margin-top: 5%;
    }
    
    #infos-utilisateur {
        position: flex;
        display: flex;
        flex-direction: column;
        width: 20%;
        align-items: center;
    }
    
    #contenu-critique {
        width: 72%;
    }
    
    #contenu_critique {
        width: 98%;
    }
    
    #ajouterCritique {
        position: absolute;
        border-radius: 50%;
        height: 20%;
        width: auto;
        margin-top: 1%;
    }
    
    #ajouterCritique {
        border-radius: 50%;
        height: 6vh; width: 6vh;
    }
    
    #nom-chroniqueur {
        text-align: center;
        margin-top: 85%;
        color: #DD31FF;
        text-decoration: none;
        font-size: medium;
    }
    
    #input-titre_critique {
        width: 100%;
        height: 20px;
    }
    
    #input_contenu_critique {
        height: auto;
        width: 100%;
        resize: none;
    }
    
    #titre-critique, #contenu-critique {
        margin-left: 3%;
        color: #ffffff;
        text-decoration: none;
    }
    
    #titre-critique {
        font-size: 150%;
    }
    
    #affichage-note {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    
    /* Partie notation étoilée */
    
    #titre-et-note {
        display: flex;
        flex-direction: row;
        height: 40px;
    }

    #titre-et-note-critiques {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 40px;
    }

    /*#titre-et-note-critique p{
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
    }*/
    
    #notation-étoilée {
        display: flex;
        position: relative;
        width: 25%;
    }
    
    input[type="radio"] {
        display: none;
    }
    
    #star-background {
        color: #ffffff;
        height: 5px;
    }
    
    input[type="radio"] + label {
        color: transparent;
        position: absolute;
        top: 25%; left: 50%;
    }
    
    input[type="radio"]:hover + label {
        cursor: pointer;
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    
    input[type="radio"]:checked + label {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
    }

}

@media screen and (min-width: 681px) { /* affichage ordinateur */
    img {
        height: 95%;
    }

    main h1 {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 300%;
        margin-left: 3%;
        text-decoration: underline;
    }
    
    main h2, main p {
        color: #ffffff;
        font-size: 100%;
        font-family:Arial, Helvetica, sans-serif;
        margin-bottom: 5%;
        margin-left: 3%;
    }
    
    #résumé {
        color: #ffffff;
        font-family:Arial, Helvetica, sans-serif;
        margin-left: 3%;
        margin-right: 3%;
        font-size: 110%;
    }
    
    #infos-film {
        display: flex;
        margin: 2% 5% 0 5%;
        height: 700px;
        background-color: #151515;
        align-items: center;
        margin-top: 10%;
    }
    
    #fiche-technique {
        margin: 2% 5% 2% 5%;
        width: 100%;
        text-align: left;
    }
    
    #affiche {
        margin: 0 0 0 5%;
        width: 100%; height: 90vh;
    }
    
    #Critiques {
        display: row;
        margin: 2% 5% 0 5%;
        height: 700px;
    }
    
    #note { 
        color: #ffffff;
        margin: 2% 5% 0% 3%;      
        font-family:Arial, Helvetica, sans-serif;
        
    }
    
    #une-critique {
        margin: 3% 3% 3% 3%;
        width: 93.6%;
        height: 30%;
        display: flex;
        position: relative;
    }
    
    #formulaire-supprimer-critique { 
        display: none;
        margin-bottom: 0;
    }
    
    #bouton-supprimer-critique {
        color: #DD31FF;
        right: 0;
        font-size:xx-large;
    }
    
    #bouton-supprimer-critique:hover {
        border: #DD31FF solid 1px;
    }
    
    #une-critique:hover {
        cursor: pointer;
    }
    
    #une-critique:hover>#formulaire-supprimer-critique {
        color: #DD31FF;
        display: block;
    }
    
    #Photo-de-profil {
        margin: 10% 5% 5% 5%;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        /*border: 3px red inset;*/
    }
    
    #boite-de-texte {
        margin: 2% 2% 2% 2%;
        width: 200%;
        overflow-y: hidden;
    }
    
    #contenu-de-la-critique {
        color: #ffffff;
    }
    
    #lien-profil-internaute {
        width: 15%;
    }
    
    #formulaire_ajout_critique, #toutes-les-critiques {
        background-color: #151515;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        margin: 3% 0 3% 0;
    }
    
    #boite_form_titre_critique {
        margin-top: 0;
        width: 99%;
        margin-bottom:0;
    }
    
    #boite_form_contenu_critique {
        width: 99%;
        margin-top:0;
        margin-bottom:0;
    }
    
    button {
        background-color: #151515;
        border: none;
    }
    
    button:hover {
        background-color: #151515;
        border: none;
        cursor: pointer;
    }
    
    #input-titre_critique {
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: #151515;
        border: none;
        width: 75%;
    }
    
    #input-titre_critique:focus, #input_contenu_critique:focus {
        outline:  none;
    }
    
    #input_contenu_critique {
        padding-bottom: 8%;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: #151515;
        border: none;
    }
    
    #affichage-note {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        margin: 0.5% 2% 0% 0%; padding-top: 1%;
    }
    
    /* ************************************ */
    
    #une-critique {
        display: flex;
        flex-direction: row;
        height: 200px; width: 80%;
        margin-left: 10%; margin-right: 10%;
        margin-top: 5%;
        box-shadow: 5px 5px 5px 5px #000000;
    }
    
    #infos-utilisateur {
        position: flex;
        display: flex;
        flex-direction: column;
        width: 20%;
        align-items: center;
    }
    
    #contenu-critique {
        width: 80%;
    }
    
    #contenu_critique {
        width: 65%;
    }
    
    #ajouterCritique {
        position: absolute;
        border-radius: 50%;
        height: 20%;
        width: auto;
        margin-top: 1%;
    }
    
    #ajouterCritique {
        border-radius: 50%;
        height: 20vh; width: 20vh;
    }
    
    #nom-chroniqueur {
        text-align: center;
        margin-top: 85%;
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-decoration: none;
        font-size:xx-large;
    }
    
    #input-titre_critique {
        width: 250%;
        height: 20px;
    }
    
    #input_contenu_critique {
        height: auto;
        width: 130%;
        resize: none;
    }
    
    #titre-critique, #contenu-critique {
        margin-left: 2.5%;
        color: white;
        text-decoration: none;
    }
    
    #titre-critique {
        font-size: 150%;
    }
    
    #affichage-note {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    
    /* Partie notation étoilée */
    
    #titre-et-note {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 40px;
    }

    #titre-et-note-critiques {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 40px;
    }
    
    #notation-étoilée {
        display: flex;
        position: relative;
        width: 25%;
    }
    
    input[type="radio"] {
        display: none;
    }
    
    #star-background {
        color: #ffffff;
        height: 5px;
    }
    
    input[type="radio"] + label {
        color: transparent;
        position: absolute;
        top: 25%; left: 50%;
    }
    
    input[type="radio"]:hover + label {
        cursor: pointer;
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    
    input[type="radio"]:checked + label {
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        background-clip: text;
    }
}