Reupload v1.0

css/aPropos.css

@@ -0,0 +1,83 @@
+/*
+ * aPropos.css
+ *
+ * @author Vabre Lucas, Nogaret Tristan
+ */
+
+:root { /* Pour scroll fluidement jusqu'a l'encrage */
+	scroll-behavior: smooth;		/* Rend le scroll lent et ne fais pas mal aux yeux */
+}
+
+.mini-menu { /* Caractéritiques du mini-menu */
+	border-radius: 5px;							/* Arrondi les coin du menu */
+	padding: 20px;								/* Defini les merges internes du menu */
+	margin: 10px;								/* Défini les marges extérieurs du menu */
+	background-color: var(--overlay-color);		/* Attribue la 2e couleur de fond au menu */
+	display: inline-block;						/* Affiche les element en ligne */
+	position: fixed;							/* Fixe la position du menu */
+	top: 0;										/* Aligne le menu en haut */
+	z-index: 9999;								/* Affiche le menu au prmier plan */
+}
+
+.mini-menu ul { /* Caractéristiques de la liste du menu */
+	display: inline-block;		/* Affiche les element en ligne */
+	padding: 0;					/* Defini les marges interieures */
+	margin: 0;					/* Defini les marges extérieures */
+}
+
+.mini-menu li { /* Caractéristqiues des elements de la liste */
+	text-decoration: none;		/* Enleve les décoration appliqué au texte */
+}
+
+.mini-menu p { /* Modifie l'aspect du texte dans le menu */
+	margin: 0;				/* Defini la marge externes du texte */
+	text-align: left;		/* Aligne le texte à gauche */
+}
+
+.profil { /* Caractéristiques des photos */
+	border-radius: 50%;			/* Mets les photos sous formes de disques */
+	width: 120px;				/* Défini ses dimensions */
+	filter: grayscale(1);		/* Attribut un filtre noir et blanc */
+	display: inline-block;		/* Affiche la photo en ligne */
+}
+
+.name-block { /* Caractéristiques du bloc de nom */
+	display: inline-block;		/* Affiche les éléments en ligne */
+	vertical-align: top;		/* Aligne le block nom en haut */
+}
+
+.name { /* Caractériqtiques du nom */
+	margin-bottom: 0;		/* Définie la marge inférieure du nom phonétique */
+}
+
+.name-ph { /* Caractéristques du nom phonétiques */
+	margin-top: 0;		/* Définie la marge supérieure du nom phonétique */
+}
+
+
+article { /* Caractéristiques de la section */
+	background-color: var(--overlay-color);		/* Attribue la 2e couleur de fond a la section */
+	border-radius: 5px;							/* Arrondi les coin du menu */
+	padding: 25px;								/* Modifie les marges intérieures */
+	margin-top: 15px;							/* Modifie la marge extérieure suérieures */
+}
+
+.section-right { /* Caractéristqiue des sections à droite */
+	margin-top: 50px;		/* Modifie la marge extérieure supérieures */
+}
+
+.section-right div { /* Caractéristqiue de la sous branche div des sections à droite */
+	margin-left: 50%;		/* Modifie la marge extérieure gauche */
+}
+
+.section-right div div {
+	margin-left: 0;
+}
+
+.section-right article { /* Caractéristqiue de la sous branche article des sections à droite */
+	margin-left: 50%;		/* Modifie la marge extérieure gauche */
+}
+ 
+.section-left { /* Carctéristiques des sections à gauches */
+	margin-right: 50%;		/* Modifie la marge extérieure droite */
+}

css/abonnement.css

