/* === VARIABLES & RESET === */
:root {
    --bg-main: #EBEBEB;
    --bg-secondary: #FFFFFF; /* Pour les cartes */
    --text-primary: #262626;
    --text-accent: #121212;
    --accent-color: #29B024; /* Vert demandé */
    --radius: 20px; /* La règle d'or */
    
    /* Font Sizes Ratio */
    --font-figtree: 1.1rem;
    --font-dongle: 2.2rem; /* ~2x Figtree pour compenser la petite taille */
}

html { scroll-behavior: smooth; }

*{
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-main);
    /* MOTIF DOTS SUR TOUT LE SITE MAINTENANT */
    background-image: radial-gradient(#ccc 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-attachment: fixed; /* L'effet cool : les points restent fixes quand on scrolle */
    color: var(--text-primary);
    font-family: 'Figtree', sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 100px; /* Ajuste selon la hauteur de ta nav */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


h1, h2, h3 { font-weight: 800; margin: 0; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { width: 100%; display: block; object-fit: cover; }

/* === TYPO & GRADIENTS === */
.gradient-text {
    background: linear-gradient(to right, #262626, #121212);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Effet Dongle Hover */
.hover-dongle {
    font-family: 'Figtree', sans-serif;
    font-size: var(--font-figtree);
    font-weight: 600;
}
.hover-dongle:hover {
    font-family: 'Dongle', sans-serif;
    font-size: var(--font-dongle);
    line-height: 0.8;
    color: var(--accent-color);
}

/* === HEADER (Mobile First) === */
.site-header {
    padding: 20px;
    padding-top: 40px;
    padding-bottom: 150px;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    position: relative;
}

.navbar {
    position: fixed; /* Elle reste accrochée */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Toujours au dessus */
    padding: 20px 30px; /* Espace interne */
    box-sizing: border-box; /* Important pour que width 100% ne déborde pas */
    
    /* Le dégradé EBEBEB vers Transparent */
    background: linear-gradient(to bottom, #EBEBEB 60%, rgba(235, 235, 235, 0) 100%);
    
    /* Petit effet de flou pour la modernité (optionnel) */
    backdrop-filter: blur(1px);
    
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.logo-img { height: 30px; width: auto;}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px; 
}

#rive-canvas {
    width: 50px; /* Taille affichée */
    height: 50px;
    /* Pas besoin d'object-fit car c'est un canvas, mais assure-toi que le ratio est bon */
}

/* Le CTA Central */
/* AJUSTEMENT DU BOUTON CTA */
.cta-pill {
    background: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    display: inline-flex; /* Important pour la largeur */
    align-items: center;
    position: relative;
    gap: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    text-decoration: none;
    
    /* Effet Spring (Rebond) */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* On définit une hauteur fixe minimale pour éviter que le bouton ne saute 
       quand la police change de taille */
    min-height: 24px; 
}

/* LE CONTENEUR DES TEXTES (Pour les superposer) */
.cta-text-wrapper {
    position: relative;
    display: grid;
    place-items: center;
}

/* TEXTE 1 : "OPEN FOR WORK" (Défaut) */
.text-default {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    
    /* Transition fluide */
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
    
    /* Astuce Grid : Les deux textes occupent la même cellule */
    grid-area: 1 / 1; 
}

/* TEXTE 2 : "LET'S CONNECT" (Hover) */
.text-hover {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem; /* Taille Dongle (environ 2x Figtree) */
    line-height: 0.5; /* Dongle a besoin d'un interligne très bas pour être centré */
    color: #fff;
    white-space: nowrap;
    
    /* Caché par défaut */
    opacity: 0;
    transform: translateY(10px); /* Il arrive du bas */
    transition: all 0.3s ease;
    
    /* Astuce Grid : Occupe la même cellule */
    grid-area: 1 / 1; 
}

/* === L'ANIMATION AU SURVOL === */

/* Le bouton grossit un peu (Spring) */
.cta-pill:hover {
    background: var(--accent-color);
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* "Open for work" disparaît vers le haut */
.cta-pill:hover .text-default {
    opacity: 0;
    transform: translateY(-10px);
}

/* "Let's connect" apparaît et remonte à sa place */
.cta-pill:hover .text-hover {
    opacity: 1;
    transform: translateY(0);
}


.pulse-dot {
    position: absolute; /* Il flotte par dessus le bouton */
    bottom: 0; /* Décalage du bas */
    right: 0;  /* Décalage de la droite */
    
    width: 12px; 
    height: 12px;
    background-color: var(--accent-color);
    border-radius: 50%;
    
    /* Ton animation existante */
    animation: pulse 2s infinite;
    z-index: 2; /* S'assure qu'il est au-dessus */
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(41, 176, 36, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(41, 176, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(41, 176, 36, 0); }
}

@keyframes pulse-white {
    0% {
        /* Ombre blanche semi-transparente au départ */
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        /* L'ombre s'étend et devient transparente */
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* 2. Application du changement au survol du bouton */
.cta-pill:hover .pulse-dot {
    background-color: #ffffff; /* Le point central devient blanc */
    animation-name: pulse-white; /* On bascule sur l'animation blanche */
}

/* CTA DANS LE HERO */
.hero-cta {
    margin-top: 30px; /* Espace entre le sous-titre et le bouton */
    
    /* C'est ça qui empêche de prendre toute la largeur : */
    display: inline-flex; 
    
    /* On s'assure qu'il garde ses propriétés flex internes */
    align-items: center; 
    justify-content: center;
}

/* Petit ajustement pour que le centrage fonctionne bien dans le hero */
.hero-content {
    display: flex;
    flex-direction: column; /* Empile les éléments */
    align-items: center; /* Centre tout horizontalement */
    /* ... tes autres styles hero ... */
}

/* === SWITCH LANGUE (Modifié pour les liens <a>) === */
.lang-switch {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(5px);
    padding: 5px 15px;
    margin-right: 40px;
    border-radius: 20px;
    display: flex; gap: 5px;
    font-size: 0.8rem; font-weight: 700;
}
.lang-switch-mobile {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(5px);
    padding: 10px 30px;
    margin-top: 40px;
    border-radius: 40px;
    display: flex; gap: 15px;
    font-size: 1.2rem; font-weight: 700;
}
.lang-switch-project {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(5px);
    padding: 5px 15px;
    margin-right: 40px;
    border-radius: 20px;
    display: flex; gap: 3px;
    font-size: 0.8rem; font-weight: 700;
}
.lang-link {
    opacity: 0.5; transition: 0.3s;
    text-decoration: none;
}
.lang-link.active {
    opacity: 1; 
    text-decoration: underline; 
    text-decoration-color: var(--accent-color);
    color: var(--accent-color);
}
.lang-link:hover { opacity: 1; }
.divider { opacity: 0.3; }
@media (min-width: 768px) {
    .desktop-hidden {display: none;}
}


/* Burger Menu */
.menu-toggle {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px; z-index: 100;
}
.bar { width: 25px; height: 2px; background-color: var(--text-primary); transition: 0.3s; }

/* Menu Overlay */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: var(--bg-main);
    z-index: 99;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: 0.4s ease;
}
.menu-overlay.open { opacity: 1; pointer-events: all; }
.menu-list { list-style: none; padding: 0; text-align: center; }
.menu-link {
    font-family: 'Figtree', sans-serif;
    font-size: 2rem; font-weight: 800;
    display: block; margin: 20px 0;
    color: var(--text-primary);
}
.menu-link:hover {
    font-family: 'Dongle', sans-serif;
    font-size: 4rem; /* Ratio respecté */
    color: var(--accent-color);
    line-height: 0.7;
}
.close-menu{
    cursor: pointer;
    font-size: 20px;
}

.hero-content { padding: 0 10px; max-width: 800px; margin: 0 auto; text-align: center;}
.hero-content h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; margin-bottom: 20px; color: var(--text-primary);}
.hero-content .subtitle { font-size: 1.2rem; opacity: 0.8; max-width: 600px; margin: 0 auto;}
.hero-content .subtitle-alt { font-size: 1.2rem; opacity: 0.8; max-width: 600px; margin-top: 25px;color: var(--accent-color);font-weight: 700;}

/* === FILTRES (Modifié pour Mobile) === */
.filters-container { padding: 40px 20px; text-align: center; }
.scroll-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.filter-pill {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 12px 24px; 
    border-radius: 50px;
    font-family: 'Figtree', sans-serif; font-weight: 626;
    cursor: pointer; transition: 0.3s; white-space: nowrap;
    color: var(--text-primary);
}
.filter-pill:hover, .filter-pill.active {
    background: var(--text-primary); color: var(--bg-main); border-color: var(--text-primary);
}

/* AJUSTEMENT MOBILE : FILTRES PLUS GROS */
@media (max-width: 768px) {
    .filter-pill {
        padding: 16px 32px; /* Beaucoup plus large */
        font-size: 1.1rem; /* Texte plus gros */
        border-width: 2px; /* Bordure plus visible */
    }
}
/* === VERSION MOBILE (Nuage) === */
@media (max-width: 768px) {
    .scroll-filters {
        flex-wrap: wrap; /* Autorise le retour à la ligne */
        justify-content: center; /* Centre les éléments */
    }

    .filter-pill {
        /* Pas de width 100% ici, ils gardent leur taille naturelle */
        flex: 1 1 auto; /* Permet de grandir un peu pour remplir les trous */
        min-width: 45%; /* S'assure qu'il y en a environ 2 par ligne max */
        text-align: center;
    }
}

/* === BENTO GRID === */
.bento-grid {
    display: grid;
    /* DESKTOP : 3 colonnes par défaut */
    grid-template-columns: repeat(3, 1fr); 
    /* Hauteur de ligne : minmax évite que le contenu dépasse si le texte est long */
    grid-auto-rows: 320px; 
    gap: 24px; /* Espace propre et homogène */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; /* Important pour les calculs de largeur */
}
.bento-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    overflow: hidden; /* Empêche l'image de dépasser et de créer le bug visuel */
    position: relative;
    width: 100%;
    height: 100%; /* Force la carte à respecter la grille */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.bento-card:hover { transform: scale(0.98); }

.card-img {
    width: 100%; 
    height: 100%;
    background-size: cover; 
    background-position: center;
    
    /* 1. On applique le noir et blanc par défaut */
    filter: grayscale(100%); 
    
    /* 2. IMPORTANT : On ajoute ', filter 0.6s ease' pour animer la couleur */
    transition: transform 0.6s ease, filter 0.6s ease;
}

.bento-card:hover .card-img {
    /* On garde ton effet de zoom */
    transform: scale(1.1);
    
    /* 3. Au survol, on enlève le gris (retour à la couleur) */
    filter: grayscale(0%);
}

/* Badge flottant inspiré de ta capture */
.card-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--bg-main);
    backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem; font-weight: 700;
    color: var(--text-primary);
    z-index: 2;
}

.card-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: linear-gradient(to top, var(--text-primary), transparent);
    color: white;
    transform: translateY(100%); transition: 0.4s ease;
    z-index: 2;
}
.bento-card:hover .card-info { transform: translateY(0); }

/* Tailles desktop */
@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 350px; }
    .bento-card.large { grid-column: auto; grid-row: auto; }
}
/* --- TABLETTE (iPad / ~768px à 1024px) --- */
/* C'est ici qu'on règle le bug de chevauchement */
@media (max-width: 1024px) {
    .bento-grid {
        /* On passe à 2 COLONNES sur tablette */
        grid-template-columns: repeat(2, 1fr); 
        grid-auto-rows: 300px; /* Hauteur légèrement réduite */
        gap: 20px;
    }

    /* Sur 2 colonnes, la carte Large prend toute la largeur (2 colonnes) */
    .bento-card.large {
        grid-column: span 2;
        /* Elle garde sa hauteur double ou passe en simple selon ton goût */
        grid-row: span 2; 
    }
}

/* --- MOBILE (Smartphone / < 600px) --- */
@media (max-width: 600px) {
    .bento-grid {
        /* 1 seule colonne */
        grid-template-columns: 1fr; 
        /* On laisse la hauteur s'adapter au contenu ou on fixe une taille raisonnable */
        grid-auto-rows: 300px; /* Plus petit sur mobile pour voir plus de contenu */
        
        /* CORRECTION ESPACEMENT TROP GRAND */
        gap: 12px; /* Beaucoup plus serré sur mobile */
        padding: 15px;
    }

    /* On annule la géométrie complexe */
    .bento-card.large {
        grid-column: auto;
        grid-row: span 1; /* Redevient une carte normale */
        min-height: 300px; /* On lui donne juste un peu plus de hauteur si on veut */
    }
    
    /* La citation s'adapte */
    .bento-card.quote-card {
        min-height: 200px;
    }
}

/* === CARTE FUTURE PROJET (STYLE BLUEPRINT) === */

.future-card.glass-effect {
    background: rgba(255, 255, 255, 0.2); /* Fond semi-transparent */
    backdrop-filter: blur(2px); /* Le flou magique */
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center; text-align: center;
}

.future-content {
    color: var(--text-primary);
    transition: transform 0.3s ease;
}

.fake-button {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Animation au survol */
.future-card:hover .future-content { transform: scale(1.05); }
.future-card:hover .fake-button { opacity: 1; letter-spacing: 2px; transition: 0.3s; }


/* SECTION ABOUT */
.about-section {
    padding: 50px 0;
    background-color: white; /* Contraste avec le fond gris */
    margin-top: 100px;
    border-radius: 20px;
}

.about-container {
   
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* CONTAINER */
.about-editorial {
    background-color: #fff;
    max-width: 1100px;
    margin: 0 auto;
}

/* PARTIE 1 : INTRO */
.about-intro {
    display: grid;
    /* On équilibre un peu plus : 40% image / 60% texte */
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 60px;
    margin-bottom: 40px;
    margin-top: 80px;
    align-items: center; /* Centre le texte verticalement par rapport à l'image */
}

/* LE PLACEHOLDER (Boîte grise temporaire) */
.image-placeholder {
    width: 100%;
    aspect-ratio: 4/3; /* Format portrait élégant */
    background-color: #eee;
    border-radius: 12px; /* Coins arrondis */
    display: flex;
}

/* STYLE POUR LA VRAIE IMAGE (Une fois intégrée) */
.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre l'image proprement sans la déformer */
    border-radius: 12px;
}

.intro-text p {
    font-size: 1.1rem;
    line-height: 1.7; /* AÉRATION MAJEURE ICI */
    color: var(--text-primary);
    margin-bottom: 20px;
}

.lead { font-size: 1.25rem; font-weight: 500; color: var(--text-primary); }

.quote-box {
    border-left: 4px solid var(--accent-color);
    padding-left: 20px;
    margin-top: 30px;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-primary);
}

/* PARTIE 2 : GRILLE 3 COLONNES */
.why-me-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
    border-top: 1px solid #eee; /* Ligne de séparation élégante */
    padding-top: 60px;
}

