/* //////////////// */
/* VARIABLES UTILES */
/* //////////////// */

:root {

    /* ANCIENNES VARIABLES FACTORYTHMES */

    /*
    --jaune: #ffd700;
    --orange: #ffae42;
    --ardoise: #202325;
    --dark_ardoise: #151616;
    --blanc: #f5f5f5;
    --input_select: #525252;
    --input_bg:#000000;
    */

    /* VARIABALES UTILITAIRES */

    --text-light: #F8F8F8; /* Texte principal sur fond sombre */
    --text-dark: #222222; /* Texte principal sur fond clair */
    --text-muted: #A0A0A0; /* Texte secondaire (infos, placeholders...) */
    --bg-light: #FAF3E0; /* Fond clair */
    --bg-medium: #2C2C2C; /* Fond intermédiaire */
    --bg-dark: #1A1A1A; /* Fond sombre */
    --bg-highlight: #5A4033; /* Fond pour éléments mis en avant */
    --border-light: #D5C4B6; /* Bordures sur fond clair */
    --border-dark: #40362F; /* Bordures sur fond sombre */
    --hover-effect: #C8A27C; /* Effet hover */

    /* NOUVELLES VARIABLES HAZELNOTE */

    --light-black: #353535;
    --norm-black: #1D1D1D;
    --dark-black: #131313;
    --norm-white: #F4F4F4;
    --dark-brown: #534741;
    --brown: #A67C52;
    --light-brown: #C69C6D;
    --dull-brown: #C7B299;
    --fur-light: #EDEDED;
    --fur-dull: #E5E0C5;
    --museau: #CD9B9B;
    --dark-museau: #BA7070;
    --liens: #4789E0;
    --liens2: #024397;

    /* SATURATED */
    --satur-museau: #d63b4f;
    --satur-rouge: #cf2a2a;
    --satur-orange: #db7c23;
    --satur-jaune: #da9820;
    --satur-download: #4CAF50;


}


/* ///////////////////// */
/* TOUTES LES STRUCTURES */
/* ///////////////////// */

* {
    box-sizing: border-box;
}

/* CORPS DE PAGE */
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--light-black);
    color: #E0E0E0;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::after {
    content: '';
    background-image: url(./style_medias/backgrounds/bitmap_hazelnote_1.png);
    opacity: 0.1;
    background-repeat: repeat;
    background-position: bottom left;
    background-size: auto;
    background-attachment: fixed;
    mix-blend-mode: color-burn;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
}

header {
    background: linear-gradient(135deg, var(--dark-brown), var(--fur-light));
    color: white;
    text-align: center;
    padding: 20px 10px;
    width: 100%;
    align-self: flex-start;
}

/* PARTIE PRINCIPALE */
main {
    flex: 1;
    display: flex;
}

/* PIED DE PAGE */
footer {
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, var(--bg-dark), var(--dark-brown));
    color: white;
    
}


/* //////////////// */
/* TOUTES LES PAGES */
/* //////////////// */

section {
    background-color: var(--norm-black);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(253, 253, 253, 0.3);
    width: 500px;
}

h2 {
    color: var(--satur-museau);
    border-bottom: 2px solid var(--satur-museau);
    padding-bottom: 5px;
}

/* Formulaires */
form {
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin-top: 10px;
}

input, select, button {
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
}

input, select {
    background-color: #2A2A2A;
    color: white;
    border: 1px solid var(--satur-museau);
}

button {
    background-color: var(--satur-museau);
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: var(--dark-museau);
}



/* ///////////////////// */
/* PAGE D'IDENTIFICATION */
/* ///////////////////// */

.identification {

    margin-top: 82px;
    width: 380px;
    height: 100%;
    justify-self: center;
    align-self: center;

}

.join_area a {
    color: var(--liens);
}

/* //////////// */
/* PAGE D'AJOUT */
/* //////////// */

/* En-tête */
.add_header {
    background: linear-gradient(135deg, var(--dark-brown), var(--bg-dark));
    color: white;
    text-align: center;
    padding: 20px 10px;
}

.add_header h1 {
    margin: 0;
    font-size: 2.5rem;
}

.add_header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Contenu principal */  
.add {
    width: 100%;
    justify-content: space-;
    gap: 4rem;
    margin: auto;
    padding: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
}

.recherche {
    grid-area: 1/1/2/2;
}

.import {
    grid-area: 1/2/2/3;
}

.manuellement {
    grid-area: 1/3/2/4;
}


/* Tableaux */
.tasks_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}

.tasks_table th, .tasks_table td {
    border: 1px solid var(--liens);
    padding: 3px;
    text-align: center;
}

.tasks_table th {
    background-color: var(--liens);;
    color: black;
}

.tasks_table td > * {
    padding: 6px;
}


.tasks_table tr:nth-child(even) {
    background-color: #2A2A2A;
}

.tasks_table a {
    background-color: var(--liens);
    color: var(--fur-light);
    font-weight: 500;
    display: block;
    width: 100%;
    height: 100%;
}

.tasks_table a:hover {
    background-color: var(--liens2);
    color: var(--fur-light);
    font-weight: 500;
    display: block;
    width: 100%;
    height: 100%;
}