@property --sky-top {
    syntax: "<color>";
    inherits: true;
}

@property --sky-middle {
    syntax: "<color>";
    inherits: true;
}

@property --sky-bottom {
    syntax: "<color>";
    inherits: true;
}

:root {
    --sky-top: #72BDEB;
    --sky-middle: #B9E3F7;
    --sky-bottom: #EDF8FF;
    --bg-color: #DFF0FF;
    --bg-image: linear-gradient(180deg,
            var(--sky-top) 0%,
            var(--sky-middle) 48%,
            var(--sky-bottom) 100%);
    --bg-trans: rgba(255, 255, 255, 0.42);
    --rev-bg-trans: rgba(10, 22, 50, 0.42);
    --text-color: #14213D;
    --hover-color: #8A304D;
    --rev-hover-color: #FFD4DC;
    --geo-color: #14213D;
    --geo-text-color: #EDF8FF;
    --logo: url("../img/clair/LogoPersoJ.png");
    --menu: url("../img/clair/menuJ.png");
    --more: url("../img/sombre/moreN.png");
    --moregeo: url("../img/clair/moreJ.png");
    --hess: url("../img/clair/HessJ.png");
}

[data-theme="dawn"] {
    --sky-top: #7888B8;
    --sky-middle: #E6A6AE;
    --sky-bottom: #FFD6A3;
    --bg-color: #F3C5B8;
    --bg-image: linear-gradient(180deg,
            var(--sky-top) 0%,
            var(--sky-middle) 55%,
            var(--sky-bottom) 100%);
    --bg-trans: rgba(255, 244, 238, 0.44);
    --rev-bg-trans: rgba(47, 40, 70, 0.42);
    --text-color: #352F4B;
    --hover-color: #974E64;
    --rev-hover-color: #FFE1D3;
    --geo-color: #352F4B;
    --geo-text-color: #FFF2E8;
    --logo: url("../img/LogoPerso.png");
    --menu: url("../img/clair/menuJ.png");
    --more: url("../img/sombre/moreN.png");
    --moregeo: url("../img/clair/moreJ.png");
    --hess: url("../img/clair/HessJ.png");
}

[data-theme="dusk"] {
    --sky-top: #302844;
    --sky-middle: #87516B;
    --sky-bottom: #DF8862;
    --bg-color: #5B405B;
    --bg-image: linear-gradient(180deg,
            var(--sky-top) 0%,
            var(--sky-middle) 52%,
            var(--sky-bottom) 100%);
    --bg-trans: rgba(38, 29, 54, 0.46);
    --rev-bg-trans: rgba(255, 238, 224, 0.38);
    --text-color: #FFF1E7;
    --hover-color: #FFC1A1;
    --rev-hover-color: #702C46;
    --geo-color: #FFF1E7;
    --geo-text-color: #39283D;
    --logo: url("../img/LogoPerso.png");
    --menu: url("../img/sombre/menuN.png");
    --more: url("../img/clair/moreJ.png");
    --moregeo: url("../img/sombre/moreN.png");
    --hess: url("../img/sombre/HessN.png");
}

[data-theme="dark"] {
    --sky-top: #060817;
    --sky-middle: #101938;
    --sky-bottom: #20375E;
    --bg-color: #090D24;
    --bg-image: linear-gradient(180deg,
            var(--sky-top) 0%,
            var(--sky-middle) 55%,
            var(--sky-bottom) 100%);
    --bg-trans: rgba(5, 9, 28, 0.48);
    --rev-bg-trans: rgba(235, 242, 255, 0.38);
    --text-color: #EAF3FF;
    --hover-color: #F3B8C2;
    --rev-hover-color: #70253B;
    --geo-color: #EAF3FF;
    --geo-text-color: #0A102A;
    --logo: url("../img/sombre/LogoPersoN.png");
    --menu: url("../img/sombre/menuN.png");
    --more: url("../img/clair/moreJ.png");
    --moregeo: url("../img/sombre/moreN.png");
    --hess: url("../img/sombre/HessN.png");
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-color);
    transition:
        --sky-top 1.2s ease,
        --sky-middle 1.2s ease,
        --sky-bottom 1.2s ease,
        background-color 1.2s ease,
        color 0.8s ease;
}

/*------------------------------------------------------------ Header ------------------------------------------------------------*/