.feature-card .number {
    font-size: 3rem;
    font-weight: 700;
    color: #e0e0e0; /* Gris très clair discret */
    display: block;
    margin-bottom: 10px;
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.feature-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* PARTIE 3 : FOOTER */
.about-footer {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    color: #111;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .about-intro, .why-me-grid {
        grid-template-columns: 1fr; /* Tout passe en 1 colonne sur mobile */
        gap: 40px;
    }
    .intro-title h2 { font-size: 2.5rem; }
}

.about-text p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    opacity: 0.8;
    text-align: center;
}

.about-text li{
    margin: 20px 0;
}

/* CONTAINER GLOBAL */
.skills-section {
    display: grid;
    /* Desktop : 3 colonnes égales */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
}

/* CARTE INDIVIDUELLE */
.skill-card h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    color: var(--accent-color); /* Ton violet ou autre */
}

/* ITEM (LIGNE) */
.skill-item {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.skill-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 4px;
}

.skill-desc {
    font-size: 0.95rem;
    color: #666; /* Gris plus clair pour la hiérarchie */
    line-height: 1.4;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .skills-section {
        /* Mobile : 1 seule colonne */
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    
    .skill-card {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Un petit fond pour détacher sur mobile */
    }
}

.btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--text-color);
    transform: translateY(-3px);
}



