@font-face {
    font-family: 'Outfit';
    src: url('font/Outfit-VariableFont_wght.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}
/*
Couleur : 
  --background-light: #F9FEFF;
  --background-dark: #0D141F;
  --background-element-light: #F1FAFD;
  --background-element-dark: #111A27;
  --text-light: #00749E;
  --text-dark: #75C7F0;
  --text-strong-light: #1D3E56;
  --text-strong-dark: #C2F3FF;
  --title-light: #00749E;
  --title-dark: #75C7F0;
  --border-light: #A9DAED;
  --border-dark: #1B537B;
  --border-btn-light: #8DCAE3;
  --border-btn-dark: #1F6692;
  --border-focus-light: #60B3D7;
  --border-focus-dark: #197CAE;
  --nav-btn-light: #E1F6FD;
  --nav-btn-dark: #112840;
  --nav-btn-hover-light: #D1F0FA;
  --nav-btn-hover-dark: #113555;
  --nav-btn-selected-light: #BEE7F5;
  --nav-btn-selected-light: #154467;

test
#AEC5EB
#99ACD1


*/
/*------test--------*--------*//*  
    background: linear-gradient(145deg, var(--neo-backgrounf-1), var(--neo-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neo-shadow-1),
        -20px -20px 60px var(--neo-shadow-2);

background: linear-gradient(145deg, var(--neoe-backgrounf-1), var(--neoe-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neoe-shadow-1),
        -20px -20px 60px var(--neoe-shadow-2);
*/

/*-----------------------------*/
:root {
    --background: #FBFDFF; /*1*/
    --background-element: #F4FAFF; /*2 */
    --nav-btn: #E6F4FE; /* 3 */
    --nav-btn-hover: #D5EFFF; /* 4  */
    --nav-btn-selected: #C2E5FF; /* 5 */
    --border: #ACD8FC; /* 6 */
    --border-btn: #8EC8F6; /* 7 */
    --border-focus: #5EB1EF; /* 8 */
    --background-btn: #0090FF; /* 9 */
    --background-btn-hover: #0588F0; /* 10 */
    --text: #0D74CE; /* 11*/
    --text-strong: #113264; /* 12 */
    --title: #113264; /* 12 */
    --neoe-backgrounf-1: #dce1e6;
    --neoe-backgrounf-2: #ffffff;
    --neoe-shadow-1: #cfd5d9;
    --neoe-shadow-2: #ffffff;

    --neo-backgrounf-1: #e2e4e6;
    --neo-backgrounf-2: #ffffff;
    --neo-shadow-1: #d5d7d9;
    --neo-shadow-2: #ffffff;


}

.dark_mode{

    --background: #0D141F;

    --background-element: #111A27;

    --text: #75C7F0;

    --text-strong: #C2F3FF;

    --title: #C2F3FF;

    --border: #1B537B;

    --border-btn: #1F6692;

    --border-focus: #197CAE;

    --nav-btn: #112840;

    --nav-btn-hover: #113555;

    --nav-btn-selected: #154467;

    --neo-backgrounf-1: #0c121c;
    --neo-backgrounf-2: #0e1521;
    --neo-shadow-1: #0a0f17;
    --neo-shadow-2: #101927;

    --neoe-backgrounf-1: #0f1723;
    --neoe-backgrounf-2: #121c2a;
    --neoe-shadow-1: #0d131d;
    --neoe-shadow-2: #152131;
}

/*.container {
    display: flex;
    justify-content: center;
    align-items: center;
}*/

body {
    margin: 0;
    padding: 0;

    /* font-family: 'ADLaM Display'; */
    font-family: "Outfit", serif;
    font-weight: 400;

    color: var(--text);
}
/*---------- font ---------*/


h1, h2, h3, h4, h5 {
    /* font-family: 'ADLaM Display'; */
    font-family: "Outfit", serif;
    font-weight: 700;
    color: var(--title);
}

html {
    font-size: 100%;
} /* 16px */

h1 {
    font-size: 4.210rem;
    color: var(--title); /* 67.36px */
}

h2 {
    font-size: 3.158rem;
    color: var(--title);/* 50.56px */
    padding-top: 3vh;
    padding-bottom: 3vh;
}

h3 {
    font-size: 2.369rem;
    color: var(--title);/* 37.92px */
}

h4 {
    font-size: 1.777rem; /* 28.48px */
}

h5 {
    font-size: 1.333rem; /* 21.28px */
}

small {
    font-size: 0.750rem; /* 12px */
}


/*------------------------*/

.container{
    width: 100%;
    height: 100%;
    /*    border: 21px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-element{
    background-color: gray;
    padding: 15px;
    width: 100px;

}



.vitrine{
    display: flex;
    justify-content: center; /*centre horizontalement*/
    align-items: center; /*centre Veticallemnt*/
    /*    border: 5px solid #555; */
    height: 100vh; /* la div prend la taille de l'affichage ' */
    /*    background-image: url('img/backVitrine3.jpg');
        background-size: 100%;*/
    background-color: var(--background);
}

.profil-area{
    padding: 80px 0;
}


/* ----- réseau ----- */

ul {
    list-style: none;
}

.example-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.example-2 .icon-content {
    margin: 0 10px;
    position: relative;
}
.example-2 .icon-content .tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}
.example-2 .icon-content a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--text);
    /*    background-color: #fff;*/
    background-color: var(--background);
    /*    background-color: var(--background-element);*/
    transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
    color: white;
}
.example-2 .icon-content a svg {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
}
/*.example-2 .icon-content a:hover {
    
}*/
.example-2 .icon-content a .filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
    height: 100%;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
    background-color: #0274b3;
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
    background-color: #24262a;
}

