:root {
    --bg-color: #111827; /* Gris bleuté très sombre (Tailwind gray-900) */
    --primary-text: #F3F4F6; /* Gris clair (Tailwind gray-100) */
    --secondary-text: #9CA3AF; /* Gris moyen (Tailwind gray-400) */
    --accent-color-1: #3B82F6; /* Bleu vif (Tailwind blue-500) */
    --accent-color-1-rgb: 59, 130, 246;
    --accent-color-2: #10B981; /* Vert émeraude (Tailwind emerald-500) */
    --accent-color-2-rgb: 16, 185, 129;
    --border-color: rgba(243, 244, 246, 0.1); /* Bordure subtile basée sur primary-text */
    --card-bg: rgba(31, 41, 55, 0.6); /* Tailwind gray-800 avec opacité */
    --card-bg-rgb: 31, 41, 55;
    --font-main: 'Inter', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased; /* Améliore le rendu des polices sur WebKit */
    -moz-osx-font-smoothing: grayscale; /* Améliore le rendu des polices sur Firefox */
}

img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

html {
    scroll-behavior: smooth; /* Défilement doux pour les ancres */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--bg-color);
    color: var(--primary-text);
    font-family: var(--font-main);
    transition: background-color 0.5s ease, color 0.5s ease; /* Transitions douces */
    line-height: 1.7; /* Interligne légèrement augmenté pour la lisibilité */
    font-size: 16px; /* Taille de police de base */
}

#app-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh; /* S'assurer que l'app-wrapper prend au moins toute la hauteur de la vue */
}

.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: -1;
    transition: opacity 1.2s ease-in-out;
}

#home .section-background {
    background-image: url('https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?q=80&w=2689&auto=format&fit=crop');
}

#skills .section-background {
    background-image: url('https://images.unsplash.com/photo-1639762681057-408e52192e50?q=80&w=2532&auto=format&fit=crop');
}

#parcours .section-background {
    background-image: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=80&w=2574&auto=format&fit=crop');
}

#contact .section-background {
    background-image: url('https://images.unsplash.com/photo-1586769852836-bc069f19e1b6?q=80&w=2574&auto=format&fit=crop');
}

.section.is-active .section-background {
    opacity: .03; /* Encore plus subtil */
}

.aurora-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180vw; /* Légèrement plus grand pour couvrir plus d'espace */
    height: 180vh;
    background:
        radial-gradient(ellipse at var(--x, 50%) var(--y, 50%), var(--accent-color-1) 0%, transparent 30%), /* Diffusion plus large */
        radial-gradient(ellipse at calc(100% - var(--x, 50%)) calc(100% - var(--y, 50%)), var(--accent-color-2) 0%, transparent 35%); /* Diffusion plus large */
    opacity: .1; /* Plus subtil */
    filter: blur(120px); /* Flou plus prononcé */
    z-index: -2;
    transition: opacity 1.2s ease-in-out, transform 25s ease-in-out alternate infinite;
    animation: aurora-movement 35s ease-in-out infinite alternate;
}

@keyframes aurora-movement {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: blur(120px) brightness(0.9);
    }
    50% {
        transform: translate(-48%, -52%) scale(1.05) rotate(5deg); /* Mouvement plus ample et rotation */
        filter: blur(110px) brightness(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: blur(120px) brightness(0.9);
    }
}

.section:not(.is-active) .aurora-background {
    opacity: 0;
}

/* --- Main Vertical Scrolling Container --- */
main {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* La hauteur est déterminée par le contenu des sections */
    padding-top: 60px; /* Espace pour le header fixe */
    padding-bottom: 60px; /* Espace pour le footer fixe si besoin, ou ajuster */
}

.section {
    width: 100%;
    min-height: calc(100vh - 120px); /* Hauteur minimale pour remplir l'écran moins header et footer, ajustable */
    /* height: auto; La hauteur s'adapte au contenu */
    display: flex;
    flex-direction: column; /* Pour aligner le contenu de la section verticalement si besoin */
    justify-content: center;
    align-items: center;
    /* Utilisation de clamp pour des paddings fluides */
    padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 5vw, 5rem); /* Augmentation du padding vertical */
    position: relative;
    overflow: hidden; /* Peut être retiré si le contenu de la section doit déborder */
    border-bottom: 1px solid var(--border-color); /* Séparateur visuel entre sections */
}

.section:last-child {
    border-bottom: none; /* Pas de bordure pour la dernière section */
}


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .75rem 1.5rem; /* Augmentation légère du padding */
    background: rgba(10, 10, 10, 0.5); /* Fond header plus sombre, en accord avec --bg-color */
    backdrop-filter: blur(12px); /* Flou légèrement réduit pour plus de clarté */
    -webkit-backdrop-filter: blur(12px); /* Pour Safari */
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    height: 64px; /* Hauteur légèrement augmentée */
}

/* --- Hamburger Menu & Mobile Nav Styles --- */
.hamburger-btn {
    /* Styles Tailwind déjà appliqués, peut être ajusté ici si nécessaire */
    /* Assurez-vous qu'il est au-dessus du contenu mais en dessous du panneau mobile ouvert */
}

.mobile-nav {
    /* Styles Tailwind déjà appliqués pour la base (position, bg, transform) */
    /* S'assurer qu'il est au-dessus de tout sauf peut-être des modales plein écran */
}

.mobile-nav-link.active {
    background-color: var(--accent-color-1);
    color: white;
}


/* --- Personalization Panel Styles --- */
#personalization-toggle {
    /* Styles déjà définis dans index.html avec Tailwind */
}

#personalization-panel {
    /* Styles déjà définis dans index.html avec Tailwind */
}

.main-nav a {
    padding: .6rem 1.2rem; /* Padding légèrement augmenté */
    margin: 0 .6rem;
    font-weight: 600; /* Police un peu plus grasse */
    color: var(--secondary-text);
    text-decoration: none;
    position: relative;
    transition: color .3s ease, transform 0.2s ease-out; /* Ajout transition transform */
    letter-spacing: 0.025em; /* Léger espacement des lettres */
}

.main-nav a:hover {
    color: var(--primary-text);
    transform: translateY(-2px); /* Léger effet de soulèvement au survol */
}

.main-nav a.active {
    color: var(--accent-color-1); /* Couleur d'accent pour l'élément actif */
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px; /* Un peu plus bas */
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* Commence sans largeur */
    height: 2.5px; /* Un peu plus épais */
    background-color: var(--accent-color-1);
    border-radius: 2px; /* Coins arrondis pour la ligne */
    transition: width .35s cubic-bezier(.25, .8, .25, 1); /* Transition sur la largeur */
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 60%; /* La ligne ne prend pas toute la largeur pour un effet plus subtil */
}

/* Les flèches de navigation ne sont plus nécessaires pour le défilement vertical */
/*
.nav-arrow {
    ...
}
#prev-arrow {
    ...
}
#next-arrow {
    ...
}
*/

.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px; /* Bordures un peu moins arrondies pour un look plus net */
    backdrop-filter: blur(10px); /* Flou plus subtil */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Ombre plus douce et diffuse */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centrer le contenu */
    gap: .6rem;
    background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2)); /* Angle de gradient ajusté */
    color: var(--primary-text); /* Texte blanc cassé pour contraste */
    padding: .9rem 2rem; /* Padding légèrement augmenté */
    border-radius: 30px; /* Bordures arrondies mais pas complètement circulaires */
    font-weight: 700;
    text-decoration: none;
    transition: all .3s cubic-bezier(.25, .8, .25, 1); /* Courbe de Bézier pour une transition plus naturelle */
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(124, 58, 237, 0.25); /* Ombre plus subtile, couleur d'accent */
    letter-spacing: 0.025em;
}

