* {
    /* border: 1px solid red; */
    /* font-size: 3.4vw; */
}

body {
    /* ===== background sombre ===== */
    background-color: #37474f !important;
    /* ===== background clair ===== */
    /* background-color: #eee !important; */
}

/* ========== LINKS ========== */
a:link {
    transition: 0.2s;
    text-decoration: none;
    color: #000;
}

a:visited {
    text-decoration: none;
    color: #000;
}

a:focus {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: none;
    /* color: #000 !important; */
    transition: 0.2s;
}

a:active {
    text-decoration: none;
    color: #000;
}
/* ========== END / LINKS ========== */

span {
    margin-right: 1rem;
}

.icon {
    width: 20vw;
    max-width: 120px;
    height: auto;
}

.side {
    max-width: 440px !important;
    margin: 1rem !important;
}

.zone_green {
    /* min-width: 440px; */
    color: #fff;
    background-color: rgb(0, 158, 147);
    border-radius: 15px;
    /* margin: 1rem !important; */
    padding: 1rem !important;
}

.zone_white {
    color: #000;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    transition: 0.2s;
}

.zone_white:hover {
    /* ========== V1 - SMALL SHADOW ========== */
    /* transform: translateY(-3px) translateZ(0); */
    /* box-shadow: 0 24px 36px rgba(0, 0, 0, 0.5); */
    /* ========== V2 - BIG SHADOW ========== */
    transform: translateX(5px) translateY(-5px) translateZ(0);
    box-shadow: -10px 10px rgb(0, 0, 0);
    transition: 0.2s;
    color: black;
}

h1 {
    text-align: center;
    margin-top: 1rem !important;
}

h2 {
    margin-top: 0.5rem !important;
    text-align: center;
    font-size: 1.5rem !important;
}

ul {
    margin: 0px !important;
    padding: 0px !important;
}

li {
    margin-bottom: 0.5rem;
    list-style-type: none;
}

li:last-of-type {
    margin-bottom: 0px;
}

.project_btn {
    background-color: #fff !important;
}
.project_btn:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* ========== ACCORDION ========== */
.accordion-button {
    transition: 0.2s;
}

.accordion-button:hover {
    background-color: #ddd;
    transition: 0.2s;
}

.accordion-body {
    background-color: #ddd;
}

/* ========== PHONE BUTTON ========== */
#phone_button {
    color: #000;
}

#phone_button:hover {
    color: #000 !important;
    background-color: #fff;
}

/* ========== BUTTON CLICK EFFECT ========== */
.zone_click:active {
    transform: translateX(-2.5px) translateY(2.5px) translateZ(0);
    box-shadow: 0 0 rgb(0, 0, 0);
    transition: 0.2s;
}

/* ========== LINK HIGHLIGHT EFFECT ========== */
.link_effect {
    color: rgb(0, 158, 147) !important;
    transition: all 0.2s ease-in-out;
}

.link_effect:hover {
    color: #fff !important;
    background-color: rgb(0, 158, 147);
}

/* ========== MEDIA QUERIES ========== */
@media (max-width: 415px) {
    * {
        font-size: 3.4vw;
    }
}

@media (min-width: 416px) and (max-width: 520px) {
    * {
        font-size: 3vw;
    }
}

@media (min-width: 521px) and (max-width: 650px) {
    * {
        font-size: 2.5vw;
    }
}

@media (min-width: 651px) and (max-width: 768px) {
    * {
        font-size: 2vw;
    }
}

@media (min-width: 767px) and (max-width: 934px) {
    * {
        font-size: 1.65vw;
    }
}