/* ================================================================================ */
/* [ IMPORTS ] */
/* ================================================================================ */
@font-face {
    font-family: "minitel";
    src: url("font/minitel.ttf") format("truetype");
}

@font-face {
    font-family: "PressStart2P";
    src: url("font/PressStart2P.ttf") format("truetype");
}

/* ================================================================================ */
/* [ COMMON VARIABLES ] */
/* ================================================================================ */
:root {
    /* ----------[ colors ]---------- */
    --color-light: #fff;
    --color-light-medium: #bfbfbf;
    --color-medium: #282828;
    --color-dark-medium: #121212;
    --color-dark: #000;

    /* ----------[ font size ]---------- */
    --small-responsive-font: clamp(0.3rem, 2vw, 0.7rem);
    --normal-responsive-font: clamp(0.8rem, 2vw, 1rem);
    --large-responsive-font: clamp(1.2rem, 3vw, 2.5rem);
}

/* ================================================================================ */
/* [ COMMON ELEMENTS (same on all pages) ] */
/* ================================================================================ */

/* ----------[ dark mode ]---------- */
.dark_mode {
    background-color: var(--color-dark-medium);
    color: var(--color-light-medium);
}

.hidden {
    display: none;
}

.dark_mode_img {
    /* filter: invert(); */
}

.sun {
    content: url("img/ico-sun-dark_mode.png");
}

.ico_mail_white {
    content: url("img/ico-mail-dark_mode-64.png");
}

.ico_phone_white {
    content: url("img/ico-phone-dark_mode-64.png");
}

#dark_mode_switch {
    /* width: 48px; */
    /* height: auto; */
    max-width: 50%;
    /* filter: invert(); */
    cursor: pointer;
}

.dark_mode_input {
    background-color: var(--color-medium);
    color: var(--color-light-medium);
}

/* ----------[ flex ]---------- */
.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex_between {
    display: flex;
    justify-content: space-between;
}

.flex_evenly {
    display: flex;
    justify-content: space-evenly;
}

.text_left {
    text-align: start;
}

/* ----------[ minitel style button ]---------- */
.button_minitel {
    font-family: "minitel";
    /* width: 250px; */
    margin: 2rem 0;
    /* padding: 10px; */
    padding: 0.7rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button_minitel:hover {
    color: var(--color-light);
}

.button_sand {
    background-color: #bfa97a;
    box-shadow: 0 10px darkgoldenrod;
}

.button_sand:active {
    transform: translateY(6px);
    box-shadow: 0 4px darkgoldenrod;
}

.button_green {
    background-color: #63884b;
    box-shadow: 0 10px darkgreen;
}

.button_green:active {
    transform: translateY(6px);
    box-shadow: 0 4px darkgreen;
}

input,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ----------[ applies to every element ]---------- */
* {
    /* border: 1px solid red; */
    /* transition: 0.2s; */
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ----------[ body ]---------- */
body {
    font-family: "minitel";
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
}

/* ----------[ links and titles ]---------- */
a,
a:visited {
    text-decoration: none;
    color: inherit;
}

h1 {
    font-size: var(--large-responsive-font);
}

h2 {
    font-size: var(--normal-responsive-font);
}

/* ----------[ lists ]---------- */
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* ----------[ header (with menu) ]---------- */
.header_content {
    position: sticky;
    top: 0;
    height: 20vw;
    max-height: 120px;
    /* max-height: 96px; */
    /* overflow: hidden; */

    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */

    color: var(--color-light);

    /* background-color: var(--color-light); */
    background-color: var(--color-dark);
    /* border-bottom: 3px solid var(--color-dark); */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

#mask {
    position: sticky;
    top: 0;
    width: 100%;
    height: 20vw;
    max-height: 120px;
    background-color: var(--color-dark);
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); */
    display: none;
    z-index: 3;
}

.header_content * {
    /* border: 1px solid red; */
}

/* ----------[ header dropdown menu ]---------- */
#minitel_small:hover {
    /* transform: scale(1.2); */
    /* transform: translate(0, 10px); */
    /* transform: scale(6) translate(20px, 25px); */
    /* transform-origin: top; */
}

#minitel_logo {
    left: 0;
    /* position: relative; */
    /* display: inline-block; */
    /* background-color: #fff; */
}

#dark_mode_logo {
    right: 0;
}

#breadcrumb {
    flex-grow: 2;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: flex-end; */
    /* background-color: green; */
    /* width: auto; */
    /* max-height: 96px; */
    /* overflow: auto; */
    /* position: relative; */
    /* z-index: 2; */
    text-decoration: none;
    color: var(--color-light);
}

