:root {
    --rose: #e582b2;
    --bleu: #c5d5e1;
    --rose-pale: #FBC8E0FF;
    --noir: #1a1a1a;
    --papier: #f0ede6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--papier);
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    color: var(--noir);
    overflow-x: hidden;
    width: 100%;
}


/* On désactive le curseur Windows/Mac partout */
html, body, a, button {
    cursor: none !important;
}

/* Le curseur personnalisé */

/* Le sélecteur * cible absolument TOUS les éléments du site */
*, *::before, *::after {
    cursor: none !important;
}
.custom-cursor {
    width: 6px;  /* Le point central très petit et net */
    height: 6px;
    background-color: white!important; /* Point blanc éclatant pour la visibilité */
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    
    /* Le halo rose : on en met plusieurs pour que ce soit intense */
    box-shadow: 
        0 0 15px 5px var(--rose), 
        0 0 30px 10px rgba(229, 130, 178, 0.4);
    
    transition: width 0.3s, height 0.3s, box-shadow 0.3s;
}

/* Effet au survol des liens cliquables */
.custom-cursor.active {
    width: 15px;
    height: 15px;
    background-color: var(--rose-pale);
    /* Le halo s'agrandit et devient plus diffus */
    box-shadow: 
        0 0 25px 10px var(--rose), 
        0 0 50px 20px rgba(229, 130, 178, 0.2);
}

/* EFFET INTERACTIF : Quand on survole un vrai lien cliquable */
/* On fait grossir le rond et on change sa couleur/opacité */
a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
.project-card:hover ~ .custom-cursor {
    width: 50px;
    height: 50px;
    background-color: var(--rose-pale);
    opacity: 0.5;
    mix-blend-mode: difference; /* Effet stylé : inverse les couleurs au survol */
}

/* --- NAVIGATION AVEC LIGNE AU SURVOL --- */
nav {
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px);
    padding: 10px 25px; border-radius: 50px;
    z-index: 999; display: flex; gap: 20px; box-shadow: 6px 6px 0px var(--noir);
    border: 2px solid var(--noir);
    width: max-content;
}

nav a { 
    text-decoration: none; color: var(--noir); font-weight: 800; font-size: 0.75rem; 
    text-transform: uppercase; position: relative; padding: 5px 0; transition: color 0.3s;
}

nav a:hover { color: var(--rose); }

/* La ligne qui s'étire */
nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0;
    height: 2px; background: var(--rose); transition: width 0.3s ease;
}

nav a:hover::after { width: 100%; }


/* --- PERSONNAGE FLOTTANT (Clara) --- */
.character-float {
    position: fixed; 
    bottom: -90px; 
    right: -45px;
    width: 250px;
    z-index: 1000; 
    /* On force le curseur invisible même ici */
    cursor: none !important; 
    text-decoration: none; 
    transition: opacity 0.4s, transform 0.3s ease;
    transform: rotate(5deg);
    
    /* Ombre portée douce sur le perso */
    filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.2)); 
}

.character-float img {
    width: 100%;
    height: auto;
    display: block;
}

/* État au survol du personnage */
.character-float:hover {
    transform: rotate(0deg) scale(1.05);
    /* L'ombre devient rose net, style Brutaliste */
    filter: drop-shadow(8px 8px 0px var(--rose)); 
}

/* Ce bloc force le curseur à rester Rose/Blanc quand il passe sur ton perso */
/* (Supprime le vert dû aux modes de fusion) */
.character-float:hover ~ .custom-cursor {
    mix-blend-mode: normal !important;
    background-color: white !important;
    width: 15px !important;
    height: 15px !important;
    box-shadow: 0 0 20px 10px var(--rose) !important;
    opacity: 1 !important;
}

.character-float.hidden { 
    opacity: 0; 
    pointer-events: none; 
}


/* --- SECTIONS --- */
section { padding: 80px 10%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; }

/* --- HERO --- */
#hero { align-items: center; padding-bottom: 120px; }
.hero-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; gap: 50px; }
h1 { font-family: 'Unbounded', sans-serif; font-size: clamp(3.5rem, 10vw, 8rem); line-height: 0.85; letter-spacing: -4px; }
.subtitle { font-family: 'Unbounded'; margin-top: 20px; font-weight: 900; background: var(--noir); display: inline-block; padding: 5px 15px; color: white; }

.visual-box {
    width: 380px; 
    height: 480px; 
    background-color: var(--bleu); /* Utilise background-color pour ne pas écraser l'image */
    border: 3px solid var(--noir);
    box-shadow: 20px 20px 0px var(--rose); 
    background-image: url('img/ambiance.jpeg');
    background-size: cover; 
    background-position: center;
    transition: transform 0.1s ease-out;
}

/* ANIMATION FLECHE --- */
.scroll-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); }
.scroll-arrow-svg { width: 30px; height: 80px; } 
.arrow-fill {
    fill: none; stroke: var(--rose); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 150; stroke-dashoffset: 150; animation: fillArrowDown 2.5s infinite linear;
}
@keyframes fillArrowDown {
    0% { stroke-dashoffset: 150; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -150; }
}

/* --- ABOUT --- */
.about-card {
    background: white; padding: 40px; border-radius: 25px; max-width: 900px; border: 3px solid var(--noir);
    box-shadow: 12px 12px 0px var(--bleu); display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: center; margin: 0 auto;
}
.about-img { 
    width: 300px; 
    height: 350px; 
    /* Remplace l'ancienne couleur par ton image */
    background-image: url('img/myphoto.jpg');
    /* Centre l'image et s'assure qu'elle couvre toute la zone */
    background-size: cover;
    background-position: center;
    
    border-radius: 15px; 
    border: 2px solid var(--noir); 
    flex-shrink: 0; 
}
.about-text h2 { font-family: 'Unbounded'; font-size: 2.5rem; margin-bottom: 15px; }

