/* ============================================================
   style.css — Styles personnalisés du portfolio Max Gourdet
   L'intégralité du design repose sur Bootstrap 5.
   Ce fichier contient uniquement les ajustements mineurs.
   ============================================================ */

/* ----- Scroll fluide entre les sections ----- */
html {
    scroll-behavior: smooth;
}

/* ----- Offset scroll pour compenser la navbar fixe ----- */
#a-propos, #expertise, #portfolio, #contact {
    scroll-margin-top: 30px;
}

/* ----- Empêcher le scroll horizontal ----- */
html, body {
    overflow-x: hidden;
}

/* ----- Animation items navbar (soulignement du centre vers les côtés) ----- */
.navbar-nav .nav-item .nav-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-origin: content-box;
    background-clip: content-box;
    transition: background-size 0.5s ease, color 0.3s ease;
}
.navbar-nav .nav-item .nav-link:hover {
    background-size: 100% 2px;
}

/* ----- Boutons (animation au survol) ----- */
.btn {
    transition: transform 0.1s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover {
    transform: scale(1.02);
}

/* ----- Typographie Courier pour le footer (identique Waterbottle / Ermitage) ----- */
.footer-courier {
    font-family: Courier, 'Courier New', monospace;
}

/* ----- Bouton "Mon expertise web" centré en mobile ----- */
@media (max-width: 767.98px) {
    .btn-expertise {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    /* ----- Items du burger menu centrés ----- */
    .navbar-collapse .navbar-nav {
        text-align: center;
    }
}

/* ----- Animations d'apparition au scroll (Intersection Observer) ----- */
.fade-in-bottom {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}