:root{
    --light: #FFECD1;
    --accent: #B23A48;
    --text: #F5F5F5;
    --dark: #0D0D0D;
    --radius: 28px;
}
@font-face {
    font-family: "MaPoliceLogo";
    src: url("assets/fonts/GloraMedium-8Mgq2.ttf") format("truetype");
}
@font-face {
    font-family: "MaPolice2";
    src: url("assets/fonts/PlayfairDisplay-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "MaPoliceRegular";
    src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
}

/* GLOBAL */
body{
    background: radial-gradient(circle at top left, rgba(255,236,209,0.06) 0%, transparent 60%),
                radial-gradient(circle at bottom right, rgba(178,58,72,0.12) 0%, transparent 70%),
                linear-gradient(140deg, #0A0A0A, #1A0E10, #100003);
    background-attachment: fixed;
    color: var(--text);
    font-family: "MaPoliceRegular", sans-serif;
}

body::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
    opacity: 0.25;
    mix-blend-mode: soft-light;
}

section {
    scroll-margin-top: 125px; 
}

/* NAVBAR */
.custom-nav{
    background-color: rgba(255,236,209,0.08);
    border: 1px solid rgba(255,236,209,0.15);
    border-radius: var(--radius);
    margin: 20px auto;
    width: 90%;
    padding: 10px 25px;
    backdrop-filter: blur(8px);
}
.navbar-brand{
    color: var(--light) !important;
    font-family: 'MaPolice2';
    font-size: 30px;
}
li.nav-item {margin-left: 50px;}
.nav-link{color: var(--text); font-weight: 500;}
.nav-link:hover{color: var(--accent);}
.contact-btn{
    background-color: var(--accent);
    color: white !important;
    padding: 6px 20px;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    margin-left: 250px;
}
.contact-btn:hover{
    background-color: var(--light);
    color: var(--accent) !important;
}
.contact-btn {margin-left: 0 !important;}

/* Icône burger blanche */
.navbar-toggler {
    border-color: white !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* HERO */
.hero-img {
    position: relative;
    width: 300px;
    margin-left: 40px;
}

.hero-img::before {
    content: "";
    position: absolute;
    top: 84px;
    left: 24px;
    width: 100%;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 236, 209, 0.15);
    border-radius: 20px;
    z-index: 1;
}

.hero-img img {
    position: relative;
    bottom: 22px;
    left: 25px;
    z-index: 2;
    width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

.hero {
    height: 415px;
    margin-top: 175px;
}

#hero p {
    font-family: 'MaPoliceRegular';
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 75px;
}

#hero h2 {
    font-family: 'MaPolice2';
    font-size: 48px;
}

.hero-right-side {
    position: relative;
    bottom: 50px;
}

.btn-custom {
    background-color: var(--accent);
    color: white;
    border-radius: var(--radius);
    padding: 10px 25px;
    font-weight: 600;
}

.btn-custom-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
    background: transparent;
    padding: 10px 25px;
    border-radius: var(--radius);
    font-weight: 600;
}

.btn-custom-outline:hover {
    background-color: var(--accent);
    color: white;
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.social-icons a, .project-card a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 236, 209, 0.08);
    border: 1px solid rgba(255, 236, 209, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a i, .project-card a i {
    font-size: 18px;
    color: #FFECD1;
    transition: 0.3s;
}

.social-icons a:hover, .project-card a:hover {
    background: rgba(255, 236, 209, 0.25);
    border-color: #FFECD1;
    transform: translateY(-3px);
}

.social-icons a:hover i, .project-card a:hover i{
    color: #ffffff;
}

/* ===================== RESPONSIVE HERO ===================== */
@media (max-width: 990px) {
    .hero .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .hero-right-side {
        position: relative;
        bottom: 0;
        text-align: center;
        margin-top: 20px;
    }

    #hero p {
        font-size: 24px;
        margin-top: 30px;
    }

    #hero h2 {
        font-size: 32px;
    }

    .btn-custom,
    .btn-custom-outline {
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .social-icons {
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    #hero p {
        font-size: 20px;
    }

    #hero h2 {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    #hero p {
        font-size: 18px;
    }

    #hero h2 {
        font-size: 22px;
    }

    .btn-custom,
    .btn-custom-outline {
        font-size: 14px;
        padding: 10px 0;
    }
}


