body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f7fafc;
    margin: 0;
    color: #222;
}

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

header {
    background: #1a2238;
    color: #efbf04ff;
    padding: 4em 0 2em 0;
    text-align: center;
}

/* Plus de cadre, juste le logo */
.logo-header {
    height: 190px; /* Augmente la taille selon ton besoin */
    width: auto;
    display: block;
    margin: 0 auto 1.5em auto; /* Centré, marge en bas */
}

.slogan {
    font-size: 1.15em;
    opacity: 0.9;
}

main {
    padding: 2em 0 3em 0;
}

.photo-profil {
    max-width: 50%; /* ou 300px, comme tu veux */
    height: auto;
    display: block; margin: 0 auto;
    border-radius: 15px;
}

#paragraphe-unique {
    text-align: justify;
    padding: 10px 10px
}

h2 {
    color: #efbf04ff;
    margin-top: 1.4em;
    text-align: center;
}
h4 {
    color: #efbf04ff;
    margin-top: 1.4em;
    text-align: center;
}

#presentation, #activite, #contact {
    margin-bottom: 2.5em;
}

.projets {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 1.2em;
}

.projet {
    background: #fff;
    padding: 1.2em;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex: 1 1 280px;
    min-width: 240px;
    text-align: center;
}

.projet img {
    width: 100%;
    max-width: 180px;
    height: 110px;
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: 0.7em;
}

.contact-box {
    background: #eef2f9;
    border-left: 4px solid #1a2238;
    padding: 1.2em;
    border-radius: 8px;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

button {
    background: #2e86de;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 1em;
    transition: background 0.2s;
}

button:hover {
    background: #2364a8;
}

footer {
    background: #1a2238;
    margin: 0 10px;
    color: #eee;
    text-align: center;
    padding: 1em 0;
    font-size: 0.95em;
    text-decoration: none;
    transition: color 0.2s;
}
.reseaux-sociaux a i {
  font-size: 3.5em;          /* Taille des icônes */
  margin: 0 10px;          /* Espacement horizontal entre icônes */
  color: #444;             /* Couleur des icônes */
  transition: color 0.2s;
}
.reseaux-sociaux a:hover i {
  color: #efbf04;          /* Couleur au survol */
}

.copyright {
  font-size: 0.9em;        /* Taille du texte du copyright */
  color: #eee;             /* Couleur plus discrète */
  margin-top: 15px;        /* Espacement au-dessus */
  text-align: center;
}

}

@media (max-width: 700px) {
    .projets {
        flex-direction: column;
    }
}