.about-section { padding: 80px 0; }

.photo-container {
    position: relative; display: inline-block;
    user-select: none;
}

.photo-profil {
    width: 250px; height: 250px;
    border-radius: 50%;
    object-fit: cover; object-position: top;
    border: 5px solid var(--couleur-primaire);
    box-shadow: var(--ombre-moyenne);
    transition: var(--transition);
}
.photo-profil:hover { transform: scale(1.05); }
.about-content { padding-left: 20px; }

.competences-section { padding: 80px 0; user-select: none; }
.competences-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; }

.competence-item {
    background: white; padding: 15px;
    border-radius: var(--arrondi); text-align: center;
    box-shadow: var(--ombre-legere); transition: var(--transition);
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 100px;
}
.competence-item:hover {
    transform: translateY(-5px); box-shadow: var(--ombre-moyenne);
    background-color: var(--couleur-primaire);
}
.competence-item:hover i, .competence-item:hover span { color: white; }

.competence-item i { font-size: 2rem; color: var(--couleur-primaire); margin-bottom: 10px; display: block; transition: var(--transition); }
.competence-item span { font-weight: 500; color: var(--couleur-texte); transition: var(--transition); }

#competences h4 {
    color: var(--couleur-primaire); font-size: 1.5rem; text-align: center;
    margin-bottom: 1.5rem; position: relative; padding-bottom: 10px;
}
#competences h4::after {
    content: ""; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 50px; height: 2px; background-color: var(--couleur-accent);
}

.creations-section { padding: 80px 0; }

.carte-creation {
    background-color: white; border-radius: var(--arrondi);
    overflow: hidden; box-shadow: var(--ombre-legere);
    transition: var(--transition); display: flex; flex-direction: column;
    height: 100%; cursor: pointer; user-select: none;
}
.carte-creation:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); z-index: 10;
}

.image-creation {
    height: 200px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 3rem;
}

.image-creation.web { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.image-creation.design { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.image-creation.maquettes { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.image-creation.cms { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.image-creation.three-d { background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%); }

.carte-creation .card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.carte-creation .card-text { flex-grow: 1; margin-bottom: 20px; }

.contact-section { padding: 80px 0; }
.contact-form-container {
    background: white; padding: 40px;
    border-radius: var(--arrondi); box-shadow: var(--ombre-moyenne);
}
.form-control {
    border: 2px solid #e9ecef; border-radius: var(--arrondi);
    padding: 12px 15px; transition: var(--transition);
}
.form-control:focus {
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 0.2rem rgba(47, 42, 134, 0.25);
}
.form-label { font-weight: 500; color: var(--couleur-texte); margin-bottom: 8px; }

#projectsModal .modal-dialog { max-width: 80%; margin: 1.5rem auto; }
#projectsModal .modal-header { background-color: var(--couleur-primaire); color: white; }

@media (max-width: 768px) {
    .competences-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .creations-section .row { display: flex; flex-direction: column; gap: 20px; }
    .carte-creation { min-height: 400px; }
}