html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
    display: grid;
    scroll-behavior: smooth;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    src: url("../assets/Roboto-Black.ttf") format('ttf');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto-Thin';
    font-style: normal;
    font-display: swap;
    src: url("../assets/Roboto-Thin.ttf") format('ttf');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../assets/Outfit-Bold.ttf") format('ttf');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
  

::selection
{
    background-color: #E9A89B;
    color: white;
}


/* width */
::-webkit-scrollbar {
    width: 0.7vw;
    background-color: white ;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: 10px;
    transition: 0.3s; 
  }

.loading_container
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    height: 100vh;
    width: 100vw;
    z-index: 999;
    transition: 1s;
}

.loading
{
    background-color: white;
    display: flex;
}

.diaporama .dark_overlay
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.15;
}

.content
{
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0vh;
}

table { 
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
    font-family: sans-serif;
    font-size: 1.8vh;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto; 
  }
  
  caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
  }
  
  thead {
    background-color: #e6cbc5;
  }

  tfoot th
  {
    background-color: lightgrey;
  }
  
  th,
  td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 10px;
    text-align: center !important;
  }
  
  td:last-of-type {
    text-align: center;
  }
  
  tbody > tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
  }
  
  tfoot th {
    text-align: right;
  }

  tfoot .tr_section
  {
    background-color: darkgrey;
  }
  

.footer
{
    position: relative;
    top: 0;
    margin-top: 5vh;
    height: auto;
    width: 100vw;
    background-color: #292929;
    color: #a1a1a1;
    font-family: "Roboto";
    font-size: 2vh;
    text-align: justify; 
    padding-top: 2vh;
    padding-bottom: 3vh;
}

.footer .footer_container
{
    position: relative;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
    line-height: 2vh;
}

.footer_container h5
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 0.3vh;
}

.footer_container a
{
    transition: 0.25s;
    color: #a1a1a1 !important;
}

.footer_container a:hover
{
    color: white !important;
}

.footer_container .social_container
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vh;
    margin-bottom: 1vh;
}

.social_container .social_icons
{
    position: flex;
    transition: 0.25s;
    fill: #a1a1a1;
}

.social_container .social_icons:hover
{
    fill: white;
}