#Accueil {
    background-color: var(--bg-color);
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.logos {
    width: auto;
    height: auto;
    display: flex;
    flex-grow: -1;
}

#Accueil a,
#Accueil img,
#logo {
    width: 50px;
    height: 50px;
}

#logo {
    background-image: var(--logo);
    background-size: cover;
}

#Accueil a:hover {
    opacity: 0.6;
}

#Accueil h1 {
    align-self: center;
    text-align: center;
    color: var(--text-color);
    margin: 0;
    font-family: "Tiny5", sans-serif;
    font-size: 4vw;
}


/*------------------------------------------------------------ Navigation ------------------------------------------------------------*/

.navi {
    position: sticky;
    background-color: var(--bg-color);
    align-items: center;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--text-color);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease;
}

.navi #navilink {
    padding: 0;
    margin: 0;
}

.navi ul {
    position: absolute;
    width: 100%;
    list-style: none;
    padding: 2vw 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    justify-content: space-between;
    align-items: center;
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.3s ease;
    border-bottom: 3px solid var(--text-color);
}

.navi ul li {
    text-align: center;
}

.navi ul.open {
    transform: scaleY(1);
}

#naviburger {
    content: '';
    width: 3vw;
    height: 3vw;
    position: relative;
    display: inline-block;
    background-image: var(--menu);
    background-size: cover;
    background-position: center;
    transition: 0.5s ease;
    left: 50%;
}

#naviburger:hover {
    cursor: pointer;
    opacity: 0.7;
}

#naviburger.open {
    background-image: var(--more);
}

.navi ul a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 3vw;
    padding: 5px;
    transition: 0.1s ease;
}

.navi ul a:hover {
    color: var(--hover-color);
    font-weight: bold;
    text-decoration: underline;
}

/*------------------------------ Bouton ------------------------------*/

.theme-button {
    width: 32px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 16px;

    position: relative;
    overflow: hidden;
    cursor: pointer;

    transition: background 0.6s ease;
}

.theme-button::before {
    content: "";

    position: absolute;
    width: 12px;
    height: 12px;

    left: 2px;
    top: 2px;

    border-radius: 50%;

    transition:
        transform 0.6s ease,
        background 0.6s ease,
        box-shadow 0.6s ease;
}

.theme-button::after {
    content: "";

    position: absolute;
    width: 12px;
    height: 12px;

    left: 2px;
    top: 2px;

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

    font-size: 8px;
    font-weight: bold;
    color: #303040;

    opacity: 0;
    pointer-events: none;

    transition:
        transform 0.6s ease,
        opacity 0.3s ease;
}

.theme-button[data-mode="day"] {
    background:
        linear-gradient(90deg, #F7D348, #89C4FF);
}

.theme-button[data-mode="day"]::before {
    transform: translateX(0);
    background: #FFE34F;
    box-shadow: 0 0 4px #FFD700;
}

.theme-button[data-mode="auto"] {
    background:
        linear-gradient(90deg,
            #FFD6A3,
            #89C4FF,
            #87516B,
            #101938);
}

.theme-button[data-mode="auto"]::before {
    transform: translateX(8px);
    background: #FFFFFF;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.theme-button[data-mode="auto"]::after {
    content: "A";
    transform: translateX(8px);
    opacity: 1;
}

.theme-button[data-mode="night"] {
    background:
        linear-gradient(90deg, #293B5F, #1B1B2F);
}

.theme-button[data-mode="night"]::before {
    transform: translateX(16px);
    background: #D8D8FF;
    box-shadow: 0 0 4px #B0B0FF;
}

/*------------------------------------------------------------ Main Content ------------------------------------------------------------*/

main {
    margin: 1vw 12vw;
}

p,
li,
a {
    font-size: 3vw;
    text-align: start;
    color: var(--text-color);
    font-family: 'Arial', sans-serif;
}

h1 {
    text-align: center;
    font-size: 5vw;
    margin: 0;
    font-family: "Engagement", sans-serif;
    font-weight: bold;
    color: var(--hover-color);
}

h2 {
    text-align: center;
    font-size: 4vw;
    margin: 0;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}

h3 {
    text-align: center;
    font-size: 3.8vw;
    margin: 0;
    font-weight: normal;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}

h4 {
    text-align: center;
    font-size: 3.4vw;
    margin: 0;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}

h5 {
    text-align: center;
    font-size: 3.2vw;
    margin: 0;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}

.Block {
    background-color: var(--bg-color);
    border-radius: 15px;
    padding: 2vw 1vw;
    margin: 10vw 0;
}

/*------------------------------------------------------------ Presentation ------------------------------------------------------------*/

#Presentation h2 {
    padding: 2vw 0;
}

#Presentation .haut_gauche {
    justify-self: center;
    margin: 1vw;
}

#Presentation .haut_droit {
    justify-self: center;
    margin: 1vw;
}