/* SCROLL TEXT */
.scrolling-text-wrapper{width:100%;height:70px;overflow:hidden;background:#000;padding:15px 0;border-top:1px solid rgba(255,236,209,0.2);border-bottom:1px solid rgba(255,236,209,0.2);}
.scrolling-text{display:inline-block;white-space:nowrap;animation:scroll-horizontal 35s linear infinite;font-size:32px;color:#FFECD1;font-family:'MaPolice2';letter-spacing:3px;}
@keyframes scroll-horizontal{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}

/* ABOUT */
.about-wrapper{display:flex;align-items:center;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:40px 20px;}
.about-img img{width:350px;height:auto;border-radius:20px;object-fit:cover;border:2px solid rgba(255,236,209,0.2);box-shadow:0 0 20px rgba(255,236,209,0.1);}
.about-content{max-width:600px;color:var(--light);}
#about .skills{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-top:20px;}
.skill-badge{background-color: rgba(255,236,209,0.12);border:1px solid rgba(255,236,209,0.2);padding:8px 20px;border-radius:var(--radius,20px);color:var(--light, #fff);font-weight:500;font-size:14px;}

/* PROJECTS */
#projects .project-card{background: rgba(255,236,209,0.08);border:1px solid rgba(255,236,209,0.15);border-radius:var(--radius);padding:20px;transition:0.3s; height: 450px;}
#projects .project-card:hover{transform: translateY(-10px);}
.project-img img{width:100%;height:200px;border-radius:var(--radius);object-fit:cover;}
.arrow-icon a{font-size:24px;color:var(--light);margin-top:10px;}

/* MODAL */
.modal-body p, .modal-body ul {
    font-family: 'MaPoliceRegular';
    font-size: 16px;
    line-height: 1.6;
}

.modal-body ul li {
    margin-bottom: 8px;
}

/* CONTACT */
.contact-card{background: rgba(255,236,209,0.08);border:1px solid rgba(255,236,209,0.15);border-radius:var(--radius);}
.contact-card input,.contact-card textarea{background: transparent;border:1px solid rgba(255,236,209,0.2);color:var(--light);border-radius:var(--radius);margin-bottom:15px;}
.contact-card button{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:10px 20px;font-weight:600;}
.contact-info .info-item{display:flex;align-items:center;gap:10px;margin-top:10px;}
.info-icon{font-size:20px;color:var(--accent);}
.contact-card input::placeholder,
.contact-card textarea::placeholder {
    color: rgba(255, 236, 209, 0.7); /* couleur beige clair légèrement transparent */
    opacity: 1; /* pour s'assurer que la couleur s'applique correctement */
}

/* FOOTER */
footer{margin-top:60px;padding:20px;text-align:center;color:var(--light);border-top:1px solid rgba(255,236,209,0.15);}

/* RESPONSIVE */
@media(max-width:1200px){
    .hero{height:auto;margin-top:150px;}
}
@media(max-width:992px){
    .custom-nav{width:95%;padding:10px 15px;}
    li.nav-item{margin-left:0;}
    .navbar-brand{font-size:26px;}
    
}
@media(max-width:768px){
    .hero-img{margin-left:0;width:220px;}
    .hero-img::before{top:60px;width:100%;height:250px;left:12px;}
    .hero-img img{left:15px;bottom:40px;width:200px;}
    #hero p{font-size:24px;margin-top:40px;}
    #hero h2{font-size:32px;}
    .hero-right-side{bottom:20px;text-align:center;}
    .social-icons{justify-content:center;gap:15px;margin-top:20px;}
    .about-wrapper{flex-direction:column-reverse;gap:20px;padding:20px 10px;}
    .about-img img{width:250px;}
    .about-content h2{font-size:28px;}
    .about-content p{font-size:16px;}
    #about .skills{justify-content:center;}
    .skill-badge{padding:6px 15px;font-size:12px;}
    #contact .row{flex-direction:column;}
    .contact-card,.contact-info{width:100%;padding:20px;margin-bottom:20px;}
    .contact-card input,.contact-card textarea,.contact-card button{font-size:14px;}
    .info-item{font-size:14px;}
    .social-icons{justify-content:center;}
}
@media(max-width:600px){
    footer{font-size:14px;padding:15px;}
    .scrolling-text-wrapper{height:50px;padding:10px 0;}
    .scrolling-text{font-size:20px;}
}


/*PAGE PROJET*/