/* === PLAYGROUND (Modifié) === */
.playground-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 40px; }

.playground-grid {
    display: grid;
    /* Mobile First : 1 colonne */
    grid-template-columns: 1fr; 
    gap: 20px;
}

.play-item {
    border-radius: var(--radius);
    overflow: hidden;
    background: #ddd;
    height: 300px; /* Hauteur fixe sur mobile */
}
.play-item img { transition: transform 0.5s ease;object-fit: cover;width: 100%;height: 100%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;}
.play-item:hover img { transform: scale(1.05); }

/* CACHER LES ÉLÉMENTS SUPPLÉMENTAIRES SUR MOBILE */
.mobile-hidden { display: none; }

/* Version DESKTOP du Playground */
@media (min-width: 768px) {
    .playground-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 Colonnes */
        grid-auto-rows: 250px; /* Hauteur de base ligne */
    }
    
    .play-item { height: 100%; } /* S'adapte à la grille */
    
    /* AFFICHER TOUT SUR DESKTOP */
    .mobile-hidden { display: block; } 

    /* Classes de taille Grid */
    .play-item.wide { grid-column: span 2; }
    .play-item.tall { grid-row: span 2; }
}
/* === PLAYGROUND (AJOUT NOTE MOBILE) === */

.mobile-note {
    /* Style du texte */
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    
    /* Pour qu'il prenne toute la largeur de la grille mobile (1 colonne) */
    grid-column: 1 / -1; 
    margin-top: 20px;
    padding: 10px 0;
}