#Presentation .haut_droit img {
    width: 100%;
    height: auto;
}

/*------------------------------ Chronologie ------------------------------*/
.bas_gauche {
    margin: 3vw 0 5vw 0;
}

.chronologie {
    position: relative;
    max-width: 100%;
    margin: 0 1vw;
    display: flex;
    justify-content: space-between;
    gap: 1vw;
}

.chronologie::after {
    content: '';
    position: absolute;
    height: 5px;
    background: var(--geo-color);
    left: 0;
    right: 0;
    bottom: -2vw;
    margin-left: 0;
}

.chrono_box {
    width: 15vw;
    padding: 0.5vw 1vw;
    position: relative;
    background-color: var(--geo-color);
    border-radius: 15%;
}

.chrono_box:nth-of-type(3) {
    width: 20vw;
}

.chrono_box h4,
.chrono_box p {
    color: var(--geo-text-color);
}

.chrono_box h4 {
    font-size: 3.8vw;
}

.chrono_box p {
    font-size: 2.5vw;
}

.chrono_box::after {
    content: '';
    position: absolute;
    width: 1vw;
    height: 1vw;
    border: 4px solid var(--geo-color);
    background-color: var(--bg-color);
    border-radius: 50%;
    z-index: 1;
    bottom: -3vw;
    left: 40%;
}

/*------ Textes Cachés ------*/

p.txt1,
p.txt2,
p.txt3,
p.txt4 {
    position: absolute;
    width: auto;
    height: auto;
    top: 120%;
    padding: 1vw;
    border-radius: 10px;
    text-align: center;
    background-color: var(--geo-color);
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.3s ease;
    left: 0;
}

p.open {
    transform: scaleY(1);
}

#Burger1,
#Burger2,
#Burger3,
#Burger4 {
    content: '';
    width: 3vw;
    height: 3vw;
    position: relative;
    display: inline-block;
    background-image: var(--moregeo);
    background-size: cover;
    background-position: center;
    transition: 0.5s ease;
    left: 40%;
}

#Burger1:hover,
#Burger2:hover,
#Burger3:hover,
#Burger4:hover {
    cursor: pointer;
    opacity: 0.7;
}

#Burger1.open,
#Burger2.open,
#Burger3.open,
#Burger4.open {
    transform: rotate(180deg);
}

/*------------------------------------------------------------ BTS SIO ------------------------------------------------------------*/

.rotlogo {
    display: flex;
    justify-content: space-around;
    margin: 3vw 0;
}