@@ -0,0 +1,79 @@
+/*
+ * abonnement.css
+ *
+ * Feuille de style utilisé dans contact.css
+ * 
+ * @author Nogaret Tristan, Vabre Lucas
+ */
+
+.div_a { /* Modifie les caractéristiques de la premières div*/
+	margin-top: 50px;		/* Crée un marge de 50px vers le haut */
+}
+
+.offre { /* Modifie les caractéristiques du cadre princpal, celui du haut */
+	margin: auto;				/* Donne les marge de manière automatique */
+	vertical-align: middle;		/* Aligne la case au milieu de la page */
+	text-align: center;			/* Aligne le texte au centre de la case */
+	width: 70%;					/* Définie la largeur que cela prnd sur la page du site */
+}
+
+.avantages { /* Modifie les caractéristiques des 3 cadres du bas */
+	margin: auto;					/* Définie les bordures extérieures de manière automatique */
+	vertical-align: middle;			/* Aligne le tableau au centre de la page */
+	text-align: center;				/* Aligne le texte au centre de la case du tableau */
+	border-collapse: separate;		/* Sépare les cases du tableau d'un nombre de pixel indiqué en dessous */
+	border-spacing: 25px;			/* Donnel'écart entre les case du tableau */
+	width: 73%;						/* Définie la taille que cela prends sur la page */
+}
+
+.cout { /* Modifie les caractéristiques du cadre princpal, celui du haut */
+	margin: auto;				/* Définie les bordures extérieures de manière automatique */
+	vertical-align: middle;		/* Aligne la case au ilieu de la page */
+	text-align: center;			/* Aligne le texte au milieu */
+	width: 40%;					/* Définie la place que le cadre prends sur la page */
+	margin-bottom: 25px;		/* Définie la marge du bas */
+}
+
+caption { /* Modifie les caractéristiques de "Les avantages :" */
+	margin: 25px 0px -20px 25px;		/* Définie bordures extérieurs du titre de tableau */
+	text-align: left;					/* Aligne le texte à gauche */
+}
+
+.boutton { /* Modifie les caractéristiques du bouton */
+	margin-left: calc(85% - 120px);		/* Place le bouton à l'endroit adéquats sur la page */
+	font-size: 1.3em;					/* définie la taille du texte */
+	padding: 20px;						/* Définie la taille des marges internes*/
+
+	transition: all 0.2s;		/* Défini la durée des transitions */
+}
+
+td { /* Modifie les caractéristiques de toutes les cases de tout les tableaux */
+	border-radius: var(--border-radius-5);		/* Crée un bord arrondi pour les cases */
+}
+
+/* Modification des couleurs pour chaque case (et de la taille de la première case) */
+
+.titre { /* Modifie les caractéristiques du cadre du haut */
+	background: linear-gradient(#9b59b6, #8e44ad);		/* Donne un dégradé et défini la couleur (dégradé de violet) */
+	height: 400px;										/* Modifie la hauteur de la case */
+}
+
+.titre > h3 {
+	color: var(--text-color);		/* Donne la couleur du texte en fonction du light ou dark mode */
+}
+
+.td1 { /* Modifie les caractéristiques du cadre de droite */
+	background: linear-gradient(45deg, #e74c3c, #c0392b);		/* Donne un dégradé et défini la couleur (dégradé de rouge) */
+}
+
+.td2 { /* Modifie les caractéristiques du cadre du milieu */
+	background: linear-gradient(45deg, #2ecc71, #27ae60);		/* Donne un dégradé et défini la couleur (dégradé de vert) */
+}
+
+.td3 { /* Modifie les caractéristiques du cadre de gauche */
+	background: linear-gradient(45deg, #3498db, #2980b9);		/* Donne un dégradé et défini la couleur (dégradé de bleu) */
+}
+
+.prix { /* Modifie les caractéristiques du cadre du bas */
+	background: linear-gradient(#9b59b6 , #8e44ad);		/* Donne un dégradé et défini la couleur (dégradé de violet) */
+}

css/card.css

@@ -0,0 +1,99 @@
+/*
+ * card.css
+ *
+ * Affichage des cartes, utilisé dans le index.html
+ * 
+ * @author Vabre Lucas, Nogaret Tristan
+ */
+
+/* ### Variables principales utilisés ### */
+:root { /* caractéristiques de la page */
+	--border-card-radius: 5px;		/* Arrondi les coins */
+}
+
+/* ### Collection de Cartes (en ligne) ### */
+.card-collection { /* carctéristiques des cartes de collections */
+	text-align: center;		/* Centre le texte, et les blocs surtout */
+}
+
+.categorie { /* Affichage des blocs des catégories */
+	background-color: var(--overlay-color);			/* Defini la couleur de fond */
+	border-radius: var(--border-card-radius);		/* Defini la bordure */
+}
+
+.categorie > h2 { /* Titres des catégories */
+	text-align: center;		/* Centre le texte */
+	padding-top: 20px;		/* Marge interne de 20px de tout les cotés */
+}
+
+/* ### Cartes ### */
+.card { /* Caractéristiques de la carte */
+	margin: 15px;					/* Marge de 15px de tout les cotés */
+	border-collapse: collapse;		/* Enlève les séparation */
+	display: inline-block;			/* Affiche les cartes en lignes */
+}
+
+.card-picture img { /* caractéristique de l'image de survol */
+	border-radius: var(--border-card-radius);		/* Arrondi des bordures de la carte */
+	overflow: hidden;								/* Cache le surplus de l'élément */
+	box-shadow: 0 0 5px black;						/* Crée une légère ombre derrière la carte (effet 3D) */
+	transition: 0.25s;								/* pour faire transition fluide */
+}
+
+.card-picture img:hover { /* Modification de l'image au survol */
+	transform: scale(1.04);							/* augmente la taille de l'image */
+	box-shadow: 0 0 10px var(--overlay-color);		/* Donne un effet d'ombre coloré à l'image */
+    opacity: 75%;									/* change l'opacité de l'image */
+    transition: 0.25s;								/* pour faire transition fluide */
+}
+
+.vertical img { /* image verticale */
+	height:325px;		/* longueur */
+	width:240px;		/* largeur */
+}
+
+
+.horizontal img { /* image horizontale */
+	width:300px;		/* largeur */
+	height:169px;		/* longueur */
+}
+
+/* ### Cellule "Texte" du tableau ### */
+.card-info { /* cractéristiques des cartes d'infos */
+	background-color: var(--overlay-color);		/* Attribut la 2e couleur de fond */
+	border-radius: 15px;						/* Arrondi les coins */
+	padding:10px;								/* Définie les bordures extérieures */
+}
+
+.card-info a { /* lien sur le nom du jeu */
+	text-decoration: none;		/* Enlève le soulignement */
+}
+
+.card-title { /* nom du jeu */
+	text-align: left;				/* Aligné a gauche */
+	margin: 0;						/* Pas de marges */
+	color: var(--text-color);		/* Couleur courrante du texte */
+}
+
+.card-editor { /* editeur du jeu */
+	text-align: left;		/* Aligné a gauche */
+	margin: 0 0 5px 0;		/* Marge de 5px vers le bas */
+	color: grey;			/* couleur du texte en gris */
+}
+
+.card-price { /* prix des jeux */
+	margin: 5px;			/* Marge de 5px de tout les cotés */
+	font-size: 20px;		/* Taille du texte de 20px */
+	text-align: right;		/* Aligné a droite */
+}
+
+.tag { /* réduction */
+	background-color: var(--main-color);			/* Couleur définie dans style.css */
+	border-radius: var(--border-card-radius);		/* Même bordure que les cartes */
+	padding: 5px;									/* Marge interne de px de tout les cotés */
+	font-size: 16px;								/* Taille du texte de 16px */
+}
+
+.card-info strike { /* prix barré si réduction */
+	color: grey;		/* Couleur du texte en gris */
+}

css/clicker.css

@@ -0,0 +1,46 @@
+/*
+ * clicker.css
+ *
+ * Feuille de style de l'easter Egg:
+ * clicker.html
+ * 
+ * @author Vabre Lucas
+ */
+
+/* ### Partie Centrale ### */
+#cookie {	/* Image du cookie */
+	position: absolute;					/* Objet qui se fie uniquement a la taille de la fenêtre */
+	top: 50%;							/* Centre verticalement */
+	left: 50%;							/* Centre horizontalement */
+	transform: translate(-50%, -50%);	/* De 50% de lui même pour ce centrer parfaitement */
+}
+
+#clicker { /* Image où il faut cliquer */
+	background-image: url(../img/icons/cookie.webp);	/* Image du cookie */
+	width: 150px;										/* Taille du cookie */
+	height: 150px;										/* Hauteur du cookie */
+	transition: 0.025s;									/* Transition de l'animation */
+}
+
+#clicker:active{ /* Lors du click sur l'image */
+	transform: scale(1.5);		/* Grossi le cookie */
+	transition: 0.025s all; 	/* Transition de l'animation */
+}
+
+#score, #persecond { /* Style de du texte sous le gros cookie */
+	text-align: center;	/* Texte centré */
+}
+
+/* ### Tableau des améliorations ### */
+#upgrades { /* Tableau */
+	margin: 10px;				/* Marge de tout les cotés */
+	border-collapse: collapse;	/* Enlève l'espacement entre les cases */
+}
+
+#upgrades tr:nth-child(2n+1) { /* Style des lignes */
+	background-color: var(--overlay-color);	/* Couleur de fond */
+}
+
+#upgrades tr td { /* cases du tableau */
+	border: 1px solid black; /* Bordure des cases */
+}

