@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Reset et box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Styles de base pour le CV */
body {
    font-family: 'Poppins', sans-serif; /* Utilisation de Poppins */
    /*margin: 0;*/
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    background-color: #f4f7f6; /* Fond légèrement différent, plus doux */
    color: #444; /* Couleur de texte légèrement adoucie */
    line-height: 1.7; /* Interligne légèrement augmenté */
    font-weight: 300; /* Police plus légère par défaut */
    overflow-wrap: break-word; /* Permettre la césure des mots longs */
}

.container {
    max-width: 1140px; /* Augmentation de la largeur max pour PC */
    margin: 40px auto; /* Marge augmentée */
    padding: 30px; /* Padding augmenté */
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre plus douce */
    border-radius: 10px; /* Coins plus arrondis */
}

.content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permet de passer en une colonne sur petit écran */
    gap: 30px; /* Espace entre les colonnes */
}

.sidebar {
    flex: 1; /* Prend 1 part de l'espace */
    min-width: 250px; /* Largeur minimale pour la sidebar */
}

.main-content {
    flex: 2.5; /* Prend 2.5 parts de l'espace (plus large) */
}

h1, h2, h3 {
    color: #2c3e50; /* Bleu/gris foncé plus sobre pour les titres */
    margin-bottom: 0.7em; /* Marge sous titres ajustée */
    font-weight: 600; /* Titres plus gras */
}

h1 {
    text-align: center;
    border-bottom: 2px solid #e0e0e0; /* Ligne de séparation plus claire */
    padding-bottom: 15px;
    margin-bottom: 10px; /* Marge H1 réduite */
    font-size: 2.5em; /* Taille H1 augmentée */
}

.header-info {
    display: flex;
    flex-wrap: wrap; /* Pour passer à la ligne si manque de place */
    justify-content: center; /* Centrer les items */
    align-items: center; /* Aligner verticalement au centre */
    gap: 10px 25px; /* Espacement réduit vertical et horizontal */
    margin-bottom: 30px; /* Marge sous les infos */
    padding-bottom: 20px; /* Padding sous les infos */
    border-bottom: 1px solid #eee; /* Ligne de séparation légère */
    text-align: center; /* Assurer le centrage si wrap */
}

.info-item {
    display: inline-flex; /* Pour aligner icône et texte */
    align-items: center; /* Aligner icône et texte verticalement */
    font-size: 0.9em; /* Taille légèrement réduite */
    color: #555; /* Couleur de texte cohérente */
}

.info-item .icon {
    margin-right: 6px; /* Espace entre icône et texte */
    font-size: 1.1em; /* Icône légèrement plus grande */
}

h2 {
    font-size: 1.6em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 20px;
    color: #555;
}

h3 {
    font-size: 1.2em;
    color: #3498db; /* Bleu plus vif pour les sous-titres (postes) */
    font-weight: 400; /* Moins gras que h1/h2 */
}

.section {
    margin-bottom: 40px; /* Espacement entre sections augmenté */
}

.experience-item {
    margin-bottom: 25px; /* Espacement entre expériences */
    padding-left: 15px; /* Petit retrait pour l'expérience */
    border-left: 3px solid #3498db; /* Ligne verticale bleue */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease; /* Ajout transition border */
    cursor: pointer; /* Indiquer que TOUT l'item est cliquable */
    border-radius: 10px; /* Coins arrondis pour le bloc expérience */
    overflow: hidden; /* Pour que le contenu respecte les coins arrondis */
}

.experience-header {
    display: flex;
    align-items: center; /* Revenir à l'alignement central standard */
    margin-bottom: 0.5em; /* Espace sous l'en-tête */
}

/* Toggler change de couleur au survol de l'item entier */
.experience-item:hover .toggler {
     color: #2980b9; /* Toggler légèrement plus foncé au survol */
}

.experience-item:hover {
    background-color: #f5f5f5; /* Fond gris plus marqué au survol de l'item */
}