.card-container {
    width: 70px;
    height: 70px;
    perspective: 1000px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.card-container:hover .card {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    background-color: var(--geo-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.card-front {
    background: url("../img/LogoUIMM.png");
    background-size: cover;
}

.card-back {
    background: url("../img/BatUIMM.png");
    background-size: cover;
    transform: rotateY(180deg);
    cursor: pointer;
}

.card-front2 {
    background: url("../img/whiteCCI.jpg");
    background-size: cover;
}

.card-back2 {
    background: url("../img/BatCCI.png");
    background-size: cover;
    transform: rotateY(180deg);
    cursor: pointer;
}

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

.box {
    margin: 2vw 0;
    padding: 1.5vw;
    width: 40%;
    background-color: var(--geo-color);
    color: var(--geo-text-color);
    text-decoration: none;
    text-align: center;
    transition: 0.1s ease;
    border-radius: 10px;
    align-content: center;
}

.box:hover {
    color: var(--rev-hover-color);
    text-decoration: underline;
    font-weight: bold;
}

/*------------------------------ Projets ------------------------------*/

.boxes1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box1 {
    margin: 2vw 0;
    padding: 1vw;
    width: 70%;
    background-color: var(--geo-color);
    color: var(--geo-text-color);
    text-decoration: none;
    text-align: center;
    transition: 0.1s ease;
    border-radius: 10px;
    align-content: center;
}

.box1 h5,
.box1 p {
    color: var(--geo-text-color);
}

/*------------------------------------------------------------ Alternance ------------------------------------------------------------*/

.Hess {
    content: '';
    background: var(--hess);
    width: 150px;
    height: 40px;
    background-size: cover;
}

.Hess:hover {
    opacity: 0.7;
}

#Alternance img {
    width: auto;
    height: 40px;
}

.hesslogos {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 2vw 0;
}

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

.box2 {
    margin: 2vw 0;
    padding: 1vw;
    width: 25%;
    background-color: var(--geo-color);
    color: var(--geo-text-color);
    text-decoration: none;
    text-align: center;
    transition: 0.1s ease;
    border-radius: 10px;
    align-content: center;
}

.box2 h5,
.box2 p {
    color: var(--geo-text-color);
    text-align: center;
}

/*------------------------------------------------------------ Veille Technologique ------------------------------------------------------------*/

.box3 {
    margin: 2vw 3vw;
    padding: 1vw;
    width: auto;
    background-color: var(--geo-color);
    color: var(--geo-text-color);
    text-decoration: none;
    text-align: center;
    transition: 0.1s ease;
    border-radius: 10px;
    align-content: center;
}

.box3 img {
    width: 75%;
    height: auto;
    margin-top: 1vw;
    border-radius: 10px;
}

.box3 h5,
.box3 p {
    color: var(--geo-text-color);
}

.box3 article {
    margin: 1vw 2vw;
    text-align: justify;
    color: var(--geo-text-color);
    font-style: italic;
}

.box3 a {
    color: var(--geo-text-color);
    text-decoration: none;
    font-weight: bold;

}

.box3 a:hover {
    text-decoration: underline;
    color: var(--rev-hover-color);
    transition: 0.1s ease;
}

.box3 .source {
    font-size: 1.5vw;
    font-style: italic;
    text-align: right;
}

/*------------------------------------------------------------ Footer ------------------------------------------------------------*/

footer {
    background-color: var(--bg-color);
    text-align: center;
    width: 100%;
    border-top: 5px solid var(--text-color);
}

footer h2 {
    padding: 15px 0;
}

footer .links {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 1.5vw 0;
    flex-wrap: wrap;
}

footer .links a {
    color: var(--text-color);
    text-decoration: none;
}

footer .links a img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
}

footer a {
    text-decoration: none;
    color: var(--text-color);
    transition: 0.1s ease;
}

footer a:hover {
    color: var(--hover-color);
    font-weight: bold;
    text-decoration: underline;
}

/*------------------------------------------------------------ Formulaire ------------------------------------------------------------*/

.group {
    position: relative;
    margin: 1.5vw 0;
}

.group input,
.group textarea {
    width: 50%;
    padding: 2vw 1vw;
    border: none;
    font-size: 1.5vw;
    outline: none;
    background-color: var(--bg-color);
    transition: border-bottom 0.2s ease;
    color: var(--text-color);
}

.group label {
    position: absolute;
    left: 25%;
    top: 2vw;
    color: var(--text-color);
    pointer-events: none;
    transition: top 0.2s ease;
    font-size: 1.5vw;
}

.group input:focus~label,
.group textarea:focus~label .group input:not(:placeholder-shown)~label,
.group textarea:not(:placeholder-shown)~label {
    left: 15%;
    font-size: 1.5vw;
    font-weight: bold;
    color: var(--geo-text-color);
}

.submit {
    width: 25%;
    padding: 1.5vw 3vw;
    background: var(--rev-hover-color);
    color: var(--text-color);
    border: none;
    border-radius: 8px;
    font-size: 1.5vw;
    font-weight: bold;
}

.submit:hover {
    background: var(--hover-color);
    color: var(--geo-text-color);
    transition: background 0.3s ease;
}

/*------------------------------------------------------------ Media Queries ------------------------------------------------------------*/

@media screen and (min-width: 576px) {

    #Accueil a,
    #Accueil img,
    #logo {
        width: 75px;
        height: 75px;
    }

    .navi a {
        font-size: 11px;
        padding: 10px;
    }

    .card-container {
        width: 90px;
        height: 90px;
    }
}

