/* #############################################
################################################
################# TYPOGRAPHIES #################
################################################
############################################ */
@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-Black.ttf");
    font-weight: 900;
}

@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-ExtraBold.ttf");
    font-weight: 800;
}

@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: 'DMSans';
    src: url("ressources/font/DMSans-Regular.ttf");
    font-weight: 400;
}





/* #########################################
############################################
################# COULEURS #################
############################################
######################################### */
:root {
    --blanc: #FFF;

    --gris-clair-1: #FEFEFE;
    --gris-clair-2: #D9DDE0;
    --gris-clair-3: #BFC7CD;
    --gris-clair-4: #9CA8B0;
    --gris-clair-5: #76838C;

    --gris-fonce-1: #353535;
    --gris-fonce-2: #2B2B2B;
    --gris-fonce-3: #212121;
    --gris-fonce-4: #171717;
    --gris-fonce-5: #0E0E0E;

    --noir: #100E11;

    --jaune-1: #FCDE89;
    --jaune-2: #FCD76C;
    --jaune-3: #E1B536;
    
    --bleu-1: #B1D8FF;
    --bleu-2: #0F87F5;
    --bleu-3: #1A38FA;
    --bleu-4: #0F28CF;

    --vert-1: #9FEFB8;
    --vert-2: #8DDDA4;

    --rouge-1: #E73A3A;
    --rouge-2: #AA2222;

    --violet-1: #D8DAFF;
    --violet-2: #BABCE2;
    --violet-3: #787EEE;
    --violet-4: #575CC8;

    --code-tufts-blue: #358CD6;
    --code-gold: #FFD700;
    --code-citron: #DCCD79;
    --code-vanilla: #DCDCAA;
    --code-pale-azure: #9CDCFE;
    --code-african-violet: #C586C0;
    --code-silver: #C9D4D4;
    --code-persian-orange: #CE916A;
    --code-white: #FFFFFF;
    --code-gray: #808080;
    --code-celadon: #A7CEA8;
}





/* ########################################
###########################################
################# TAILLES #################
###########################################
######################################## */
:root {
    --taille: 16px;
    --epaisseurStroke: 5;
    --epaisseurPX: 2px;
}





/* ###########################################
##############################################
################# ANIMATIONS #################
##############################################
########################################### */

/* ---------------------------------
----------- NOTIFICATION -----------
--------------------------------- */
@keyframes notificationActionHide {
    0% {
        transform: scale(100%);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes notificationActionShow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(100%);
        opacity: 1;
    }
}
@keyframes notificationProgressBarCountdown {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}



/* ----------------------------
----------- WINDOWS -----------
---------------------------- */
@keyframes windowActionHide {
    0% {
        transform: translate(0) scale(100%);
        opacity: 1;
    }
    100% {
        left: 50%;
        top: 100vh;
        transform: translate(-50%) scale(0);
        opacity: 0;
    }
}
@keyframes windowActionShow {
    0% {
        left: 50%;
        top: 100vh;
        transform: translate(-50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(0) scale(100%);
        opacity: 1;
    }
}



/* ---------------------------------
----------- WINDOWS MAIN -----------
--------------------------------- */
@keyframes windowActionLoad {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    80% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
    }
}



/* -----------------------------------
----------- WINDOWS ICONES -----------
----------------------------------- */
@keyframes windowIconReduce {
    0% {
        transform: translate(0, 0) scaleX(100%);
    }
    19% {
        transform: translate(50%, 0) scaleX(0);
    }
    20% {
        transform: translate(50%, -100%) scaleX(0);        
    }
    100% {
        transform: translate(0, 0) scaleX(100%);
    }
}
@keyframes windowIconEnlarge {
    0% {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        transform: translate(0, 0);
    }
    10% {
        width: 50%;
        height: 0;
        transform: translate(25%, 50%);
    }
    100% {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        transform: translate(0, 0);
    }
}
@keyframes windowIconClose {
    0% {
        transform: scale(100%) rotateZ(0);
    }
    10% {
        transform: scale(30%);
    }
    100% {
        transform: scale(100%) rotateZ(90deg);
    }
}



