/* --- CONFIGURATION DES POLICES --- */
@font-face {
    font-family: 'GlimmerOfLight';
    src: url('glimmer_of_light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background: #151515;
    --bleu-ardoise: #3a5a6b;
    --bleu-clair: #4a7a8a;
    --noir-fond: #080808;
    --gris-moyen: #75757a;
    --blanc-casse: #e2e2e5;
    --gradient-signature: radial-gradient(circle at center, #111 0%, #080808 100%);
}

/* --- BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--noir-fond);
    color: var(--blanc-casse);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- TITRES --- */
h1,
h2,
h3,
.loader-content,
.logo-text,
.filter-btn,
.sort-btn,
.btn-back {
    font-family: 'GlimmerOfLight', serif;
    font-weight: normal;
    letter-spacing: 1px;
}

/* --- NAVIGATION (HEADER) --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: var(--gradient-signature);
    border-bottom: 1px solid var(--noir-fond);
}

.logo-text {
    font-size: clamp(1.6rem);
    color: var(--blanc-casse);
    text-decoration: none;
}

.logo-text span {
    color: var(--bleu-ardoise);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 3rem;
}

.nav-links a,
.nav-links a:visited {
    color: var(--gris-moyen) !important;
    /* On force le gris d'origine */
    text-decoration: none;
    transition: color 0.4s ease;
}

/* 2. État au survol (hover) */
.nav-links a:hover {
    color: var(--blanc-casse) !important;
    /* Devient blanc uniquement quand la souris est dessus */
}

/* --- BOUTONS & LIENS (CORRECTION COULEUR VISITÉE) --- */
/* Pour tous les liens du site, on empêche le bleu/violet du navigateur */
a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
    /* Reste la couleur d'origine même après clic */
}

/* Bouton Retour (Projets) */
.btn-back {
    display: inline-block;
    color: var(--blanc-casse);
    text-transform: lowercase;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.btn-back:visited {
    color: var(--blanc-casse);
    /* Sécurité pour éviter le bleu */
}

.btn-back:hover {
    opacity: 0.6;
}

/* Bouton Ligne (Accueil/Contact) */
.btn-line {
    display: inline-block;
    padding: 15px 45px;
    border: 1px solid var(--bleu-ardoise);
    color: var(--blanc-casse);
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.7rem);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    background: transparent;
}

.btn-line:hover {
    background: var(--bleu-ardoise);
    color: white;
    letter-spacing: 6px;
    transform: translateY(-2px);
}

.btn-line:visited {
    color: var(--blanc-casse);
}

/* --- PIED DE PAGE (FOOTER) --- */
footer {
    padding: 80px 8% 60px;
    text-align: center;
    background: var(--gradient-signature);
    border-top: 1px solid var(--noir-fond);
}

.footer-content {
    font-size: clamp(0.75rem);
    color: var(--gris-moyen);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-contact-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--blanc-casse);
    text-decoration: none;
    font-family: 'GlimmerOfLight', serif;
    font-size: clamp(1.4rem);
    transition: opacity 0.3s ease;
    text-transform: lowercase;
    /* Tout en minuscules comme demandé */
}

.footer-contact-link:hover,
.footer-contact-link:visited {
    opacity: 0.7;
    color: var(--blanc-casse);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    nav {
        padding: 20px 5%;
    }
}

[hidden] {
    display: none !important;
}
/* --- CONFIGURATION DU CANVAS DE PARTICULES --- */
#particleCanvas {
    /* Fixe le canvas pour qu'il couvre toute la fenêtre même au scroll */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    
    /* Place le canvas derrière TOUT le contenu du site */
    z-index: -1; 
    
    /* Couleur de fond par défaut (ton noir profond) */
    background-color: var(--noir-fond);
    
    /* TRÈS IMPORTANT : empêche le canvas de bloquer les clics sur les boutons */
    pointer-events: none; 
    
    /* Optimisation du rendu pour les animations fluides */
    backface-visibility: hidden;
    will-change: transform;
}