@media screen and (min-width: 768px) {

    P,
    li,
    a {
        font-size: 1.8vw;
    }

    #Accueil a,
    #Accueil img,
    #logo {
        width: 90px;
        height: 90px;
    }

    #naviburger {
        display: none;
    }

    .navi ul {
        position: sticky;
        transform: none;
        flex-direction: row;
        justify-content: space-evenly;
        border-bottom: none;
        gap: 0;
        top: 100%;
        padding: 1vw 0;
    }

    .navi ul li a {
        font-size: 1.5vw;
    }

    .navi.scrolled {
        background-color: var(--bg-trans);
        backdrop-filter: blur(1px);
        border-bottom: 5px solid var(--rev-bg-trans);
    }

    .theme-button {
        width: 64px;
        height: 32px;
        border-radius: 32px;
    }

    .theme-button::before {
        width: 24px;
        height: 24px;

        left: 4px;
        top: 4px;
    }

    .theme-button::after {
        width: 24px;
        height: 24px;

        left: 4px;
        top: 4px;

        font-size: 12px;
    }

    .theme-button[data-mode="dawn"] {
        background:
            linear-gradient(90deg,
                #7888B8,
                #E6A6AE,
                #FFD6A3);
    }

    .theme-button[data-mode="dawn"]::before {
        transform: translateX(0);
        background: #FFBE8A;
        box-shadow: 0 0 8px #FFAD72;
    }

    .theme-button[data-mode="day"]::before {
        transform: translateX(8px);
        background: #FFE34F;
        box-shadow: 0 0 8px #FFD700;
    }

    .theme-button[data-mode="auto"]::before {
        transform: translateX(16px);
    }

    .theme-button[data-mode="auto"]::after {
        transform: translateX(16px);
    }

    .theme-button[data-mode="dusk"] {
        background:
            linear-gradient(90deg,
                #DF8862,
                #87516B,
                #302844);
    }

    .theme-button[data-mode="dusk"]::before {
        transform: translateX(24px);
        background: #EE9570;
        box-shadow: 0 0 8px #D66D61;
    }

    .theme-button[data-mode="night"]::before {
        transform: translateX(32px);
        background: #D8D8FF;
        box-shadow: 0 0 8px #B0B0FF;
    }

    #Presentation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 1vw;
        width: 100%;
    }

    #Presentation .titre {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        justify-self: center;
    }

    #Presentation .haut_gauche {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    #Presentation .haut_droit {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        justify-self: center;
        align-self: center;
    }

    #Presentation .bas_gauche {
        grid-row: 3 / 4;
        grid-column: 1 / 3;
    }

    #Presentation .bas_droit {
        grid-row: 4 / 5;
        grid-column: 1 / 3;
    }

    .chronologie {
        gap: 5vw;
    }

    .chrono_box h4 {
        font-size: 2.7vw;
    }

    .chrono_box p {
        font-size: 2.5vw;
    }

    .chrono_box::after {
        width: 1.5vw;
        height: 1.5vw;
    }

    #Burger1,
    #Burger2,
    #Burger3,
    #Burger4 {
        width: 2vw;
        height: 2vw;
    }

    #BTS_SIO {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: repeat(4, auto);
    }

    #BTS_SIO h2 {
        grid-column: 1 / 4;
    }

    .rotlogo {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        justify-content: space-between;
    }

    .boxes1 {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;

    }

    .boxes1 .box1 {
        width: 30%;
    }

    .para {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        text-align: justify;
    }

    .para2 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }

    .boxes {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
    }

    .box {
        width: 20%;
    }

    .card-container {
        width: 110px;
        height: 110px;
    }

    .Hess {
        width: 298px;
        height: 80px;
    }

    #Alternance img {
        width: auto;
        height: 80px;
    }

    .hesslogos {
        justify-content: space-between;
        margin: 2vw 3vw;
    }

    .txtcentre {
        text-align: center;
        margin: 0 10vw 0 28vw;
        position: relative;
        top: -115px;
    }
}

@media screen and (min-width: 992px) {

    #Accueil a,
    #Accueil img,
    #logo {
        width: 105px;
        height: 105px;
    }

    .navi a {
        font-size: 17px;
        padding: 20px;
    }

    .chrono_box::after {
        width: 2vw;
        height: 2vw;
    }

    .card-container {
        width: 130px;
        height: 130px;
    }
}

@media screen and (min-width: 1200px) {

    #Accueil a,
    #Accueil img,
    #logo {
        width: 120px;
        height: 120px;
    }

    .navi a {
        font-size: 20px;
        padding: 25px;
    }

    .card-container {
        width: 150px;
        height: 150px;
    }
}