css/contact.css

@@ -0,0 +1,45 @@
+/*
+ * contact.css
+ *
+ * Feuille de style de contact.html
+ * 
+ * @author Lilian Strub, Vabre Lucas
+ */
+
+form {  /* Caractéristiques du formulaire de la page */
+	background-color: var(--overlay-color);	/* Couleur de fond */
+	border-radius: var(--border-radius-5);	/* Arrondissement des bordures */
+	font-family: "Helvetica";				/* Police d'écriture du formulaire */
+
+	width: 500px;							/* Epaisseur de 500px */
+	margin: 50px auto;						/* Marge de 50px en haut et en bas, centre horizontalement */
+	padding: 15px;							/* Marge interne de tout les cotés */
+}
+
+h1 { /* Titres(1) */
+	text-align: center;	/* Centre */	
+}
+
+input, textarea {  /* Caractéristiques des zones ou l'on peut écrire et des messages affichés avant d'écrire */
+	font-size: 16px;		/* Taille de la police */
+	margin-top: 5px;		/* Marge vers le haut */
+	margin-bottom: 10px;	/* Marge vers le bas */
+	padding: 5px;			/* Marge interne de tout les cotés */
+
+	border-radius: var(--border-radius-5);		/* Arrondissement des bordures */
+	border-style: none;							/* Efface les bordures de bases */
+	border-width: 0px;							/* Enlève l'épaisseur des bordures de base */
+}
+
+label {	/* Texte qui décrit l'input */
+	margin-top: 10px;	/* Marge vers le haut */
+}
+
+textarea {	/* Grande zone de texte */
+	resize: none;	/* Ne peut pas se faire modifier la taille */
+}
+
+em {	/* Elements en italiques */
+  font-weight: bold;			/* Met en gras */
+  color: var(--main-color);		/* Couleur du texte */
+}

