:root{
    --bg1:#0f172a;
    --bg2:#0b1220;
    --accent:#ffb86b;
    --muted:#99a0b3;
}

*{box-sizing:border-box}

/* --- CORRIGÉ 1/4 --- */
/* On utilise min-height au lieu de height.
   Ça dit au body : "fais AU MOINS 100% de la hauteur,
   mais agrandis-toi si le contenu dépasse". */
html,body{min-height:100%}

#title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

#title .photoMoi {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    border-radius: 30%;
    object-fit: cover;
}

header {
    display: flex;
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(11,18,32,0.8);
    color: #e6eef8;
    text-align: left;
    position: fixed;

    /* --- CORRIGÉ 2/4 --- */
    /* top: -20px; cachait le haut de votre menu.
       Je présume que vous vouliez le coller à top: 0; */
    top: 0;

    left: 0;
    z-index: 1000;
    gap: 1rem;

}
body{
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
    color:#e6eef8;

    /* --- CORRIGÉ --- */
    /* Remplacez "padding: 2rem;" par cette ligne : */
    padding: 7rem 2rem 2rem 2rem;
    /* (C'est 7rem en HAUT, et 2rem sur les 3 autres côtés) */
}

.card{
    width:100%;
    max-width:920px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:2.25rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    text-align:center;
    border:1px solid rgba(255,255,255,0.04);

    /* --- CORRIGÉ 4/4 --- */
    /* Puisque le body n'utilise plus 'flex' pour centrer,
       on dit à la .card de se centrer elle-même horizontalement. */
    margin-left: auto;
    margin-right: auto;
}

.emoji {
    font-size:64px;
    margin-bottom:0.5rem;
    display:inline-block;
    transform-origin:center;
    animation: bob 2.5s ease-in-out infinite;
}
@keyframes bob{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-8px) }
}

h1{
    margin:0.25rem 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

p.lead{
    margin:0 0 1.25rem;
    color:var(--muted);
    font-size:1rem;
}

.meta{
    margin-top:1rem;
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:0.95rem;
    margin-bottom: 1rem;
}

a.cta{
    display:inline-block;
    margin-top:1.5rem;
    padding:0.6rem 1.2rem;
    border-radius:10px;
    background:linear-gradient(90deg,#ffb86b,#ff9e6a 80%);
    color:#0b1220;
    text-decoration:none;
    font-weight:600;
    box-shadow: 0 6px 20px rgba(255,154,80,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.25rem;
}
a.cta:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255,154,80,0.25);
}

footer{ margin-top:1.5rem; color:varmuted; font-size:0.85rem }


/*
 * =========================================
 * DÉFINITIONS DE LAYOUT (DESKTOP)
 * J'ai déplacé ces règles ici, AVANT le @media
 * =========================================
 */

.projet{
    width:100%;
    max-height: 100%;
    max-width:250px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:1rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    text-align:center;
    border:1px solid rgba(255,255,255,0.04);
}

.wrapper {
    display: flex;
    justify-content: center;
    gap:1em;
}

.grid-container {
    display: grid;
    grid-template-columns: 250px 250px; /* largeur de chaque colonne */
    gap: 100px;
}

.grid-container > div {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    text-align: center;
}


/*
 * =========================================
 * RÈGLES RESPONSIVES (MOBILE)
 * Ce bloc vient APRÈS les règles par défaut
 * =========================================
 */
@media (max-width:600px){
    .card{ padding:1.2rem }
    .emoji{ font-size:48px }

    /* --- MES AJOUTS RESPONSIVES --- */
    .grid-container {
        grid-template-columns: 1fr; /* Passage de 2 à 1 colonne */
        gap: 20px; /* Réduction du gap de 100px */
    }

    .wrapper {
        flex-direction: column; /* Empilement vertical (pour les boutons etc.) */
        align-items: center; /* Centrage des éléments empilés */
    }
    /* --- FIN DES AJOUTS --- */
}

@media (max-width:600px){
    .card{ padding:1.2rem }
    .emoji{ font-size:48px }

    .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wrapper {
        flex-direction: column;
        align-items: center;
    }

    a.cta {
        height: auto;
    }

    /* SUPPRIMEZ LES RÈGLES POUR .presentation ET .presentation h2 D'ICI */
}