/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #DBDBDB;
    font-family: Arial, sans-serif; /* Fallback */
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, .btn, .footer-nav {
    font-family: 'DM Serif Display', serif;
}

/* Header / Hero Section */
.hero {
    background-color: #4D3053;
    min-height: 80vh; /* Ajusté pour écran classique au lieu de 833px fixe */
    height: 100vh;
    border-radius: 0 0 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #FFF;
}

/* Ajoute juste ça à la fin de ton fichier style.css */
html { scroll-behavior: smooth; } /* Pour que la page descende doucement */

.btn-qui-suis-je { margin: 40px auto; width: 250px; } /* Pour l'espace sous ton nom */

.main-wrapper {
    /* Largeur exacte de ton rideau pour créer tes lignes rouges verticales */
    width: 1299px; 
    max-width: 95vw; /* Sécurité pour les petits écrans */
    margin: 0 auto;  /* Centre tout parfaitement */
    padding: 0;      /* On enlève les marges internes pour coller aux bords */
}

/* On gère l'espace entre les sections sans créer de vide énorme */
.bio-section, .work-section, .projects-section {
    margin-top: 20px;
    margin-bottom: 50px;
}

/* Pour ton titre "Je suis" et "Mon travail" */

    h2 {
        font-family: 'DM Serif Display', serif;
        color: #4D3053;
        font-size: 40px; /* On harmonise la taille */
        text-align: left;
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 30px;
    }

.bio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px; /* Espace entre les tags et le texte */
}

.search-status-box {
    position: absolute;
    bottom: 90px; /* Positionné en bas du header prune */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 900px;
    background: #6F5774; /* Gris clair légèrement transparent */
    border-radius: 22px;
    padding: 25px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Ombre profonde */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-status-box p {
    color: #ffffff; /* Ton violet foncé pour la lisibilité */
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.4;
}

.search-status-box strong {
    color: #ffffff;
    text-decoration: underline; /* Pour faire ressortir les dates */
}

.btn-cv-status {
    background: #4D3053;
    color: white;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.btn-cv-status:hover {
    transform: scale(1.05);
}

.bio-tags span {
    display: inline-block;
    padding: 8px 20px;
    border: 1.5px solid #6F5774; /* Couleur prune de tes boutons */
    border-radius: 50px; /* Forme pilule */
    background-color: #DBDBDB;
    color: #333;
    font-size: 16px;
    font-family: Arial, sans-serif; /* Pour rester lisible comme sur ton exemple */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar {
    display: flex;
    gap: 20px;
    margin-bottom: 5rem;
}

/* Boutons Navigation */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5rem; /* Réduit par rapport au 32px pour laptop */
    border-radius: 15px;
    transition: transform 0.2s;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 30px;
}

.btn-outline {
    border: 3px solid #6F5774;
    color: #FFF;
}

.btn-filled {
    background: #6F5774;
    color: #FFF;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.hero-content h1 {
    font-size: clamp(3rem, 8vw, 5rem); /* Taille fluide selon l'écran */
    text-align: center;
    font-weight: 400;
    margin-top: 2rem;
}

.container {
    max-width: 1299px; /* On l'aligne sur la largeur de ton rideau */
    margin: 0 auto;
    padding: 20px 0;   /* On réduit l'espace en haut/bas pour que ce soit moins vide */
}

/* Bio Section */
.bio-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* L'image prend un peu moins de place que le texte */
    gap: 50px; /* L'espace entre l'image et le texte */
    width: 100%; /* Elle s'étale sur tout le wrapper */
    align-items: start;
}

.bio-image-placeholder {
    background: #C4C4C4;
    height: 300px;
    border-radius: 15px;
    border: 1px solid #4D3053;
}

/* =========================================
   bouton de la section je suis
   ========================================= */


.btn-imprimer {
    background: #4D3053;
    color: white;
    padding: 10px 40px;
    border-radius: 20px;
    border: none;
    cursor: pointer;

    margin-right: 20px; /* Espace de 20px entre les boutons */
    display: inline-flex;
    
    /* Typographie demandée */
    font-family: 'DM Serif Display', serif;
    font-size: 1rem;
    text-align: center;
    
    /* Positionnement */
    float: right;
    margin-top: 20px;
    transition: transform 0.2s ease;
}

.btn-imprimer:hover {
    transform: scale(1.05);
}

/* =========================================
   SECTION MON TRAVAIL (LE RIDEAU)
   ========================================= */
   .work-section h2 {
    font-size: 2.5rem;
    color: #4D3053;
    margin-bottom: 2rem;
}

/* LE CONTENEUR (Largeur 1299px via le wrapper) */
.curtain-container {
    width: 100%;
    height: 456px;
    border-radius: 22px;
    border: 3px solid #4D3053;
    background: #DBDBDB;
    position: relative;
    overflow: hidden; /* Garde tout à l'intérieur */
}

/* LES DEUX VOLETS PRUNE */
.curtain-side {
    position: absolute;
    top: 0;
    width: 50.1%; /* Se rejoignent pile au milieu */
    height: 100%;
    background-color: #4D3053;
    transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 5;
}
.curtain-side.left { left: 0; }
.curtain-side.right { right: 0; }

/* LE LOGO (Fixe au centre de la jointure) */
.curtain-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px; /* Ajuste selon ton logo */
    z-index: 10;
    transition: opacity 1;

    transition: opacity 0.3s ease 1.2s; 
}

