*{
    margin: 5px;
    box-sizing: border-box;
}

html, body, .scroll-box {
  scrollbar-width: thin; 
}

a.menu,
a.menu:link,
a.menu:visited,
a.menu:hover,
a.menu:active,
a.menu:focus {
    all: unset;                 /* annule toutes les propriétés par défaut */
    color: inherit;             /* reprend la couleur du texte parent */
    text-decoration: none;      /* plus de soulignement */
    cursor: pointer;            /* indique que c’est cliquable */
    outline: none;              /* pr remplacer par style custom */
}

a.menu:focus {
    outline: 1px dotted aliceblue;   /* pour l'accessibilité. contraste suffisant */
    outline-offset: 1px;
}

body{
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #303655;
}

.container{
    display: flex;
    /* border: 3px solid red; */
    flex-direction: row;
    width: 60%;
    height: 85%;
    max-width:800px;
    max-height: 500px;
    justify-content: center;
    margin: auto;
    margin-bottom:0;
}

.banner {
    width: 100%;           /* occupe toute la largeur du conteneur */
    height: auto;          /* conserve le ratio d’aspect */
    display: block;        /* évite les espaces blancs sous l’image */
    object-fit: cover;
    margin:0;
    border-radius:6px;
    border-bottom: 1px solid aliceblue;
}

.left, .main{
    display: flex;
    background: #6F90AF;
    border-radius: 6px;
    border-width: 1px;
    border-color: aliceblue;
    border-style: solid;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow:auto;
}

.main{
    width: 75%;
    display: flex;
    flex-direction: column;
}

.quote{
    text-align: center;
    font-style:italic;
    font-family:"VT323",monospace;
    color:aliceblue;
    font-size:20px;
    margin:10px;
}

.intro{
    font-family:"Kode Mono", monospace;
    font-size:12px;
    color:#303655;
    margin-bottom:8px;
    text-align:justify;
    background-color:aliceblue;
    border-radius:6px;
    border:5px solid aliceblue;
}

.divider{
    margin-top:auto;
    margin-bottom:0;
    width:60%;
    margin-right: auto;
    margin-left: auto;
    height:0;                       /* on utilise la bordure */
    border-top:1px dashed aliceblue;      /* lumière */
    /*display:flex;
    flex-direction: column;*/
}
.buttons{
    /*margin-top:auto;            /* pousse le bloc tout en bas du .main */
    display:flex;               /* on veut les boutons côte à côte */
    flex-direction:row;         /* axe horizontal (par défaut, mais on le garde explicite) */
    gap:0.5rem;                 /* espace entre les boutons */
    /* align-self: flex-end;   <-- autre façon d’attacher le bloc en bas */
    justify-content: center;
    /*transition: transform .3s ease, background .3s ease; */
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    margin-bottom:0;
}

.buttons a:hover{
    /*background: rgba(255,255,255,.1);*/
    transform: translateY(-4px) scale(1.03); 
}


.buttons img{
    flex: 0 0 auto;          /* aucun grow, aucun shrink, taille auto */
    align-self: center;      /* (optionnel) centre verticalement dans la rangée */
    max-width: none;         /* empêche le « max‑width : 100% » hérité */
    height: 31px;            /* conserve le ratio original */
}

.left{
    width:25%;
    display: flex;
    flex-direction: column; /* les éléments s'empilent */
    /* justify-content: flex-start; */
    overflow:auto;
}

.navigation-title{
    justify-content: center;
    align-content: center;
    text-align: center;
    color: aliceblue;
    background-color:#303655;
    height:30px;
    width:100%;
    border-radius:6px;
    margin-bottom:0;
    font-family:"Jersey 15", monospace;
    font-size:20px;
}

.navigation p{
    padding:5px;
    border-bottom: 1px dashed aliceblue;
    /* transition: transform .3s ease, background .3s ease; */
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    color:#303655;
    display:block;          /* garde la largeur du texte, pas de rupture de ligne */
    align-items:center;           /* aligne icône et texte verticalement */
    gap:0.4rem;                   /* espace entre icône et texte */
    font-family:"Jersey 15", monospace;
}

.blog-img, .home-img, .page-img, .about-img, .lolcow{
    height:20px;
    margin:0;
    padding:0;
    padding-right: 5px;
    vertical-align: bottom;
}

.home-img{
    margin-top:0;
}
.navigation p:hover {
    /* on le décale de 8 px vers la droite et 4 px vers le bas */
    /* transform: translate(8px, 4px); */
    background: rgba(255,255,255,.1);
    transform: translateY(-4px) scale(1.03);
}

.navigation-title,
.changelog-title,
.changelog{
    width:calc(100% - 10px);
}

.changelog-title{
    height:30px;
    line-height:30px;               /* centre le texte verticalement */
    text-align:center;
    color:#f0f8ff;
    background:#303655;
    border-radius:6px;
    font-family:"Jersey 15", monospace;
    font-size:20px;
}

.changelog{
    flex:1;                         
    overflow:auto;                  /* barre de défilement si le texte dépasse */
    background:aliceblue;             /* même couleur que les titres (facultatif) */
    color:#303655;
    margin:5px;                       
    border-radius:6px;
    justify-content: flex-end;
    font-size:16px;
    font-family:"VT323",monospace;
} 

footer{
    display:flex;                     /* flex normal, pas inline‑flex */
    width:60%;                       /* prend toute la largeur du wrapper */
    justify-content:space-between;    /* un paragraphe à gauche, l’autre à droite */
    /* padding:0.8rem 0;                 /* petit padding vertical */
    background:#303655;               /* même couleur que le body (ou ce que tu veux) */
    margin-top:0;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: auto;
    color:rgba(240, 248, 255, 0.422);
    font-size:12px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}



@media all and (max-width:550px){
    .container{
        flex-direction: column;   /* les colonnes passent en pile */
    }
    .main{
        width:100%;               /* prend toute la largeur */
        padding:5em 0;            /* espace vertical */
    }
}