css/cookieConsent.css

@@ -0,0 +1,61 @@
+/*
+ * cookieConsent.js
+ *
+ * Utilisé pour l'overlay du cookie
+ * 
+ * @author Villeneuve Noé, Vabre Lucas
+ */
+
+/* ### Bandeau des cookies ### */
+#cookieConsent { /* Bandeau des cookies */
+    background-color: var(--overlay-color); /* Couleur de fond */
+    opacity: 90%;                           /* Opacité du bandeau */
+    min-height: 26px;                       /* Hauteur minimale */
+    font-size: 20px;                        /* Taille du texte */
+    color: var(--text-color);               /* Couleur du texte */
+    line-height: 26px;                      /* Hauteur des lignes de texte */
+    padding: 10px 0px 10px 30px;            /* Marge interne en haut, en bas et à gauche */
+    position: fixed;                        /* Position fixé sur l'écran */
+    bottom: 0;                              /* Positionné en bas de l'écran */
+    left: 0;                                /* Est placé a gauche */
+    right: 0;                               /* et a droite => prend toute la largeur de la page */
+    z-index: 9999;                          /* Affiché au premier plan */
+}
+
+.textCookieConsent { /* Texte du bandeau */
+    float: left;                /* Positionner a gauche */
+    font-size: 0.9em;           /* Modifie la taille du texte */
+    margin: 0;                  /* Enlève les marges */
+    padding-top: 10px;          /* Marge interne vers le haut */
+}
+
+/* ### Boutton Croix ### */
+.closeCookieConsent { /* Croix pour fermer le bandeau */
+    float: right;       /* Positionne a droite */
+    height: 20px;       /* Hauteur de 20px */
+    width: 20px;        /* Taille de 20px */
+    margin-top: -10px;  /* Marge vers le haut */
+    font-weight: bold;  /* Affiche en gras */
+}
+
+.closeCookieConsent:hover { /* Croix au survol */
+    color: #FFF;        /* Rend le croix plus blanche, effet brillant */
+    cursor: pointer;    /* Change le curseur */
+}
+
+/* ### Boutton "c'est noté" ### */
+#cookieConsentOK {
+    margin-top: 15px;   /* Marge vers le haut */
+    padding: 5px 10px;  /* Marge interne de 5px vers le haut et le bas et 10px a droite et a gauche */
+    float: right;       /* Obejt flottant positionné a droite */
+}
+
+/* ### Texte "Plus d'infos" ### */
+#konamicode { /* Boutton "plus d'infos" */
+    color: var(--main-color);   /* Couleur du texte */
+}
+
+#konamicode:hover { /* Boutton "plus d'infos" au passage de la souris */
+    cursor: pointer;            /* souris montre un lien clicable */
+    text-decoration: underline; /* Souligne le texte */
+}