/* --- OPTIONNEL : RENDRE LE BODY TRANSPARENT --- */
/* Pour être sûr que le fond des sections ne cache pas les particules */
body, main {
    background: transparent;
}
.hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            background: transparent; /* Transparent pour voir les particules */
        }

        .hero-content { position: relative; z-index: 2; margin-top: 80px; }
        .hero h1 { font-size: clamp(3.5rem, 10vw, 6.5rem); margin-bottom: 10px; }
        .hero p {
            font-size: clamp(0.9rem);
            color: var(--gris-moyen);
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 50px;
        }

        .btn-line {
            padding: 12px 40px;
            border: 1px solid var(--bleu-ardoise);
            color: var(--blanc-casse);
            text-decoration: none;
            font-size: clamp(0.7rem);
            letter-spacing: 3px;
            text-transform: uppercase;
            transition: all 0.5s ease;
        }
        .btn-line:hover { background: var(--bleu-ardoise); color: white; }

        /* Grille expertise */
        .expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 100px 8%;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(5px);
    /* On ajoute une transition fluide pour le changement de hauteur du container */
    transition: all 0.6s ease-in-out; 
}

/* --- EFFET AU SURVOL : LE TEXTE RESSORT --- */
.expertise-item:hover {
    transform: scale(1.03); 
    background: rgba(255, 255, 255, 0.02); /* Fond très discret pour le contraste */
    border-radius: 12px;
}

/* Le titre ressort avec un éclat lumineux */
.expertise-item h3 {
    transition: text-shadow 0.4s ease, color 0.4s ease;
}

/* Effet Flare pour Lumière */
.expertise-item:hover h3 {
    position: relative;
    overflow: hidden;
}

/* Le paragraphe devient aussi plus lisible */
.expertise-item p {
    transition: opacity 0.4s ease;
    opacity: 0.7;
}

.expertise-item:hover p {
    opacity: 1;
}

/* --- NOUVEAU : État quand on filtre (cache) --- */
.expertise-item.hidden {
    opacity: 0;
    transform: scale(0.7); /* Rétrécit un peu */
    pointer-events: none;
    /* Pour que l'élément disparaisse de la grille sans laisser de trou géant */
    display: none; 
}
        .expertise-item h3 { color: var(--bleu-ardoise); font-size: clamp(1.5rem); margin-bottom: 15px; }
        .expertise-item p { color: var(--gris-moyen); font-size: clamp(0.9rem); font-weight: 300; }

        /* Section À Propos */
        .section-about {
            padding: 120px 15%;
            text-align: center;
            background: transparent;
        }
        .section-about h2 { font-size: clamp(2.5rem); margin-bottom: 20px; }
        .divider { height: 1px; width: 40px; background-color: var(--bleu-ardoise); margin: 0 auto 40px; }
        .section-about p { max-width: 700px; margin: 0 auto 20px; color: var(--gris-moyen); font-size: clamp(1.1rem); }

        @media (max-width: 768px) {
            .expertise-grid { grid-template-columns: 1fr; }
        }
        /* --- LE CONTENEUR DE L'IMAGE (LA FORME) --- */
.image-container {
    width: 100%;
    height: 100%;      /* Prend toute la hauteur du parent (.gallery-item) */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;  /* Coupe ce qui dépasse */
    z-index: 1;        /* Derrière les textes (item-info) */
}

/* --- L'IMAGE (LE REMPLISSAGE) --- */
.image-container img {
    width: 100%;
    height: 100%;
    
    /* MAGIE : Remplit la forme sans déformer */
    object-fit: cover; 
    
    /* CENTRE l'image pour que le milieu soit toujours visible */
    object-position: center; 
    
    transition: transform 1.2s ease, opacity 0.6s ease;
    display: block;
}

/* --- EFFET AU SURVOL --- */
.gallery-item:hover .image-container img {
    transform: scale(1.1); /* Zoom léger lors du hover */
    opacity: 0.6;          /* S'éclaircit légèrement au survol */
}
.logo-central {
    display: inline-block;
    position: relative; /* Indispensable pour que le z-index fonctionne */
    z-index: 10;        /* Place le logo sur une couche supérieure */

    white-space: nowrap;
    padding-bottom: 0.15em; /* Laisse de la place au crochet du L */
    
    /* On garde tes styles de dégradé... */
    background: linear-gradient(
        to right, 
        var(--blanc-casse) 0%, 
        var(--blanc-casse) 40%, 
        var(--bleu-clair) 50%, 
        var(--blanc-casse) 60%, 
        var(--blanc-casse) 100%
    );
    background-size: 300% 100%;
    background-position: 95% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    transition: background-position 2s cubic-bezier(0.1, 0, 0.3, 1);
}