.cta-button:hover {
    transform: translateY(-2px) scale(1.03); /* Effet de survol plus discret */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(124, 58, 237, 0.35);
    background: linear-gradient(135deg, var(--accent-color-2), var(--accent-color-1)); /* Inversion du gradient au survol */
}
.cta-button svg {
    width: 1.1em; /* Taille des icônes relative à la police */
    height: 1.1em;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.165, .84, .44, 1), transform .8s cubic-bezier(.165, .84, .44, 1);
}

.section.is-active .animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
}

#home .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: center;
}

#home h1 {
    background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2)); /* Utilisation des nouvelles couleurs d'accent */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-weight: 800; /* Un peu moins lourd que 900 */
    font-size: clamp(2.8rem, 7vw, 5rem); /* Taille légèrement augmentée */
    line-height: 1.15; /* Interligne légèrement augmenté */
    letter-spacing: -0.03em; /* Espacement de lettres plus resserré */
}

#home h2 {
    font-size: clamp(1.2rem, 2.8vw, 1.85rem); /* Taille légèrement augmentée */
    line-height: 1.4;
    font-weight: 400; /* Plus léger pour contraster avec h1 */
    color: var(--secondary-text); /* Utilisation de la couleur secondaire pour le sous-titre */
}

#home p {
    font-size: clamp(0.95rem, 2vw, 1.15rem); /* Taille légèrement augmentée */
    line-height: 1.75; /* Interligne augmenté pour la lisibilité */
    color: var(--secondary-text); /* Texte principal de paragraphe en gris clair */
}
#home p .accent-color { /* Pour les spans spécifiques dans le paragraphe */
    color: var(--accent-color-1);
    font-weight: 600;
}


#home .strength-item,
#home .atout-item {
    background: rgba(39, 39, 42, 0.3); /* Fond plus sombre et subtil, ex: zinc-800 avec opacité */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem; /* Padding augmenté */
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
    position: relative;
}

#home .strength-item:hover,
#home .atout-item:hover {
    transform: translateY(-6px) scale(1.02); /* Effet de survol plus prononcé */
    background-color: rgba(55, 55, 58, 0.4); /* Fond légèrement plus clair au survol */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Styles pour les infobulles */
.tooltip-content {
    visibility: hidden;
    width: 220px;
    background-color: var(--card-bg); /* Utiliser le fond de carte pour cohérence */
    color: var(--primary-text);
    text-align: center;
    border-radius: 8px; /* Cohérence avec autres border-radius */
    padding: 12px; /* Un peu plus de padding */
    position: absolute;
    z-index: 10; /* S'assurer qu'elle est au-dessus des autres éléments */
    bottom: 125%; 
    left: 50%;
    margin-left: -110px; 
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Ajout transition transform */
    font-size: 0.875rem; /* Légère augmentation taille police */
    line-height: 1.45;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25); /* Ombre plus prononcée */
    transform: translateY(5px); /* Départ légèrement décalé pour l'animation */
}

.strength-item:hover .tooltip-content,
.atout-item:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Animation à l'apparition */
}

.strength-item:hover .tooltip-content,
.atout-item:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Flèche pour l'infobulle */
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%; /* En bas de l'infobulle */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--card-bg) transparent transparent transparent;
}

#home .strength-item h5 {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.15rem; /* Taille légèrement augmentée */
    color: var(--primary-text); /* Assurer la couleur du texte primaire */
    margin-bottom: 0.5rem; /* Ajouter un peu d'espace en dessous */
}

#home .strength-item .icon {
    width: 26px; /* Taille légèrement ajustée */
    height: 26px;
    margin-right: .85rem; /* Espacement ajusté */
    color: var(--accent-color-1);
    flex-shrink: 0; /* Empêcher l'icône de rétrécir */
}
#home .atout-item p {
    color: var(--primary-text);
    font-weight: 600;
    font-size: 1.05rem;
}

.gemini-feature-box {
    padding: 1.75rem; /* Padding augmenté */
    margin-top: 2.5rem; /* Marge augmentée */
}
.gemini-feature-box h3 {
    color: var(--primary-text);
}
.gemini-feature-box p {
    color: var(--secondary-text);
}

.gemini-input {
    width: 100%;
    background: rgba(39, 39, 42, 0.5); /* Fond similaire aux cartes */
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    border-radius: 8px;
    padding: .85rem 1.1rem; /* Padding augmenté */
    margin-bottom: 1.2rem; /* Marge augmentée */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gemini-input::placeholder {
    color: var(--secondary-text);
    opacity: 0.7;
}
.gemini-input:focus {
    outline: none;
    border-color: var(--accent-color-1);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); /* Ombre de focus */
}

.gemini-output {
    margin-top: 1.2rem;
    padding: 1.1rem;
    background-color: rgba(39, 39, 42, 0.5); /* Fond similaire aux cartes */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 130px; /* Hauteur min augmentée */
    white-space: pre-wrap;
    font-size: .95rem; /* Taille de police augmentée */
    color: var(--secondary-text);
    line-height: 1.6;
}

#skills .content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center; /* Changed from stretch to center */
    justify-content: center; /* Added for horizontal centering */
    gap: 2rem;
}

#chart-container {
    flex: 2.5; /* Augmenté pour prendre plus de place */
    height: 100%;
    min-height: 550px; /* Augmenté pour plus de hauteur */
    position: relative;
    cursor: grab;
    border: 1px solid var(--border-color); /* Ajout d'une bordure */
    border-radius: 12px; /* Coins arrondis */
    padding: 1rem; /* Léger padding intérieur */
}

#skills-info {
    flex: 0 1 38%; /* Légèrement plus de place */
    align-self: center;
    transition: all .5s ease;
    padding: 2.5rem; /* Padding augmenté */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px; /* Coins arrondis par défaut */
}
#skills-info h2 {
    color: var(--primary-text);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.75rem;
}
#skills-info p {
    color: var(--secondary-text);
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    line-height: 1.7;
    margin-bottom: 1rem;
}
#skills-info .skill-badge { /* Style des badges de compétence */
    background-color: rgba(var(--accent-color-1-rgb, 124, 58, 237), 0.15);
    color: var(--accent-color-1);
    padding: .4rem .9rem;
    border-radius: 16px;
    font-size: .85rem;
    font-weight: 500;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}


#skills-info.highlighted-skill-info {
    background-color: rgba(var(--accent-color-1-rgb, 124, 58, 237), 0.08); /* Utilisation de la nouvelle couleur d'accent */
    border: 1px solid var(--accent-color-1);
    box-shadow: 0 0 20px rgba(var(--accent-color-1-rgb, 124, 58, 237), 0.35); /* Ombre plus prononcée */
    border-radius: 12px;
}

.node circle {
    stroke-width: 2.5px; /* Épaisseur de contour standard */
    cursor: pointer;
    transition: all .3s cubic-bezier(.25, .8, .25, 1);
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.3)); /* Légère ombre portée sur les cercles */
}
.node text {
    font-weight: 500;
    fill: var(--secondary-text);
    transition: fill 0.3s ease;
}
.node:hover text {
    fill: var(--primary-text);
}
.node.focused text {
    fill: var(--accent-color-1);
    font-weight: 700;
}


.node:hover circle {
    transform: scale(1.2); /* Effet de survol légèrement réduit */
    stroke: var(--accent-color-1);
    stroke-width: 4px; /* Épaisseur de contour au survol */
}

.node.focused circle {
    stroke: var(--accent-color-1);
    stroke-width: 5px; /* Épaisseur de contour focus */
    filter: drop-shadow(0px 3px 6px rgba(var(--accent-color-1-rgb, 124, 58, 237),0.4)); /* Ombre plus prononcée pour le focus */
}