css/error.css

@@ -0,0 +1,21 @@
+/*
+ * error.css
+ *
+ * Feuille de Style utilisé pour la page d'erreur
+ * (error.html)
+ * 
+ * @author Nogaret Tristan, Vabre Lucas
+ */
+
+a {  /* Annule l'effet fait par la page de style principale */
+	text-decoration: underline;	/* Souligne le texte */
+}
+
+/* Ajustement du texte sur la page */
+.titre, .sous-titre, p { /* Mise en forme du texte */
+	text-align: center;		/* Centre le texte */
+}
+
+.titre { /* Mot d'erreur */
+	font-size: 5em;		/* Augmente drastiquement la taille de l'écriture */
+}

css/jeu.css

@@ -0,0 +1,100 @@
+/*
+ * jeu.css
+ *
+ * Feuille de style utilisé dans la page
+ * jeu.html.
+ * 
+ * @author Vabre Lucas
+ */
+
+/* ### Zone de Navigation ### */
+.jeu-nav {
+	background-color: var(--overlay-color);	/* Met en couleur de fond la deuxieme couleur principale */
+	border-radius: var(--border-radius-5);	/* Met une bordure de 5px */
+}
+
+.jeu-nav ul li { /* Element de la zone de navigation */
+	display: inline-block;	/* Affiche les éléments  */
+	vertical-align: middle;	/* Aligne verticalement les éléments */
+}
+
+/* ### Affichage de la partie principale ### */
+.jeu-part {
+	display: inline-flex;	/* Affiche les éléments flexiblement */
+	width: 100%;			/* Prend la totalité du container */
+	height: 500px;			/* A une hauteur minimale de 500px */
+}
+
+#picture-ingame { /* Image du jeu */
+	background-repeat: no-repeat;			/* Ne pas répéter l'image si l'espace alloué est plus grand qu'elle même */
+	width: 70%;								/* Prend 70% du container */
+	height: 500px;							/* Prend les 500px du container */
+	border-radius: var(--border-radius-5);	/* Bordure arrondis de l'élément */
+	background-size: cover;					/* L'image prend la totalité de l'espace qui lui est attribué */
+	background-position: center center;		/* Place l'image au centre de l'espace alloué */
+	overflow: hidden;						/* Cache le surplus de la photo */
+}
+
+#picture-ingame iframe { /* Vidéo importée de Youtube */
+	width: 100%;	/* Prend la totalité de la taille qui lui est attribué */
+	height: 100%;	/* Prend la totalité de la hauteur qui lui est attribué */
+}
+
+/* ### Partie droite de la vidéo/image ### */
+.side-part {
+	margin-left: 16px;	/* Met une marge de 16 vers la gauche */
+	width: 30%;			/* Prend 30% du container */
+}
+
+.background-picture-cover { /* Fond du logo du jeu */
+	background-color: var(--overlay-color);	/* Couleur de fond du logo du jeu */
+	border-radius: var(--border-radius-5);	/* Bordures arrondis */
+	padding: 10px;							/* Marges intenes de tout les cotés */
+	height: 30%;							/* Prend 30% de la hauteur */
+}
+
+
+#picture-logo { /* Logo du jeu */
+	background-position: center center;	/* Centre le logo du jeu */
+	background-size: contain;			/* Toute l'image doit etre présente dans le bloc */
+	background-repeat: no-repeat;		/* Ne pas répéter l'image si il y a trop d'espace */
+	height: 100%;						/* Prend 100% de la hauteur qui lui est alloué */
+}
+
+.text-part { /* Partie textuelle du jeu */
+	background-color: var(--overlay-color);	/* Couleur de fond */
+	border-radius: var(--border-radius-5);	/* Bordures arrondis */
+	padding: 5px;							/* Marge interne de tout les cotés */
+	margin-top: 16px;						/* Marge de tout les cotés */
+}
+
+.text-part h2 { /* Titre du jeu */
+	margin-top: 5px;
+	margin-bottom: 0;
+}
+
+/* ### Partie du prix ### */
+.price-part {
+	text-align: right;		/* Aligne le texte à droite */
+	margin: 0 10px 10px 0;	/* Met une marge de 10px a droite et en bas */
+	display: block;			/* Affiche les élément l'un en dessous de l'autre */
+}
+
+#price { /* Element contenant la valeur du prix */
+	margin-bottom: 16px;	/* Met une marge vers le bas */
+	font-size: 1.1em;		/* Change la taille de la police */
+}
+
+/* ### Partie plus d'info ### */
+.plus-info {
+	margin-top: 100px;						/* Met une marge vers le haut */
+	background-color: var(--overlay-color);	/* Couleur de fond */
+	border-radius: var(--border-radius-5);	/* Bordure arrondis */
+	padding: 15px							/* Marge interne de tout les cotés */
+}
+
+.plus-info table { /* Tableau interne de la partie "plus d'info" */
+	text-align: center;		/* Centre les éléments du tableau */
+	width: 100%;			/* Prend la totalité de la longueur de la page */
+	padding-bottom: 30px;	/* Crée une marge interne vers le bas */
+}