/* QUAND LE RIDEAU EST OUVERT */
.curtain-container.open .curtain-logo {
    opacity: 0;
    /* PAS DE DÉLAI À L'OUVERTURE : 
       Il doit disparaître tout de suite dès que les volets s'écartent 
    */
    transition: opacity 0.1s ease 0s;
}

/* CONTENU DERRIÈRE (Visible quand .open est ajouté) */
.project-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 1;
}

/* OUVERTURE */
.curtain-container.open .curtain-side.left { transform: translateX(-100%); }
.curtain-container.open .curtain-side.right { transform: translateX(100%); }
.curtain-container.open .curtain-logo { opacity: 0; } /* Cache le logo à l'ouverture */

.category-tag {
    position: absolute;
    top: -22px; /* Ajuste pour que ce soit pile au milieu de la bordure */
    left: 50%;
    transform: translateX(-50%);
    background: #DBDBDB;
    border: 3px solid #4D3053; /* Même bordure que le cadre */
    padding: 8px 45px;
    border-radius: 50px;
    z-index: 20; /* Toujours au-dessus des volets */
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

/* On s'assure que le wrapper laisse de la place en haut pour l'étiquette */
.slider-wrapper {
    margin-top: 40px; 
    position: relative;
    width: 100%;
}

.btn-view-projects {
    position: absolute; /* Il se détache du flux pour se placer sur l'image */
    top: 90%;           /* Centrage vertical */
    left: 50%;          /* Centrage horizontal */
    transform: translate(-50%, -50%); /* Ajustement pour un centrage parfait */
}

.btn-view-projects {
    /* Style de l'arrière-plan violet */
    width: 200px;
    height: 45px;
    background: #6F5774;
    border-radius: 51px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    
    /* Style du texte (Typography) */
    color: #FFF;
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    font-weight: 400;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    
    /* Centrage du texte dans le bouton */
    display: flex;
    justify-content: center;
    align-items: center;

    transition: transform 0.2s ease;
}

.btn-view-projects:hover {
    transform: scale(1.05);
}


.software-marquee {
    /* Élargit la bannière à la taille de l'écran */
    width: 100vw; 
    
    /* La replace pile au centre pour compenser les marges du parent */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;



margin-top: 80px;    /* Espace avec le rideau en haut */
margin-bottom: 80px; /* Espace avec "Mes derniers projets" en bas */

    height: 80px;
    background-color: #4D3053;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 10;
}

.marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* On augmente la vitesse si nécessaire, ici 20s */
    animation: scroll-left 25s linear infinite; 
}

