:root{
    /* --couleur-header-normal:#CDC1FF;
    --couleur-body-normal:#ded8fd;
    --couleur-footer-normal:#A594F9;
    --couleur-text-normal:#000000; */

    --couleur-header-normal: #EDE4FF;     /* Violet très clair pour l'en-tête */
    --couleur-body-normal: #F8F4FF;       /* Presque blanc avec une teinte mauve */
    --couleur-footer-normal: #D5C4F1;     /* Violet pastel */
    --couleur-text-normal: #2A103D;       /* Texte violet foncé lisible */
    --couleur-text-2-normal: #6C4C9E;     /* Texte secondaire doux */

    --couleur-primary-normal: #9B5DE5;    /* Même couleur que le mode sombre (logo réseaux) */
    --couleur-secondary-normal: #A865E1;  /* Variante plus claire du violet secondaire */
    --couleur-accent-normal: #00C4B4;     /* Turquoise plus doux (accent) */


    --couleur-header-dark:#1E0F2F;
    --couleur-body-dark:#2B1B3D;
    --couleur-footer-dark:#140B1A;
    --couleur-text-dark:#F5F5F5;
    --couleur-text-2-dark:#B8AFC7;
    --couleur-primary-dark:	#9B5DE5; /* Logo Réseaux */
    --couleur-secondary-dark:#5F2C82;
    --couleur-accent-dark:#00F5D4;
}

.triangleImage:hover{
    scale: 1.3;
}
.triangleImage:hover{
    filter: invert(64%) sepia(17%) saturate(2232%) hue-rotate(135deg) brightness(90%) contrast(96%);
}
.dark .triangleImage:hover{
    filter: invert(78%) sepia(46%) saturate(556%) hue-rotate(118deg) brightness(105%) contrast(101%);
}

.icon {
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.icon:hover {
  transform: scale(1.2);
  filter: brightness(1.3) drop-shadow(0 0 5px var(--couleur-accent-dark));
}


*{
    text-decoration: none;
    list-style: none;
}

nav a:hover {
    text-decoration-color: var(--couleur-accent-normal);
}

.dark nav a:hover {
    text-decoration-color: var(--couleur-accent-dark);
}

.navActuel, #navActuelPhone{
    color: var(--couleur-text-2-dark);
}

.dark .navActuel, .dark #navActuelPhone{
    color: var(--couleur-text-2-dark);
}


body{
    background-color: var(--couleur-body-normal);
}

body.dark{
    background-color: var(--couleur-body-dark);
}

header, .divFleche, #headerPhone{
    background-color: var(--couleur-header-normal);
}

.dark header, .dark .divFleche, .dark #headerPhone{
    background-color: var(--couleur-header-dark);
}

*{
    color: var(--couleur-text-normal);
}

.dark *{
    color: var(--couleur-text-dark);
}

footer{
    background-color: var(--couleur-footer-normal);
}

.dark footer{
    background-color: var(--couleur-footer-dark);
}


#switch_mode{
    cursor: pointer;
}

select,select>*, input[type=submit]{
    background-color: var(--couleur-secondary-normal);
    cursor: pointer;
    border-radius: 0.8vw;
    &:hover{
        -webkit-appearance: none;
        appearance: none;
    };
    &:focus {
    outline: none;
    };
}

.dark select,.dark select>*, .dark input[type=submit]{
    background-color: var(--couleur-secondary-dark);
    border-color: var(--couleur-footer-dark);
}

.aProject, .aSkill, #description, #lesImages, input, textarea, .aProjectLittle, .event, .pop.soon, .pop.during, .imagesEventPop{
    background-color: var(--couleur-secondary-normal);
    border-color: var(--couleur-header-normal);
    color: var(--couleur-text-normal);
}

.dark .aProject, .dark .aSkill, .dark #description, .dark #lesImages, .dark input, .dark textarea, .dark .aProjectLittle, .dark .event, .dark .pop.soon, .dark .pop.during, .dark .imagesEventPop{
    background-color: var(--couleur-secondary-dark);
    border-color: var(--couleur-header-dark);
    color: var(--couleur-text-dark);
}

.aProject, .aSkill, .aProjectLittle, .event{
    box-shadow: var(--couleur-secondary-normal) 0px 0px 0.25em, var(--couleur-secondary-normal) 0px 0.25em 1em;
    color: var(--couleur-text-normal);
}

.aProject:hover, .aSkill:hover, .aProjectLittle:hover, .divFleche:hover, .event:hover{
    box-shadow: var(--couleur-accent-normal) 0px 20px 30px -10px;
    color: var(--couleur-text-normal);
    border-color: var(--couleur-accent-normal);
}

.dark .aProject,.dark .aSkill,.dark .aProjectLittle, .dark .event{
    box-shadow: var(--couleur-secondary-dark) 0px 0px 0.25em, var(--couleur-secondary-dark) 0px 0.25em 1em;
    color: var(--couleur-text-dark);
}

.dark .aProject:hover, .dark .aSkill:hover, .dark .aProjectLittle:hover, .dark .divFleche:hover, .dark .event:hover{
    box-shadow: var(--couleur-accent-dark) 0px 20px 30px -10px;
    color: var(--couleur-text-dark);
    border-color: var(--couleur-accent-dark);
}

/* 
.pop.soon{
    background-color: #4caf50;
}

.pop.during{
    background-color: red;
} */

#description, #lesImages{
    border-radius: 1vw;
    border-width: 0.3vw;
    border-style: solid;
}

::-webkit-scrollbar {
    height: 0.5em;
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background: var(--couleur-footer-normal);
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-track, .dark::-webkit-scrollbar-track{
    background: var(--couleur-footer-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--couleur-accent-normal);
    border-radius: 10px; 
}

.dark ::-webkit-scrollbar-thumb, .dark::-webkit-scrollbar-thumb {
    background: var(--couleur-accent-dark);
}

input[type=submit]:disabled{
    background-color: var(--couleur-text-2-normal) !important;  /* Gris clair */
    color: #666 !important;             /* Texte plus sombre */
}

.dark input[type=submit]:disabled{
    background-color: var(--couleur-text-2-dark) !important;  /* Gris clair */
    color: #666 !important;             /* Texte plus sombre */
}

/* Partie non remplie */

progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    border-radius: 1vw;

    background-color: var(--couleur-text-dark);

    overflow: hidden;
}

progress::-webkit-progress-bar{
    background-color: var(--couleur-text-dark);
}

/* Partie remplie */

progress::-webkit-progress-value {
    background-color: var(--couleur-accent-normal);
}
  
progress::-moz-progress-bar {
    background-color: var(--couleur-accent-normal);
}
  
progress::-ms-fill {
    background-color: var(--couleur-accent-normal);
}

/* Partie non remplie */

.dark progress{
    background-color: var(--couleur-text-dark);
}

.dark ::-webkit-progress-bar{
    background-color: var(--couleur-text-dark);
}

/* Partie remplie */

.dark progress::-webkit-progress-value {
    background-color: var(--couleur-accent-dark);
}
  
.dark progress::-moz-progress-bar {
    background-color: var(--couleur-accent-dark);
}
  
.dark progress::-ms-fill {
    background-color: var(--couleur-accent-dark);
}