/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 09
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */

/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');


body {
	color: #333;
    font-family: 'Roboto', sans-serif;
    background: #fff6f1;
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

hr {
    border: 0.5px solid #fff;
}

.button {
    color: #fff;
    background: #f8b97a;
    border: 1px solid #f8b97a;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 30px;
    transition: background 0.3s;
    cursor: pointer;
}

.button:hover {
    color: #f8b97a;
    background: transparent;
}

.article {
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}


/* Page Index */

#illu-patron {
    width: 550px;
    position: absolute;
    left: 50px;
}

#illu-jason-fred {
    width: 550px;
    position: absolute;
    right: 50px;
}

.logo-index {
    width: 200px !important;
}

.navigation-index {
    width: 100% !important;
    text-align: center;
}

.login-index {
    background: white;
    width: 350px;
    margin: 17vh auto 0;
    transform: translateY(-17%);
    padding: 20px;
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.3);
}

.login-index span {
    width: 130px;
    display: inline-block;
    text-align: left;
    margin: 5px 0;
}

input {
    padding: 5px;
}

.button-index {
    margin-top: 20px;
}

@media screen and (max-width: 1100px) {
    #illu-jason-fred {
        bottom: 200px;
        width: 750px;
    }
    
    #illu-patron {
        margin-top: 50px;
        width: 750px;
    }
    
    .login-index {
        width: 70%;
        margin: 35vh auto 0;
        transform: translateY(-35%);
        padding: 20px;
    }
    
    input {
        padding: 15px 0;
    }
}

/* CSS pour le menu déroulant */

#menu-vertical #administration {
    border-bottom: 0.5px solid #fff6f1;
    padding-bottom: 5px;
}

#menu-vertical, #menu-vertical ul {
  padding:0;
  margin:0 auto;
  list-style:none;
  width: auto; /* seule ligne rajoutée */
}

#menu-vertical li {
  position: relative;
}

#menu-vertical li:hover, #menu-vertical li:focus {
  background:#fff; /* juste pour cacher le texte de la page en-dessous */
}

#menu-vertical a {
  display:block;
  text-decoration: none;
  color: #000;
}

#menu-vertical ul {
  position: absolute;
  left:-999em;
}

#menu-vertical li:hover ul {
  top: 0;
  left: 287px;
}

#menu-vertical ul li {
    width: 200px;
    background: #fff6f1;
}

/* Navigation */

#navigation #accueil {
    padding-top: 5px;
}

#navigation a {
	color: #333;
    font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	text-align: center;
}

#navigation li {
    padding: 2px 0;
}

#navigation li:hover {
    background: #fff6f1;
}

#saisir-grille {
    position: relative;
}

#saisir-grille::after {
    content: "";
    width: 60%;
    height: 7px;
    background: #fff;
    position: absolute;
    left: 20%;
    bottom: 8px;
    z-index: -1;
}

/* Contenu principal */
#principal {
	color: #333;
}
#principal a {
	color: #333;
}
#principal a:hover, #principal a:focus {
	color: #333;
}
#principal strong {
	color: #333;
}

/* Contenu secondaire */
#secondaire {
    
}

/* Contenu principal entete*/
#principal-entete {
	color: #333;
}
#principal-entete a {
	color: #333;
}
#principal-entete a:hover, #principal a:focus {
	color: #333;
}
#principal-entete strong {
	color: #333;
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
}

/* En-tête */
#entete {
	width: 75%;
    margin-right: 3.7%;
	float: right;
	padding: 10px 20px;
	clear: both;
}
#entete h1 {
	margin: 0;

}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Bloc central */
#centre {
	position: relative; /* Voir -> Note 1 */
	width: 100%;
}

/* Menu de navigation */

#navigation #logo {
    margin: 0 auto;
    display: block;
    margin-top: 20px;
    width: 150px;
}

#navigation {
	 /* -> 1 */
	 width: 15%;
	 background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
	 height: 100vh;
	 position: fixed;
}