/* === CONTACT === */

.contact-section { padding: 100px 0 0; text-align: center; }
.contact-box {
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0 ;
    padding: 60px 20px 5px;
    margin: 0 auto;
    max-width: 1200px;
}
.contact-actions {
    display: flex; justify-content: center; gap: 60px; align-items: center;
    margin-top: 40px;
}
@media (max-width: 768px) {
    .contact-actions {
        flex-direction: column; /* On passe en colonne ! */
        gap: 50px;
    }
}
.contact-text {
    margin-bottom: 40px;
}
.copyright {
    margin-top: 70px;
    font-size: small;
}


/* === LE BOUTON ORGANIQUE (Footer & Projets) === */

.cta-pill.large {
    position: relative;
    background-color: var(--text-primary); /* Vert par défaut */
    color: #fff;
    padding: 18px 45px; /* Un peu plus d'espace */
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    overflow: hidden; /* Important pour contenir les textes qui bougent */
    /* On fixe une largeur mini ou une hauteur fixe pour éviter le "jump" */
    min-width: 280px; 
    height: 60px; /* Ajuste selon ton goût */
    margin: 0 auto;  /* Sécurité supplémentaire */
    text-align: center;
    display: inline-flex; /* ou flex */
    justify-content: center;
    align-items: center;
    /* Transition douce pour la couleur de fond */
    transition: background-color 0.4s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-content {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
}

/* --- TEXTE 1 : RIGIDE (Figtree) --- */
.text-rigid {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    
    /* Position Grid : Cellule 1/1 */
    grid-area: 1 / 1;
    
    /* Animation */
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(0) scale(1);
    opacity: 1;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

.arrow-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

/* --- TEXTE 2 : ORGANIQUE (Dongle) --- */
.text-organic {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem; /* Très gros pour compenser la petite taille de Dongle */
    line-height: 0.8;
    font-weight: 400;
    
    /* Position Grid : Cellule 1/1 (superposé) */
    grid-area: 1 / 1;
    
    /* Animation - Caché par défaut */
    opacity: 0;
    transform: translateY(20px) rotate(3deg); /* Arrive du bas avec une légère rotation "organique" */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond */
}

/* === L'ANIMATION AU SURVOL === */

/* 1. Changement de fond (Optionnel : devient noir ou reste vert) */
.cta-pill.large:hover {
    background-color: var(--accent-color); /* Passe au noir pour faire très classe */
    transform: scale(1.02); /* Petit pop */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin: 0 auto;  /* Sécurité supplémentaire */
    text-align: center;
    display: inline-flex; /* ou flex */
    justify-content: center;
    align-items: center;
}

/* 2. Le texte rigide part vers le haut */
.cta-pill.large:hover .text-rigid {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
}

/* 3. Le texte organique arrive et prend la place */
.cta-pill.large:hover .text-organic {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* 4. Petite animation flèche avant départ (détail subtil) */
.cta-pill.large:hover .arrow-icon {
    transform: translateX(5px);
}
.social-link { font-size: 1.2rem; color: var(--text-primary); }

/* Animation Entrée */
.fade-in { opacity: 0; animation: fadeUp 0.8s forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} }

/* 1. On cible les H2 des sections principales */
.section-header h2,
.about-text h2,
.contact-box h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Empêche le titre de se couper sur deux lignes */
    color: var(--text-primary); /* Couleur unie sombre */
    margin-bottom: 20px; /* Un peu d'espace sous le titre */
}

/* 2. Création des lignes avant (::before) et après (::after) */
.section-header h2::before,
.section-header h2::after,
.about-text h2::before,
.about-text h2::after,
.contact-box h2::before,
.contact-box h2::after {
    content: ''; /* Élément vide nécessaire */
    flex-grow: 1; /* La ligne s'étire pour prendre tout l'espace */
    height: 2px; /* Épaisseur de la barre */
    background-color: var(--accent-color); /* Ta couleur verte (#29B024) */
    /* Espace entre le texte et les lignes (ajuste si besoin) */
    margin: 0 30px; 
    opacity: 0.8; /* Légère transparence pour un rendu plus doux */
    border-radius: 10px; /* Bouts arrondis pour le style organique */
}

/* Ajustement pour mobile : réduire l'espace si l'écran est petit */
@media (max-width: 768px) {
    .section-header h2::before,
    .section-header h2::after,
    .about-text h2::before,
    .about-text h2::after,
    .contact-box h2::before,
    .contact-box h2::after {
        margin: 0 10px; /* Espace réduit de moitié sur mobile */
    }
}
@media (max-width: 768px) {
    .section-header h2,
.about-text h2,
.contact-box h2 {
    font-size: 20px;}
}

/* === STYLES PAGES PROJETS (CASE STUDY) === */

/* HERO PROJET */
.project-hero {
    padding: 120px 20px 60px; /* Plus d'espace en haut car header fixed/overlay */
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.project-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.static-pill {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.project-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 20px;
    line-height: 1.1;
}

.project-hero .subtitle {
    font-size: 1.3rem;
    opacity: 0.7;
    margin-bottom: 40px;
}

/* IMAGE PRINCIPALE (COVER) */
.hero-image-container {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
}
.hero-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* GRILLE D'INFOS (Role, Date, Tools) */
.project-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 40px;
    background: #fff;
    border-radius: var(--radius);
    text-align: center;
}

.meta-item h4 {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* CONTENU DE L'ARTICLE */
.project-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-block {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 40px;
    background: var(--bg-main);
    border-radius: var(--radius);
    margin-bottom: 40px;
}

.content-block h2 {
    /* Style identique aux titres H2 de l'accueil (Barre verte) */
    display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; margin-bottom: 30px; font-size: 2rem;
}
.content-block h2::before, .content-block h2::after {
    content: ''; flex-grow: 1; height: 2px; background-color: var(--accent-color); margin: 0 20px; opacity: 0.8; border-radius: 10px;
}

.content-block p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}
.content-block li {
    margin-bottom: 21px;
}
.content-block strong {
    color: var(--text-primary);
}

.project-img {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 100px;
    object-fit: cover; 
    overflow: hidden;
}

.next-project-card {
    /* MODIF 1 : On passe en block pour pouvoir utiliser margin auto */
    display: block; 
    
    /* MODIF 2 : La formule magique pour centrer un bloc horizontalement */
    margin: 0 auto; 
    margin-top: 100px;
    margin-bottom: 50px;
    background: #fff;
    padding: 60px 40px;
    border-radius: var(--radius);
    transition: transform 0.3s ease;
    
    /* Dimensions */
    max-width: 600px;
    width: 100%;
    
    cursor: pointer;
    border: 1px solid transparent;
    
    /* MODIF 3 : On garde bien le box-sizing pour le mobile */
    box-sizing: border-box; 
}

.next-project-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.next-label {
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.next-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    /* Petit bonus : empêche les mots longs de casser la mise en page sur mobile */
    word-wrap: break-word; 
}

/* MODIF 3 : Adaptation spécifique Mobile */
@media (max-width: 768px) {
    .next-project-section {
        padding: 60px 20px; /* On réduit l'espace autour */
    }

    .next-project-card {
        padding: 40px 20px; /* On réduit l'espace intérieur (20px sur les côtés au lieu de 40px) */
    }

    .next-title {
        font-size: 1.8rem; /* On réduit un peu la police pour que ça rentre mieux */
    }
}

/* STYLE CARTE CITATION */
/* On enlève les effets de zoom d'image car il n'y a pas d'image */
.bento-card.quote-card:hover {
    transform: translateY(-5px); /* Juste une petite levée */
}
/* STYLE CARTE CITATION (Version Responsive & Centrée) */
.bento-card.quote-card {
    background-color: #fff;
    /* FLEXBOX : C'est ici que le centrage se joue */
    display: flex;
    align-items: center;     /* Centre Verticalement */
    justify-content: center; /* Centre Horizontalement */
    
    padding: 30px; /* Espace interne de sécurité */
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden; /* Empêche tout dépassement accidentel */
    
    /* On force la carte à ne pas avoir de scroll interne */
    text-align: left; 
}

/* Le conteneur interne de la citation */
.quote-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le contenu verticalement dans son conteneur */
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.quote-icon {
    font-size: 4rem; /* Un peu plus gros pour le style */
    line-height: 1;
    font-family: serif;
    color: var(--accent-color);
    opacity: 0.2; /* Plus discret */
    position: absolute;
    top: -10px;
    left: -15px;
    pointer-events: none; /* Pour qu'on ne puisse pas le sélectionner */
}

.quote-text {
    font-weight: 500;
    font-style: italic;
    color: var(--text-primary);
    z-index: 1;
    line-height: 1.5;
    
    /* Optionnel : Limiter le nombre de lignes (avec "..." si ça dépasse) */
    display: -webkit-box;
    -webkit-line-clamp: 7; /* Coupe après 7 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quote-author {
    margin-top: auto; /* Pousse l'auteur vers le bas si besoin, ou reste collé au texte */
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.author-name-projet {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-top: -20px;
}

.author-role {
    font-size: 0.75rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.conclusion{
    margin-top: 50px;
}
/* === HERO SPLINE INTEGRATION === */

/* Le conteneur sert de repère */
.hero-image-container {
    position: relative; /* Indispensable pour que l'absolute fonctionne dedans */
    overflow: hidden;   /* Évite que la 3D ne dépasse si elle bug */
    border-radius: var(--radius); /* Garde tes arrondis 20px */
}

/* L'image définit la hauteur du bloc */
.static-backup {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; /* En dessous */
}

/* La 3D vient se coller par-dessus */
.spline-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2; /* Au-dessus */
}

@media (max-width: 768px) {
    .spline-hero {
        display: none !important;
    }
}
.hero-image-img{
    border-radius: var(--radius);
}

/* === CONCLUSION RIVE (Agrandie + Fond) === */
.conclusion-container {
    width: 100%;
    
    /* 1. POUR AGRANDIR */
    /* Augmente ces valeurs selon tes besoins */
    max-width: 800px; /* Était 600px -> On passe à 900px */
    height: 600px;    /* Était 400px -> On passe à 600px */
    
    margin: 80px auto; /* Un peu plus d'espace autour */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 2. POUR L'IMAGE DE FOND */
    background-image: url('images/helium/helium-bkg.webp'); /* Mets ton image ici */
    background-size: cover;   /* L'image remplit tout l'espace */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat;
    
    /* Pour garder ta DA "arrondie" */
    border-radius: var(--radius); 
    
    position: relative;
    overflow: hidden; /* Important pour que l'image ne dépasse pas des bords arrondis */
}

#conclusion-canvas {
    width: 100%;
    height: 100%;
    /* Le canvas est au-dessus du fond par défaut, c'est parfait */
    z-index: 2; 
}

/* Ajustement mobile (pour que ça ne soit pas trop géant sur téléphone) */
@media (max-width: 768px) {
    .conclusion-container {
        height: 100%; /* On réduit la hauteur sur mobile */
        max-width: 100%;
    }
}
/* Le conteneur (La grille) */
.media-grid {
    display: grid;
    /* On crée 2 colonnes égales */
    grid-template-columns: 1fr 1fr; 
    /* On centre le contenu horizontalement si l'écran est large */
    justify-items: center; 
    gap: 24px;
    margin: 40px auto; /* Auto permet de centrer la grille elle-même */
    width: 100%;
    max-width: 800px; /* Optionnel : empêche que ce soit trop écarté sur grands écrans */
    
    /* IMPORTANT : On retire le 'height' fixe ici pour corriger le bug mobile */
}

/* Les éléments (Images et Vidéos) */
.media-item-img {
    /* Vos dimensions fixes demandées */
    width: 322px;
    height: 558px;
    
    /* Le secret pour uniformiser les visuels différents : */
    object-fit: cover; 
    /* object-fit: cover -> Remplit tout le cadre (coupe les bords si nécessaire). C'est le plus esthétique.
       object-fit: contain -> Affiche toute l'image (laisse des bords blancs/transparents).
    */
    border-radius: 12px;
}
.media-item-pic {
    /* Vos dimensions fixes demandées */
    width: 322px;
    height: 558px;
    
    /* Le secret pour uniformiser les visuels différents : */
    object-fit: contain; 
    /* object-fit: cover -> Remplit tout le cadre (coupe les bords si nécessaire). C'est le plus esthétique.
       object-fit: contain -> Affiche toute l'image (laisse des bords blancs/transparents).
    */
    border-radius: 12px;
}
.media-item-video {
    /* Vos dimensions fixes demandées */
    width: 322px;
    height: 558px;
    background: var(--bg-main);
    /* Le secret pour uniformiser les visuels différents : */
    object-fit: contain; 
    border-radius: 12px;
}
.media-item-video-last {
    /* Vos dimensions fixes demandées */
    width: 100%;
    height: auto;
    background: var(--bg-main);
    /* Le secret pour uniformiser les visuels différents : */
    object-fit: contain; 
    border-radius: 12px;
}
.media-item-video-hal {
    width: 250px;
    height: 350px;
    border-radius: var(--radius);
    object-fit: cover; 
    overflow: hidden;
}
/* Version Mobile */
@media (max-width: 768px) {
    .media-grid {
        /* On passe en une seule colonne */
        grid-template-columns: 1fr; 
    }
    
    /* Optionnel : Sur petit mobile, 322px peut être trop large. 
       Ceci assure que l'image ne dépasse jamais la largeur de l'écran */
    .media-item-img,.media-item-video  {
        max-width: 100%; 
        height: auto; /* Ou gardez 558px si vous voulez vraiment forcer la hauteur */
        aspect-ratio: 322/558; /* Garde la proportion même si la largeur change */
    }
}

/* === NAVIGATION PROJET SUIVANT & FOOTER === */

.project-navigation {
    max-width: 1000px;
    margin: 100px auto 40px; /* Espacement haut/bas */
    padding: 0 20px;
}

/* --- 1. CARTE PROJET SUIVANT (Visuelle) --- */
.next-project-banner {
    display: block;
    position: relative;
    width: 100%;
    height: 300px; /* Hauteur fixe pour l'impact visuel */
    border-radius: var(--radius);
    overflow: hidden; /* Important pour le zoom de l'image */
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 60px;
}

/* L'image de fond */
.next-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* Le filtre noir pour lire le texte */
.next-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Assombri l'image */
    transition: background 0.3s ease;
    z-index: 2;
}