css/lightmode.css

@@ -0,0 +1,45 @@
+/*
+ * lightmode.css
+ *
+ * Feuille de style qui est utilisé pour le module
+ * de l'affichage sombre / clair
+ * Utilisé avec lightmode.js
+ * 
+ * @author Vabre Lucas
+ */
+
+/* ### Mode Clair ### */
+.light-theme { /* Variables utilisés pour le mode Jour */
+	--background-color:#ecf0f1;	/* Couleur de fond général */
+	--overlay-color:#bdc3c7;	/* Deuxieme couleur de fond */
+	--text-color:#2c3e50;		/* Couleur du texte */
+	transition-duration: 0.5s;	/* Transition de 0.5 secondes */
+}
+
+/* ### Mode sombre ### */
+.dark-theme { /* Variables utilisés pour le mode Nuit */
+	--background-color:#2c3e50;	/* Couleur de fond général */
+	--overlay-color:#34495e;	/* Deuxieme couleur de fond */
+	--text-color:#ecf0f1;		/* Couleur du texte */
+	transition-duration: 0.5s;	/* Transition de 0.5 secondes */
+}
+
+/*  */
+#light-mode { /* Boutton jour-nuit */
+	cursor: pointer; /* Au survol déchange le curseur pour montrer que c'est un boutton clicable */
+}
+
+.li-night-mode {/* Element contenant le boutton jour/nuit */ 
+	padding: 0;		/* Enlève les marges internes */
+	margin: 0;		/* Enlève les marges */
+}
+
+.li-night-mode img { /* Iconne de la lune / soleil */
+	width: 40px;		/* Défini la taille de l'iconne */
+	height: 40px;		/* Defini la hauteur de l'iconne */
+}
+
+.li-maincolor img { /* Element li qui contient l'Iconne de l'engrenage */
+	width: 30px;		/* Défini la taille de l'iconne */
+	height: 30px;		/* Defini la hauteur de l'iconne */
+}