.node.dimmed {
    opacity: .2;
}

.node.focused,
.node.focused-neighbor {
    opacity: 1;
}

.node .domain-icon,
.node .skill-icon {
    animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.link {
    stroke: var(--border-color); /* Utiliser la couleur de bordure pour les liens */
    stroke-opacity: .4; /* Opacité augmentée pour meilleure visibilité */
    transition: all .3s ease-in-out;
}

.link.focused-link {
    stroke: var(--accent-color-2);
    stroke-opacity: 0.8; /* Opacité légèrement réduite pour ne pas être trop écrasant */
    stroke-width: 2.5px; /* Épaisseur augmentée */
    animation: draw-link .5s ease-out forwards;
}

@keyframes draw-link {
    from {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }
}

.back-button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    padding: .5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all .3s ease;
    margin-top: 1.5rem;
}

.back-button:hover {
    background-color: var(--border-color);
    color: var(--primary-text);
}

#parcours .parcours-container {
    display: flex;
    width: 100%;
    height: 80vh;
    max-height: 700px;
    max-width: 1200px;
    gap: 2rem;
    padding: 2rem;
}

.timeline-nav-container {
    flex-basis: 40%;
    overflow-y: auto;
    padding-right: 1.5rem; /* Conserver pour l'espacement */
    scrollbar-width: thin; /* Pour Firefox */
    scrollbar-color: var(--secondary-text) transparent; /* Pour Firefox */
}
.timeline-nav-container::-webkit-scrollbar {
    width: 6px;
}
.timeline-nav-container::-webkit-scrollbar-thumb {
    background-color: var(--secondary-text);
    border-radius: 3px;
}


.timeline-entry {
    display: flex;
    gap: 1rem;
    cursor: pointer;
    padding: .85rem; /* Padding augmenté */
    border-radius: 10px; /* Bordures plus arrondies */
    transition: background-color .3s ease, border-left-color .3s ease; /* Transition sur la bordure gauche */
    border-left: 3px solid transparent; /* Bordure gauche pour l'état actif/survol */
    margin-bottom: 0.5rem; /* Espacement entre les entrées */
}

.timeline-entry:hover {
    background-color: rgba(var(--accent-color-1-rgb, 124, 58, 237), .08);
    border-left-color: var(--accent-color-1);
}

.timeline-entry.active {
    background-color: rgba(var(--accent-color-1-rgb, 124, 58, 237), .15);
    border-left-color: var(--accent-color-1);
}
.timeline-entry.active .timeline-content .title {
    color: var(--accent-color-1); /* Le titre devient couleur d'accent */
}


.timeline-marker {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 12px; /* Taille réduite */
    height: 12px;
    background-color: var(--secondary-text);
    border-radius: 50%;
    transition: all .3s ease;
    border: 2.5px solid var(--bg-color); /* Bordure plus épaisse pour se détacher du fond */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Ombre subtile sur le point */
}

.timeline-entry.active .timeline-dot {
    background-color: var(--accent-color-1);
    transform: scale(1.3); /* Effet de zoom plus prononcé */
    box-shadow: 0 0 8px rgba(var(--accent-color-1-rgb, 124, 58, 237), 0.5); /* Ombre colorée */
}

.timeline-line {
    flex-grow: 1;
    width: 2.5px; /* Ligne plus épaisse */
    background-color: var(--border-color);
    opacity: 0.5; /* Ligne plus discrète */
}

.timeline-entry:last-child .timeline-line {
    display: none;
}

.timeline-content {
    padding-bottom: 2rem;
}

.timeline-content .title {
    font-size: 1.15rem; /* Taille ajustée */
    font-weight: 700; /* Graisse ajustée */
    color: var(--primary-text);
    letter-spacing: normal; /* Espacement normal */
    transition: color 0.3s ease;
}

.timeline-content .company {
    font-size: 0.95rem; /* Taille ajustée */
    color: var(--secondary-text);
    font-weight: 500; /* Graisse ajustée */
}

/* .timeline-entry.active .title est déjà géré plus haut */

#parcours-details {
    flex-basis: 60%;
    overflow-y: auto;
    padding: 2rem 2.5rem; /* Padding augmenté */
    opacity: 0;
    transition: opacity .6s ease, transform .4s ease; /* Transition plus douce et ajout de transform */
    transform: translateX(10px); /* Départ légèrement décalé pour l'animation */
    border-radius: 12px;
    background: rgba(var(--card-bg-rgb, 23, 23, 23), 0.7); /* Utiliser la couleur de fond des cartes avec opacité */
    border: 1px solid var(--border-color); /* Ajouter une bordure pour la cohérence */
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-text) transparent;
}
#parcours-details::-webkit-scrollbar {
    width: 6px;
}
#parcours-details::-webkit-scrollbar-thumb {
    background-color: var(--secondary-text);
    border-radius: 3px;
}
#parcours-details.visible { /* Classe pour l'animation d'apparition */
    opacity: 1;
    transform: translateX(0);
}
#parcours-details h3 { /* Titre de l'expérience/formation */
    color: var(--primary-text);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
#parcours-details .text-xl { /* Nom de l'entreprise/école */
    color: var(--accent-color-2); /* Utiliser la deuxième couleur d'accent */
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
#parcours-details p, #parcours-details ul li { /* Description et listes */
    color: var(--secondary-text);
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
#parcours-details ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}
#parcours-details h4 { /* Titre "Compétences Clés" */
    color: var(--primary-text);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}


.skill-badge {
    background: rgba(var(--accent-color-2-rgb, 236, 72, 153), 0.15); /* Utiliser la deuxième couleur d'accent pour les badges ici */
    color: var(--accent-color-2);
    padding: .4rem .9rem;
    border-radius: 16px;
    font-size: .8rem;
    font-weight: 500;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    transition: transform 0.2s ease;
}
.skill-badge:hover {
    transform: scale(1.05);
}

#contact-card {
    padding: clamp(2.5rem, 6vw, 4rem); /* Padding fluide */
    text-align: center;
    max-width: 700px; /* Légèrement plus large */
}
#contact-card h2 {
    color: var(--primary-text);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-bottom: 0.75rem;
}
#contact-card p.text-lg {
    color: var(--secondary-text);
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.7;
    margin-bottom: 2.5rem; /* Plus d'espace avant les liens de contact */
}


.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem; /* Espacement ajusté */
    transition: color .3s ease, transform .3s ease;
    color: var(--secondary-text); /* Couleur par défaut pour les items */
}

.contact-item:hover {
    color: var(--accent-color-1); /* Changement de couleur au survol */
    transform: scale(1.03); /* Léger zoom au survol */
}
.contact-item:hover svg {
    color: var(--accent-color-1); /* Assurer que l'icône change aussi */
}


.contact-item a {
    color: inherit; /* Hérite de .contact-item */
    text-decoration: none;
    display: inline-flex; /* Pour un meilleur alignement et comportement */
    align-items: center;
    gap: 0.8rem; /* Espacement ajusté */
    font-size: clamp(1rem, 2vw, 1.15rem); /* Taille de police fluide */
    font-weight: 500;
    padding: 0.5rem 0; /* Ajouter un peu de padding vertical pour une meilleure zone de clic */
}
.contact-item svg {
    width: 22px; /* Taille des icônes ajustée */
    height: 22px;
    color: var(--secondary-text); /* Couleur par défaut des icônes */
    transition: color 0.3s ease;
}

footer {
    /* position: fixed; /* Le footer peut devenir statique ou relatif */
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem; /* Padding augmenté */
    z-index: 999;
    background: rgba(10, 10, 10, 0.3); /* Fond footer plus subtil, en accord avec --bg-color */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Pour pousser le footer en bas si le contenu est court */
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: .85rem; /* Taille de police légèrement augmentée */
    color: var(--secondary-text);
    text-align: center;
}