/* -------------------------------------------
----------- WINDOWS BROWSER ICONES -----------
------------------------------------------- */
@keyframes windowBrowserArrowPrevious {
    0% {
        transform: translateX(0);
    }
    19% {
        transform: translateX(calc(-100% - .27em));
    }
    20% {
        transform: translateX(calc(100% + .27em));
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes windowBrowserArrowNext {
    0% {
        transform: translateX(0);
    }
    19% {
        transform: translateX(calc(100% + .27em));
    }
    20% {
        transform: translateX(calc(-100% - .27em));
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes windowBrowserArrowUpdate {
    0% {
        transform: scale(100%) rotateZ(0);
    }
    10% {
        transform: scale(70%);
    }
    100% {
        transform: scale(100%) rotateZ(360deg);
    }
}
@keyframes windowBrowserIconSearch {
    0% {
        transform: scale(100%);
    }
    80% {
        transform: scale(150%) translate(-10%, 10%);
    }
    100% {
        transform: scale(100%);
    }
}
@keyframes windowBrowserIconFavoris {
    0% {
        transform: scale(100%) rotateZ(0);
    }
    10% {
        transform: scale(70%);
    }
    100% {
        transform: scale(100%) rotateZ(144deg);
    }
}




/* ---------------------------
----------- LOADER -----------
--------------------------- */
@keyframes iconSpinnerRotate {
    100% {
        transform: rotate(360deg);
    }
}  
@keyframes iconSpinnerDash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}





/* ########################################
###########################################
################# GENERAL #################
###########################################
######################################## */
* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'DMSans';
    font-weight: 400;
    font-size: var(--taille);
    margin: 0;
    color: var(--noir);
    width: 100%;
    height: 100%;
}

main {
    position: relative;
    background-image: url('ressources/img/fond/arriere-plan-windows.svg');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    min-width: 964px;
    min-height: 1394px;
    overflow: hidden;
}

h2, h3, h4 {
    font-weight: 700;
    font-size: 1em;
    margin: 0;
}

p {
    margin: 0;
}





/* =======================================
==========================================
================= NAVBAR =================
==========================================
======================================= */
.navbar {
    display: flex;
    position: fixed;
    /*left: 50%;*/
    bottom: 0;
    z-index: 0;
    /*transform: translateX(-50%);*/
    z-index: 10;

    width: 100%;
}
.navbar .navbar__content {
    display: flex;
    margin: auto;
    max-width: 100%;
}

.navbar .navbar__content .navbar__ico {
    position: sticky;
    width: 1.8em;
    flex: none;
    z-index: 1;
}
.navbar .navbar__content .navbar__ico .navbar__ico-border,
.navbar .navbar__content .navbar__ico .navbar__ico-fill {
    height: 100%;
    width: 100%;
    stroke-width: 3;
}
.navbar .navbar__content .navbar__ico .navbar__ico-border {
    fill: none;
    stroke: var(--noir);
    position: absolute;
    top: 0;
    left: 0;
}
.navbar .navbar__content .navbar__ico .navbar__ico-fill {
    fill: var(--gris-clair-1);
    stroke: var(--gris-clair-1);
}

.navbar .navbar__content .navbar__list-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: var(--gris-clair-1);
    border-top: solid var(--epaisseurPX) var(--noir);
    max-width: calc(100% - 3.6em);
}
.navbar .navbar__content .navbar__list {
    display: flex;
    gap: 1em;
    list-style-type: none;
    padding: 0;
    padding-bottom: .5em;
    margin: 0;
    margin-top: -1.82em;
    transition: all .2s ease;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link::after {
    content: '';
    position: relative;
    left: 50%;
    display: block;
    background-color: var(--gris-clair-3);
    width: .27em;
    height: .27em;
    border-radius: 99px;
    transform: translate(-50%);
    margin-top: .36em;
    opacity: 0;
    transition: all .2s ease;
}
.navbar .navbar__content .navbar__list .navbar__item:not(.navbar__item--open) .navbar__link:hover::after {
    opacity: 1;
}
.navbar .navbar__content .navbar__list .navbar__item.navbar__item--open .navbar__link::after {
    opacity: 1;
    width: .91em;
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link:active::after,
.navbar .navbar__content .navbar__list .navbar__item.navbar__item--open.navbar__item--selected .navbar__link::after {
    background-color: var(--noir);
    width: 1.82em;
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link .navbar__icon {
    width: 3.64em;
    transform: scale(90%);
    transition: all .2s ease;
}
.navbar .navbar__content .navbar__list .navbar__item:not(.navbar__item--open) .navbar__link .navbar__icon {
    transform: translateY(.63em) scale(90%);
}
.navbar .navbar__content .navbar__list .navbar__item.navbar__item--open .navbar__link:hover .navbar__icon {
    transform: scale(100%);
}
.navbar .navbar__content .navbar__list .navbar__item:not(.navbar__item--open) .navbar__link:hover .navbar__icon {
    transform: translateY(0) scale(100%);
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link .navbar__icon .navbar__icon-border {
    fill: var(--noir);
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link .navbar__icon .navbar__icon-background {
    fill: var(--gris-clair-1);
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link .navbar__icon .navbar__icon-shadow {
    fill: var(--noir);
}

.navbar .navbar__content .navbar__list .navbar__item .navbar__link:active .navbar__icon .navbar__icon-border,
.navbar .navbar__content .navbar__list .navbar__item--open.navbar__item--selected .navbar__link .navbar__icon .navbar__icon-border {
    fill: none;
}
.navbar .navbar__content .navbar__list .navbar__item .navbar__link:active .navbar__icon .navbar__icon-background,
.navbar .navbar__content .navbar__list .navbar__item--open.navbar__item--selected .navbar__link .navbar__icon .navbar__icon-background {
    fill: var(--noir);
}





/* =============================================
================================================
================= NOTIFICATION =================
================================================
============================================= */
.notification {
    position: fixed;
    z-index: 10;
    top: 15px;
    right: 15px;
    background-color: #FEFEFE99;
    backdrop-filter: blur(3px);
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .55em;
    width: 300px;
    overflow: hidden;
    transform-origin: top right;
    user-select: none;
    animation: .8s ease forwards;
    transform: scale(0);
    opacity: 0;
}
.notification__content {
    padding: .55em .73em .73em;
}
.notification .notification__content .notification__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-bottom: .27em;
}
.notification .notification__content .notification__header .notification__title {
    font-size: 1.15em;
}
.notification .notification__content .notification__header .notification__button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: .27em .27em;
    border-radius: .27em;
    transition: all .2s ease;
}
.notification .notification__content .notification__header .notification__button:hover {
    background-color: var(--rouge-1);
}
.notification .notification__content .notification__header .notification__button:active {
    background-color: var(--rouge-2);
}
.notification .notification__content .notification__header .notification__button .notification__icon {
    fill: none;
    height: .73em;
    stroke: var(--noir);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all .2s ease;
}
.notification .notification__content .notification__header .notification__button:hover .notification__icon {
    stroke: var(--blanc);
    animation: windowIconClose .5s ease;
}
.notification .notification__progress-input {
    position: relative;
    width: 100%;
    height: .36em;
    border-top: solid var(--epaisseurPX) var(--noir);
}
.notification .notification__progress-input .notification__progress-track,
.notification .notification__progress-input .notification__progress-bar {
    position: absolute;
    height: 100%;
}
.notification .notification__progress-input  .notification__progress-track {
    width: 100%;
    background-color: var(--gris-clair-4);
}
.notification .notification__progress-input  .notification__progress-bar {
    width: 0;
    background-color: var(--bleu-2);
}

.notification--show {
    animation-name: notificationActionShow;
}
.notification--show .notification__progress-input  .notification__progress-bar {
    animation: notificationProgressBarCountdown 5s linear forwards;
}
.notification--hide {
    animation-name: notificationActionHide;
}



/* =======================================
==========================================
================= WINDOW =================
==========================================
======================================= */
.window {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--gris-clair-1);
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .55em;
    overflow: hidden;
    box-shadow: .36em .36em 0 0 var(--noir);    width: 100%;
    user-select: none;
    animation: .8s ease forwards;
}

.window--dark {
    background-color: var(--gris-fonce-2);
}
.window--dark .window__main {
    height: 100%;
    color: var(--gris-clair-1);
}



.window--show {
    animation-name: windowActionShow;
}
.window--hide {
    animation-name: windowActionHide;
}



.window--large {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}





/* -----------------------------------------
--------------------------------------------
------------------ HEADER ------------------
--------------------------------------------
----------------------------------------- */
.window__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: .18em .55em;
    cursor: grab;
}
.window__header:active {
    cursor: grabbing;
}
.window .window__header {
    background-color: var(--gris-clair-2);
    border-bottom: solid var(--epaisseurPX) var(--noir);
}

.window__header .window__title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.window__header .window__button-list {
    display: flex;
}
.window__header .window__button-list .window__button-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: .27em .27em;
    border-radius: .27em;
    transition: all .2s ease;
}
.window__header .window__button-list .window__button-item:hover {
    background-color: var(--gris-clair-3);
}
.window__header .window__button-list .window__button-item:active {
    background-color: var(--gris-clair-4);
}
.window__header .window__button-list .window__button-item.window__button-item__close:hover {
    background-color: var(--rouge-1);
}
.window__header .window__button-list .window__button-item.window__button-item__close:active {
    background-color: var(--rouge-2);
}
.window__header .window__button-list .window__button-item .window__icon {
    fill: none;
    height: .73em;
    stroke: var(--noir);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all .2s ease;
}
.window__header .window__button-list .window__button-item.window__button-item__reduce:hover .window__icon path {
    animation: windowIconReduce .5s ease;
}
.window__header .window__button-list .window__button-item.window__button-item__enlarge:hover .window__icon rect {
    animation: windowIconEnlarge .5s ease;
}
.window__header .window__button-list .window__button-item.window__button-item__close:hover .window__icon {
    stroke: var(--blanc);
    animation: windowIconClose .5s ease;
}





/* -----------------------------------------
--------------------------------------------
------------------ NAVBAR ------------------
--------------------------------------------
----------------------------------------- */
.window__navbar {
    background-color: var(--gris-clair-3);
    border-bottom: solid var(--epaisseurPX) var(--noir);
    display: flex;
    align-items: center;
    gap: .55em;
    padding: .18em .55em;
}

.window__navbar .window__breadcrumb-list {
    font-size: .75em;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}
.window__navbar .window__breadcrumb-item:not(:last-child)::after {
    content: '>';
    margin: .18em;
}





/* ------------------------------------------
---------------------------------------------
------------------ BROWSER ------------------
---------------------------------------------
------------------------------------------ */

/* ---------------------------
----------- HEADER -----------
---------------------------- */
.window__browser .window__header {
    padding-bottom: 0;
}



/* -------------------------------
----------- BROWSERBAR -----------
-------------------------------- */
.window__browser .window__browserbar {
    background-color: var(--gris-clair-3);
    border-bottom: solid var(--epaisseurPX) var(--noir);
    padding: .36em .55em;
    display: flex;
    align-items: center;
    gap: .55em;
}
.window__browser .window__browserbar .window__arrow-list {
    display: flex;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .27em .27em;
    border-radius: .27em;
    overflow: hidden;
    transition: all .2s ease;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item--disabled {
    cursor: default;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item:not(.window__arrow-item--disabled):hover {
    background-color: var(--gris-clair-4);
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item .window__arrow {
    fill: none;
    height: .73em;
    stroke: var(--noir);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item--disabled .window__arrow {
    stroke: var(--gris-clair-5);
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item.window__arrow-item__update .window__arrow {
    height: 1em;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item:not(.window__arrow-item--disabled).window__arrow-item__previous:hover .window__arrow {
    animation: windowBrowserArrowPrevious .5s ease;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item:not(.window__arrow-item--disabled).window__arrow-item__next:hover .window__arrow {
    animation: windowBrowserArrowNext .5s ease;
}
.window__browser .window__browserbar .window__arrow-list .window__arrow-item.window__arrow-item__update:hover .window__arrow {
    animation: windowBrowserArrowUpdate .5s ease;
}

.window__browser .window__browserbar .window__searchbar {
    display: flex;
    flex: 1;
}
.window__browser .window__browserbar .window__searchbar .button:hover .button__icon {
    animation: windowBrowserIconSearch 1s ease;
}

.window__browser .window__browserbar .window__favoris-icon-parent {
    display: flex;
    cursor: pointer;
}
.window__browser .window__browserbar .window__favoris-icon-parent .window__favoris-icon {
    height: 1.36em;
}
.window__browser .window__browserbar .window__favoris-icon-parent .window__favoris-icon:hover {
    animation: windowBrowserIconFavoris .5s ease;
}





/* ---------------------------------------
------------------------------------------
------------------ MAIN ------------------
------------------------------------------
--------------------------------------- */
.window__main {
    /*min-height: 3.64em;*/
    height: 100%;
    max-height: none;
}
.window__main--load {
    animation: windowActionLoad .8s ease;
}

.window__content {
    padding: .55em .73em .73em;
}

.window__pane {
    display: none;
    flex-direction: column;
    height: 100%;
}
.window__pane--show {
    display: flex;
}







/* =======================================
==========================================
================= BUTTON =================
==========================================
======================================= */
.button__list {
    display: flex;
    flex-wrap: wrap;
    gap: .36em;
}
.button__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .36em;
}
.button__grid .button:last-child {
    grid-column: 1 / -1;
}



.button {
    display: flex;
    align-items: center;
    gap: .36em;
    padding: .36em .73em;
    background-color: var(--gris-clair-2);
    border: solid var(--epaisseurPX) var(--gris-clair-4);
    border-radius: .18em;
    cursor: pointer;
    transition: all .2s ease;
    font-size: inherit;
    font-family: inherit;
    font-weight: 500;
    color: var(--noir);
    text-decoration: none;
    overflow: hidden;
}

.button--big {
    border-radius: .23em;
}
.button--center {
    justify-content: center;
}
.button--square {
    padding: .36em;
}

.button--radius-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.button--blue {
    background-color: var(--bleu-2);
    border: solid var(--epaisseurPX) var(--bleu-3);
}
.button--blue:hover {
    background-color: var(--bleu-3);
    border-color: var(--bleu-4);
}
.button--blue .button__icon {
    stroke: var(--blanc);
}

.button--disabled {
    background-color: var(--gris-clair-4);
    border-color: var(--gris-clair-5);
    color: var(--gris-clair-5);
    cursor: default;
}
.button--disabled .button__icon {
    stroke: var(--gris-clair-5);
}



.button__icon {
    fill: none;
    height: 1em;
    stroke: var(--gris-clair-4);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button__icon--small {
    height: .55em;
}

.button__icon--text {
    stroke: var(--noir);
}







/* ======================================
=========================================
================= INPUT =================
=========================================
====================================== */
.input-text {
    background-color: var(--blanc);
    border: solid var(--epaisseurPX) var(--gris-clair-4);
    border-right: none;
    padding: .27em 0.73em;
    font-family: 'DMSans';
    font-weight: 400;
    font-size: .8em;
    border-radius: .23em;
    width: 100%;
}
.input-text--radius-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}







/* ========================================
===========================================
================= CHEVRON =================
===========================================
======================================== */
.chevron {
    width: .73em;
    fill: none;
    stroke: var(--gris-clair-1);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-90deg);
    transition: all .2s ease;
}







/* =====================================
========================================
================= TABS =================
========================================
===================================== */
.tabs__list {
    display: flex;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: calc(var(--epaisseurPX) * -1);
}

.tabs__list .tabs__item {
    display: flex;
    position: relative;
    min-width: 5em;
    max-width: 10.45em;
    cursor: pointer;
}
.tabs__list .tabs__item--close {
    display: none;
}
.tabs__list .tabs__item:not(.tabs__item--open)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--epaisseurPX);
    bottom: 0;
    background-color: var(--noir);
    z-index: 1;
}
.tabs__list .tabs__item .tabs__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .18em;
    flex: 1;
    background-color: var(--gris-clair-4);
    border-top: solid var(--epaisseurPX) var(--noir);
    overflow: hidden;
}
.tabs__list .tabs__item--open .tabs__content {
    background-color: var(--gris-clair-3);
    flex: 1;
    display: flex;
    align-items: center;
}
.tabs__list .tabs__item .tabs__content .tabs__title {
    color: var(--gris-fonce-2);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.tabs__list .tabs__item--open .tabs__content .tabs__title {
    color: var(--noir);
}
.tabs__list .tabs__item .tabs__content .tabs__close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: .27em .27em;
    border-radius: 99px;
    transition: all .2s ease;
}
.tabs__list .tabs__item .tabs__content .tabs__close-button:hover {
    background-color: var(--gris-clair-5);
}
.tabs__list .tabs__item--open .tabs__content .tabs__close-button:hover {
    background-color: var(--gris-clair-4);
}
.tabs__list .tabs__item .tabs__content .tabs__close-button .tabs__close-icon {
    fill: none;
    height: .55em;
    stroke: var(--gris-fonce-2);
    stroke-width: var(--epaisseurStroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all .2s ease;
}
.tabs__list .tabs__item--open .tabs__content .tabs__close-button .tabs__close-icon {
    stroke: var(--noir);
}
.tabs__list .tabs__item .tabs__ico {
    position: relative;
    width: .8em;
}
.tabs__list .tabs__item .tabs__ico .tabs__ico-border,
.tabs__list .tabs__item .tabs__ico .tabs__ico-fill {
    height: 100%;
    width: 100%;
    stroke-width: var(--epaisseurStroke);
}
.tabs__list .tabs__item .tabs__ico .tabs__ico-border {
    fill: none;
    stroke: var(--noir);
    position: absolute;
    top: 0;
    left: 0;
}
.tabs__list .tabs__item .tabs__ico .tabs__ico-fill {
    fill: var(--gris-clair-4);
    stroke: var(--gris-clair-4);
}
.tabs__list .tabs__item--open .tabs__ico .tabs__ico-fill {
    fill: var(--gris-clair-3);
    stroke: var(--gris-clair-3);
}






/* =======================================
==========================================
================= TOGGLE =================
==========================================
======================================= */
.toggle__list {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.toggle__list .toggle__item {
    display: flex;
}
.toggle__list .toggle__item .toggle__input {
    display: none;
}
.toggle__list .toggle__item .toggle__label {
    --largeur: 2.27em;
    --hauteur: 1.36em;
    --diametre: .91em;
    --ecart: calc((var(--hauteur) - var(--diametre)) / 2);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .36em;
    margin: 0;
    cursor: pointer;
}
.toggle__list .toggle__item .toggle__label::before {
    content: '';
    position: static;
    width: var(--largeur);
    height: var(--hauteur);
    border-radius: 99px;
    background-color: var(--gris-clair-3);
    border: solid var(--epaisseurPX) var(--gris-clair-4);
    transition: all .2s ease;
}
.toggle__list .toggle__item .toggle__input:checked ~ .toggle__label::before {
    background-color: var(--bleu-2);
    border-color: var(--bleu-3);
}
.toggle__list .toggle__item .toggle__label::after {
    content: '';
    position: absolute;
    left: var(--ecart);
    width: var(--diametre);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--gris-clair-4);
    border: solid var(--epaisseurPX) var(--gris-clair-5);
    transform: translateX(0);
    transition: all .2s ease;
}
.toggle__list .toggle__item .toggle__input:checked ~ .toggle__label::after {
    background-color: var(--bleu-3);
    border-color: var(--bleu-4);
    transform: translateX(calc(var(--largeur) - var(--diametre) - (var(--ecart) * 2)));
}







/* ======================================
=========================================
================= RANGE =================
=========================================
====================================== */
.range__list {
    display: table;
}
.range__list .range__item {
    display: table-row;
}
.range__list .range__item .range__label-parent,
.range__list .range__item .range__input-parent {
    display: table-cell;
    vertical-align: middle;
}
.range__list .range__item:not(:last-child) .range__label-parent,
.range__list .range__item:not(:last-child) .range__input-parent {
    padding-bottom: .36em;
}
.range__list .range__item .range__label-parent {
    padding-right: 1.09em;
}
.range__list .range__item .range__label-parent .range__label {
    white-space: nowrap;
}


.range__list .range__item .range__input-parent {
    width: 100%;
}

.range__list .range__item .range__input-parent .range__input {
    position: relative;
    width: 100%;
    height: .73em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.range__list .range__item .range__input-parent .range__input .range__track,
.range__list .range__item .range__input-parent .range__input .range__progress,
.range__list .range__item .range__input-parent .range__input .range__thumb {
    position: absolute;
    border-radius: 99px;
}
.range__list .range__item .range__input-parent .range__input .range__track,
.range__list .range__item .range__input-parent .range__input .range__progress {
    height: 100%;
}
.range__list .range__item .range__input-parent .range__input .range__track {
    width: 100%;
    background-color: var(--violet-1);
    border: solid var(--epaisseurPX) var(--violet-2);
}
.range__list .range__item .range__input-parent .range__input .range__progress {
    width: var(--pourcentage);
    background-color: var(--violet-3);
    border: solid var(--epaisseurPX) var(--violet-4);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.range__list .range__item .range__input-parent .range__input .range__thumb {
    left: var(--pourcentage);
    width: 1em;
    aspect-ratio: 1 / 1;
    background-color: var(--violet-3);
    border: solid var(--epaisseurPX) var(--violet-4);
    transform: translateX(-50%);
    transition: all .2s ease;
}
.range__list .range__item .range__input-parent .range__input .range__thumb:hover {
    transform: translateX(-50%) scale(120%);
}
.range__list .range__item .range__input-parent .range__input .range__thumb:active {
    transition-duration: 0s;
}

.range__list .range__item .range__input-parent .range__input .range__indicator-parent {
    display: none;
    position: absolute;
    bottom: -.27em;
    width: 100%;
    transform: translateY(-50%);
}
.range__list .range__item .range__input-parent .range__input .range__indicator-parent .range__indicator {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.18em 0.36em;
    border-radius: .23em;
    background-color: var(--blanc);
    transform: translateX(-50%);
    position: relative;
    left: var(--pourcentage);
    font-weight: 500;
    box-shadow: 0px 2px 8px var(--gris-clair-3);
    margin-bottom: .36em;
}
.range__list .range__item .range__input-parent .range__input .range__indicator-parent .range__indicator::after {
    content: '';
    position: absolute;
    bottom: -.36em;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: .36em .36em 0 .36em;
    border-color: white transparent transparent transparent;
}
.range__list .range__item .range__input-parent .range__input:hover .range__indicator-parent {
    display: block;
}




/* ###########################################
##############################################
################# SPECIFIQUE #################
##############################################
########################################### */

.window__profil:not(.window--large) {
    width: 37.21%;
    min-width: 358.78px;
    top: 54px;
    left: max(60.64px, 6.29%);
    z-index: 1;
}
.window__mobility:not(.window--large) {
    width: 20.40%;
    min-width: 196.69px;
    top: 29px;
    left: max(282.59px, 29.31%);
    z-index: 4;
}
.window__interests:not(.window--large) {
    width: 28.14%;
    min-width: 271.32px;
    top: 450px;
    left: max(29.15px, 3.02%);
    z-index: 5;
}
.window__studies:not(.window--large) {
    width: 43.46%;
    min-width: 419.03px;
    top: 39px;
    left: max(515.82px, 53.51%);
    z-index: 2;
}
.window__experiences:not(.window--large) {
    width: 46.65%;
    min-width: 449.74px;
    top: 325px;
    left: max(354.1px, 36.73%);
    z-index: 7;
}
.window__skills:not(.window--large) {
    width: 37.46%;
    min-width: 361.11px;
    top: 1000px;
    left: max(234px, 24.27%);
    z-index: 6;
}
.window__softwares:not(.window--large) {
    width: 25.81%;
    min-width: 248.77px;
    top: 900px;
    left: max(667.8px, 69.27%);
    z-index: 8;
}
.window__development:not(.window--large) {
    width: 80.04%;
    min-width: 771.59px;
    top: 747px;
    left: max(73.85px, 7.66%);
    z-index: 3;
}
.window__files:not(.window--large) {
    width: 20.9%;
    min-width: 200px;
    top: 461px;
    left: max(717px, 74.2%);
    z-index: 9;
}

@media (min-width: 1500px) {
    main {
        min-height: 900px;
    }

    .window__profil:not(.window--large) {
        width: 21.68%;
        left: 3.68%;
    }
    .window__mobility:not(.window--large) {
        width: 11.84%;
        left: 17.09%;
    }
    .window__interests:not(.window--large) {
        width: 16.42%;
        left: 1.75%;
    }
    .window__studies:not(.window--large) {
        width: 31.16%;
        left: 31.16%;
    }
    .window__experiences:not(.window--large) {
        width: 27.11%;
        top: 207px;
        left: 63.04%;
    }
    .window__skills:not(.window--large) {
        width: 21.8%;
        top: 538px;
        left: 32.9%;
    }
    .window__softwares:not(.window--large) {
        width: 15.04%;
        top: 99px;
        left: 81.34%;
    }
    .window__development:not(.window--large) {
        width: 46.56%;
        top: 305px;
        left: 23.2%;
    }
    .window__files:not(.window--large) {
        width: 11.35%;
        top: 576px;
        left: 86.2%;
    }
}







/* =======================================
==========================================
================= PROFIL =================
==========================================
======================================= */
.window__profil .profil__illustration {
    background-color: var(--jaune-2);
    border-bottom: solid var(--epaisseurPX) var(--noir);
    height: 6.82em;
    width: 100%;
    background-image: url('ressources/img/profil/illustration.svg');
    background-position: center;
    background-size: cover;
}

.window__profil .window__content {
    padding-bottom: 3.5em;
}

.window__profil .profil__photo-compteur {
    display: flex;
    gap: 1em;
    margin-bottom: .36em;
}
.window__profil .profil__photo-parent {
    display: flex;
    margin-top: calc(-6.82em / 2 - .55em - var(--epaisseurPX));
}
.window__profil .profil__photo {
    width: 6.82em;
    height: 6.82em;
    border-radius: 50%;
    border: solid var(--epaisseurPX) var(--noir);
    object-fit: cover;
    object-position: center;
}
.window__profil .profil__compteur-list {
    display: flex;
    gap: 1em;
}
.window__profil .profil__compteur-item {
    font-weight: 500;
    font-size: .8em;
}
.window__profil .profil__compteur-numero {
    font-weight: 700;
    font-size: 1.8em;
}


.window__profil .profil__informations {
    margin-bottom: 1.09em;
}
.window__profil .profil__nom {
    font-weight: 900;
    font-size: 2.2em;
    margin: 0;
}
.window__profil .profil__fonction {
    font-weight: 500;
    font-size: .8em;
}


.window__profil .profil__contact-list {
    display: flex;
    flex-direction: column;
    gap: .55em;
}
.window__profil .profil__contact-link {
    text-decoration: none;
    color: var(--noir);
    display: inline-flex;
    align-items: center;
    gap: .55em;
}
.window__profil .profil__contact-icon-parent {
    width: 1.82em;
    aspect-ratio: 1 / 1;
    background-color: var(--jaune-2);
    border-radius: 50%;
    border: solid var(--epaisseurPX) var(--jaune-3);
    display: flex;
    justify-content: center;
    align-items: center;
}
.window__profil .profil__contact-icon {
    fill: var(--noir);
    width: 100%;
    height: 100%;
    max-width: 1.09em;
    max-height: 1.09em;
}







/* ==========================================
=============================================
================= MOBILITES =================
=============================================
========================================== */







/* =========================================
============================================
================= INTERETS =================
============================================
========================================= */
.window__interests .window__main {
    max-height: 12.5em;
    overflow: auto;
}
.window__interests .interests__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(4.18em, 100%), 1fr));
    /*grid-template-columns: repeat(3, 1fr);*/
    gap: .73em;
}
.window__interests .interests__list .interests__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18em;
}
.window__interests .interests__list .interests__item .interests__icon {
    max-width: 3.64em;
}
.window__interests .interests__list .interests__item .interests__title {
    text-align: center;
    font-size: .75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}







/* ========================================
===========================================
================= STUDIES =================
===========================================
======================================== */
.window__studies .window__main {
    position: relative;
    display: flex;
    flex-direction: column;
}
.window__studies .window__main .window__content {
    border-bottom: solid var(--epaisseurPX) var(--noir);
}
.window__studies .window__main .window__content .studies__list {
    position: relative;
    display: table;
    width: 100%;
}
.window__studies .window__main .window__content .studies__list::before {
    content: '';
    position: absolute;
    width: .73em;
    height: 100%;
    background-image: url('ressources/img/formations/icn-transitions.svg');
    background-position: center;
    background-size: .18em .73em;
    background-repeat: repeat-y;
}
.window__studies .window__main .window__content .studies__list .studies__item {
    position: relative;
    display: table-row;
}
.window__studies .window__main .window__content .studies__list .studies__item::before {
    content: '';
    position: absolute;
    width: .73em;
}
.window__studies .window__main .window__content .studies__list .studies__item:first-child::before,
.window__studies .window__main .window__content .studies__list .studies__item:last-child::before {
    background-color: var(--gris-clair-1);
    height: 50%;
}
.window__studies .window__main .window__content .studies__list .studies__item:first-child::before {
    top: 0px;
}
.window__studies .window__main .window__content .studies__list .studies__item:last-child::before {
    bottom: 0px;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__marqueur,
.window__studies .window__main .window__content .studies__list .studies__item .studies__informations {
    display: table-cell;
    vertical-align: middle;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__informations {
    padding: .36em;
    border-radius: .36em;
    cursor: pointer;
    transition: all .2s ease;
    width: 100%;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__informations:hover {
    background-color: var(--gris-clair-2);
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__informations .studies__titre {
    font-weight: 600;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__informations .studies__details {
    font-size: .8em;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__marqueur {
    padding-right: 1.09em;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__marqueur::before {
    content: '';
    position: absolute;
}
.window__studies .window__main .window__content .studies__list .studies__item .studies__marqueur img {
    width: .73em;
    position: relative;
    z-index: 1;
}
.window__studies .window__main .studies__map-parent {
    flex: 1;
}
.window__studies .window__main .studies__map-parent .studies__map {
    width: 100%;
    height: 100%;
    min-height: 250px;
}
.mapboxgl-marker {
    width: 3em;
    height: 3em;
}

.window__studies.window--large .window__main .window__content {
    z-index: 1;
    position: absolute;
    top: .5em;
    left: .5em;
    margin-right: .5em;
    background-color: var(--gris-clair-1);
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .5em;
}







/* ============================================
===============================================
================= EXPERIENCES =================
===============================================
============================================ */
.window__experiences .window__main {
    max-height: 28em;
    overflow: auto;
}
.window__experiences.window--large .window__main {
    max-height: 100%;
}

.window__experiences .experience__list {
    display: flex;
    flex-direction: column;
    padding: .55em .73em .73em;
}
.window__experiences .experience__list .experience__item {
    padding: .36em;
    border-radius: .36em;
    display: flex;
    flex-direction: column;
    gap: .18em;
    cursor: pointer;
    transition: all .2s ease;
}
.window__experiences .experience__list .experience__item:hover {
    background-color: var(--gris-clair-2);
}
.window__experiences .experience__list .experience__item .experience__informations {
    display: flex;
    align-items: center;
    gap: .73em;
    font-size: .8em;
}
.window__experiences .experience__list .experience__item .experience__informations .experience__logo-parent {
    display: flex;
}
.window__experiences .experience__list .experience__item .experience__informations .experience__logo-parent .experience__logo {
    width: 1.59em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: solid var(--epaisseurPX) var(--noir);
    object-fit: cover;
    object-position: center;
}
.window__experiences .experience__list .experience__item .experience__titre {
    font-weight: 600;
}



.window__experiences .experience-detail {
    padding: .55em .73em .73em;
    flex-grow: 1;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-title {
    font-size: 1.59em;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-company {
    font-size: 1em;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-informations-list {
    display: grid;
    gap: .36em;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .73em;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-informations-list .experience-detail__work-informations-item {
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .36em;
    padding: 8px 12px;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-informations-list .experience-detail__work-informations-item:nth-child(4) {
    grid-column: 1 / -1;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-informations-list .experience-detail__work-informations-item .experience-detail__work-informations-title {
    margin-bottom: .18em;
}
.window__experiences .experience-detail .experience-detail__work .experience-detail__work-description {
    margin-top: 1em;
}
.window__experiences .experience-detail .experience-detail__company {
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .36em;
    margin-top: 1.36em;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations {
    display: flex;
    align-items: center;
    gap: .73em;
    padding: .55em .73em .73em;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations .experience-detail__company-detail {
    flex: 1;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations .experience-detail__company-detail .experience-detail__company-name {
    font-size: 1.59em;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations .experience-detail__company-detail .experience-detail__company-activity {
    font-size: .91em;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations .experience-detail__company-logo-parent {
    display: flex;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-informations .experience-detail__company-logo-parent .experience-detail__company-logo {
    width: 2.27em;
    aspect-ratio: 1 / 1;
    border: solid var(--epaisseurPX) var(--noir);
    border-radius: .36em;
    object-fit: contain;
    object-position: center;
}
.window__experiences .experience-detail .experience-detail__company .experience-detail__company-description {
    border-top: solid var(--epaisseurPX) var(--noir);
    padding: .55em .73em .73em;
}



.window__experiences .experience-navbar {
    position: sticky;
    bottom: 0;
    padding: .55em .73em .73em;
    margin-top: 1em;
    border-top: solid var(--epaisseurPX) var(--noir);
    background-color: var(--gris-clair-1);
}






/* ============================================
===============================================
================= COMPETENCES =================
===============================================
============================================ */







/* ==========================================
=============================================
================= LOGICIELS =================
=============================================
========================================== */
.window__softwares .software__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(2.73em, 100%), 1fr));
    /*grid-template-columns: repeat(4, 1fr);*/
    gap: .73em;
}
.window__softwares .software__list .software__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.window__softwares .software__list .software__item .software__logo {
    max-width: 2.73em;
    border-radius: .55em;
    border: solid var(--epaisseurPX) var(--couleur);
    box-shadow: .18em .18em 0 0 var(--couleur);
}







/* ==============================================
=================================================
================= DEVELOPPEMENT =================
=================================================
============================================== */
.window__development .window__main {
    height: 29.55em;
}
.window__development .development__content {
    display: flex;
    height: 100%;
}
.window__development.window--large .window__main {
    height: 100%;
}



/* ------------------------------------------
---------------------------------------------
------------------ SIDEBAR ------------------
---------------------------------------------
------------------------------------------ */
.window__development .development__sidebar {
    min-width: 12em;
    padding: .36em .55em .55em;
    border-right: solid var(--epaisseurPX) var(--noir);
    background-color: var(--gris-fonce-3);
    overflow: auto;
}
.window__development .development__dossier-list,
.window__development .development__fichier-list {
    display: flex;
    flex-direction: column;
}
.window__development .development__dossier-header,
.window__development .development__fichier-item {
    display: flex;
    align-items: center;
    gap: .55em;
    border-radius: .18em;
    padding: .09em .36em;
    cursor: pointer;
    transition: all .2s ease;
}
.window__development .development__dossier-header:hover,
.window__development .development__fichier-item:hover {
    background-color: var(--gris-fonce-2);
}
.window__development .development__fichier-item--active {
    background-color: var(--gris-fonce-1);
}
.window__development .development__dossier-titre,
.window__development .development__fichier-titre {
    font-weight: 400;
    margin: 0;
    flex: 1;
}
.window__development .development__dossier-item .development__dossier-main {
    display: none;
}
.window__development .development__dossier-item--open .development__dossier-header .chevron {
    transform: rotate(0);
}
.window__development .development__dossier-item--open .development__dossier-main {
    display: block;
}
.window__development .development__dossier-main {
    padding-left: .55em;
}
.window__development .development__fichier-logo {
    width: 1.09em;
}
.window__development .development__fichier-icon {
    width: 1em;
    fill: white;
    stroke: white;
}
.window__development .development__fichier-icon__spinner {
    animation: iconSpinnerRotate 2s linear infinite;
}
.window__development .development__fichier-icon__spinner .development__fichier-icon__spinner-stroke {
    stroke: hsl(210, 70, 75);
    stroke-linecap: round;
    animation: iconSpinnerDash 1.5s ease-in-out infinite;
}



/* ---------------------------------------
------------------------------------------
------------------ MAIN ------------------
------------------------------------------
--------------------------------------- */
.window__development .development__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* -------------------------
----------- TABS -----------
------------------------- */
.window__development .development__tabs {
    background-color: var(--gris-fonce-3);
    border-bottom: solid var(--epaisseurPX) var(--noir);
    padding: .18em .55em;
    padding-bottom: 0;
}
.window__development .development__tabs .tabs__list .tabs__item:not(.tabs__item--open)::before {
    background-color: var(--noir);
}
.window__development .development__tabs .tabs__list .tabs__item .tabs__content {
    background-color: var(--gris-fonce-4);
}
.window__development .development__tabs .tabs__list .tabs__item--open .tabs__content {
    background-color: var(--gris-fonce-2);
}
.window__development .development__tabs .tabs__list .tabs__item .tabs__content .tabs__close-button:hover {
    background-color: var(--gris-fonce-5);
}
.window__development .development__tabs .tabs__list .tabs__item--open .tabs__content .tabs__close-button:hover {
    background-color: var(--gris-fonce-3);
}
.window__development .development__tabs .tabs__list .tabs__item .tabs__content .tabs__close-button .tabs__close-icon {
    stroke: var(--gris-clair-5);
}
.window__development .development__tabs .tabs__list .tabs__item--open .tabs__content .tabs__close-button .tabs__close-icon {
    stroke: var(--blanc);
}
.window__development .development__tabs .tabs__list .tabs__item .tabs__content .tabs__title {
    color: var(--gris-clair-5);
    font-weight: 500;
}
.window__development .development__tabs .tabs__list .tabs__item--open .tabs__content .tabs__title {
    color: var(--blanc);
}
.window__development .development__tabs .tabs__list .tabs__item .tabs__ico .tabs__ico-fill {
    fill: var(--gris-fonce-4);
    stroke: var(--gris-fonce-4);
}
.window__development .development__tabs .tabs__list .tabs__item--open .tabs__ico .tabs__ico-fill {
    fill: var(--gris-fonce-2);
    stroke: var(--gris-fonce-2);
}



/* ----------------------------
----------- EDITEUR --------------
---------------------------- */
.window__development .development__editeur {
    flex: 1;
    overflow: auto;
}
.window__development .development__editeur .development__code {
    display: flex;
    gap: .73em;
    padding: .55em .73em .73em;
    font-family: 'Consolas', Courier, monospace;
}


/* ----------------
----- NUMEROS -----
---------------- */
.window__development .development__numero-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: var(--gris-clair-4);
}
.window__development .development__numero-list .development__numero-item {
    padding: 0;
}



/* ---------------
----- LIGNES -----
--------------- */
.window__development .development__ligne-list .development__ligne-item {
    white-space: nowrap;
}
.window__development .development__ligne-list .development__bloc {
    /*border: solid rgba(255, 0, 0, 0.4) 1px;*/
}

.window__development .development__ligne-list .development__child {
    padding-left: 1.82em;
}



/* HTML */
.window__development .development__ligne-item .development__brackets-html {
    color: var(--code-gray);
}
.window__development .development__ligne-item .development__tag-html {
    color: var(--code-tufts-blue);
}
.window__development .development__ligne-item .development__attribute-html {
    color: var(--code-pale-azure);
}
.window__development .development__ligne-item .development__operators-html {
    color: var(--code-silver);
}
.window__development .development__ligne-item .development__value-html {
    color: var(--code-persian-orange);
}
.window__development .development__ligne-item .development__content-html {
    color: var(--code-white);
}

/* CSS */
.window__development .development__ligne-item .development__brackets-css {
    color: var(--code-gold);
}
.window__development .development__ligne-item .development__parenthesis-css {
    color: var(--code-african-violet);
}
.window__development .development__ligne-item .development__selector-css {
    color: var(--code-citron);
}
.window__development .development__ligne-item .development__operators-css {
    color: var(--code-silver);
}
.window__development .development__ligne-item .development__property-css {
    color: var(--code-pale-azure);
}
.window__development .development__ligne-item .development__function-css {
    color: var(--code-vanilla);
}
.window__development .development__ligne-item .development__variable-css {
    color: var(--code-pale-azure);
}
.window__development .development__ligne-item .development__value-text-css {
    color: var(--code-persian-orange);
}
.window__development .development__ligne-item .development__value-number-css {
    color: var(--code-celadon);
}
.window__development .development__ligne-item .development__requests-css {
    color: var(--code-african-violet);
}

/* JavaScript */
.window__development .development__ligne-item .development__declaration-js {
    color: var(--code-tufts-blue);
}
.window__development .development__ligne-item .development__function-js {
    color: var(--code-citron);
}
.window__development .development__ligne-item .development__variable-js {
    color: var(--code-pale-azure);
}
.window__development .development__ligne-item .development__condition-js {
    color: var(--code-african-violet);
}
.window__development .development__ligne-item .development__string-js {
    color: var(--code-persian-orange);
}
.window__development .development__ligne-item .development__operators-js {
    color: var(--code-silver);
}
.window__development .development__ligne-item .development__brackets-js {
    color: var(--code-gold);
}








/* =========================================
============================================
================= FICHIERS =================
============================================
========================================= */
.window__files .files__text {
    margin-bottom: 1em;
}