.logo-central.animate {
    background-position: 5% center; /* Position finale du reflet */
}
.sub-logo {
    position: relative;
    z-index: 1;         /* On s'assure qu'il reste en dessous */
    margin-top: -20px;    /* Donne un tout petit peu d'air pour tester */
}

/* Style pour chaque lettre générée par le JS */
#typing-text span {
    opacity: 0;
    display: inline-block; /* Nécessaire pour l'animation */
    transform: translateY(5px);
    transition: all 0.4s ease;
}

/* Classe ajoutée par le JS pour l'apparition */
#typing-text span.fade-in-char {
    opacity: 1;
    transform: translateY(0px);
}
/* Le conteneur qui gère l'apparition */
#cta-container {
    margin-top: 30px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1s ease, transform 1s ease;
    pointer-events: none;
    text-align: center; /* Pour être sûr qu'il reste centré en X */
}

/* La classe ajoutée par le JS */
#cta-container.show-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* LE BOUTON ET SA POLICE */
.btn-decouvrir {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--bleu-clair); /* Ton bleu ardoise */
    color: var(--blanc-casse);
    text-decoration: none;
    
    /* --- FORCE TA POLICE ICI --- */
    font-family: 'TaPoliceIci', sans-serif; 
    font-size: clamp(1rem);
    letter-spacing: 2px; /* Un peu d'espace pour le côté luxe */
    text-transform: uppercase; /* Souvent plus beau pour un CTA */
    
    transition: all 0.4s ease;
    background: transparent;
}