css/listeJeux.css

@@ -0,0 +1,18 @@
+/*
+ * listeJeux.css
+ *
+ * @author Vabre Lucas
+ */
+
+td img { /* Image du jeu */
+	width:300px;								/* Taille de l'image */
+	border-radius: var(--border-radius-5);		/* Mordure des arrondis */
+}
+
+td p, h3 { /* Paragraphes et titres(3) */
+	text-align: center;		/* Aligne le texte au centre */
+}
+
+.price { /* Le prix */
+	text-align: right;		/* Aligne le texte à droite */
+}

css/maincolor.css

@@ -0,0 +1,68 @@
+/*
+ * maincolor.css
+ *
+ * Selection de la couleur principale
+ * qui se fera manipuler par le script
+ * maincolor.js
+ * 
+ * @author Vabre Lucas
+ */
+
+/*
+  Données :
+	bleu   : #3498db
+	vert   : #2ecc71
+	violet : #9b59b6
+	rouge  : #e74c3c
+*/
+
+/* ### Couleurs sélectionnables ### */
+.main-blue { /* Couleur Bleu */
+	--main-color: #3498db;	/* Modifie la valeur de la variable --main-color */
+}
+
+.main-green { /* Couleur Vert */
+	--main-color: #2ecc71; /* Modifie la valeur de la variable --main-color */
+}
+
+.main-purple { /* Couleur Violet */
+	--main-color: #9b59b6; /* Modifie la valeur de la variable --main-color */
+}
+
+.main-red { /* Couleur Rouge */
+	--main-color: #e74c3c; /* Modifie la valeur de la variable --main-color */
+}
+
+/* ### Panneau de selection ### */
+.color-picker {/* Panneau de selection des couleurs */
+	display: none;
+	position: absolute;
+	margin: 0;
+	border: solid var(--background-color) 3px;
+	background-color: var(--overlay-color);
+}
+
+.color-picker > p {/* Petit texte dans le panneau de selection des couleurs */
+	margin: 5px 0 0 0;
+}
+
+.li-maincolor:hover > .color-picker {/* Affichage du panneau au survol de l'engrenage */
+	display: block;	/* Affiche l'élément en dessous de l'engrenage */
+}
+
+/* ### Bouttons de couleurs ### */
+.color-picker li div { /* Rectagles de couleurs sélectionnable */
+	width: 50px;							/* Largeur de 50px */
+	height: 30px;							/* Hauteur de 30px */
+	border-radius: var(--border-radius-5);	/* Bordure arrondis de 5px */
+}
+
+.color-picker li div:hover { /* Survol des bouttons de couleur */
+	cursor: pointer;	/* Met le curseur en mode pointeur */
+}
+
+/* ### Couleurs des bouttons de couleurs ### */
+#color-blue {background-color: #3498db;}	/* Couleur de fond en Bleu */
+#color-green {background-color: #2ecc71;}	/* Couleur de fond en Vert */
+#color-purple {background-color: #9b59b6;}	/* Couleur de fond en Violet */
+#color-red {background-color: #e74c3c;}		/* Couleur de fond en Rouge */

css/style.css