.example-2 .icon-content a[data-social="itchio"] .filled,
.example-2 .icon-content a[data-social="itchio"] ~ .tooltip {
    background-color: #fa5c5c;
}

.example-2 .icon-content a[data-social="itchio"] svg {
    /* color: #fa5c5c;
    fill: currentColor; */
}



/* ------- nav bar */

header {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*  font-family: "Poppins", sans-serif;*/
}
.navbar {
    /*  background: #ffbdc9;*/
    width: 100%;
    /*      height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
nav {
    width: 100%;
    position:fixe;
    top:0;
    background: var(--background);
    /*    border-radius: 50px;
        padding: 5px;*/
    /*    box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);*/
    /*    align-text: center;*/
}

nav .nav-right{
    float:right;
}

nav img{
    height: 80px;
    width: 80px;

}
nav ul {
    padding: 0;
    margin: 0;
}
nav ul .nav-right a {
    /*    float: right;*/
    list-style: none;
    display: inline-block;
    padding: 10px 15px ;
    margin: 10px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.2s;
    text-decoration: none;
}
nav ul .nav-right a::after {
    content: "";
    background: var(--nav-btn-hover);
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: top 0.2s, opacity 0.2s;
}
nav ul .nav-right a:hover {
    color: var(--text-strong);
}

nav ul .nav-right a:hover::after {
    top: 50%;
    opacity: 1;
}

nav ul .nav-right a:active {
    color: var(--nav-btn-selected);
}

nav ul .nav-right a:active::after {
    top: 50%;
    opacity: 1;
}



/* The switch - the box around the slider */
.switch {
    display: block;
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    /* size of sliding icon -- sun and moon */
    --size-of-icon: 1.4em;
    /* it is like a inline-padding of switch */
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f5;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon,1.4em);
    width: var(--size-of-icon,1.4em);
    border-radius: 20px;
    left: var(--slider-offset,0.3em);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
    ;
    transition: .4s;
}

input:checked + .slider {
    background-color: #303136;
}