.btn-decouvrir:hover {
    background: var(--bleu-clair);
    color: #fff;
    box-shadow: 0 0 15px var(--bleu-clair) 20%;
}
.project-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 160px 5% 100px;
            text-align: center;
        }

        /* Zone Meta (Date & Catégorie) */
        .project-meta {
            margin-bottom: 20px;
        }

        .meta-date {
            display: block;
            font-size: clamp(0.7rem);
            color: var(--gris-moyen);
            letter-spacing: 2px;
            font-family: 'Inter', sans-serif;
            margin-bottom: 5px;
        }

        .meta-category {
            font-size: clamp(0.8rem);
            color: var(--bleu-clair); /* Bleu plus visible défini précédemment */
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 700;
        }

        .project-title { 
            font-size: clamp(2.5rem, 8vw, 4rem); 
            margin-top: 10px;
            margin-bottom: 30px; 
            font-family: 'GlimmerOfLight', serif;
        }

        .project-description { 
            font-size: clamp(1.1rem); 
            color: var(--gris-moyen); 
            max-width: 700px; 
            margin: 0 auto 60px; 
            font-weight: 300;
        }

        /* Photo et Copyright */
        .project-image { 
            width: 100%; 
            height: auto; 
            border: 1px solid var(--noir-fond); 
            display: block;
        }

        .copyright-text { 
            display: block; 
            margin-top: 15px; 
            font-size: clamp(0.75rem); 
            color: var(--gris-moyen); 
            font-style: italic; 
            letter-spacing: 1px;
            margin-bottom: 60px;
        }

        /* Vidéo */
        .video-wrapper { 
            position: relative; 
            padding-bottom: 56.25%; 
            height: 0; 
            overflow: hidden; 
            margin: 80px 0 40px; 
            border: 1px solid var(--noir-fond); 
        }

        .video-wrapper iframe { 
            position: absolute; 
            top: 0; left: 0; width: 100%; height: 100%; 
        }

        /* Texte du bas */
        .project-footer-text { 
            font-size: clamp(0.95rem); 
            color: var(--gris-moyen); 
            max-width: 650px; 
            margin: 0 auto 60px; 
            font-weight: 300;
            line-height: 1.6;
        }

        .actions { 
            border-top: 1px solid var(--noir-fond); 
            padding-top: 60px; 
            margin-top: 40px;
        }

        /* Bouton retour (Forcé en blanc via style.css, mais rappel ici par sécurité) */
        .btn-back {
            color: var(--blanc-casse);
            text-decoration: none;
            font-family: 'GlimmerOfLight', serif;
        }

        @media (max-width: 768px) {
            .project-container { padding-top: 120px; }
        }
                .collections-header {
            padding: 160px 8% 40px;
            text-align: center;
        }

        .collections-header h1 {
            font-size: clamp(2.5rem, 6vw, 3.5rem);
            margin-bottom: 40px;
        }

        /* FILTRES & TRI */
        .controls-wrapper {
            margin-bottom: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .filters,
        .sorting {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-btn,
        .sort-btn {
            background: transparent;
            border: none;
            color: var(--gris-moyen);
            font-size: clamp(1rem);
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 5px 10px;
            text-transform: lowercase;
            font-family: 'GlimmerOfLight', serif;
        }

        .filter-btn.active,
        .sort-btn.active {
            color: var(--blanc-casse);
            border-bottom: 1px solid var(--bleu-ardoise);
        }

        /* GRILLE */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            padding: 0 8% 120px;
        }

        .gallery-item {
            position: relative;
            height: 500px;
            background: #111;
            overflow: hidden;
            text-decoration: none;
            display: block;
            transition: opacity 0.5s ease, transform 0.5s ease; /* Animation fluide */
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.35;
            transition: transform 1.2s ease, opacity 0.6s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
            opacity: 0.5;
        }
        .gallery-item.is-hidden {
    display: none; /* On garde le display none pour boucher les trous */
}

        /* DATE ÉPINGLÉE (Auto-remplie) */
        .item-date {
            position: absolute;
            top: 25px;
            left: 25px;
            z-index: 10;
            font-size: clamp(0.65rem);
            color: var(--blanc-casse);
            letter-spacing: 2px;
            font-family: 'Inter', sans-serif;
            opacity: 0.8;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--bleu-clair) 50%;
        }

        /* INFOS PROJET */
        .item-info {
            position: absolute;
            bottom: 0;
            z-index: 3;
            /* Doit être au-dessus de l'image */
            background: linear-gradient(to top, var(--noir-fond) 0%, noir 100%);
            width: 100%;
            padding: 40px 20px;
        }

        .item-category {
    /* Minimum 0.65rem, Idéal 3vw de l'écran, Maximum 0.8rem */
    font-size: clamp(0.65rem, 3vw, 0.8rem); 
    color: var(--bleu-clair);
    letter-spacing: 2px; /* Réduit légèrement pour gagner de l'espace */
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap; /* Empêche le retour à la ligne pour garder le style "badge" */
    overflow: hidden;
    text-overflow: ellipsis; /* Si le mot est vraiment trop long, il mettra "..." */
}

        .item-info h3 {
    /* Minimum 1rem, idéal 4vw, Maximum 1.8rem */
    font-size: clamp(1rem, 4vw, 1.8rem); 
    color: var(--blanc-casse);
    margin-bottom: 12px;
    line-height: 1.2; /* Pour éviter que les lignes se chevauchent */
}

        .item-description {
            font-size: clamp(0.9rem);
            color: var(--gris-moyen);
            font-weight: 300;
            max-width: 280px;
            margin: 0 auto;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }

    
/* 1. Le cadre extérieur (la fenêtre) */
.carousel-container {
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    position: relative;
    /* CHANGEMENT ICI : Fond transparent */
    background-color: transparent; 
}

/* 2. Le rail qui porte les images */
.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Sécurité : le rail doit aussi être transparent */
    background: transparent;
}

/* 3. Chaque compartiment d'image */
.carousel-slide {
    flex: 0 0 100%; 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;     /* Centre verticalement (Y) */
    justify-content: center;   /* Centre horizontalement (X) */
    /* CHANGEMENT ICI : Fond transparent */
    background: transparent;
}

/* 4. L'IMAGE */
.carousel-slide img, .carousel-track img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;     
    object-position: center; 
    display: block;
    /* On s'assure qu'il n'y a pas de fond sur l'image elle-même */
    background: transparent;
}

/* Boutons Flèches */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: clamp(1.8rem);
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.carousel-btn:hover { background: var(--bleu-clair); }
.prev { left: 0; }
.next { right: 0; }

