body {
    display: flex;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.photo-profil{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: block;          /* Force l'image à se comporter comme un bloc autonome */
    margin: 0 auto 20px auto;
}

.colonne-gauche{
    flex: 0.22;
    padding: 20px;
    background-color: #1a252f;
    color: azure;
}

.colonne-gauche a {
    text-decoration: none;
    color: blanchedalmond;
}

.colonne-gauche a:hover{
text-decoration: underline;
}

.colonne-gauche h1 {
    font-size: 28px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(240, 255, 255, 0.7), 
                 1px 1px 1px #000000;
}

.colonne-gauche h2 {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 25px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(240, 255, 255, 0.7), 
                 1px 1px 1px #000000;
}

.colonne-gauche h2.soft-skills{
    text-align: left;
    text-decoration: underline;
    font-size: 18px;
    margin-top: 60px;          /* Crée un bel espace au-dessus pour l'isoler des contacts */
    margin-bottom: 10px;
}

.colonne-gauche h2.langue{
     text-align: left;
    text-decoration: underline;
    font-size: 18px;
    margin-top: 60px;          /* Crée un bel espace au-dessus pour l'isoler des contacts */
    margin-bottom: 10px;
}

.colonne-gauche p,
.colonne-gauche a,
.colonne-gauche li {
    text-shadow: 0 0 3px rgba(240, 255, 255, 0.4), 
                 1px 1px 1px #000000;
}

.colonne-gauche i {
    margin-right: 10px;    /* Crée un espace de 10px entre l'icône et le texte */
    color: blanchedalmond; /* Donne aux icônes la même couleur chaleureuse que tes liens */
}


.colonne-droite{
    flex: 0.78;
    background-color: rgb(223, 241, 243);
    padding: 40px;
    color: #413333;
}

.colonne-droite h2{
    font-family: "Trebuchet MS", sans-serif;
    text-decoration: underline;
    color: #383131;            /* Rappelle la couleur sombre de la colonne gauche */
    font-size: 19px;           /* Une taille propre et imposante pour les sections */
    text-transform: uppercase; /* Force les titres en majuscules (PROFIL, PROJETS...) */
    letter-spacing: 1px;       /* Écarte légèrement les lettres pour le style */
    margin-top: 30px;          /* Crée un espace au-dessus de chaque grand titre */
    margin-bottom: 15px;       /* Espace entre le titre et le contenu en dessous */
    /* Même logique d'étincelle qu'à gauche adaptée pour le fond clair */
    text-shadow: 0 0 5px rgba(52, 55, 55, 0.4), 
                 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.colonne-droite p, 
.colonne-droite li, 
.colonne-droite h3,
.colonne-droite blockquote {
    /* Ombre noire très légère (0.15 d'opacité) et fine (2px de flou) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.colonne-droite h3 {
    font-size: 16px;
    color: #1a252f;
    margin-top: 20px;     /* Espace raisonnable au-dessus */
    margin-bottom: 5px;    /* Rapproche la liste à puces juste en dessous */
}

.colonne-droite p {
    margin-top: 2px;
    margin-bottom: 8px;   /* Évite les gros sauts de ligne vides */
}

@media (max-width: 820px) {
    body {
        flex-direction: column; /* Force les deux colonnes à s'empiler verticalement */
    }

    .colonne-gauche, 
    .colonne-droite {
        flex: 1;                /* Occupent 100% de la largeur du téléphone */
        width: 100%;
        box-sizing: border-box; /* Évite que le texte ne dépasse de l'écran */
    }

    .colonne-gauche h1 {
        font-size: 24px;        /* Réduit un peu le titre pour les petits écrans */
    }
}