@media screen and (orientation:landscape)
{

    #background
    {
        position: fixed;
        width: 100vw;
        display: block;
        aspect-ratio: 1.5;
        /*animation: carrousel 42s ease infinite 0s;*/
        background-image: url("../img/jenovie.webp");
        background-size: contain;
    }

    .separator_inv
    {
        width: 80vw !important;
    }

    .menu
    {
        position: fixed;
        height: 7vh;
        width: 100vw;
        left: 0px;
        right: 0px;
        transition: 0.2s; 
        z-index: 99;
    }

    .menu .button
    {
        position: absolute;
        width: 2.25vw; 
        height: 2.25vw;
        right: 1.5vw;
        top: 1.25vh;
        cursor: pointer;
        opacity: 0.7;
        transition: 0.3s; 
        user-select: none;
    }

    .menu .links_container
    {
        position: absolute;
        width: calc(100vw - 8vh);
        height: 8vh;
        left: 0;
        top: 0px;
        background-color: transparent;
        display: flex;
    }

    .menu .links_container a
    {
        position: relative;
        font-family: "roboto", sans-serif;
        text-decoration: none;
        font-weight: 300;
        font-size: 1.25vw;
        margin-left: auto;
        margin-right: auto;
        opacity: 0.7;
        transition: 0.3s;
        user-select: none;
        line-height: 7vh;
        height: 7vh;
    }

    .menu .links_container a:hover, .button:hover
    {
        opacity: 1;
        transition: 0.3s;
    }

    .menu_light_bg /* Si le fond est plutôt clair */
    {
        background-color: white;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        /*background-image: linear-gradient(to bottom, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);*/
    }

    .menu_light_bg .button
    {
        filter: invert(0.4)
    }

    .menu_light_bg .links_container a
    {
        color: #292929;
    }

    .menu_dark_bg /* Si le fond est plutôt foncé */
    {
        background-color: transparent;
    }

    .menu_dark_bg .button
    {
        filter: invert(1)
    }

    .menu_dark_bg .links_container a
    {
        color: white;
    }

    .title_container
    {
        position: absolute;
        top: 7vh;
        width: 100vw;
        background-color: transparent;
        display: flex;
        height: 50vh;
    }

    .title_container div
    {
        position: flex;
        text-align: center;
        color: white;
        padding-bottom: 8vh;    
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .title_container div h1{
        font-family: "outfit", sans-serif;
        font-size: 4em;
        margin-bottom: 0px;
    }

    .loading
    {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        justify-content: center;
    }

    .loading div
    {
        position: flex;
        text-align: center;
        color: black;
        padding-bottom: 8vh;
        padding-left: 0.7vw;
        margin-top: auto;
        margin-bottom: auto;
        user-select: none;
    }

    .loading div h1{
        font-family: "outfit", sans-serif;
        font-size: 4em;
        margin-bottom: 0px;
        user-select: none;
    }

    .loading div span{
        position: relative;
        font-family: "Roboto-Thin", sans-serif;
        font-weight: 100;
        font-size: 2.5em;
        user-select: none;
    }

    .btn_container
    {
        position: absolute;
        display: flex;
        width: 100vw;
        top: 57vh;
        background-color: transparent;
        left: 0;
        right: 0;
    }

    .btn_container a
    {
        border-radius: 1vh;
        border: 3px solid white;
        color: white !important;
        height: 3vh;
        min-width: 15vw;
        text-align: center;
        padding: 4vh;
        transition: 0.15s;
        background-color: transparent;
        margin-left: auto;
        margin-right: auto;
        font-family: "Roboto", sans-serif;
        font-weight: 900 !important;
        font-size: 3vh;
        text-decoration: none;
        line-height: 3vh; /* Permet de centrer verticalement le texte dans le rectangle */  
    }

    .btn_container a:hover
    {
        background-color: white;
        color: #E9A89B !important;
    }

    .btn_container a:nth-child(1)
    {
        margin-left: 15vw;
    }

    .btn_container a:nth-child(3)
    {
        margin-right: 15vw;
    }

    .content
    {
        position: absolute;
        width: 100vw;
        float: top;
        left: 0vw;
        top: 100vh;  
        background-color: white !important;
    }

    .content .section
    {
        position: relative;
        width: 100vw;
        left: 0vw;
        background-color: white;
        display: grid;
        padding-top: 6vh;
    }

    .content .section h2
    {
        position: relative;
        text-align: center;
        font-family: "roboto", sans-serif;
        font-weight: 300;
        font-size: 3vh;
        color: #292929; 
    }

    .content .section .corps h3
    {
        position: relative;
        text-align: left;
        font-family: "roboto", sans-serif;
        font-weight: 500;
        font-size: 2.3vh;
        color: #292929; 
    }

    .content .section .corps h4
    {
        position: relative;
        text-align: center;
        font-family: "roboto", sans-serif;
        font-weight: 500;
        font-size: 2.3vh;
        color: #292929; 
        text-decoration: none;
    }


    .content .section hr
    {
        width: 80%;
        height: 0.1vh;
        background-color: lightgrey;
    }

    .content .section .corps
    {
        position: relative;
        margin-top: 6vh;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    .content .section #portrait
    {
        position: relative;
        float: left;
        top: 0px;
        left: 0px;
        width: 20vw;
        height: 20vw;
        margin-right: 6vh;
        margin-bottom: 3vh;
    }

    .content .section #materiel
    {
        position: relative;
        float: right;
        top: 0px;
        left: 0px;
        width: 30vw;
        height: 40vw;
        margin-left: 6vh;
        margin-bottom: 3vh;
    }

    .content .section p
    {
        position: relative;
        float: top;
        margin-top: 0;
        font-family: "roboto", sans-serif;
        font-weight: 400;
        color: #292929;
        font-size: 2vh;
        text-align: justify;
    }

    .content .section li
    {
        line-height: 3.5vh;
    }

    .content .section a
    {
        position: relative;
        float: top;
        margin-top: 0;
        font-family: "roboto", sans-serif;
        font-weight: 400;
        color: #292929;
        font-size: 2vh;
        text-align: justify;
        text-decoration: none;
        transition: 0.15s;
    }

    .content .section a:hover
    {
        color: #E9A89B;
    }

    .footer .social_container
    {
        display: flex;
        max-width: 30vw;
        min-width: 20vw;
    }

    .social_container a
    {
        margin-left: auto;
        margin-right: auto;
    }

    .social_container .social_icons
    {
        height: 4vh;
    }
}

@media screen and (orientation:portrait)
{


    #background
    {
        position: fixed;
        width: 100vw;
        top: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        height: 150vw;
        background-size: contain;
        background-image: url("../img/bg9.webp");
    }

    .title_container div h1{
        font-family: "outfit", sans-serif;
        font-size: 9vw;
        margin-bottom: 0px;
        line-height: 1em;
    }

    .loader {
        width: 10vw;
        height: 10vw;
        display: inline-block;
        position: relative;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding-right: 5vw;
        padding-bottom: 5vw;
        border: 5px solid #E9A89B;
        border-bottom-color: transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
      }
      
      @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 

    .loading div:nth-child(1) h1{
        font-family: "outfit", sans-serif;
        font-size: 9vw;
        margin-bottom: 0px;
        line-height: 1em;
    }

    .loading div:nth-child(1) span{
        position: relative;
        font-family: "roboto", sans-serif;
        font-weight: 200;
        font-size:6.3vw;
    }

    @media (max-aspect-ratio:2/3)
    {

        .title_container
        {
            position: absolute;
            top: 0vh;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            aspect-ratio: 0.6667;
            background-color: transparent;
            display: flex;
        }

        .title_container div
        {
            position: flex;
            text-align: center;
            color: white;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 5em; /* il faut compenser la hauteur de ligne ajoutée par le nom */
        }

        .loading
        {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 150vw;
        }

        .loading div:nth-child(1)
        {
            position: flex;
            text-align: center;
            color: black;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 5em; /* il faut compenser la hauteur de ligne ajoutée par le nom */
        }

        .loading div:nth-child(2)
        {
            position: absolute;
            display: flex;
            width: 100%;
            height: 50%;
            left: 0; bottom: 0;
        }
    }

    @media (min-aspect-ratio:2/3)
    {
        .title_container
        {
            position: absolute;
            top: 0vh;
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            background-color: transparent;
            display: flex;
        }

        .title_container div
        {
            position: flex;
            text-align: center;
            color: white;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 5em; /* il faut compenser la hauteur de ligne ajoutée par le nom */
        }

        .loading
        {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: white;
            display: flex;
            transition: 1s;
            z-index: 999;
        }

        .loading div:nth-child(1)
        {
            position: flex;
            text-align: center;
            color: black;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 5em; /* il faut compenser la hauteur de ligne ajoutée par le nom */
        }

        .loading div:nth-child(2)
        {
            position: absolute;
            display: flex;
            width: 100%;
            height: 50%;
            left: 0; bottom: 0;
        }
    }

    #overall
    {
        display: grid;
        grid-template-columns: auto auto;
    }

    .content
    {
        position: absolute;
        width: 100vw;
        left: 0vw;
        top: 150vw;
        background-color: white !important;
    }

    .content .section
    {
        position: relative;
        width: 100vw;
        left: 0vw;
        background-color: white;
        display: grid;
        padding-top: 6vh;
    }

    .content .section h2
    {
        position: relative;
        text-align: center;
        font-family: "roboto", sans-serif;
        font-weight: 300;
        font-size: 5vh;
        color: #292929; 
    }

    .content .section .corps h3
    {
        position: relative;
        text-align: left;
        font-family: "roboto", sans-serif;
        font-weight: 500;
        font-size: 3vh;
        color: #292929; 
    }

    .content .section .corps h4
    {
        position: relative;
        text-align: center;
        font-family: "roboto", sans-serif;
        font-weight: 500;
        font-size: 3vh;
        color: #292929; 
        text-decoration: none;
    }


    .content .section hr
    {
        width: 80%;
        height: 0.1vh;
        background-color: lightgrey;
    }

    .content .section .corps
    {
        position: relative;
        margin-top: 6vh;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    .content .section #portrait
    {
        position: relative;
        float: left;
        top: 0px;
        left: 0px;
        width: 30vw;
        height: 30vw;
        margin-right: 2vh;
        margin-bottom: 0.5vh;
    }

    .content .section #materiel
    {
        position: relative;
        float: center;
        top: 0px;
        margin-left: auto;
        margin-right: auto;
        width: 60vw;
        height: 80vw;
        margin-left: 6vh;
        margin-bottom: 3vh;
    }

    .content .section p
    {
        position: relative;
        float: top;
        margin-top: 0;
        font-family: "roboto", sans-serif;
        font-weight: 400;
        color: #292929;
        font-size: 1.8vh;
        text-align: justify;
    }

    .content .section li
    {
        line-height: 3.5vh;
    }

    .content .section a
    {
        position: relative;
        float: top;
        margin-top: 0;
        font-family: "roboto", sans-serif;
        font-weight: 400;
        color: #292929;
        font-size: 1.8vh;
        text-align: justify;
        text-decoration: none;
        transition: 0.15s;
    }

    .content .section a:hover
    {
        color: #E9A89B;
    }

    .menu
    {
        visibility: hidden;
    }

    .footer .social_container
    {
        display: flex;
        max-width: 80vw;
    }

    .social_container a
    {
        margin-left: auto;
        margin-right: auto;
    }

    .social_container .social_icons
    {
        height: 5vw;
    }
    
}