@media (max-width: 768px) {
    .carousel-container { height: 350px; }
}
/* ==========================================================================
   PAGE QUI SUIS-JE (MISE À JOUR 50/50)
   ========================================================================== */
.about-container {
    max-width: 1400px; /* Élargi pour mieux profiter de l'espace */
    margin: 40px auto;
    padding: 0 20px;
}

.about-content {
    display: flex;
    gap: 40px; 
    align-items: center; /* Centre verticalement le texte par rapport à l'image */
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.about-image {
    flex: 1; /* Prend exactement 50% de la largeur */
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;      /* L'image prend toute la largeur de sa colonne (la moitié de la page) */
    height: auto;     /* Garde les proportions */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover; /* Si l'image est très haute, elle sera proprement cadrée */
}

.about-text {
    flex: 1; /* Prend l'autre 50% de la largeur */
    color: #fff;
    line-height: 1.8;
    padding: 20px;
}

.about-text h2 {
    margin-top: 0;
    color: var(--bleu-clair);
    font-size: clamp(2.2rem);
}

/* Responsive : repasse en plein écran sur mobile */
@media (max-width: 900px) {
    .about-content {
        flex-direction: column;
    }
    
    .about-image, .about-text {
        flex: none;
        width: 100%;
    }
}
.about-image img {
    width: 100%;      
    height: auto;     
    /* On retire l'arrondi */
    border-radius: 0; 
    /* On retire la ligne blanche (bordure) */
    border: none;     
    /* On garde l'ombre pour le relief, ou on l'enlève aussi si tu veux du plat total */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); 
    display: block;
    object-fit: cover;
}

.text-separator {
    width: 100%;                /* Elle occupe toute la largeur de la colonne texte */
    height: 1px;                /* Épaisseur d'un seul pixel pour la finesse */
    margin: 35px 0;             /* Espace équilibré entre les paragraphes */
    border: none;
    
    /* Dégradé radial ou linéaire pour l'effet de disparition sur les côtés */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%,    /* Transparent à gauche */
        var(--bleu-clair) 50%,  /* Blanc semi-transparent au centre */
        rgba(255, 255, 255, 0) 100%   /* Transparent à droite */
    );
}
.about-text pj {
    color: #fff;
    line-height: 1.8;
    
    /* JUSTIFICATION DU TEXTE */
    text-align: justify;
    
    /* OPTIONNEL : Pour éviter les gros trous entre les mots */
    hyphens: auto; 
    
    margin-bottom: 20px;
}
/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */
.contact-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
}

.contact-form {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 0; /* Pour rester sur ton style bords droits */
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--bleu-clair); /* Ta couleur bleue d'accentuation */
    font-size: clamp(0.9rem);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-form input, 
.contact-form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    color: white;
    font-family: inherit;
    outline: none;
    transition: 0.3s;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: var(--bleu-clair);
    background: rgba(255, 255, 255, 0.1);
}