/* Le contenu texte par dessus */
.next-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
}

/* Modification du label pour imiter le .card-badge */
.next-label {
    /* 1. On reprend exactement les propriétés du .card-badge */
    position: absolute; top: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.95); /* Fond blanc presque opaque */
    backdrop-filter: blur(5px);
    color: var(--text-primary); /* Texte foncé (#262626) */
    padding: 8px 18px; /* Un peu plus généreux que le badge standard pour la mise en avant */
    border-radius: 30px; /* Arrondi complet */
    font-size: 0.85rem; 
    font-weight: 700;
    
    /* 2. Ajustements pour la mise en page centrée */
    display: inline-block; /* Important pour que la pilule s'adapte au texte */
    margin-bottom: 20px; /* Espace avant le titre */
    text-transform: uppercase; /* Optionnel : garde le style "tag" */
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Petite ombre pour le détacher du fond */
}

.next-title {
    font-size: 2.5rem;
    margin: 0;
    color: white !important; /* Force le blanc */
    /* On retire les barres vertes des H2 classiques ici */
    display: block !important; 
}
.next-title::before, .next-title::after { display: none; }

.next-arrow {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    background: var(--accent-color);
    padding: 8px 20px;
    border-radius: 50px;
}

/* --- ANIMATIONS AU SURVOL --- */
.next-project-banner:hover .next-bg {
    transform: scale(1.08); /* Zoom léger */
}

.next-project-banner:hover .next-overlay {
    background: rgba(0, 0, 0, 0.6); /* Plus sombre au survol pour contraste */
}

.next-project-banner:hover .next-arrow {
    opacity: 1;
    transform: translateY(0); /* Le bouton apparaît */
}

/* --- 2. MINI FOOTER PROJET --- */
.project-footer {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.1); /* Séparateur discret */
}

.project-footer h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.footer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.link-back {
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid transparent;
}
.link-back:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

.copyright-simple {
    font-size: 0.85rem;
    color: #999;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
    .next-project-banner {
        height: 250px;
    }
    
    .next-title {
        font-size: 1.8rem;
    }
    
    /* AJOUT ICI : On force l'affichage du bouton */
    .next-arrow {
        opacity: 1; /* Toujours visible */
        transform: translateY(0); /* À sa place finale */
        margin-top: 15px; /* Un petit peu d'espace en plus */
    }

    /* Optionnel : On peut aussi assombrir un peu plus le fond par défaut 
       pour être sûr que le texte blanc soit lisible sans survol */
    .next-overlay {
        background: rgba(0, 0, 0, 0.5); 
    }
    
    .footer-actions {
        flex-direction: column;
        gap: 20px;
    }
}