/* Les lignes décoratives ne sont plus nécessaires avec le nouveau design */
/*
.footer-content::before,
.footer-content::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--border-color);
}
*/

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--accent-color-1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

::-webkit-scrollbar {
    width: 10px; /* Largeur de la scrollbar augmentée */
}

::-webkit-scrollbar-track {
    background: rgba(10,10,10,0.1); /* Fond de la piste de scrollbar très subtil */
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-text); /* Utiliser la couleur de texte secondaire */
    border-radius: 5px; /* Bordures arrondies */
    border: 2px solid var(--bg-color); /* Bordure pour se détacher du fond */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-1); /* Changement de couleur au survol */
}

/* REMINDER: Pour optimiser les images de fond sur mobile, envisagez d'utiliser des media queries pour servir des images plus petites. */
/* Exemple: */
/* @media (max-width: 768px) { */
/*     #home .section-background { background-image: url('small-home-bg.jpg'); } */
/*     #skills .section-background { background-image: url('small-skills-bg.jpg'); } */
/*     etc. pour les autres sections */
/* } */
/* Media Queries for Responsive Design */

@media (max-width: 1200px) {
    .section {
        padding: 2rem 3rem;
    }

    #home .grid-container {
        gap: 2rem;
    }
}

@media (max-width: 1024px) {
    main { /* anciennement #horizontal-container */
        padding-top: 60px; /* Conserver l'espace pour le header */
    }
    .section {
        padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 4vw, 2rem); /* Ajuster padding pour tablettes */
        min-height: 0; /* Laisser le contenu dicter la hauteur */
        /* margin-top: 0; /* Plus besoin de margin-top car main a un padding-top */
    }

    /* #horizontal-container n'existe plus */

    #home .grid-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    #skills .content-wrapper {
        flex-direction: column;
        height: auto;
    }

    #skills-info {
        max-width: 100%;
        text-align: center;
        flex: 0 0 auto; /* Ensure height is based on content in column layout */
        padding: 1rem; /* Adjusted padding for smaller screens */
    }

    #chart-container {
        min-height: 300px;
    }

    #parcours .parcours-container {
        flex-direction: column;
        height: auto;
        max-height: none;
        padding: 1rem;
    }

    .timeline-nav-container {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    #parcours-details {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 768px) { /* Base pour la "version téléphone" */
    main { /* anciennement #horizontal-container */
        padding-top: 50px; /* Conserver l'espace pour le header mobile */
    }
    .section {
        padding: clamp(1.5rem, 5vw, 2.5rem) clamp(0.8rem, 3vw, 1.2rem); /* Paddings généraux pour mobile */
        min-height: 0; /* Laisser le contenu dicter la hauteur */
        /* margin-top: 0; /* Plus besoin de margin-top */
    }
    
    /* #horizontal-container n'existe plus */

    header {
        height: 50px; /* Réduire la hauteur du header sur mobile */
        padding: .5rem 0.8rem; /* Ajuster padding header mobile */
        justify-content: space-between; 
    }
    #personalization-toggle svg { /* Réduire taille icône personnalisation */
        width: 20px;
        height: 20px;
    }
    #hamburger-btn svg { /* S'assurer que l'icône hamburger est bien dimensionnée */
        width: 22px;
        height: 22px;
    }

    .main-nav {
        display: none; 
    }
    
    .hamburger-btn {
        display: flex; 
    }
    .mobile-nav { /* Styles pour le menu mobile */
        padding-top: 60px; /* Laisser de l'espace pour le header */
    }
    .mobile-nav-link {
        font-size: clamp(1rem, 4vw, 1.2rem); /* Taille de police pour les liens mobiles */
        padding: clamp(0.6rem, 3vh, 0.8rem) 1rem;
    }


    /* .nav-arrow est déjà commenté/supprimé */

    /* Ajustements typographiques globaux pour mobile */
    h1, .text-5xl, .text-7xl { font-size: clamp(2rem, 7vw, 2.8rem) !important; line-height: 1.2 !important; }
    h2, .text-4xl, .text-3xl { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.25 !important; }
    h3, .text-2xl, .text-xl { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; line-height: 1.3 !important; }
    h4, .text-lg { font-size: clamp(1rem, 4.5vw, 1.25rem) !important; line-height: 1.4 !important; }
    p, span, div { /* Pour les textes de base, attention à ne pas surcibler */
        font-size: clamp(0.85rem, 3.8vw, 1rem); 
        line-height: 1.5;
    }
    
    .glass-card {
        padding: clamp(1rem, 4vw, 1.5rem);
        border-radius: 15px; /* Rayon de bordure légèrement réduit pour mobile */
    }

    .cta-button {
        padding: clamp(0.6rem, 3vw, 0.9rem) clamp(1rem, 5vw, 1.8rem);
        font-size: clamp(0.85rem, 4vw, 1rem);
    }
    .cta-button svg {
        width: clamp(16px, 4vw, 18px);
        height: clamp(16px, 4vw, 18px);
    }
    
    /* Section Accueil spécifique mobile */
    #home .grid-container {
        gap: 1.5rem; /* Espacement grille accueil */
    }
    #home h1 { margin-bottom: 0.5rem; }
    #home h2 { margin-bottom: 1rem; } /* Sous-titre "Développeur Web..." */
    #home p.text-lg.text-gray-300 { margin-bottom: 1.5rem; } /* Paragraphe d'intro */

    #home .strength-item, #home .atout-item {
        padding: clamp(0.7rem, 3vw, 1rem);
    }
    #home .strength-item h5, #home .atout-item p { /* Titres des cartes forces/atouts */
         font-size: clamp(0.9rem, 4vw, 1.1rem) !important; /* Important pour surcharger le h4 global */
         margin-bottom: 0.3rem;
    }
    #home .strength-item .icon {
        width: clamp(20px, 5vw, 22px);
        height: clamp(20px, 5vw, 22px);
        margin-right: 0.5rem;
    }
     #home .competences-cles-grid, #home .atouts-personnels-grid {
        gap: 0.8rem; 
    }
    #home .tooltip-content { /* Infobulles sur mobile */
        display: none; /* Souvent problématique sur mobile, on peut les cacher */
        /* Ou adapter pour un affichage au clic si JS le gère */
    }

    #home .gemini-feature-box {
        margin-top: 1.5rem;
        padding: clamp(0.8rem, 3.5vw, 1.2rem);
    }
    #home .gemini-feature-box h3 { /* Titre "Pitch personnalisé" */
        font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; /* Important pour surcharger le h3 global */
        margin-bottom: 0.5rem;
    }
    #home .gemini-feature-box p { /* Paragraphe sous titre Gemini */
        font-size: clamp(0.8rem, 3.5vw, 0.9rem) !important; /* Important pour surcharger le p global */
        margin-bottom: 0.8rem;
    }
    #home .gemini-input {
        padding: clamp(0.5rem, 2.5vw, 0.8rem);
        font-size: clamp(0.85rem, 3.8vw, 1rem);
        margin-bottom: 0.8rem;
    }
    #home .gemini-output {
        min-height: 80px; /* Hauteur min output Gemini */
        padding: clamp(0.5rem, 2.5vw, 0.8rem);
        font-size: clamp(0.8rem, 3.5vw, 0.9rem);
    }

    /* Section Compétences spécifique mobile */
    #skills .content-wrapper {
        gap: 1rem; /* Espace entre info et chart */
    }
    #skills-info {
        padding: 1rem;
    }
    #skills-info h2 { /* Titre de la compétence sélectionnée */
         font-size: clamp(1.3rem, 5vw, 1.7rem) !important; /* Important pour surcharger */
         margin-bottom: 0.5rem;
    }
    #skills-info p { /* Description compétence */
        font-size: clamp(0.85rem, 3.8vw, 1rem) !important; /* Important pour surcharger */
        line-height: 1.45;
        margin-bottom: 0.8rem;
    }
    #skills-info .skill-badge {
        font-size: clamp(0.75rem, 3vw, 0.85rem);
        padding: .3rem .7rem;
    }
    #chart-container {
        min-height: clamp(250px, 40vh, 320px); /* Hauteur min graphique D3 */
        flex-basis: 60%; /* Donner plus de place au graphique si possible */
    }
    .node circle {
        stroke-width: 2px; /* Cercles un peu moins épais sur mobile */
    }
    .node:hover circle {
        stroke-width: 3px;
    }
    .node.focused circle {
        stroke-width: 4px;
    }


    /* Section Parcours spécifique mobile */
    #parcours .parcours-container {
        padding: 1rem 0.8rem; /* Padding conteneur parcours */
    }
    #parcours .parcours-container h2 { /* Titre "Mon Parcours" */
        font-size: clamp(1.6rem, 6vw, 2rem) !important; /* Important pour surcharger */
        margin-bottom: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .timeline-nav-container {
        margin-bottom: 1rem;
    }
    .timeline-entry {
        padding: 0.6rem 0.5rem; 
        gap: 0.6rem; 
    }
    .timeline-content .title { /* Titre de l'entrée timeline */
        font-size: clamp(1rem, 4.2vw, 1.2rem) !important; /* Important pour surcharger */
    }
    .timeline-content .company { /* Entreprise timeline */
        font-size: clamp(0.85rem, 3.8vw, 1rem) !important; /* Important pour surcharger */
    }
    .timeline-dot { width: 12px; height: 12px; }
    .timeline-nav-icon svg { width: 22px; height: 22px; }

    #parcours-details {
        padding: 1rem; 
    }
    #parcours-details .text-lg.font-bold { /* Année */
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
    }
    #parcours-details h3 { /* Titre de l'expérience/formation */
        font-size: clamp(1.3rem, 5vw, 1.7rem) !important; /* Important pour surcharger */
        margin-bottom: 0.2rem;
    }
     #parcours-details .text-xl { /* Nom de l'entreprise */
        font-size: clamp(1rem, 4.2vw, 1.25rem) !important; /* Important pour surcharger */
        margin-bottom: 0.8rem;
    }
    #parcours-details p { /* Description */
        font-size: clamp(0.85rem, 3.8vw, 1rem) !important; /* Important pour surcharger */
    }
    #parcours-details h4 { /* Titre "Compétences Clés" */
        font-size: clamp(1rem, 4.2vw, 1.2rem) !important; /* Important pour surcharger */
        margin-bottom: 0.5rem;
    }
    #parcours-details .skill-badge {
        font-size: clamp(0.75rem, 3vw, 0.85rem);
        padding: .3rem .7rem;
    }
    .parcours-item-icon svg { width: 20px; height: 20px; }
    .parcours-skill-icon svg { width: 16px; height: 16px; }

    /* Section Contact spécifique mobile */
    #contact-card {
        padding: clamp(1.2rem, 5vw, 1.8rem) clamp(1rem, 4vw, 1.5rem); 
    }
    #contact-card h2 { /* Titre "Contactez-moi" */
        font-size: clamp(1.8rem, 6.5vw, 2.4rem) !important; /* Important pour surcharger */
        margin-bottom: 0.8rem;
    }
    #contact-card p.text-lg { /* Paragraphe sous titre contact */
        font-size: clamp(0.9rem, 4vw, 1.1rem) !important; /* Important pour surcharger */
        margin-bottom: 1.2rem;
    }
    .contact-item {
        margin-top: 1rem; 
        gap: 0.8rem;
    }
    .contact-item a { /* Liens contact (tel, mail, etc.) */
        font-size: clamp(0.9rem, 4vw, 1.1rem) !important; /* Important pour surcharger */
    }
    .contact-item svg {
        width: clamp(18px, 4.5vw, 22px); 
        height: clamp(18px, 4.5vw, 22px);
    }
    #contact-card .mt-12 { margin-top: 2rem; } 
    #contact-card .gap-6 { gap: 1.2rem; } 

    /* Footer spécifique mobile */
    footer {
        padding: clamp(0.8rem, 3vh, 1.2rem); /* Fluidité ajoutée */
        height: auto; /* Hauteur auto pour le footer */
    }
    .footer-content span {
        font-size: clamp(0.75rem, 1.8vw, 0.85rem); /* Fluidité ajoutée */
        text-align: center;
    }

    /* Les tailles de #home h1, h2, p sont maintenant gérées par clamp(), 
       donc les redéfinitions spécifiques ici peuvent être moins nécessaires 
       ou ajustées pour des cas extrêmes si clamp ne suffit pas.
    */

    #home .strength-item h5 {
        font-size: clamp(0.9rem, 2.2vw, 1.1rem); /* Fluidité ajoutée */
    }
     #home .strength-item .tooltip-content,
     #home .atout-item .tooltip-content {
        font-size: clamp(0.8rem, 1.8vw, 0.9rem); /* Fluidité ajoutée */
        width: 180px; /* Peut-être réduire un peu pour mobile */
        margin-left: -90px;
    }
    #home .atout-item p {
        font-size: clamp(0.85rem, 2vw, 1rem); /* Fluidité ajoutée */
    }

    /* .cta-button est déjà géré par clamp plus haut */
    .cta-button { /* Assurons-nous que les styles clamp sont bien ici */
        padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.2rem, 4vw, 1.6rem); /* Fluidité ajoutée */
        font-size: clamp(0.85rem, 2.2vw, 1rem); /* Fluidité ajoutée */
    }


    #contact-card h2 { /* Sélecteur déjà présent, fusion des styles clamp */
        font-size: clamp(1.8rem, 5vw, 2.5rem); /* Fluidité ajoutée */
        letter-spacing: -0.02em;
    }
    #contact-card p { /* Sélecteur déjà présent, fusion des styles clamp */
        font-size: clamp(0.9rem, 2.5vw, 1.1rem); /* Fluidité ajoutée */
        line-height: 1.7; /* Augmenter l'interligne pour le texte de contact */
    }
    #contact-card { /* Sélecteur déjà présent, fusion des styles clamp */
        padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 3vw, 1.5rem); /* Fluidité ajoutée */
    }

    .contact-item a { /* Sélecteur déjà présent, fusion des styles clamp */
        font-size: clamp(0.9rem, 2.5vw, 1.1rem); /* Fluidité ajoutée */
    }
    .contact-item svg { /* Sélecteur déjà présent, fusion des styles clamp */
        width: clamp(18px, 4vw, 22px); /* Fluidité ajoutée */
        height: clamp(18px, 4vw, 22px);
    }

    .footer-content {
        flex-direction: column;
        gap: .5rem;
    }

    .footer-content::before,
    .footer-content::after {
        display: none;
    }

    /* Visibilité pour la section compétences */
    #skills-info h2 { font-size: clamp(1.5rem, 4vw, 1.8rem); }
    #skills-info p { font-size: clamp(0.85rem, 2vw, 0.95rem); line-height: 1.5; }
    #skills-info .skill-badge { font-size: clamp(0.7rem, 1.8vw, 0.8rem); padding: .3rem .7rem; }

    /* Visibilité pour la section parcours */
    #parcours .parcours-container h2 { font-size: clamp(1.5rem, 4vw, 1.8rem); }
    .timeline-content .title { font-size: clamp(0.9rem, 2.2vw, 1.1rem); }
    .timeline-content .company { font-size: clamp(0.85rem, 2vw, 0.95rem); }
    #parcours-details h3 { font-size: clamp(1.5rem, 4vw, 1.8rem); }
    #parcours-details p { font-size: clamp(0.85rem, 2vw, 0.95rem); line-height: 1.5; }
    #parcours-details .skill-badge { font-size: clamp(0.7rem, 1.8vw, 0.8rem); padding: .3rem .7rem; }
}

