@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/* Variables du sites */
:root {
    /* Font-family */
    --font-corp: "Montserrat", sans-serif;
    --font-texte: "Inter", sans-serif;

    /* Palette site  */
    --blanc: #edf5fdff;
    --bleu: #0f4c81ff;
    --noir: #062037ff;
    --accent-orange1 : #ff8133ff;
    --accent-orange2 : #e05600ff;
    --accent-bleu : #6db2eeff;

    /* Couleur principale de chaque sous-corp*/
    --mahicorp: #4d4d4d;
    --dev: #0f4c81;
    --design: #be3455;
    --mahiphoto: #efe58c;
    --mamo: #8bbc8c;

    /* Shadows+borders répétitives */
    --shadow-fat: 8px 8px 0px var(--noir);
    --shadow-skinny: 4px 4px 0px var(--noir);
    --border-skinny: 4px solid var(--noir);
    --border-fat: 6px solid var(--noir);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #ffffff;
    opacity: 0.6;
    background-image:  linear-gradient(#edf5fd 3px, transparent 3px), linear-gradient(to right, #edf5fd 3px, #ffffff 3px);
    background-size: 60px 60px;
}



main {
    padding: 15px;
}

.portfolio-section {
    padding: 20px 10px;
}

.filtre-btn {
    border: var(--border-skinny);
    background-color: var(--blanc);
    color: var(--noir);
    padding: 10px 15px;
    margin: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-skinny);
    cursor: pointer;

}

.filtre-btn:hover,
.filtre-btn.active {
    background-color: var(--accent-orange2);
    color: var(--blanc);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--bleu);
}

.portfolio-gallerie {
    margin-top: 15px;
}

.card {
    border-radius: 0 !important;
    padding: 20px 10px;
    border: none;
    background-color: transparent;
}

.container-card {
    border: var(--border-skinny);
    box-shadow: var(--shadow-skinny);
    padding: 0;
    background-color: var(--blanc);
}

.card-header {
    padding: 0 !important;
    border-radius: 0;
}

.card-body {
    padding: 20px 10px !important;
}
.portfolio-tag {
    padding: 5px 10px;
    background-color: var(--accent-bleu);
    border: 2px solid var(--bleu);
    font-size: 9pt;
    text-transform: uppercase;
    font-weight: 600;
}

.portfolio-titre {
    padding: 15px 0 0 0;
    margin: 0;
    text-align: center;

}

.card-footer {
    background-color: var(--blanc);
    border: none;
    border-radius: 0;
    padding: 0 !important;
}

.card-btn {
    padding: 8px 15px;
    background-color: var(--accent-bleu);
    border: 2px solid var(--bleu);
    box-shadow: var(--shadow-skinny);
    font-size: 14pt;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 10px 10px 0;
    color: var(--noir);
    text-decoration: none;
    transition: all 0.2s ease;
}

.card-btn:hover {
    background-color: var(--accent-orange2);
    color: var(--blanc);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--bleu);
}

.modal {
    background-color: #edf5fd70;
}

.modal-content {
    color: var(--noir);
}

.modal-dialog, .modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border: var(--border-fat);
    border-bottom: none;
    border-radius: 0;
}

.modal-body {
    border: var(--border-fat);
    border-top: none;
    border-bottom: none;
    padding: 0;
}

#carouselIndicators {
    padding: 0;
}

.modal-image {
    margin-bottom: 15px;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--bleu);
    height: 10px;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='darkblue' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='darkblue' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.modal-categories {
    margin-bottom: 15px;
    padding: 0 20px;
}

.modal-body p {
    padding: 0 20px;
}

.tech-tags {
    gap: 10px;
    margin-bottom: 15px;
    padding: 5px 20px;
}
.tech-tag {
    padding: 8px;
    font-size: 9pt;
    font-weight: 700;
    border: var(--border-skinny);
    box-shadow: var(--shadow-skinny);
    background-color: var(--accent-orange2);
    color: var(--blanc);
}

.modal-footer {
    border: var(--border-fat);
    border-top: none;
    border-radius: 0;

}

.modal-btn {
    padding: 8px 15px;
    background-color: var(--accent-bleu);
    border: 2px solid var(--bleu);
    box-shadow: var(--shadow-skinny);
    font-size: 14pt;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 10px 10px 0;
    color: var(--noir);
    text-decoration: none;
    transition: all 0.2s ease;
}

.modal-btn:hover {
    background-color: var(--accent-orange2);
    color: var(--blanc);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--bleu);
}