.submit-btn {
    background: transparent;
    border: 1px solid var(--bleu-clair);
    color: var(--bleu-clair);
    padding: 15px;
    cursor: pointer;
    font-size: clamp(1rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.4s;
    margin-top: 10px;
}

.submit-btn:hover {
    background: var(--bleu-clair);
    color: white;
    box-shadow: 0 0 20px rgba(var(--bleu-clair-rgb), 0.4);
}

/* Ajustement mobile */
@media (max-width: 600px) {
    .contact-form {
        padding: 20px;
    }
}
.direct-contact {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.contact-info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 40px;
    text-align: center;
    width: 100%;
    backdrop-filter: blur(10px);
}

.contact-info-box .label {
    display: block;
    color: var(--bleu-clair); /* Ton bleu */
    font-size: clamp(0.8rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.email-link {
    color: #fff;
    font-size: clamp(1.2rem);
    text-decoration: none;
    font-weight: 300;
    transition: 0.3s;
}

.email-link:hover {
    color: rgb(--bleu-clair-rgb);
    letter-spacing: 1px;
}

/* ÉTATS */
.footer-socials {
    margin-bottom: 15px; /* Espace avec le texte en dessous */
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacement entre les icônes */
}

/* On force la couleur pour l'état normal ET l'état visité */
.social-icon, 
.social-icon:visited {
    color: rgba(226, 226, 229, 0.8); /* La couleur de ton paragraphe <p> */
    opacity: 0.7;
    font-size: clamp(1.5rem);
    transition: all 0.3s ease;
    text-decoration: none;
}

/* L'effet au survol reste prioritaire */
.social-icon:hover {
    color: var(--bleu-clair) !important; /* Ton bleu Macair'Light */
    opacity: 1;
    transform: translateY(-3px);
}

/* --- BASE --- */
.expertise-item { 
    text-align: center; padding: 40px 20px;
    display: block; position: relative; overflow: hidden;
    background: transparent; border: none;
    transition: transform 0.5s ease; cursor: pointer;
}
.expertise-item:hover { transform: scale(1.03); }
.expertise-item h3 { color: var(--bleu-ardoise); font-size: clamp(1.5rem); margin-bottom: 15px; transition: 0.4s; position: relative; z-index: 2; }
.expertise-item p { color: var(--gris-moyen); font-size: clamp(0.9rem); font-weight: 300; transition: 0.4s; position: relative; z-index: 2; }

/* --- 1. LUMIÈRE : FLARE STOP-AND-GO --- */
.item-lumiere {
    position: relative;
    overflow: hidden;
}

/* Le flare qui arrive et s'arrête au milieu */
.item-lumiere::before {
    content: "";
    position: absolute;
    top: 0; 
    left: -150%; /* Départ à gauche */
    width: 100%; height: 100%;
    background: linear-gradient(105deg, 
        transparent 20%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 80%);
    pointer-events: none;
    z-index: 1;
    /* Transition d'entrée : s'arrête au milieu */
    transition: left 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.item-lumiere:hover::before {
    left: 0%; /* Milieu */
}

/* Le flare qui finit sa course quand on part */
.item-lumiere::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0%; /* Part du milieu */
    width: 100%; height: 100%;
    background: linear-gradient(105deg, 
        transparent 20%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 80%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    /* Transition de sortie : finit sa route à droite */
    transition: left 0.6s ease-in, opacity 0.6s;
}

/* Quand on survole, on cache le flare de sortie pour préparer le retour */
.item-lumiere:hover::after {
    left: -150%; 
    opacity: 0;
    transition: none; /* Reset instantané sans animation */
}

/* Quand la souris part, le flare de sortie devient visible et s'en va */
.item-lumiere:not(:hover)::after {
    left: 150%;
    opacity: 1;
}

.item-lumiere:hover h3 { 
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 
    color: #fff; 
}

/* --- 2. AQUATIQUE : GOUTTES NETTES & DÉFORMATION --- */
.item-aquatique:hover {
    filter: url(#water-filter); 
    background: rgba(255, 255, 255, 0.02);
}

.item-aquatique::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.4s ease;
    background-image: 
        radial-gradient(circle at 18% 28%, white 1px, transparent 2px),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 10px, rgba(0,0,0,0.3) 15px, transparent 16px),
        radial-gradient(circle at 73% 13%, white 1.5px, transparent 3.5px),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.1) 15px, rgba(0,0,0,0.25) 20px, transparent 21px),
        radial-gradient(circle at 43% 78%, white 1px, transparent 2.5px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,0.1) 8px, rgba(0,0,0,0.2) 12px, transparent 13px);
}
.item-aquatique:hover::before { opacity: 1; }

/* --- 3. EFFETS SPÉCIAUX : FEU & SCINTILLEMENT --- */
.item-speciaux:hover {
    background: linear-gradient(0deg, rgba(255, 69, 0, 0.15) 0%, transparent 100%);
    box-shadow: inset 0 -20px 50px rgba(255, 69, 0, 0.3);
}

.item-speciaux:hover h3 {
    color: #ff4500;
    text-shadow: 0 0 10px #ff4500, 0 0 20px #ff0000;
    animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
    0% { opacity: 0.8; transform: skewX(-1deg) scale(1.05); }
    100% { opacity: 1; transform: skewX(1deg) scale(1); }
}

/* Media Query pour mobiles */
/* 1. État par défaut (Ordinateur) */
.menu-toggle {
    display: none; /* Caché sur PC */
}