.marquee-content span {
    font-family: "DM Serif Display", serif;
    color: #FFFFFF;
    font-size: 28px;
    text-transform: uppercase;
    padding: 0 40px; /* Plus d'espace entre les mots */
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #6F5774;
    border-radius: 50%;
    flex-shrink: 0; /* Empêche le point de s'écraser */
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* =========================================
   SECTION MES DERNIERS PROJETS (LA GRILLE)
   ========================================= */
/* SECTION PARENTE */
.projects-section {
    max-width: 1299px; /* Garde l'alignement du main-wrapper */
    margin: 0 auto;    /* Centre la section dans la page */
    padding: 0 20px;   /* Sécurité pour le mobile */
}

.projects-section h2 {
font-size: 2.5rem;
color: #4D3053;
margin-bottom: 2rem;

}
/* GRILLE DE PROJETS */
.projects-grid {
    display: grid;
    /* On utilise repeat(3, 1fr) mais on s'assure que ça ne dépasse pas 1299px */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Espace équilibré entre les 3 blocs */
    margin-bottom: 4rem;
}

/* LE BLOC PROJET (Tes nouvelles mesures Figma) */
.project-box {
    width: 346px;      /* Ta largeur exacte */
    height: 300px;     /* Ta hauteur exacte */
    border-radius: 22px;
    box-shadow: 0 4px 4px 0 #6F5774; /* L'ombre prune demandée */
    overflow: hidden;
    background-color: lightgray;
    margin: 0 auto;    /* Centre le bloc si la colonne est plus large */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-box:hover {
    /* Déplace la box de 10 pixels vers le haut */
    transform: translateY(-10px);
    
    /* Optionnel : on peut accentuer un peu l'ombre pour renforcer l'effet de hauteur */
    box-shadow: 0 12px 20px 0 rgba(111, 87, 116, 0.4);
}

/* IMAGE SPÉCIFIQUE KER ARMOR */
.project-box:nth-child(1) {
    background: url('IMAGE/UIUXdesign/KerArmor.png') -104.45px -0.268px / 130.058% 100% no-repeat;
}

/* --- LE DEUXIÈME PROJET : LADY2 --- */
.project-box:nth-child(2) {
    /* Utilisation de tes valeurs exactes sans lightgray */
    background: url('IMAGE/design-graphique/Lady2.png') -0.267px 0.131px / 158.986% 259.267% no-repeat;
}

.project-box:nth-child(3) {
    /* Paramètres Figma exacts sans lightgray */
    background: url('IMAGE/UIUXdesign/tomie.jpeg') -118.188px -123.902px / 158.986% 259.267% no-repeat;
}

/* CTA TEXT EN BAS */
.cta-text {
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    color: #4D3053;
    margin: 4rem 0;
    line-height: 1.2;
}


/* Style global des boîtes pour accueillir les tags (universitaire 2025) */
.project-box {
    position: relative; /* Indispensable pour que les tags se placent par rapport à la boîte */
    width: 346px;
    height: 300px;
    border-radius: 22px;
    box-shadow: 0 4px 4px 0 #6F5774;
    overflow: hidden;
}

/* Style commun aux tags */
.tag {
    position: absolute;
    top: 15px; /* Distance du haut */
    height: 33px;
    background: #6F5774;
    border-radius: 51px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    
    /* Typographie */
    color: #FFF;
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px; /* Ajustement visuel pour la typo */
}

/* Tag Universitaire (Gauche) */
.tag-uni {
    left: 15px;
    width: 113px;
}

/* Tag 2025 (Droite) */
.tag-year {
    right: 15px;
    width: 63px;
}




/* Footer */
.footer {
    background-color: #4D3053;
    color: white;
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    border-radius: 22px 22px 0 0;
}

.footer h3 {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    font-weight: 400 !important;
    margin-top: 0;
    margin-bottom: 5px;

}

.btn-footer-contact {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    padding: 2px;
    margin-bottom: 1rem;
    width: 240px;
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

}
.dot {
    width: 11px;
    height: 11px;
    border-radius: 51px;
    background: #6F5774;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: inline-block;
    margin: 0 10px; /* Pour l'espace autour du point */
}
.footer-nav {
    margin-bottom: 2rem;
}

.footer-nav a {
    color: white;
    text-decoration: none;
    font-family: 'DM Serif Display', serif;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 1.4rem;
    margin: 0 2px;
}

.copyright {
    font-family: "Inria serif" ;
    font-size: 1rem;
}