input:checked + .slider:before {
    left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
    background: #303136;
    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
/*----------- card -------------*/

.card{
    /*        box-shadow: 0 0 4px rgba(0,0,0,0.2);*/
    overflow: hidden;
    background: var(--background-element);
    border: 0;

}

.card .card-title{
    color: var(--title);
}
.card .card-text{
    color: var(--text);
}

/*---------------- compétence ----------*/
.competence {
    background: var(--background-element);
}
.competence .card{


    /*    border-radius: 15px;*/
    width: 25rem;
    margin: 10px;
    margin-right:  10px;
    /*    background: var(--background-element);
        background: var(--background);
        box-shadow: 5px 5px 10px #E3EAEF, -5px -5px 10px #FAFDFF;  white : #FAFDFF blue plus sombre : #E3EAEF*/
    border-radius: 50px;
    background: linear-gradient(145deg, var(--neo-backgrounf-1), var(--neo-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neo-shadow-1),
        -20px -20px 60px var(--neo-shadow-2);

}
.competence .card .card-subtitle{
    color: var(--text);
    text-decoration: underline;
}

.competence img{
    width: 80px;
    height: 80px;
}

/*------ Projet ------*/
.projet {
    background-color: var(--background);
    /*    margin: 50px;*/
    /*height: 60vh;*/
    border-bottom: 5vh solid var(--background) ;
}


.projet .card {
    /*    width: 80%;
        height: 80%;*/
    border-radius: 20px;
    background: linear-gradient(145deg, var(--neoe-backgrounf-1), var(--neoe-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neoe-shadow-1),
        -20px -20px 60px var(--neoe-shadow-2);
    position: relative;
    padding: 1rem;
    border: 2px solid var(--background-element);
    transition: 0.5s ease-out;
    overflow: visible;
    cursor: pointer;
    color: var(--text);

}
.projet .card img{
    /*    width: 90%;
        height: 80%;*/
}
.projet .card-details {
    color: var(--text);
    height: 100%;
    gap: .5em;
    display: grid;
    place-content: center;
}

.projet .card-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: var(--background-btn);
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
}
.projet .card-button:hover{
    background-color: var(--background-btn-hover);
}
.projet .text-body {
    color: var(--text) !important;
}

/*Text*/
.projet .text-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--title);
}

/*Hover*/
.projet .card:hover {
    border-color: #008bf8;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.projet .card:hover .card-button {
    transform: translate(-50%, 50%);
    opacity: 1;
}

.margin{
    margin-top: 10vh; /* Ajoutez l'espacement souhaité*/
    margin-down: 10vh; /* Ajoutez l'espacement souhaité */
}

/* Stylisation des modals */
.modal {
    /*  background-color: var(--background);*/
    border: none;
}

.modal-header {
    background-color: var(--background);
}

.modal-title {
    color: var(--title);
}

.modal-body {
    color: var(--text);
    background-color: var(--background);
    text-justify: auto;
}

.modal-footer {
    background-color: var(--background);
}
/*Bouton projet */
.projet .modal .modal-body button {
    padding: 8.5px 20px;
    border: 0;
    border-radius: 100px;
    background-color: var(--background-btn);
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.projet .modal .modal-body button:hover {
    background-color: var(--background-btn-hover);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.projet .modal .modal-body button:active {
    background-color: var(--background-btn-hover);
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}

.projet .modal .modal-body p img{
    height: 40px;
    width: 40px;
}
.projet .modal .modal-body .resultat img{
    max-width: 90ch
}

/*Bouton projet long */
.projet #btnGlpi a button {
    padding: 8.5px 20px;
    border: 0;
    border-radius: 100px;
    background-color: var(--background-btn);
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    width: 100vh;
    margin-top: 55px;
}
.projet .tech-logo {
    width: 30px;
    height: 30px;
    display: inline-block;
}


.projet #btnGlpi a button:hover {
    background-color: var(--background-btn-hover);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.projet #btnGlpi a button:active {
    background-color: var(--background-btn-hover);
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}

.projet .card-body .table thead .th{
    font-size: 10% !important;
}
.caseTache{
    width: 150px;
    height: 40px;
}
/*------ parcours -----*/
.parcours{
    /*        display: flex;
        justify-content: center;
        align-items: center;*/
    background-color: var(--background-element);
    border-bottom: 5vh solid var(--background-element) ;
}

