/* Conteneur global */
.introduction-container {
    display: flex;
    width: 100%;
    height: calc(100vh - 70px); /* prend toute la hauteur visible (moins la navbar) */
}

/* Bloc gauche (présentation) */
.left-introduction-container {
    flex: 0 0 30%; /* occupe 30% */
    background: linear-gradient(135deg, #03395B, #021b2f); 
    color: #ffffff;
    padding: 30px;
    border-radius: 0; /* supprime les arrondis pour occuper toute la page */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.left-introduction-container h1 {
    margin-bottom: 15px;
    background-color: #021b2f;
    padding: 12px 20px;
    border-radius: 12px;
    color: #00c2e5;
    text-align: center;
}

.left-introduction-container h2 {
    color: #ffa600e3;
}

.left-introduction-container p {
    color: #cfd1d1;
}

/* Bloc droit (CV) */
.right-introduction-container {
    flex: 0 0 70%; /* occupe 70% */
    background: #b4b4b4;
    padding: 30px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-introduction-container h1 {
    color: #00c2e5;
    text-align: center;
    background-color: #38383d;
    padding: 5px;
    border-radius: 10px 10px 0px 0px;
}

.stage-container {
    display: flex;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    flex: 20% 0 0;
    background: #03395bd5;
    color: #00c2e5;
}

.title-container h1 {
    margin-bottom: 15px;
    background-color: #021b2f;
    padding: 12px 20px;
    border-radius: 12px;
    color: #00c2e5;
    text-align: center;
}

.left-stage-container, .right-stage-container {
    display: flex;
    flex: 40% 0 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    gap: 15px;
}

.left-stage-container {
    background: #41789d;
}

.right-stage-container {
    background: #375b7f;
}

.left-stage-container img, .right-stage-container img {
    width: 250px;
    height: 250px;
    object-fit: contain;      /* contain garde les proportions de l'image */
    border-radius: 12px;
}

.nom-entreprise {
    color: #85efff;
}

.date-stage {
    color: lightblue;
}

.experience-stage {
    color: white;
}

/* Responsive : en mobile, passe en colonne */ 
@media (max-width: 900px) { 
    .introduction-container, .stage-container { 
        flex-direction: column; 
        height: auto; 
    } 

    .left-introduction-container, .right-introduction-container, .left-stage-container, .right-stage-container { 
        flex: 1 1 100%; 
    } 
}