/* Initialisation */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5;
}
body {
    font-family: 'Courier New', monospace;
    color: #222;
    background: linear-gradient(135deg, #ddd 0%, #bbb 100%);
    margin: 0 auto; /* Centre horizontalement */
    max-width: 1200px;
    padding: 1rem;
    min-height: 100vh;
    line-height: 1.4;
}


/* Assigne les grid-area */
.grid-container {
    display: grid;
    gap: 0.5rem;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Desktop */
@media (min-width: 900px) {
    .grid-container {
        grid-template-areas:
            "header header header"
            "nav nav nav"
            "main main sidebar"
            "footer footer footer";
        grid-template-columns: 1fr 1fr 1fr; /* sidebar 1/3, main 2/3 */
        grid-template-rows: auto auto 1fr auto;
    }
}

/* Mobile */
@media (max-width: 899px) {
    .grid-container {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
}

/* Styles des sections */
.header, .nav, .main, .footer, .sidebar { background: #ccc; padding: 1rem; 
    border-radius: .2rem;
    border: #aaa 1px solid;
    outline: 1px solid #aaa;
    outline-offset: 1px;
}

.nav {
    height: auto; /* Permet à la hauteur de s'ajuster dynamiquement */
    position: relative;
    overflow: hidden;
    min-height: 50px; /* Hauteur minimale lorsque le graphe est masqué */
    transition: height 0.3s ease; /* Ajoute une transition fluide */
}

h1, h2, h3, h4  {
    font-family: 'Times New Roman', Times, serif;
}

h1 {
    color: #000;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: bold;

}

h1:hover {
    color: #500;
    animation: vibrate 1s infinite;
}

/* Définition de l'animation */
@keyframes vibrate {
    0% { transform: translate(0, 0); }
    30% { transform: translate(-1px, 1px); }
    60% { transform: translate(1px, -1px); }
     }


h2  {
    color: #fff;
    font-size: 1.5rem;
}

h3, h4, p, li {
    font-size: 1rem;
}

a {
    color: #055;
    text-decoration: none;
    }

body a:hover {
    text-decoration: underline;
    border: #0aa 1px solid;
    font-weight: bold;
}