/* Styles pour masquer le hamburger sur les écrans plus grands */
@media (min-width: 769px) {
    .hamburger-btn {
        display: none;
    }
    .mobile-nav {
        display: none; /* S'assurer que le panneau mobile n'est jamais visible sur grand écran */
    }
}


@media (max-width: 480px) {
    .section {
        /* Réduire le padding vertical pour les sections sur petits écrans */
        padding-top: clamp(0.8rem, 2vh, 1.2rem);
        padding-bottom: clamp(0.8rem, 2vh, 1.2rem);
    }

    #home h1 {
        font-size: clamp(2.2rem, 6vw, 2.8rem); /* Ajustement pour h1 */
        margin-bottom: 0.5rem;
    }
    #home h2 {
        font-size: clamp(1rem, 2.8vw, 1.3rem); /* Ajustement pour h2 */
        margin-bottom: 1rem;
    }
    #home p { /* Paragraphe d'intro */
        font-size: clamp(0.85rem, 2.2vw, 1rem);
        margin-bottom: 1.2rem;
    }
    
    #home .grid-container {
        gap: 1.2rem; /* Réduire encore l'espace */
    }

    #home .strength-item, #home .atout-item {
        padding: clamp(0.5rem, 1.8vw, 0.7rem); /* Fluidité et réduction padding */
    }
    #home .strength-item h5 {
        font-size: clamp(0.85rem, 2.3vw, 1rem); /* Ajustement taille titre compétence */
        margin-bottom: 0.3rem;
    }
    #home .atout-item p {
        font-size: clamp(0.8rem, 2.1vw, 0.95rem); /* Ajustement taille atout */
    }
    #home .strength-item .icon {
        width: clamp(18px, 4.8vw, 20px); 
        height: clamp(18px, 4.8vw, 20px);
        margin-right: .4rem; 
    }
    #home .competences-cles-grid, #home .atouts-personnels-grid {
        gap: 0.6rem; 
    }
     #home .strength-item .tooltip-content,
     #home .atout-item .tooltip-content {
        width: 160px; 
        margin-left: -80px;
        font-size: clamp(0.75rem, 1.7vw, 0.85rem);
        padding: 8px;
    }
    
    .gemini-feature-box {
        padding: clamp(0.7rem, 2.5vw, 1rem); 
        margin-top: 1.2rem;
    }
    .gemini-feature-box h3 {
        font-size: clamp(0.9rem, 2.5vw, 1.05rem); 
        margin-bottom: 0.5rem;
    }
     .gemini-feature-box p { /* Paragraphe sous le titre de Gemini box */
        font-size: clamp(0.75rem, 1.8vw, 0.8rem);
        margin-bottom: 0.6rem;
    }
    .gemini-input, .gemini-output {
        padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.6rem, 2vw, 0.8rem); 
        font-size: clamp(0.75rem, 1.8vw, 0.8rem); 
        min-height: 100px; /* Réduire hauteur min output */
    }
    .gemini-input {
        margin-bottom: 0.75rem;
    }

    #skills-info {
        padding: 0.8rem; /* Réduire padding skills-info */
    }
    #skills-info h2 { font-size: clamp(1.3rem, 3.8vw, 1.6rem); margin-bottom: 0.5rem; }
    #skills-info p { font-size: clamp(0.8rem, 2.1vw, 0.9rem); line-height: 1.4; margin-bottom: 0.8rem;}
    #skills-info .skill-badge { font-size: clamp(0.65rem, 1.7vw, 0.75rem); padding: .25rem .6rem; }

    #chart-container {
        min-height: clamp(200px, 35vh, 260px); 
    }

    #parcours .parcours-container {
        padding: clamp(0.4rem, 1.8vw, 0.6rem); 
    }
    #parcours .parcours-container h2 { /* Titre "Mon Parcours" */
        font-size: clamp(1.4rem, 3.8vw, 1.7rem); 
        margin-bottom: 0.8rem;
        padding-left: 0.5rem; /* Ajouter un peu de padding au titre */
        padding-right: 0.5rem;
    }
    .timeline-nav-container {
        padding-right: 0;
        margin-bottom: 1rem;
    }
    .timeline-entry {
        padding: clamp(0.4rem, 1.3vw, 0.6rem); 
        gap: 0.5rem; /* Réduire l'espace dans timeline-entry */
    }
    .timeline-content .title { font-size: clamp(0.85rem, 2.3vw, 1.05rem); }
    .timeline-content .company { font-size: clamp(0.8rem, 2.1vw, 0.9rem); }
    .timeline-dot { width: 12px; height: 12px; border-width: 1.5px; }
    .timeline-line { width: 1.5px; }
    .timeline-nav-icon svg { width: 20px; height: 20px; }


    #parcours-details {
        padding: clamp(0.7rem, 2.2vw, 0.9rem) clamp(0.8rem, 2.8vw, 1.1rem); 
    }
    #parcours-details h3 { /* Titre de l'expérience/formation */
        font-size: clamp(1.2rem, 3.5vw, 1.5rem); 
        margin-bottom: 0.3rem;
    }
     #parcours-details .text-xl { /* Nom de l'entreprise */
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
        margin-bottom: 0.6rem;
    }
    #parcours-details p { /* Description */
        font-size: clamp(0.8rem, 2.1vw, 0.9rem); 
        line-height: 1.4;
    }
    #parcours-details .mt-6 { margin-top: 1rem; } /* Réduire marge avant compétences clés */
    #parcours-details h4 { font-size: clamp(0.9rem, 2.2vw, 1rem); margin-bottom: 0.4rem; }
    #parcours-details .skill-badge { font-size: clamp(0.65rem, 1.7vw, 0.75rem); padding: .25rem .6rem; }
    .parcours-item-icon svg { width: 18px; height: 18px; }
    .parcours-skill-icon svg { width: 14px; height: 14px; }


    .skill-badge { 
        padding: clamp(0.15rem, 0.8vw, 0.2rem) clamp(0.4rem, 1.5vw, 0.6rem);
        font-size: clamp(0.6rem, 1.6vw, 0.7rem);
    }

    #contact-card {
        padding: clamp(1rem, 3.8vw, 1.5rem) clamp(0.6rem, 2.2vw, 0.8rem); 
    }
    #contact-card h2 {
        font-size: clamp(1.6rem, 4.8vw, 2.2rem); 
        margin-bottom: 0.5rem;
    }
    #contact-card p { /* Paragraphe sous le titre de contact */
        font-size: clamp(0.85rem, 2.6vw, 1rem); 
        margin-bottom: 1rem;
    }
    .contact-item {
        margin-top: 0.8rem; /* Réduire espace entre items contact */
        gap: 0.6rem;
    }
    .contact-item a {
        font-size: clamp(0.85rem, 2.6vw, 1rem); 
    }
    .contact-item svg {
        width: clamp(16px, 3.8vw, 20px); 
        height: clamp(16px, 3.8vw, 20px);
    }
    #contact-card .mt-12 { margin-top: 1.5rem; } /* Réduire espace avant boutons CV */
    #contact-card .gap-6 { gap: 1rem; } /* Réduire espace entre boutons CV */


    .cta-button {
        padding: clamp(0.5rem, 1.8vw, 0.7rem) clamp(1rem, 3.8vw, 1.5rem); 
        font-size: clamp(0.8rem, 2.3vw, 0.95rem); 
    }
    .cta-button svg {
        width: clamp(16px, 3.5vw, 18px);
        height: clamp(16px, 3.5vw, 18px);
    }


    /* #home .strength-item { */ /* Déjà géré plus haut */
        /* padding: clamp(0.6rem, 2vw, 0.8rem); */ /* Fluidité ajoutée */
    /* } */

    /* #home .strength-item h5 et #home .atout-item p sont déjà gérés par clamp dans la media query 768px */

    #home .strength-item .icon {
        width: clamp(20px, 5vw, 22px); /* Fluidité ajoutée */
        height: clamp(20px, 5vw, 22px);
        margin-right: .5rem; 
    }

    /* .cta-button est déjà géré par clamp dans la media query 768px */

    .gemini-feature-box {
        padding: clamp(0.8rem, 3vw, 1.2rem); /* Fluidité ajoutée */
    }
    .gemini-feature-box h3 {
        font-size: clamp(1rem, 2.8vw, 1.1rem); /* Fluidité ajoutée */
    }
    .gemini-feature-box p {
        font-size: clamp(0.8rem, 2vw, 0.85rem); /* Fluidité ajoutée */
    }

    .gemini-input,
    .gemini-output {
        padding: clamp(0.5rem, 1.8vw, 0.7rem) clamp(0.7rem, 2.2vw, 0.9rem); /* Fluidité ajoutée */
        font-size: clamp(0.8rem, 2vw, 0.85rem); /* Fluidité ajoutée */
    }

    /* #skills-info h2, p, .skill-badge sont gérés par clamp dans la media query 768px */

    #chart-container {
        min-height: clamp(220px, 40vh, 280px); /* Fluidité ajoutée */
    }

    #parcours .parcours-container {
        padding: clamp(0.5rem, 2vw, 0.75rem); /* Fluidité ajoutée */
    }
    /* #parcours .parcours-container h2 est géré par clamp dans la media query 768px */

    .timeline-entry {
        padding: clamp(0.5rem, 1.5vw, 0.7rem); /* Fluidité ajoutée */
    }

    /* .timeline-content .title et .company sont gérés par clamp dans la media query 768px */

    #parcours-details {
        padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.2rem); /* Fluidité ajoutée */
    }
    /* #parcours-details h3, p, .skill-badge sont gérés par clamp dans la media query 768px */

    .skill-badge { /* Badge global, si besoin d'ajustement spécifique pour 480px */
        padding: clamp(0.2rem, 1vw, 0.25rem) clamp(0.5rem, 1.8vw, 0.7rem);
        font-size: clamp(0.65rem, 1.8vw, 0.75rem);
    }

    #contact-card {
        padding: clamp(1.5rem, 4vw, 2rem) clamp(0.8rem, 2.5vw, 1rem); /* Fluidité ajoutée */
    }
    /* #contact-card h2, p sont gérés par clamp dans la media query 768px */

    /* .contact-item a et svg sont gérés par clamp dans la media query 768px */

    #home .grid-container {
        gap: 1.5rem; /* Réduire l'espace entre les éléments de la grille */
    }

    #home .gemini-feature-box {
        margin-top: 1.5rem; /* Réduire la marge supérieure */
    }

    #home .strength-item, #home .atout-item {
        padding: 0.75rem; /* Réduire le padding interne des cartes */
    }
    
    #home .competences-cles-grid, #home .atouts-personnels-grid {
        gap: 0.75rem; /* Réduire l'espace dans les grilles de compétences/atouts */
    }

    .timeline-nav-container h2 {
        font-size: clamp(1.3rem, 3.5vw, 1.6rem); /* Ajuster la taille du titre du parcours */
        margin-bottom: 1rem;
    }

    #parcours-details h3 {
        font-size: clamp(1.3rem, 3.5vw, 1.6rem); /* Ajuster la taille du titre des détails du parcours */
    }

    #contact-card {
        padding: clamp(1.2rem, 3.5vw, 1.8rem) clamp(0.7rem, 2vw, 0.9rem); /* Réduire encore un peu le padding */
    }

    .chat-window {
        bottom: 10px; /* Ajuster la position pour les très petits écrans */
        right: 10px;
        width: calc(100vw - 20px);
    }
    .chat-icon {
        bottom: 10px;
        right: 10px;
    }
}