.experience-header h3 {
    flex-grow: 1; /* Permet au titre de prendre l'espace restant */
    font-weight: bold;
    color: #3498db;
    transition: transform 0.3s ease, color 0.3s ease; /* Ajouter transition couleur */
    flex-shrink: 1; /* Permettre au titre de rétrécir */
    min-width: 0;  /* Autoriser le rétrécissement sous la taille intrinsèque */
    overflow-wrap: break-word; /* Assurer la césure des mots longs dans le titre */
}

.toggler {
    display: flex; /* Rendre le span lui-même un conteneur flex */
    align-items: center; /* Centrer le '+' verticalement DANS le span */
    justify-content: center; /* Centrer le '+' horizontalement DANS le span */
    font-size: 1.5em;
    font-weight: bold;
    color: #3498db;
    transition: transform 0.3s ease;
    margin-right: 10px; /* Espace entre le + et le titre */
    flex-shrink: 0; /* Empêche le toggler de rétrécir */
}

.experience-item.open .toggler {
    transform: rotate(45deg); /* Change + en X (ou presque) */
}

.experience-details {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: -15px; /* Compenser le padding-left de experience-item */
    padding-left: 15px; /* Rétablir le padding */
    border-left: 3px solid transparent; /* Placeholder pour aligner avec la bordure principale */
    background-color: transparent; /* Fond transparent par défaut */
    transition: max-height 0.5s ease-out, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out, background-color 0.5s ease-out, border-left-color 0.5s ease-out; /* Ajout background et border à la transition */
}

.experience-item.open .experience-details {
    max-height: 500px; /* Hauteur max suffisante pour le contenu */
    padding-top: 10px;
    padding-bottom: 15px;
    border-left-color: #bdc3c7; /* Bordure grise pour les détails */
    background-color: #fafafa; /* Fond gris très pâle lorsque ouvert */
}

.experience-item.highlight-experience {
    background-color: #f8f9fa; /* Fond légèrement grisé pour la surbrillance */
    box-shadow: 0 2px 12px rgba(52, 152, 219, 0.5); /* Ombre bleue plus prononcée */
    border-left-color: #2980b9; /* Bordure gauche accentuée (bleu plus foncé) */
}

/* Style spécifique pour les paragraphes dans les détails */
.experience-details p {
 margin-bottom: 0.5em;
 color: #666; /* Texte légèrement plus clair pour les détails */
 font-size: 0.9em;
}

.experience-item p:last-child {
    margin-bottom: 0;
}

.experience-item em {
 color: #555;
 font-style: normal;
}

.skills ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Essayer de centrer les lignes */
}

.skills ul li {
    display: inline-block;
    background-color: #eaf2f8; /* Fond bleu très clair - Couleur par défaut */
    color: #34495e; /* Texte gris foncé par défaut pour une bonne lisibilité */
    padding: 8px 15px;
    margin: 6px 6px 6px 0;
    border-radius: 20px; /* Coins très arrondis (style "pill") */
    font-size: 0.9em;
    font-weight: 400;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease; /* Animation douce + bordure */
    border: 2px solid transparent; /* Bordure transparente 2px par défaut */
}

.skills ul li.highlight-skill {
    border: 2px solid #3498db; /* Bordure bleue 2px pour la mise en avant */
}

/* Couleurs de fond spécifiques par type de compétence - Tons doux */
.skills li[data-type="lang"] {
    background-color: #fadbd8; /* Rouge très doux (saumon pâle) */
    /* color: #ffffff; Texte blanc pour contraste -> Utilise la couleur par défaut */
}
.skills li[data-type="db"] {
    background-color: #d1f2eb; /* Vert très doux (menthe pâle) */
}
.skills li[data-type="messaging"] {
    background-color: #eadcf5; /* Violet très doux (lavande pâle) */
    /* color: #ffffff; Texte blanc pour contraste -> Utilise la couleur par défaut */
}
.skills li[data-type="concept"] {
    background-color: #fdebd0; /* Jaune/Orange très doux (pêche pâle) */
}
.skills li[data-type="os"] {
    background-color: #d6eaf8; /* Bleu très doux (ciel pâle) */
}
.skills li[data-type="tool"] {
    background-color: #e5e7e9; /* Gris doux */
}
.skills li[data-type="unknown"] {
    background-color: #f8f9f9; /* Gris extra pâle */
}
/* La couleur de texte par défaut #34495e s'applique à tous maintenant */

