/* Réinitialisation des styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0 !important;
}

/*theme global sombre / claire */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Thème clair */
.light-theme {
    --bg-color: rgb(226 232 240);
    --text-color: #000000;
    --border-color:  rgb(148 163 184);
    --light-secondary-color : rgb(203, 213, 225);
    --button-color : rgb(158, 174, 196);
}

/* Thème sombre */
.dark-theme {
    --bg-color: rgb(17 24 39);
    --text-color:rgb(209 213 219);
    --border-color:  rgb(3 7 18);
    --dark-secondary-color : rgb(55, 65, 81);
    --button-color : rgb(107 114 128);
}

.light-theme nav{
    background: var(--light-secondary-color);
    transition: all .6s;
}

.dark-theme nav{
    background: var(--dark-secondary-color);
    transition: all .6s;
}
/* Button */

.light-theme button{
    background-color: var(--button-color);
    border: var(--border-color) 2px;
    padding: 10px 30px;
    border-radius: 8px;
    transition: all .6s;
}


.light-theme button:hover{
    background-color: rgb(130, 145, 167);
    transition: all .6s;
}

/* Thème sombre */
.dark-theme button{
    background-color: var(--button-color);;
    border: var(--border-color) 2px;
    padding: 10px 30px;
    border-radius: 8px;
    color: white;
    transition: all .6s;
}

.dark-theme button:hover{
    background-color: rgb(82, 88, 100);
    transition: all .6s;
}

.light-theme header button{
    background: var(--light-secondary-color);
    padding: 10px 6px;
    transition: all .6s;
}

.dark-theme header button{
    background: var(--dark-secondary-color);
    padding: 10px 6px;
    transition: all .6s;
}

.light-theme .close{
    background: var(--light-secondary-color);
    padding: 10px 6px;
    transition: all .6s;
}

.dark-theme .close{
    background: var(--dark-secondary-color);
    padding: 10px 6px;
    transition: all .6s;
}


.light-theme span .red{
    background-color: rgb(254 202 202);
}

.light-theme span .blue{
    background-color: rgb(125 211 252);
}

.dark-theme span{
	background-color: rgb(55 65 81);
}

#presentation{
    
}

.dark-theme #presentation{
    background-color: var(--dark-secondary-color);
    transition: all .6s;
}

.light-theme #presentation{
    background: var(--light-secondary-color);
    transition: all .6s;
}



/* projet */
.light-theme .project-card{
border: 1px solid rgb(213 209 219);
}

.light-theme .project-card:hover{
    background: rgb(203 213 225);
}

.dark-theme .project-card{
	background: var(--dark-secondary-color);
}

.dark-theme .project-card:hover {
    background-color: rgb(107, 114, 128);
}

.light-theme .project-card span{
    background: var(--light-secondary-color);
}
    
    
.dark-theme .project-card span{
    background: #333333;
}


.light-theme .exp-job{
    background: var(--light-secondary-color);
    transition: all .3s;
}

.dark-theme .exp-job{
    background: var(--dark-secondary-color);
    transition: all .3s;
}

.light-theme .exp-scool{
    background: var(--light-secondary-color);
    transition: all .3s;
}

.dark-theme .exp-scool{
    background: var(--dark-secondary-color);
    transition: all .3s;
}


.modal hr{
    background-color: var(--button-color);
}
.dark-theme .modal{
    background-color: rgb(30, 38, 55);
    color: rgb(226, 232, 240); 
}

.light-theme .modal {
    background-color: rgb(240, 248, 255);
    color: rgb(17, 24, 39); 
}

.dark-theme .modal .ticket{
    background: var(--button-color);
}

.light-theme .modal .ticket{
    background: transparent !important;
}

#competence{
    font-size: 200%;
    padding-top: 8%;
    text-align: center;
}


.skills-list li {
    margin-bottom: 10px;
    font-size: 18px;
    padding: 15px 25px;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
}

.light-theme .skills-list li {
    background: var(--light-secondary-color);
}
.light-theme .skills-list li:hover {
    background: rgb(130, 145, 167);
    cursor: none;
}


.dark-theme .skills-list li{
    background-color: var(--dark-secondary-color)
}

.dark-theme .skills-list li:hover {
    background-color: transparent;
    cursor: none;
}



.light-theme .veille-technologique {
    background: var(--light-secondary-color);
    transition: all .3s;
}

.dark-theme .veille-technologique{
    background: var(--dark-secondary-color);
    transition: all .3s;
}



/* Veille   */



.article-card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 21vw;
}

@media screen and (max-width: 768px) {
    .article-card{
        max-width: 80vw;
    }
  }

.light-theme .article-card {
    background: var(--light-secondary-color);
    color: var(--text-color);
    transition: all .3s;
}

.light-theme .article-card {
    background: var(--light-secondary-color);
    transition: all .3s;
}

.dark-theme .article-card{
    background: var(--dark-secondary-color);
    transition: all .3s;
}

.dark-theme .article-card .article-description{
    color: var(--);
    opacity: .9;
}


.article-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-content {
    padding: 20px;
}

.article-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}