@@ -0,0 +1,127 @@
+/*
+ * style.css
+ * @author Vabre Lucas, Strub Lilian
+ */
+
+:root {	/* Variables Principales utilisé dans plupart des pages */
+	--border-radius-5 : 5px;	/* Bordures arrondis de 5px */
+	--border-radius-15 : 15px;	/* Bordures arrondis de 15px */
+}
+
+/* ### Entête de la page ### */
+header {
+	text-align: center;	/* Centre le texte (le logo) */
+}
+
+header img { /* image de l'entête (logo) */
+	margin: 25px 0 25px 0;	/* met une marge en haut et en bas de 25px */
+}
+
+/* ### Corps de la page ### */
+@font-face { /* Police d'écriture */
+	font-family: "Cabin-Regular";		/* Définis les polices d'écritures à utiliser dans le site */
+	src: url('../font/Cabin-Regular.ttf');
+}
+
+body { /* Corps */	
+	font-family: Cabin-Regular, Arial, consolas;
+	color: var(--text-color);												/* Défini la couleur générale du texte */
+	background-color: var(--background-color);								/* Défini la couleur d'arrière plan du site */
+
+	padding: 0;		/* Enlève les marges intenes */
+	margin: 0;		/* Enlève les marges */
+	width: 100%;	/* Fait prendre la taille du site, l'intégralité de l'écran */
+}
+
+.container { /* Container de la page (centrage) */
+	margin-left: 10%;
+	margin-right:10%;
+}
+
+h3, a { /* Met les titres(3) et les lien */
+	color : var(--main-color);	/* Couleur du texte en la couleur sélectionnées */
+}
+
+a {	/* Tout les liens du site */
+	text-decoration: none; 	/* Enlève le souligné des liens clicables */
+}
+
+
+th, tr, td {	/* Enlève les espacements des tableaux */
+	border-collapse: collapse;	/* Bordures collées */
+}
+
+hr {
+	border-color: none;
+	color: var(--overlay-color);
+}
+
+abbr { /* Les unicodes */
+	text-decoration: none;	/* Pour enlever le soulignement des elements unicodes */
+}
+
+.boutton { /* Affichage du boutton */
+	background-color: var(--main-color);	/* Couleur de fond */
+	color: var(--text-color);				/* Couleur du texte */
+	font-size: 1.0em;						/* Taille du texte */
+
+	border-radius: var(--border-radius-5);	/* Arrondis des bordures */
+	padding: 14px;							/* Marge intene */
+	border-style: none;						/* Enlève la bordure de base */
+	border-width: 0px;						/* Enlève l'épaisseur des bordure de base */
+	
+	box-shadow: 0 0 15px var(--main-color);	/* Lumière arrière */
+	transition: 0.2s;						/* Durée d'animation */
+}
+
+.boutton:hover { /* Boutton au survol */
+	cursor: pointer;	/* Affichage du pointeur de la souris */
+	box-shadow: 0 0 0;	/* Enlève l'effet de lumière */
+}
+
+/* ### Menu ### */
+nav ul { /* La liste délément dans le panneau de navigation */
+	text-align: center;						/* Centre le texte */
+	background-color: var(--overlay-color);	/* Met en couleur de font la couleur secondaire */
+	margin: auto 25% auto 25%;				/* Centre l'élément de 25% de chaque cotés */
+	padding: 0; 							/* Enlève la marge interne par défaut du "ul" */
+	border-radius: var(--border-radius-15);	/* Bordure arrondis de 15px */
+}
+
+nav li { /* Chaque éléments dans le panneau de navigation */
+	display: inline-block;	/* Affiche tout les éléments du menu en ligne */
+	text-decoration: none;	/* Enlève les puce de la liste */
+	padding: 10px;			/* Marge interne de tout les cotés */
+	margin: 5px;			/* Marge de tout les cotés */
+	font-size: 1.1em;		/* Taille du texte */
+	vertical-align: middle;	/* Aligne au milieu verticalement */
+}
+
+nav a {	/* Lien du panneau de navigation */
+	color: var(--text-color);	/* Texte en couleur normale */
+}
+
+.active {	/* Page sélectionnée dans le panneau de navigation */
+	color: var(--main-color);	/* Couleur sélectionnée */
+}
+
+/* ### Pied de page ### */
+footer { /* Bandeau de pied de page */
+	margin-top: 50px;						/* Défini une marge vers le haut */
+	width: 100%;							/* La taille de l'élément prend la longueur de la page */
+	background-color: var(--overlay-color);	/* Couleur de fond de l'élément */
+	bottom: 0;
+}
+
+footer div {/* Les quatres catégories du pied de page */
+	display: inline-block;	/* Met les éléments en ligne */
+	vertical-align: center;	/* Aligne au milieu verticalement */
+}
+
+footer div img {/* Les images du pied de page => Logo + Discord */
+	margin: 20px;	/* Défini une marge de tout les cotés */
+}
+
+footer p {/* "tout droits réservés" */
+	text-align: right;	/* aligne le texte a droite */
+}