/* name = freebox_6.3_freebox.css
Author = Thibaut LEMAIRE
Dates = 2022
date de modification : 14/11/2025
*/



:root {
  color-scheme: dark;
}

body{
    background: white;
}
header {
    position: fixed;
    top: 1px;
    width: 100%;
    /* pour les themes nav Safari force Black*/
    background: light-dark(rgb(5, 2, 2), rgb(5, 2, 2));
}

section a .free-logo {
    width: 65px;
    height: 40px;
}

.grid-dispo {
    display: grid;
}


.img-8K img {
    margin: 5px;
    padding: 25px;
    width: 70%;

}

/* relatif à la page TOP 5 Netflix */
.img-flix img {
    margin: 5px;
    padding: 25px;
    width: 120px;

}

.top5_image {
    width: 120px;
    height: 60px;

}

.img-oldtv:hover {
    rotate: 5deg;
}

.logo-tv:hover {
    rotate: 6deg;
}

.freebox-materiel {
    width: 250px;
    padding: 10px;
    height: 150px;
    margin: 45px;
}



.tuto-python {
    margin: 15px;
    margin-left: 45px;
    width: 65%;
    height: auto;
    padding: 2px;
    border: 3px solid #8ebf42;
}

.free_init_text {
    padding-top: 20px;
}

.reseaux_free {
    width: 50%;
    margin: 0px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
    display: inline-block;

}

#red {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    border: 1px;
    background-color: red;
    margin: 5px;
}

#blue {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    border: 1px;
    background-color: dodgerblue;
    margin: 5px;
}

#purple {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    border: 1px;
    background-color: rebeccapurple;
    margin: 5px;
}

#text-test1 {
    text-align: center;
    color: black;
    font-size: xx-large;
    font-family: "arial black", georgian, verdena, arial, sans-serif;
    font-weight: bold;
    margin: 15px;
    padding: 15px;
}

footer p {
    color: whitesmoke;
}

table {
    border-collapse: collapse;

}

section {
    margin-bottom: 50px;
}


/*ancien css du MENU*/
nav,
article {
    width: 1000px;
    margin: 0px auto;
}

code {
    margin-top: 10px;
    background-color: yellowgreen;
}

nav ul {
    margin-bottom: 3px;
    margin-left: 3px;
    margin-top: 4px;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
}

nav,
article {
    border-bottom: 1px solid grey;
}

article {
    margin-left: 20px;
}

/*nav bar est le menu de navigation en haut*/

/* année est le menu en bas de l'écran*/
p .année {
    width: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    bottom: 0px;
    text-align: center;
}

p .reseauxsoc {
    width: 100%;
    background-color: white;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    bottom: 15px;
    text-align: center;
}

.imgiptv {
    width: 600px;
    height: 300px;
    padding: 10px;
}

.text1 {
    padding: 0px;
    margin: 5px;

}

.text-format {
    background-color: rgb(253, 243, 243);
    margin: 20px;
    padding: 10px;
}

.text-autre {
    background-color: bisque;
    margin: 20px;
    padding: 20px;
}

.click {
    width: 55px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

.home80 {
    position: fixed;
    width: 50px;
    height: 50px;
    top: 35px;
    right: 7px;
}

.mailblack {
    position: fixed;
    width: 50px;
    height: 45px;
    top: 105px;
    right: 7px;
}

.photo-sources {
    padding-top: 20px;
}

.facebookblack {
    position: fixed;
    width: 50px;
    height: 45px;
    top: 150px;
    right: 7px;
}

.instablack {
    position: fixed;
    width: 50px;
    height: 45px;
    top: 195px;
    right: 7px;
}

.spotifyblack {
    position: fixed;
    width: 50px;
    height: 45px;
    top: 240px;
    right: 7px;
}

.pinterest {
    position: fixed;
    width: 50px;
    height: 45px;
    top: 285px;
    right: 7px;
}
.raspi-picture {
    /* relative a l'image dans le header */
    width: 70px;
    padding: 0;
    margin: 0;

}
.center {
    margin: 4px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.intro-etapes {
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.liens-youtube {
    margin-left: 25px;
    text-decoration: none;
    text-align: left;
    color: darkslategrey;
    font-family: verdana, sans-serif;
}

/*commentaire CSS du texte attention générale et les lien <A> sont dans des <P> CSS*/
p {
    font-size: medium;
    font-family: "SourceSansPro-Black", sans-serif;
    font-stretch: expanded;
    color: black;
    padding-left: 25px;
    padding-right: 20px;
    margin: 5px;
}


h1 {
    text-align: center;
    color: black;
    font-size: xx-large;
    font-family: "arial black", georgian, verdena, arial, sans-serif;
    font-weight: bold;
    margin: 15px;
    padding: 15px;
}



h2 {
    text-align: left;
    font-size: x-large;
    font-family: "arial black", georgian, verdena, arial, sans-serif;
    color: black;
    margin: 5px;
    padding: 15px;
}

h3 {
    text-align: left;
    font-size: large;
    font-family: "arial black", georgian, verdena, arial, sans-serif;
    color: black;
    margin: 0;
    margin-top: 15px;
    margin-left: 25px;
    padding: 15px;
}



h4 {
    text-align: left;
    font-family: "arial black", georgian, verdana, arial, sans-serif;
    padding: 15px;
    margin: 5px;
    font-size: medium;
    color: black;
    text-decoration: none;

}

li {
    padding: 5px;
    background-color: aqua;
    font-size: small;
    font-family: "arial black", georgian, verdana, sans-serif;
    color: black;
    padding-left: 15px;
    padding-right: 20px;
    margin: 0px;
    width: 65%;
    margin-right: 20px;
    margin-left: 20px;
    list-style: none;
}


.invisible {
    color: black;
    text-decoration: none;
}

a

/*apparence par default*/
    {
    color: rgb(5, 5, 180);
}


a:hover

/*apparence lorsque l'on pointe la souris dessus*/
    {
    color: rgba(5, 5, 150, 0.6);

}

a:active

/*apparence Lors DU CLIC de la souris*/
    {
    color: rgba(5, 5, 150, 0.5);
}

.fleche {
    padding: 15px;
}

.footer-space {
    margin-bottom: 90px;
}

/*requete a media conception adapatative*/