#navigation #menu_principal {
	margin: 0;
	list-style: none;
    margin-top: 5vh;
}
#navigation a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.6;
	font-size: 0.8em;
    letter-spacing: 1px;
	text-decoration: none;
}

.section-icon-menu a {
    display: inline-block !important;
    padding: 5px !important;
}

#illu-mug {
    width: 75%;
    margin-left: 40px;
    position: absolute;
    bottom: 20px;
}

/* Contenu principal */
#principal {
	 /* -> 2 */
	 margin-right: 3.7%;
     margin-bottom: 50px;
	 padding: 10px 20px;
	 float: right;
	 width: 75%;
	 clear: both;
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
	position: absolute; /* -> 1 */
	top: 0;
	right: 0;
	width: 120px;
	padding: 12px 20px;
}

/* Mention de copyright */
#copyright {
	margin: 20px 0;
	font-size: .85em;
	text-align: left;
}

/* Bloc central entete*/
#centre-entete {
	width: 100%;
    border-bottom: 0.5px solid #000;
    padding: 0px 0 20px;
}

/* Contenu principal entete */
#principal-entete {
	margin-top: 0px;
    display: inline-block;
}
#principal-entete > :first-child {
	margin-top: 0px;
}
#principal-entete p, #principal li {
	line-height: 1.5;
}

/* Contenu secondaire */

#secondaire-entete tr {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    margin-right: 20px;
    display: inline-block;
    padding: 5px;
    margin-right: 20px;
    display: inline-block;
}

#secondaire-entete tr:last-child {
    margin-right: 0px;
}

#secondaire-entete {
	display: inline-block;
    margin-top: 20px;
}

#secondaire-entete img {
    border-radius: 4px;
}

.derniers-vainqueurs, .ont-carotte {
    padding-left: 10px;
    text-align: left;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.derniers-vainqueurs span {
    box-shadow: inset 0 -6px 0 #faa585;
}

.ont-carotte span {
    box-shadow: inset 0 -6px 0 #f6d365;
}

@media screen and (max-width: 1500px) {
    #secondaire-entete, #principal-entete {
	    float: none;
    }
}

/* Règlement */

.reglement-img {
    display: inline-grid;
    float: left;
    width: 30%;
}

.reglement-img img {
    width: 100%;
}

.reglement-txt {
    display: inline-grid;
    width: 70%;
}

.grille-reglement {
    display: inline-grid;
    width: 33%;
    margin: 20px 0;
}

.accordion h3, .accordion li {
    cursor: pointer;
}

.accordion-content {
    cursor: auto;
}

/* --- NOTES ---

1.	On utilise le positionnement relatif sur div#centre afin que ce bloc serve
	de référent à ses descendants positionnés en absolu.
	Dit plus clairement: deux des trois enfants de div#centre, à savoir
	div#navigation et div#secondaire, sont positionnés en absolu. Pour ces deux
	éléments, on a utilisé les propriétés CSS top, left et right qui permettent
	d'indiquer des coordonnées de positionnement. Ces coordonnées sont données
	par rapport à un cadre de référence. Quel est ce cadre de référence?
	- Par défaut, il s'agit de la zone de visualisation du navigateur (les
	bords de la «fenêtre», donc).
	- Ou bien il s'agira du plus proche élément positionné (en absolu, relatif
	ou fixe) parmi les ancêtres de l'élément positionné en absolu.
	Si cette explication n'est pas claire, supprimez ou commentez le
	"position: relative" de div#centre, et observez ce qui se passe. Puis
	rétablissez-le et ajoutez une bordure visible à div#centre (ex:
	"border: 2px solid red;"). Cela devrait être plus clair.

2.	Le bloc de contenu principal (div#principal) est le seul des trois enfants
	de div#centre qui n'est pas positionné en absolu. Ce n'est en effet pas
	nécessaire. Comme div#principal considère que div#navigation et
	div#secondaire, tous deux positionnés en absolu, ne sont «plus là», et ne
	se placera donc pas plus bas dans la page.
	Pour éviter que les colonns latérales ne recouvrent des parties du
	contenu, il nous suffit de donner des marges à gauche et à droite à
	div#principal.

*/