/* PARAMETRES GLOBAUX PAR DEFAUT */
* { 
	box-sizing: border-box;
}

/* VARIABLES GLOBALES */
:root {
    --background: white;
	--text: black;
}

/* TITRES ET PARAGRAPHES */ /* A faire */

/* LIENS */ /* A faire */

/* DROPDOWN */ /* A checker */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
}
.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
	display: block;
}

/* BADGES (88x31) */ /* à refaire/revoir */
.badge-marquee {
    width: 100%;
    max-width: 880px; /* même valeur que .container1 pour ne pas dépasser */
    margin: 0 auto 8px auto;
    overflow: hidden;
}
.badge-marquee img {
    width: 88px;
    height: 31px;
    background: black;
}
.marquee {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: marquee 18s linear infinite; /* à ajuster */
	will-change: transform;
}
.marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* BODY */
body {
    background: url(Images/placeholder_background.png) no-repeat center fixed;
    background-size: cover;
    color: var(--text);
}

/* HEADER */
#placeholder_header {
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    height: 150px; /* à ajuster */
	background: url('Images/placeholder_header.png') no-repeat center fixed;
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CONTAINER 1 : Accueil, Navigation et Index */
#container1 {
	max-width: 880px;
	margin: 0 auto 12px auto;
	outline-offset: 4px;
	display: grid;
	grid-template-columns: 5fr 1.5fr;
	gap: 5px;
}
#placeholder_boutons {
    grid-column: 1 / -1;
    background: var(--background);
    display: flex; 
    justify-content: center;
    gap: 100px; /* Augmente la valeur pour plus d'espace entre les boutons*/
}
#placeholder_homepage {
    grid-column: 1;
    background: var(--background);
}
#placeholder_index {
    grid-column: 2;
    background: var(--background);
}

/* CONTAINER 2 : Blog, Chatbox, Live Status et Autre */
#container2 {
    margin: 0 auto 12px auto;
    display: grid;
    grid-template-columns: 0.80fr 2fr 0.80fr;
    grid-template-rows: 3fr 1fr;
    grid-template-areas:
        "chatbox blog texte1"
        "chatbox pub texte1";
    gap: 10px;
    min-height: 420px; /* à enlever à terme */
}
#placeholder_chatbox {
    grid-area: chatbox;
    background: var(--background);
    height: 100%;
    min-height: 420px;
    min-width: 180px; /* à ajuster/retirer à terme (?) */
}
#placeholder_blog {
    grid-area: blog;
    background: var(--background);
}
#placeholder_pub {
    grid-area: pub;
    background: var(--background);
}
#placeholder_texte1 {
    grid-area: texte1;
    background: var(--background);
    min-width: 180px; /* à ajuster/retirer à terme (?) */
}

/* CONTAINER 3 : Paramètres et Autres */
#container3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    gap: 25px;
    max-width: 85%;
    min-height: 100px; /* à retirer à terme */
}
#placeholder_paramètres {
    background: var(--background);
}
#placeholder_texte2 {
    background: var(--background);
}

/* FOOTER */
footer {
	text-align: center;
	font-size: 15px;
}