.nav_links {
    padding: 1rem;
    margin: 0 2rem;
    /* font-size: 0.85rem; */
}

.nav_links:hover,
.this_page {
    background-color: var(--color-light);
    color: var(--color-dark);
}

#nav_container {
    /* position: relative; */
    /* flex-grow: 2; */
    /* overflow: hidden; */
}

#navnav {
    position: relative;
    flex-grow: 2;
    max-height: 120px;
    /* overflow: hidden; */
    /* transform-origin: 0% 0%; */
    /* transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); */
}

#header_nav {
    /* transform-origin: 0% 0%; */
    /* transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); */

    /* z-index: 1; */
}

.slide_right {
    /* position: absolute; */
    transform: translate(150%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.slide_down {
    /* transform: translate(0, 200%); */

    /* transform: none; */
    /* transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); */
}

.pointer:hover {
    cursor: pointer;
}

#mobile_menu_div {
    /* z-index: 2; */
}

#show_nav_menu {
    /* display: none; */
}

.nav_vertical {
    transition: transform 1s;
    width: 280px;
    /* display: none; */
    position: absolute;
    bottom: 0;
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-align: left;
    /* z-index: 1; */
}

/* ----------[ main ]---------- */
main {
    /* width: 100%; */
    /* height: 80%; */

    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */

    /* overflow: scroll; */

    /* margin: 2rem; */

    /* background-color: lightgray;
    border-color: var(--primary-color);
    border-style: solid;
    border-width: 1rem; */
}

/* ----------[ footer ]---------- */
footer {
    /* display: flex; */
    /* justify-content: center; */
    /* height: 50px; */
    /* flex-shrink: 0; */
    /* box-sizing: border-box; */
    /* font-size: clamp(0.5rem, 2vw, 1rem); */
    font-size: var(--small-responsive-font);
    /* position: sticky; */
    /* top: 100%; */
    /* bottom: 0; */
    color: var(--color-light);
    background-color: var(--color-dark);
    /* border-top: 3px solid var(--secondary-color); */
    /* border-top: 3px solid #333; */
    box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.5);
    /* box-shadow: 0 -1px 3px var(--secondary-color); */
}

footer span {
    font-family: "PressStart2P";
}

.transparent_footer {
    /* color: var(--color-light); */
    background-color: transparent;
    box-shadow: none;
}

/* ----------[ black and white zones ]---------- */
.zone_white,
.zone_white a,
.zone_white a:visited {
    color: var(--color-dark);
}

/* .zone_white:hover {
    background-color: var(--color-dark);
    color: var(--color-light);
} */

.zone_black,
.zone_black a,
.zone_black a:visited {
    /* background-color: var(--color-light); */
    color: var(--color-light);
}

/* .zone_black:hover {
    background-color: var(--color-ligth);
    color: var(--color-dark);
} */

/* ----------[ minitel ]---------- */
#minitel {
    position: relative;
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* height: auto; */
}

#minitel_img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

#minitel_img_small {
    max-width: 100%;
}
#minitel_img_small:hover {
    transform: scale(1.2);
}

#minitel_animation {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* ----------[ no script ]---------- */
#no_js {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(0.1rem);
    -webkit-backdrop-filter: blur(0.1rem);
}

#no_js h1 {
    font-size: 1.5rem;
    margin: 1rem;
}

#no_js h1:first-child {
    font-size: 4rem;
}

/* ================================================================================ */
/* [ PAGES WITH BLACK AND WHITE PIXEL BACKGROUND ] */
/* ================================================================================ */

.with_background {
    /* background-image: url("img/3615jam-v2_2-website_bg-4k-black_white.png"); */
    background-image: url("img/3615jam-v2_2-website_bg-2k-black_white.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    /* image de fond alternative sans fichier image */
    /* background-image: -webkit-linear-gradient(135deg, #000 50%, #fff 50%); */
    image-rendering: pixelated;
}

/* ================================================================================ */
/* [ DIFFERENT ELEMENTS BY PAGE ] */
/* ================================================================================ */

/* ----------[ page - index ]---------- */
#main_content_index {
}

#main_content_index h1 {
    margin: 0 3rem;
}

.zoom:hover {
    transform: scale(1.5);
    /* transition: 200ms; */
}

.transition {
    transition: 200ms;
}

/* ----------[ page - 403 ]---------- */

/* ----------[ page - 404 ]---------- */

/* ----------[ page - soon ]---------- */

/* ----------[ page - apple ]---------- */

/* ----------[ page - contact ]---------- */
#main_content_contact {
    /* width: 90%; */
}

form {
    width: 90%;
    max-width: 1000px;
}