/* Styles spécifiques pour les écrans très étroits (ex: iPhone SE) */
@media (max-width: 375px) {
    #home h1 {
        font-size: clamp(2rem, 7vw, 2.5rem); /* Réduire davantage pour les très petits écrans */
    }
    #home h2 {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
    }
    #home p {
        font-size: clamp(0.8rem, 2.8vw, 0.9rem);
    }

    .section {
        padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.2rem); /* Paddings de section plus petits */
    }

    .cta-button {
        padding: clamp(0.5rem, 1.8vw, 0.7rem) clamp(1rem, 3.5vw, 1.4rem);
        font-size: clamp(0.8rem, 2vw, 0.9rem);
    }

    #home .strength-item h5 {
        font-size: clamp(0.85rem, 2.5vw, 1rem);
    }
    #home .strength-item .icon {
        width: clamp(18px, 4.5vw, 20px);
        height: clamp(18px, 4.5vw, 20px);
    }
    
    .gemini-feature-box h3 {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
    }
    .gemini-input, .gemini-output {
        font-size: clamp(0.75rem, 2.2vw, 0.8rem);
    }

    #skills-info h2 { font-size: clamp(1.3rem, 3.8vw, 1.6rem); }
    #skills-info p { font-size: clamp(0.8rem, 2.2vw, 0.9rem); }

    #parcours .parcours-container h2 { font-size: clamp(1.3rem, 3.8vw, 1.6rem); }
    .timeline-content .title { font-size: clamp(0.85rem, 2.5vw, 1rem); }
    
    #contact-card h2 {
        font-size: clamp(1.5rem, 4.5vw, 2rem);
    }
    #contact-card p {
        font-size: clamp(0.85rem, 2.8vw, 1rem);
    }
    .contact-item a {
        font-size: clamp(0.85rem, 2.8vw, 1rem);
    }
    .contact-item svg {
        width: clamp(16px, 3.8vw, 20px);
        height: clamp(16px, 3.8vw, 20px);
    }
}