/* 2. État Mobile (Tablettes et Téléphones) */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 2000; /* Toujours au-dessus */
    }

    .bar {
        width: 100%;
        height: 3px;
        background-color: var(--blanc-casse, #fff);
        transition: all 0.3s ease;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;

        /* Positionnement hors-écran */
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100%;
        height: 100vh;
        background-color: var(--noir-fond, #000);
        transition: right 0.4s ease-in-out;
        z-index: 1500;
    }

    /* CLASSE ACTIVE (déclenchée par le JS) */
    .nav-links.active {
        right: 0; /* Le menu glisse vers la gauche */
    }

    /* Animation des traits en Croix (X) */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}
@media (max-width: 480px) {
    /* 1. Grille en 2 colonnes */
    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
        padding: 10px;
    }

    /* 2. On définit une hauteur fixe pour le CUBE entier */
    .gallery-item {
        height: 180px; /* Ajuste cette valeur selon si tu veux des carrés ou des rectangles */
    }

    /* 3. L'image doit remplir 100% du cube */
    .image-container {
        height: 100%; 
        width: 100%;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Remplit tout l'espace sans déformer */
    }

    /* 4. Ajustement des textes pour ne pas masquer l'image */
    .item-info {
        padding: 10px;
    }

    .item-info h3 {
        font-size: clamp(0.85rem);
        margin-bottom: 2px;
    }

    .item-category {
        font-size: clamp(0.6rem);
    }

    .item-description, .item-date {
        display: none; 
    }
}
.search-box {
    position: relative;
    max-width: 250px; /* Plus compact pour l'élégance */
    margin: 0 auto 40px;
    transition: max-width 0.4s ease;
}

/* On élargit un peu au focus pour l'effet interactif */
.search-box:focus-within {
    max-width: 320px;
}

.search-box input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    background: transparent; /* On enlève le fond qui posait problème */
    border: none;
    border-bottom: 1px solid #ffffff26;
    color: var(--blanc-casse);
    font-family: inherit;
    font-size: clamp(0.9rem);
    letter-spacing: 1.5px;
    text-transform: uppercase; /* Style un peu plus "galerie d'art" */
    outline: none;
    transition: border-color 0.4s ease;
}

/* 1. Couleur de base de la loupe (éteinte) */
.search-box i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blanc-casse);
    opacity: 0.4;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* L'effet "Laser" au focus */
.search-box input:focus {
    border-bottom: 1px solid var(--bleu-clair);
}

/* 2. Changement de couleur au CLIC (Focus) */
/* S'active au CLIC (focus) OU quand il y a du TEXTE */
.search-box input:focus + i,
.search-box input:not(:placeholder-shown) + i {
    color: var(--bleu-clair);
    opacity: 1;
    filter: drop-shadow(0 0 5px var(--bleu-clair));
    /* On lance l'animation Pulse uniquement quand on tape ou qu'on clique */
    animation: searchPulse 1.5s infinite ease-in-out;
}

/* Placeholder discret */
.search-box input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.3;
}
@keyframes searchPulse {
    0% { filter: drop-shadow(0 0 2px var(--bleu-clair)); }
    50% { filter: drop-shadow(0 0 10px var(--bleu-clair)); }
    100% { filter: drop-shadow(0 0 2px var(--bleu-clair)); }
}

.search-box.has-text i {
    animation: searchPulse 1.5s infinite ease-in-out;
}
.controls-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espace entre la recherche et le bouton */
    margin-bottom: 40px;
}

/* On ajuste la marge de la search-box qui était en "auto" */
.search-box {
    margin: 0 !important; 
    flex: 0 1 250px;
}

.reset-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--blanc-casse);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.reset-btn:hover {
    opacity: 1;
    border-color: #ff4d4d; /* Une touche de rouge discret ou garde var(--bleu-clair) */
    color: #ff4d4d; 
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
    transform: scale(1.1); /* Un léger zoom plutôt qu'une rotation */
}

.reset-btn i {
    font-size: clamp(0.9rem);
}
/* Centrage de la page d'erreur */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Laisse de la place pour le header/footer */
    text-align: center;
    padding: 20px;
}