fieldset {
    margin: 4rem 0;
    /* padding: 2rem; */
}

.zone_form {
    margin: 2rem 0;
}

.form_zone_text {
    width: 90%;
}

legend > img {
    width: 60%;
    /* height: 70%; */
    /* max-width: 75%; */

    /* position: relative; */
    /* max-width: 75%; */
    /* max-height: 75%; */
    /* height: auto; */
}

/* input[type="email"],
textarea {
    background-color: var(--color-medium);
    color: var(--color-light-medium);
} */

/* ----------[ page - template ]---------- */
#header_content {
    /* display: flex; */
    /* justify-content: space-between; */
    /* width: 100%; */

    /* position: sticky; */
    /* bottom: 50%; */

    /* max-height: 96px; */

    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: flex-end; */
    /* justify-content: space-between; */
    /* background-color: var(--secondary-color); */
    /* border-bottom: 3px solid var(--primary-color); */
}
#header_left {
    background-color: pink;
}

#minitel_small > * {
    /* max-width: 20%; */
    /* max-width: 96px; */
    max-height: 100%;
    max-width: 100%;

    /* height: auto; */
    /* object-fit: contain; */
}
.square {
    /* border: 3px solid green; */
    position: absolute;
    top: 0;
    width: 20vw;
    height: 20vw;
    max-width: 120px;
    max-height: 120px;
    z-index: 5;
}

#header_center {
    display: flex;
    align-items: center;

    background-color: yellow;
    border: 1px solid green;
}

#header_right {
    background-color: pink;
}

#main_content_template {
    display: flex;

    /* overflow: scroll; */
    margin: 2rem;
    padding: 1rem;
    /* width: 80%; */
    /* height: 80%; */
    /* background-color: lightgray; */
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-style: solid;
    border-width: 1rem;
    /* box-shadow: 0px 3px 3px rgba(255, 255, 255, 0.5), 0px -3px 3px rgba(255, 255, 255, 0.5); */
    /* box-shadow: -5px 5px #fff, 5px -5px #fff; */
}

#template_central_zone {
    margin: 1rem;
}

#big_text {
    font-size: var(--normal-responsive-font);
    /* display: none; */
}

#small_text {
    font-size: var(--small-responsive-font);
}

#footer_test_1 {
    /* color: var(--light-mode-dark);
    background-color: var(--dark-mode-light); */
}

/* ----------[ page - z_test_2 (light dark mode) ]---------- */
#ligth_mode_test {
    background-color: #fff;
    color: #000;
}

#dark_mode_test {
    background-color: #121212;
    color: #bfbfbf;
}

#dark_mode_test h2 {
    color: #fff;
}

.zones {
    margin: 3rem;
    padding: 2rem;
    border: 3px dashed green;
}

.boxes {
    width: 30%;
    height: 10rem;
    border-radius: 1rem;
    background-color: #282828;
    color: #fff;
    /* box-shadow: 0px 3px 3px #000; */
}

/* ================================================================================ */
/* [ RESPONSIVE ] */
/* ================================================================================ */

@media screen and (max-width: 1079px) {
    .nav_links {
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 1023px) {
    #mask {
        display: inherit;
    }

    nav {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        flex-grow: 1;
        /* overflow: visible; */
        position: relative;
    }

    .header_content {
        box-shadow: none;
    }

    #header_nav {
        /* display: none; */
        background-color: var(--color-dark);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        /* border: 1px solid red; */
        border-top: 2px solid var(--color-light-medium);

        flex-direction: column;

        width: 100%;
        /* height: 100%; */
        /* position: relative; */
        position: absolute;
        top: 100%;
        /* left: 0; */

        /* transform-origin: 0% 0%; */
        transform: translate(0, -100%);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);

        /* z-index: 6; */

        /* transform: translate(200%, 0); */
    }

    .nav_links {
        /* display: none; */
        margin: 0.5rem;
    }

    /* .this_page {
        display: inherit;
    }

    .this_page::after {
        content: " V";
    } */

    #show_nav_menu {
        display: block;
        width: 100px;
        padding: 5px;
        position: relative;
        z-index: 4;
        text-align: center;
        /* margin-bottom: 1rem; */
        /* position: absolute; */
        /* top: 0; */
        /* left: 50%; */
    }

    .slide_down {
        /* transform: translate(0, 200%) !important; */
        transform: none !important;
    }
}

@media screen and (max-width: 768px) {
    body {
        background-size: cover;
        font-size: var(--normal-responsive-font);
    }
    main,
    #main_content_index {
        flex-direction: column;
    }

    #main_content_index {
    }
}