/* Styles spécifiques pour les écrans très très étroits (ex: Galaxy Fold, petits Android) */
@media (max-width: 360px) {
    main {
        padding-top: 45px;
    }
    .section {
        padding-left: clamp(0.6rem, 2vw, 0.8rem);
        padding-right: clamp(0.6rem, 2vw, 0.8rem);
        padding-top: clamp(0.8rem, 3vh, 1.2rem); /* Réduit */
        padding-bottom: clamp(0.8rem, 3vh, 1.2rem); /* Réduit */
    }

    #home h1 { font-size: clamp(1.7rem, 6.5vw, 2.1rem) !important; } /* Réduit */
    #home h2 { font-size: clamp(0.85rem, 3.2vw, 1.05rem) !important; } /* Réduit */
    #home p.text-lg.text-gray-300 { font-size: clamp(0.75rem, 2.5vw, 0.85rem) !important; }

    #home .strength-item h5, #home .atout-item p {
         font-size: clamp(0.8rem, 2.8vw, 0.95rem) !important;
    }
    #home .strength-item .icon {
        width: clamp(16px, 4vw, 18px);
        height: clamp(16px, 4vw, 18px);
    }
     #home .competences-cles-grid, #home .atouts-personnels-grid {
        gap: 0.5rem; 
    }

    #home .gemini-feature-box h3 {
        font-size: clamp(0.85rem, 2.8vw, 1rem) !important;
    }
    #home .gemini-feature-box p {
        font-size: clamp(0.7rem, 2vw, 0.75rem) !important;
    }
    #home .gemini-input, #home .gemini-output {
        font-size: clamp(0.7rem, 2vw, 0.75rem);
    }

    .cta-button {
        padding: clamp(0.35rem, 1.5vw, 0.55rem) clamp(0.7rem, 2.8vw, 1.1rem); /* Réduit */
        font-size: clamp(0.7rem, 2.2vw, 0.8rem); /* Réduit */
    }
    .cta-button svg {
        width: clamp(14px, 3vw, 16px);
        height: clamp(14px, 3vw, 16px);
    }

    #skills-info h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important; }
    #skills-info p { font-size: clamp(0.75rem, 2.3vw, 0.85rem) !important; }
    #skills-info .skill-badge { font-size: clamp(0.6rem, 1.8vw, 0.7rem); padding: .2rem .5rem; }
    #chart-container { min-height: clamp(180px, 30vh, 220px); }


    #parcours .parcours-container h2 { font-size: clamp(1.2rem, 3.8vw, 1.5rem) !important; }
    .timeline-content .title { font-size: clamp(0.8rem, 2.6vw, 0.95rem) !important; }
    .timeline-content .company { font-size: clamp(0.75rem, 2.3vw, 0.85rem) !important; }
    .timeline-dot { width: 10px; height: 10px; }
    .timeline-nav-icon svg { width: 18px; height: 18px; }


    #parcours-details h3 { font-size: clamp(1.1rem, 3.2vw, 1.4rem) !important; }
    #parcours-details .text-xl { font-size: clamp(0.85rem, 2.8vw, 1.05rem) !important; }
    #parcours-details p { font-size: clamp(0.75rem, 2.3vw, 0.85rem) !important; }
    #parcours-details h4 { font-size: clamp(0.85rem, 2.5vw, 1rem) !important; }
    .parcours-skill-icon svg { width: 12px; height: 12px; }


    #contact-card h2 { font-size: clamp(1.4rem, 4.8vw, 1.8rem) !important; }
    #contact-card p.text-lg { font-size: clamp(0.8rem, 2.8vw, 0.95rem) !important; }
    .contact-item a { font-size: clamp(0.8rem, 2.8vw, 0.95rem) !important; }
    .contact-item svg {
        width: clamp(14px, 3.5vw, 18px);
        height: clamp(14px, 3.5vw, 18px);
    }

    .mobile-nav-link {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem); 
        padding: clamp(0.5rem, 2.5vh, 0.7rem) 0.8rem;
    }
    header { height: 45px; } /* Encore plus petit header */
    /* .section margin-top est géré par le padding de main */
    /* #horizontal-container n'existe plus */
}

