/* 1. Permet au body de prendre toute la hauteur de l'écran */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Orbitron', sans-serif;
    background: #1E1F22;
    color: #fff;
    align-items: center;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 2. Le header et le footer prennent la largeur de l'écran */
header {
    text-align: center;
    margin-bottom: 30px;

}

/* 3. Le main prend tout l'espace disponible pour pousser le footer en bas */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 900px;
    max-width: 90%;
    background: #1E1F22;
}

/* 4. Le footer reste en bas même si le contenu est insuffisant */
footer {
    background: #1e1f22;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* ✅ Barre de défilement invisible sauf au survol */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body:hover ::-webkit-scrollbar {
    width: 6px;
}

body:hover ::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 10px;
}

body:hover ::-webkit-scrollbar-track {
    background: #1E1F22;
}

/* Conteneur principal alignant la case et le bouton */
#cv-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin: 15px 0;
}

/* Case contenant uniquement le texte, alignée à gauche */
#cv-container {
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 65%;
    text-align: center;
    margin-left: 0;
}

/* Style du texte explicatif */
.cv-text {
    color: white;
    opacity: 0.9;
    font-size: 1.2em;
    font-weight: bold;
}

/* Bouton centré dans l’espace restant */
#cv-button {
    width: 200px;
    height: 70px;
    margin-right: auto;
    margin-left: 35px;
    display: block;
}

/* Bouton */
button {
    height: 70px;
    width: 200px;
    background: linear-gradient(145deg, #2e2d2d, #212121);
    border: solid #404c5d 1px;
    font-size: 16px;
    color: rgb(241, 243, 241);
    border-radius: 5px;
    box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,
                inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
    cursor: pointer;
    transition: 500ms;
}

button:hover {
    box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
    color: #f1f3f1;
}

button:active {
    box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
    color: #d6d6d6;
    transition: 100ms;
}

/* Titres */
h1 {
    font-size: 2.5em;
    text-align: center;
}

h2 {
    margin-bottom: 15px;
    font-size: 1.5em;
    text-align: center;
}

/* Paragraphe */
p {
    font-size: 1.2em;
    opacity: 0.8;
    text-align: center;
}

/* Sections */
.section {
    padding: 20px;
    margin: 15px 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 100%;
    max-width: 800px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.section:hover {
    transform: scale(1.02);
}

/* Listes */
ul {
    list-style: none;
    padding: 0;
}

ul li {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    margin: 5px 0;
    border-radius: 10px;
    font-weight: bold;
}

/* Liens */
a {
    color: #58a6ff;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #1f6feb;
}

/* ✅ Responsive Design */
@media (max-width: 1024px) {
    #cv-wrapper {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #cv-container {
        width: 90%;
        text-align: center;
        margin-bottom: 10px;
    }

    #cv-button {
        width: 90%;
        height: 60px;
    }

    h1 {
        font-size: 2em;
    }

    p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    main {
        width: 100%;
        padding: 10px;
    }

    .section {
        width: 95%;
        margin: 10px 0;
        padding: 15px;
    }

    #cv-container {
        width: 100%;
        padding: 10px;
    }

    #cv-button {
        width: 300px;
        height: 55px;
        margin-left: 0;
	flex-grow: 1;
	margin-top: 10px
	padding : 15px   
 }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.4em;
    }

    p {
        font-size: 0.9em;
    }
}