/* Le 404 qui vibre et brûle */
.error-page h1.logo-central {
    font-size: 8rem; /* Plus imposant */
    margin-bottom: 0.2em;
    
    /* Animation de reflet automatique combinée au grésillement */
    animation: 
        reflectAuto 3s infinite linear,
        lightFlicker 0.2s infinite alternate;
        
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.error-page p {
    color: var(--blanc-casse);
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.8;
    letter-spacing: 1px;
}

/* Animation : Le reflet bleu qui passe tout seul */
@keyframes reflectAuto {
    0% { background-position: 100% center; }
    100% { background-position: -100% center; }
}

/* Animation : Le grésillement (brûlage) */
@keyframes lightFlicker {
    0% {
        transform: translate(1px, 0);
        filter: drop-shadow(0 0 10px var(--bleu-clair)) brightness(1.2);
    }
    50% {
        transform: translate(-1px, 1px);
        filter: drop-shadow(0 0 25px #ff4d4d) brightness(0.8); /* Pointe de rouge feu */
    }
    100% {
        transform: translate(0, -1px);
        filter: drop-shadow(0 0 15px var(--bleu-clair)) brightness(1.1);
    }
}
/* La barre elle-même */
::-webkit-scrollbar {
    width: 8px;
}

/* Le fond de la barre */
::-webkit-scrollbar-track {
    background: #000;
}

/* Le bouton de défilement (le "ascenseur") */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, transparent, var(--bleu-clair), transparent);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--bleu-clair);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bleu-clair);
}
/* --- PAGE MERCI : SÉRÉNITÉ --- */

.thanks-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75vh;
    text-align: center;
    padding: 20px;
    position: relative;
}

/* L'icône d'avion de papier qui s'envole doucement */
.success-icon {
    font-size: 3rem;
    color: var(--bleu-clair);
    margin-bottom: 20px;
    opacity: 0.8;
    animation: planeFloat 3s infinite ease-in-out;
    filter: drop-shadow(0 0 15px var(--bleu-clair));
}

.thanks-page h1.logo-central {
    font-size: clamp(4rem, 10vw, 7rem);
    margin-bottom: 15px;
    /* On utilise ton reflet bleu signature mais de façon plus lente */
    animation: reflectAuto 6s infinite linear;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.2));
}

.thanks-message {
    color: var(--blanc-casse);
    font-size: clamp(1.2rem);
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards 0.5s; /* Apparition douce décalée */
    letter-spacing: 0.5px;
}

/* --- ANIMATIONS SPÉCIFIQUES --- */

/* L'avion qui plane */
@keyframes planeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-15px) rotate(5deg); opacity: 1; }
}

/* Apparition du texte */
@keyframes fadeInUp {
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* Halo de fond apaisant */
.thanks-page::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    z-index: -1;
    animation: pulseGlow 4s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}
/* Ajustement pour téléphones */
@media (max-width: 480px) {
    .logo-central {
        font-size: clamp(1rem, 15vw, 3.0rem) !important; 
        letter-spacing: 1px !important;
        white-space: normal !important; /* Permet le retour à la ligne si nécessaire */
        padding: 0 10px;
    }
    /* Cible uniquement les paragraphes dans le footer */
    footer p {
        font-size: 0.65rem !important; /* Taille réduite pour mobile */
        line-height: 1.4 !important;  /* Espace entre les lignes plus compact */
        margin-bottom: 10px !important;
        padding: 0 15px !important;    /* Évite que le texte touche les bords */
        color: rgba(226, 226, 229, 0.7); /* Optionnel : adoucit la couleur pour la lisibilité */
        letter-spacing: 0.5px !important; /* Réduit l'espacement pour que ça rentre */
    }
    /* Cible la section principale pour réduire son espace du bas */
    main, section, .contact-container, .collections-container {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }
    footer {
        /* On réduit drastiquement le premier chiffre (le haut) */
        padding-top: 5px !important;         
        /* On s'assure qu'il n'y a pas de marge externe en haut */
        margin-top: 0 !important; 
    }
    .sub-logo {
    position: relative;
    z-index: 1;         /* On s'assure qu'il reste en dessous */
    margin-top: -5px;    /* Donne un tout petit peu d'air pour tester */
}
}