/* --- Chat Assistant Styles --- */
.chat-icon {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: var(--accent-color-1);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1005;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.chat-icon:hover {
    transform: scale(1.1);
    background-color: var(--accent-color-2);
}

.chat-window {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 370px;
    max-width: 90vw;
    height: 500px;
    max-height: 70vh;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1004;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(10px); /* Effet de verre dépoli */
}

.chat-window:not(.hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.chat-header {
    background-color: rgba(255,255,255,0.05); /* Légèrement transparent */
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-text);
    font-weight: 700;
}

.close-chat-button {
    background: none;
    border: none;
    color: var(--secondary-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.close-chat-button:hover {
    color: var(--primary-text);
}

.chat-messages {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message {
    padding: 0.6rem 1rem;
    border-radius: 12px;
    max-width: 80%;
    line-height: 1.5;
    font-size: 0.9rem;
}

.message p {
    margin: 0;
}

.user-message {
    background-color: var(--accent-color-1);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.assistant-message {
    background-color: var(--card-bg);
    color: var(--primary-text);
    align-self: flex-start;
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.chat-input-area {
    display: flex;
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(2,6,23,0.7); /* Fond légèrement plus sombre pour le contraste */
}

#chat-input {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.75rem 1rem;
    color: var(--primary-text);
    outline: none;
    transition: border-color 0.3s ease;
}

#chat-input:focus {
    border-color: var(--accent-color-1);
}

.send-chat-button {
    background-color: var(--accent-color-1);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background-color 0.3s ease;
}

.send-chat-button:hover {
    background-color: var(--accent-color-2);
}

.hidden {
    display: none !important; /* Utiliser !important pour s'assurer qu'il est caché */
    opacity: 0 !important;
    transform: translateY(20px) scale(0.95) !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    .chat-window {
        width: calc(100vw - 30px);
        height: calc(100vh - 80px);
        max-height: none;
        bottom: 15px;
        right: 15px;
        border-radius: 12px;
    }
    .chat-icon {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
    }
    .chat-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* --- Dynamic Tutorial Styles --- */
.start-tutorial-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    background-color: var(--accent-color-2);
    color: white;
    width: auto; /* Ajuster la largeur automatiquement */
    height: 50px;
    padding: 0 1.2rem; /* Ajouter du padding horizontal */
    border-radius: 25px; /* Bordure arrondie */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* Espace entre l'icône et le texte */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1005;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.9rem;
}

.start-tutorial-btn:hover {
    transform: scale(1.05);
    background-color: var(--accent-color-1);
}

.start-tutorial-btn svg {
    width: 20px;
    height: 20px;
}

.dynamic-tutorial-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 2000;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
}

.dynamic-tutorial-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.tutorial-step-content {
    color: var(--primary-text);
    line-height: 1.6;
    font-size: 0.95rem;
}
.tutorial-step-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-color-1);
    margin-bottom: 0.8rem;
}
.tutorial-step-content p {
    margin-bottom: 0.5rem;
}
.tutorial-step-content strong {
    color: var(--accent-color-2);
    font-weight: 600;
}
.tutorial-step-content code {
    background-color: rgba(255,255,255,0.1);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
}
.tutorial-step-content .highlight-element { /* Classe pour surligner un élément */
    border: 2px dashed var(--accent-color-1);
    border-radius: 8px;
    box-shadow: 0 0 15px var(--accent-color-1);
    transition: all 0.3s ease-in-out;
}


.tutorial-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.tutorial-nav-btn {
    background-color: var(--accent-color-1);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.tutorial-nav-btn:hover {
    background-color: var(--accent-color-2);
}

.tutorial-nav-btn:disabled {
    background-color: var(--secondary-text);
    cursor: not-allowed;
    opacity: 0.7;
}

#tutorial-step-indicator {
    font-size: 0.85rem;
    color: var(--secondary-text);
    font-weight: 500;
}

.tutorial-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--secondary-text);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.tutorial-close-btn:hover {
    color: var(--primary-text);
}

/* Styles pour le surlignage des éléments cibles du tutoriel */
.tutorial-highlight {
    position: fixed; /* Pour se superposer correctement */
    border: 3px dashed var(--accent-color-1);
    border-radius: 8px; /* Correspondre au style des cartes */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 15px 5px var(--accent-color-1); /* Fond sombre autour, lueur */
    z-index: 1999; /* Juste en dessous du conteneur du tutoriel */
    pointer-events: none; /* Pour que les clics passent à travers */
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transition douce */
}

@media (max-width: 600px) {
    .dynamic-tutorial-container {
        width: calc(100% - 30px);
        padding: 1.5rem;
        bottom: auto; /* Annuler le positionnement en bas pour les petits écrans */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .tutorial-step-content h4 { font-size: 1.1rem; }
    .tutorial-step-content { font-size: 0.9rem; }
    .tutorial-nav-btn { padding: 0.5rem 1rem; font-size: 0.85rem;}

    .start-tutorial-btn {
        bottom: 15px;
        left: 15px;
        height: 45px;
        padding: 0 1rem;
        font-size: 0.85rem;
    }
    .start-tutorial-btn svg {
        width: 18px;
        height: 18px;
    }
}