.social-tabs { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.social-tab {
    text-decoration: none; color: var(--noir); font-family: 'Permanent Marker', cursive;
    padding: 5px 15px; border: 2px solid var(--noir); background: var(--bleu);
    box-shadow: 3px 3px 0px var(--noir); transition: 0.2s;
}
.social-tab:hover { transform: translateY(-3px); background: var(--rose); color:white }

.cv-link {
    color: var(--noir); font-weight: 800; text-decoration: none; 
    display: inline-block; margin-top: 25px; font-size: 0.9rem; transition: all 0.3s ease;
}
.cv-link span { transition: margin-left 0.3s ease; display: inline-block; }
.cv-link:hover { color: var(--rose); }
.cv-link:hover span { margin-left: 10px; }


/* --- SKILLS DANS ABOUT --- */
.skills-container-mini {
    margin-top: 50px;
    padding-top: 30px;
    text-align: center;
}

.skills-title-mini {
    font-family: 'Unbounded';
    font-size: 0.9rem;
    margin-bottom: 30px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--noir);
    opacity: 0.6;
}

.skills-grid-mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.skill-item-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80px;
    cursor: default; /* FORCE LE CURSEUR NORMAL (pas de main) */
}

.skill-item-mini img {
    width: 40px;
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.4s ease;
}

.skill-item-mini span {
    font-family: 'Inter';
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--noir);
    opacity: 0; /* Le nom est caché par défaut pour la sobriété */
    transition: all 0.4s ease;
}

/* --- EFFET AU SURVOL (Non-cliquable) --- */
.skill-item-mini:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1); /* Juste un petit zoom */
}

.skill-item-mini:hover span {
    opacity: 0.6; /* Le nom apparaît doucement */
    transform: translateY(2px);
}
/* --- PROJECTS (SMOOTH HOVER) --- */
.project-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    width: 100%; 
}
.project-card {
    background: white; border: 3px solid var(--noir); padding: 20px;
    border-radius: 15px; aspect-ratio: 1 / 1; 
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    cursor: pointer;
	text-decoration: none; /* Enlève le soulignement moche */
    color: var(--noir);
}
.project-img-container {
    width: 100%; height: 65%; border-radius: 10px; overflow: hidden;
    background: var(--bleu);
}
.project-img { 
    width: 100%; height: 100%; 
    background-size: cover; background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 12px 12px 0px var(--rose);
    border-color: var(--noir);
}
.project-card:hover .project-img { 
    transform: scale(1.1); 
}
.project-card h3 { font-family: 'Unbounded'; font-size: 1.1rem; margin-top: 10px; }

/* --- BLOC FINAL --- */
.final-block {
    min-height: 100vh; background: var(--noir); color: white;
    display: flex; flex-direction: column; justify-content: space-between;
    border-radius: 40px 40px 0 0; padding: 100px 10% 40px 10%;
}
.contact-container { max-width: 550px; margin: 0 auto; text-align: center; width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
input, textarea { width: 100%; padding: 16px; border-radius: 12px; border: none; background: #2a2a2a; color: white; margin-bottom: 15px; font-family: 'Inter'; }

/* EFFET SURVOL BOUTON ENVOYER */
.btn-submit { 
    width: 100%; padding: 20px; border-radius: 12px; border: 2px solid var(--rose); 
    background: var(--rose); color: white; font-weight: 900; 
    font-family: 'Unbounded'; cursor: pointer; transition: all 0.3s ease; 
}
.btn-submit:hover { 
    background: transparent; color: var(--rose); 
    transform: scale(1.02);
}

.direct-info {
    margin-top: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    display: flex; /* On passe en flex pour mieux gérer l'espace */
    flex-wrap: wrap; /* Permet au bloc TEL et au bloc MAIL de se séparer si besoin */
    justify-content: center;
    gap: 15px; /* Espace entre les deux infos */
}

.info-group {
    white-space: nowrap; /* EMPÊCHE LE RETOUR À LA LIGNE INTERNE */
}

.direct-info a {
    color: var(--rose-pale);
    text-decoration: none;
    transition: 0.3s;
}
.direct-info a:hover { color: var(--rose); }

/* FOOTER --- */
footer { display: flex; justify-content: center; align-items: center; border-top: 1px solid #333; padding-top: 30px; margin-top: 30px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-link { color: white; text-decoration: none; font-family: 'Permanent Marker', cursive; font-size: 1.1rem; transition: 0.3s; }
.footer-link:hover { color: var(--rose); transform: translateY(-3px); }

/* --- POST-ITS --- */
.post-it {
    position: absolute; padding: 15px; width: 160px; font-family: 'Permanent Marker', cursive;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; z-index: 5; pointer-events: none;
}
.pi-left { left: -200px; background: var(--bleu); transform: rotate(-10deg); }
.pi-right { right: -200px; background: var(--rose-pale); transform: rotate(10deg); }

.active-left { left: 2% !important; opacity: 1; }
.active-right { right: 2% !important; opacity: 1; }

/* --- RESPONSIVE --- */
@media (max-width: 950px) {
    .hero-visual { display: none; }
    h1 { text-align: center; }
    .hero-container { justify-content: center; }
    .project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.pi-right { display: none; }
}

@media (max-width: 750px) {
    .about-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .about-img { width: 280px; height: 280px; margin-bottom: 20px; }
}

@media (max-width: 650px) {
    .project-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
	.character-float { width:200px; right:-35px;}
}