/*css d'entete */

<style>
        
    body {
            background-color: #f7f7f7;
            font-family: "Roboto", sans-serif;
            overflow-x: hidden;
        }


/*TITRE PRINCIPAL*/
    .text-center {
        text-align: center; /* Centre le texte */
        background-color: #f0f0f0; /* Gris clair */
        padding: 20px; /* Espacement autour du texte */
        border-radius: 10px; /* Arrondir les bords du fond */
        }
/*FIN TITRE PRINCIPAL*/


/* SIDEBAR */
    .sidebar {
        background: linear-gradient(180deg, #f7dce8, #f2f2f2);
        width: 290px;
        min-height: 100vh;
        position: fixed;
        overflow: visible;
        top: 0;
        left: 0;
        overflow-y: auto;
        padding-bottom: 30px;
        box-shadow: 3px 0 10px rgba(0,0,0,0.1);
        z-index: 20;
        }

/* Photo du sidebar */
    .profile-container { perspective: 1000px; width: 150px; margin: 0 auto; }
    .profile-pic {
        width: 150px; height: 150px; border-radius: 50%;
        object-fit: cover; border: 5px solid white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .profile-pic:hover {
        transform: scale(1.06);
        box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    }
/* Fin photo du sidebar */

/* Titres du sidebar*/
    .section-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #d86a9d;
        border-bottom: 2px solid #d86a9d;
        margin-bottom: 15px;
        padding-bottom: 5px;
    }
/* Fin titres du sidebar*/

/* Badges du sidebar*/
    .badge-custom {
        background-color: #e8b6cc; color: #5a3c4e;
        font-size: 0.9rem; transition: 0.2s;
    }
    .badge-custom:hover { transform: scale(1.1); background-color: #f7dce8;
    }
/* Fin du sidebar*/

/* Contenu principal du sidebar*/
    .main-content { margin-left: 300px; padding: 40px; }
/* Fin contenu du sidebar*/

/* Cards du sidebar */
    .card-custom {
        background: white; border-radius: 12px; border: none;
        padding: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-custom:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }
/* Fin cards du sidebar */
/* FIN SIDEBAR */


/* ICONE CHANGEMANT DE LANGUE*/
    .globe-container {
        position: fixed;
        bottom: 5px;
        left: 5px; /* Positionné à gauche */
        background-color: #f8d0d8; /* Fond rose pâle doux */
        border-radius: 10%;
        padding: 2px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .globe-container:hover {
        transform: translateY(-5px); /* Effet de survol pour un léger déplacement vers le haut */
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
    }

    .globe-link {
        text-decoration: none; /* Supprimer le soulignement du lien */
        color: inherit; /* Hérite la couleur du parent */
    }

    .globe-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;  /* Largeur du cercle de fond */
        height: 50px; /* Hauteur du cercle de fond */
        overflow: hidden;
        border-radius: 50%;  /* Pour donner une forme de cercle */
    }

    .globe-icon i {
        font-size: 24px;  /* Taille de l'icône */
        color: #fff; /* Icône en blanc */
    }
/* FIN ICONE CHANGEMANT DE LANGUE*/

/* LANGUES MODERNES ROSE PÂLE */
    .modern-lang-container {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .modern-lang {
        text-align: center;
    }

/* Texte */
    .lang-text {
        margin-top: 12px;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .lang-text small {
        font-size: 0.78rem;
        color: #9a8f95;
    }
/* Fin texte */

/* Cercle style "rose quartz" moderne */
    .modern-ring {
        width: 105px;
        height: 105px;
        border-radius: 50%;
        position: relative;

        background: conic-gradient(
            #f8cfe5 calc(var(--percent) * 1%),
            #f6d8e7 calc(var(--percent) * 1%),
            rgba(248, 230, 240, 0.4) calc(var(--percent) * 1%) );

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        backdrop-filter: blur(10px);
        animation: ringFill 1.8s cubic-bezier(.4,0,.2,1) forwards;
    }
/* Fin cercle style "rose quartz" moderne */

/* Disque intérieur givré rose */
    .inner-ring {
        width: 83%;
        height: 83%;
        background: rgba(255, 245, 250, 0.7);
        border-radius: 50%;
        backdrop-filter: blur(14px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.6);
    }
/* Fin disque intérieur givré rose */

/* Texte au centre */
    .value {
        position: absolute;
        font-size: 1.15rem;
        font-weight: 700;
        color: #6b5662;
    }
/* Fin texte au centre */

/* Animation progressive */
    @keyframes ringFill {
        0% {
        background: conic-gradient(
            rgba(248,230,240,0.4) 0%, 
            rgba(248,230,240,0.4) 100%);
        transform: scale(0.85);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    }
/* Fin animation progressive */

/* Hover moderne, lumière rose pâle */
    .modern-ring:hover {
        transform: scale(1.08) rotate(3deg);
        transition: 0.35s ease;
        box-shadow: 
            0 0 18px rgba(248, 207, 229, 0.5),
            0 0 32px rgba(246, 216, 231, 0.3),
            0 0 48px rgba(254, 241, 248, 0.25);
    }
/* Fin hover moderne, lumière rose pâle */
/* FIN LANGUES MODERNES ROSE PÂLE */



/* LIVRES */
    .book-img {
        width: 120px; height: 170px; object-fit: cover; border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: 0.3s ease;
    }
    .book-img:hover { transform: scale(1.1) rotate(2deg); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
/* FIN LIVRES */

/* INTERETS */
    .interest-item { font-size: 1.1rem; transition: 0.2s ease; }
    .interest-item:hover { padding-left: 8px; color: #a94b7a; }
/* FIN INTERETS */

/* LANGUES */
    .lang-bubble {
        background: #f7dce8; border-radius: 30px; padding: 12px 20px;
        display: inline-flex; align-items: center; gap: 10px; margin: 8px;
        cursor: pointer; transition: 0.3s ease; box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }
    .lang-bubble:hover { transform: scale(1.08); background: #f3c6dd; }
    .lang-flag { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; transition: 0.3s; }
    .lang-bubble:hover .lang-flag { transform: scale(1.15) rotate(2deg); }
    .lang-progress { width:100%; height:8px; background:#e7e7e7; border-radius:5px; overflow:hidden; margin-top:6px; }
    .lang-bar { height:100%; background:#d86a9d; border-radius:5px; width:0%; transition:width 1.2s ease; }
/* FIN LANGUES */

/* FORMATION TIMELINE */
    .timeline { position: relative; margin: 20px 0; padding-left: 40px; }
    .timeline::before {
        content:''; position:absolute; left:20px; top:0; bottom:0;
        width:4px; background:#d86a9d; border-radius:2px;
    }
    .timeline-item { margin-bottom: 30px; }
/* FIN FORMATION TIMELINE */

/* EXPÉRIENCE */
    .timeline-experience {
        display: flex; flex-direction: column;
        gap: 25px; margin-top: 20px;
    }

    .exp-item {
        display: flex; gap: 20px; padding: 20px;
        background: #fff; border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        align-items: flex-start; transition: 0.3s ease;
    }

    .exp-item:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }

    .exp-icon {
        width: 50px; height: 50px; background: #f7dce8;
        border-radius: 12px; display: flex; justify-content: center; align-items: center;
        font-size: 1.6rem; color: #a94b7a; flex-shrink: 0;
        box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
    }
/* FIN EXPÉRIENCE */

/* PORTFOLIO */
    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
        gap: 30px; 
        margin-top: 20px;
    }

    .portfolio-item {
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: block; /* obligatoire pour rendre le lien cliquable sur toute la carte */
    }

    .portfolio-item img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: contain;
        transition: transform 0.4s ease;
    }

    .portfolio-item:hover img {
        transform: scale(1.05);
    }

    .portfolio-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.2);
    }

/* FIN PORTFOLIO */


</style>