.parcours .card{
    width: 100vh;
    /*    background-color: var(--background);  --text-strong*/
    background: linear-gradient(145deg, var(--neo-backgrounf-1), var(--neo-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neo-shadow-1),
        -20px -20px 60px var(--neo-shadow-2);
    border-bottom: 5vh;
    border-top: 5vh;
}
.parcours .card .card-content{
    color: var(--text);
}
.parcours .card .card-content .table{
    color: var(--text);
    background: none;
}
.parcours .table{
    color: var(--text);
    background: none;
}
.parcours .card .card-body a{
    color: var(--background-btn-hover);
}
/* --------stage --------*/
.stage {
    background-color: var(--background);
}
/* width: 190px;
 height: 254px;*/

.stage .card {
    /*    width: 220px;
        height: 284px;*/
    border-radius: 20px;
    background: linear-gradient(145deg, var(--neoe-backgrounf-1), var(--neoe-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neoe-shadow-1),
        -20px -20px 60px var(--neoe-shadow-2);
    position: relative;
    padding: 1.8rem;
    border: 2px solid var(--background-element);
    transition: 0.5s ease-out;
    overflow: visible;
    cursor: pointer;
    color: var(--text);
}

.stage .card-details {
    color: var(--text);
    height: 100%;
    gap: .5em;
    display: grid;
    place-content: center;
}

.stage .card-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: #008bf8;
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
}

#stage .text-body {
    color: var(--text) !important;
}


/*Text*/
.stage .text-title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--title);
}

/*Hover*/
.stage .card:hover {
    border-color: #008bf8;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.stage .card:hover .card-button {
    transform: translate(-50%, 50%);
    opacity: 1;
}

.stage .col-xs-12{
    margin-top: 10vh; /* Ajoutez l'espacement souhaité*/
    margin-down: 10vh; /* Ajoutez l'espacement souhaité */
}
/*Bouton projet */
.stage .modal .modal-body button {
    padding: 8.5px 20px;
    border: 0;
    border-radius: 100px;
    background-color: var(--background-btn);
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.stage .modal .modal-body button:hover {
    background-color: var(--background-btn-hover);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.stage .modal .modal-body button:active {
    background-color: var(--background-btn-hover);
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}


/*Bouton projet long */
.stage #btnCompare a button {
    padding: 8.5px 20px;
    border: 0;
    border-radius: 100px;
    background-color: var(--background-btn);
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    width: 100vh;
    margin-top: 25px;
}

.stage #btnCompare a button:hover {
    background-color: var(--background-btn-hover);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.stage #btnCompare a button:active {
    background-color: var(--background-btn-hover);
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}



/*------- certif -----------*/

#certif {
    background: var(--background-element);
    border-bottom: 5vh solid var(--background-element) ;
}
#certif .card{


    /*    border-radius: 15px;*/
    width: 25rem;
    margin: 10px;
    margin-right:  10px;
    /*    background: var(--background-element);
        background: var(--background);
        box-shadow: 5px 5px 10px #E3EAEF, -5px -5px 10px #FAFDFF;  white : #FAFDFF blue plus sombre : #E3EAEF*/
    border-radius: 50px;
    background: linear-gradient(145deg, var(--neo-backgrounf-1), var(--neo-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neo-shadow-1),
        -20px -20px 60px var(--neo-shadow-2);

}
#certif .card .card-subtitle{
    color: var(--text);
    font-style: italic;
}

#certif .card img{
    width: 80px;
    height: 80px;
}

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

.veille{
    /*        display: flex;
        justify-content: center;
        align-items: center;*/
    background-color: var(--background);
}

#veille .card{
    width: 100vh;
    border-radius: 20px;
    /*    background-color: var(--background);  --text-strong*/
    background: linear-gradient(145deg, var(--neoe-backgrounf-1), var(--neoe-backgrounf-2));
    box-shadow:  20px 20px 60px var(--neoe-shadow-1),
        -20px -20px 60px var(--neoe-shadow-2);
}
.veille .card .card-content{
    color: var(--text);
}
.textC{
    color: var(--text);
}
.veille .card .card-body a{
    color: var(--background-btn-hover);
}

.tableau{
    background-color: var(--background-element);
}