/* Effet de survol - reste le même */
.skills ul li:hover {
    background-color: #3498db; /* Fond bleu standard au survol */
    color: #ffffff; /* Texte blanc au survol */
    transform: translateY(-2px); /* Léger déplacement vers le haut */
    cursor: default; /* Curseur par défaut */
}

a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9em;
    color: #888;
}

.formation-item {
    margin-bottom: 15px;
}

.formation-item p {
 margin-bottom: 0.3em;
}

.interets ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.interets ul li {
    display: inline-block;
    background-color: #f0f0f0; /* Gris un peu plus neutre */
    color: #555;
    padding: 6px 12px;
    margin: 5px 5px 5px 0;
    border-radius: 15px; /* Moins arrondi que les compétences */
    font-size: 0.9em;
    font-weight: 400;
}

.note-asso {
    margin-top: 15px;
    font-style: italic;
    color: #666;
}

/* Gérer l'affichage des sections d'intérêts dupliquées */
.interests-mobile {
    display: none; /* Caché par défaut (grand écran) */
}

/* Responsive: Sur les écrans de moins de 992px, les colonnes s'empilent */
@media (max-width: 991px) {
    .container {
        padding: 20px; /* Padding réduit sur mobile */
        margin: 20px auto; /* Marge réduite */
        width: 100%; /* Assurer que le container essaie d'utiliser toute la largeur */
    }

    .content-wrapper {
        flex-direction: column;
        gap: 20px; /* Espacement réduit entre les sections empilées */
    }

    .sidebar,
    .main-content {
        flex: 1 1 100%; /* Prend toute la largeur */
        min-width: 0; /* Réinitialiser la largeur minimale sur mobile */
    }

    h1 {
        font-size: 2em; /* Taille H1 réduite */
    }

    h2 {
        font-size: 1.4em; /* Taille H2 réduite */
    }

    .header-info {
        gap: 8px 15px; /* Espacement réduit dans l'en-tête */
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .info-item {
        font-size: 0.85em;
    }

    .section {
        margin-bottom: 30px; /* Marge entre sections réduite */
    }

    .interests-sidebar {
        display: none; /* Cacher la version sidebar sur petit écran */
    }
    .interests-mobile {
        display: block; /* Afficher la version mobile sur petit écran */
        margin-bottom: 30px; /* Assurer la marge en bas */
    }

    /* Optionnel: réduire légèrement la taille des pastilles */
    .skills ul li {
        font-size: 0.85em;
        padding: 6px 12px;
    }
    .tech-tag {
        font-size: 0.75em;
        padding: 2px 6px;
    }
}


.lang-flags {
    display: inline-flex; /* Pour aligner les drapeaux */
    align-items: center; /* Centrer verticalement */
    gap: 5px; /* Petit espace entre les drapeaux */
    line-height: 1.4; /* Pour espacement vertical si wrap */
}

.lang-flag {
    height: 1em; /* Hauteur alignée sur la taille de police environnante */
    width: auto; /* Largeur automatique pour garder les proportions */
    vertical-align: middle; /* Meilleur alignement vertical avec le texte */
}

.tech-tag {
    display: inline-block;
    background-color: #eef0f1; /* Gris très léger */
    color: #555; /* Texte gris moyen */
    font-size: 0.8em; /* Plus petit que les compétences principales */
    padding: 3px 8px;
    border-radius: 12px; /* Arrondi similaire mais adapté */
    margin: 2px 4px 2px 0;
    line-height: 1.4; /* Pour espacement vertical si wrap */
}

/* Règles spécifiques pour les écrans encore plus petits si nécessaire */
/* @media (max-width: 600px) { ... } */

/* Règles spécifiques pour les écrans TRES petits (smartphones < 480px) */
@media (max-width: 480px) {
    .container {
        padding: 5px; /* Padding encore plus réduit */
        margin: 5px auto; /* Marge encore plus réduite */
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.3em;
    }

    .header-info {
        gap: 3px 8px; /* Espacement très très réduit */
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .info-item {
        font-size: 0.8em;
    }

    /* Forcer la césure de l'email sur très petit écran */
    .email-info a {
        word-break: break-all;
    }

    .skills ul li,
    .interets ul li {
        font-size: 0.8em;
        padding: 4px 8px;
    }

    .tech-tag {
        font-size: 0.7em;
        padding: 2px 5px;
    }

    .experience-header h3 {
        font-size: 1.1em; /* Réduire titre expérience */
    }
}

/* Suppression du commentaire placeholder */
/*
@media (max-width: 600px) { ... }
*/

/* Suppression des styles pour .langues */
/*
.langues ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.langues ul li {
    margin-bottom: 5px;
    color: #555;
}
*/

.lang-flags {
    display: inline-flex; /* Pour aligner les drapeaux */
    align-items: center; /* Centrer verticalement */
    gap: 5px; /* Petit espace entre les drapeaux */
    line-height: 1.4; /* Pour espacement vertical si wrap */
}

.lang-flag {
    height: 1em; /* Hauteur alignée sur la taille de police environnante */
    width: auto; /* Largeur automatique pour garder les proportions */
    vertical-align: middle; /* Meilleur alignement vertical avec le texte */
}

.tech-tag {
    display: inline-block;
    background-color: #eef0f1; /* Gris très léger */
    color: #555; /* Texte gris moyen */
    font-size: 0.8em; /* Plus petit que les compétences principales */
    padding: 3px 8px;
    border-radius: 12px; /* Arrondi similaire mais adapté */
    margin: 2px 4px 2px 0;
    line-height: 1.4; /* Pour espacement vertical si wrap */
}

/* Suppression du commentaire placeholder */
/*
@media (max-width: 600px) { ... }
*/

/* Règles spécifiques pour les écrans TRES petits (smartphones < 480px) */
@media (max-width: 480px) {
    .container {
        padding: 10px; /* Padding minimal */
        margin: 10px auto;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.3em;
    }

    .header-info {
        gap: 5px 10px; /* Espacement très réduit */
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .info-item {
        font-size: 0.8em;
    }

    .skills ul li,
    .interets ul li {
        font-size: 0.8em;
        padding: 4px 8px;
    }

    .tech-tag {
        font-size: 0.7em;
        padding: 2px 5px;
    }

    .experience-header h3 {
        font-size: 1.1em; /* Réduire titre expérience */
    }
}

/* Suppression du commentaire placeholder */
/*
@media (max-width: 600px) { ... }
*/

/* Style pour le bouton Tout Ouvrir/Fermer - Nouveau style */
.btn-toggle-all {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    padding: 0; /* Pas de padding interne */
    font-size: 1.6em; /* Taille similaire au toggler individuel */
    font-weight: bold;
    color: #3498db; /* Couleur bleue */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease; /* Ajouter transform pour effet optionnel */
    line-height: 1; /* Pour aider à l'alignement vertical */
    margin-right: 10px;
    width: 40px;
}

.btn-toggle-all:hover {
    color: #2980b9; /* Assombrir au survol */
    /* Optionnel: ajouter un petit effet de scale ou de rotation au survol */
    /* transform: scale(1.1); */
}

/* Suppression de l'ancien style bouton */
/*
.btn-toggle-all {
    padding: 6px 12px;
// ... existing code ...
    transition: background-color 0.3s ease;
}

.btn-toggle-all:hover {
    background-color: #e5e5e5;
}
*/

h3 {
    font-size: 1.2em;
    color: #3498db; /* Bleu plus vif pour les sous-titres (postes) */
    font-weight: 400; /* Moins gras que h1/h2 */
}

.section.projets {
    margin-bottom: 40px;
}

.projet-item {
    margin-bottom: 18px;
}

.projet-item h3 {
    font-size: 1.05em;
    color: #2c3e50;
    margin-bottom: 0.3em;
    font-weight: 600;
}

.projet-item p {
    margin: 0 0 0.5em 0;
    color: #555;
    font-size: 0.97em;
}