/**************  STYLE PAGE SUIVI SCIENTIFIQUE  ****************************************/

.suiviSc .banniere {
    background-image: 
    linear-gradient(90deg, rgba(30, 30, 30, 0.80) 0%, rgba(30, 30, 30, 0.00) 100%),
    linear-gradient(180deg, rgba(22, 112, 112, 0.00%) 0%, var(--vert) 100%),
    url('../img/suiviSc/Flore_des_murs.jpg') /*image de la banniere*/;
    
    background-size: 
    60% 100%, /* Taille du 1er dégradé (40% largeur, 100% hauteur) */
    100% 50%,
    cover;   /*taille de l'image*/
    
    background-position: 
    left,
    bottom,
    0 75%; 
    background-repeat: no-repeat;     /* Empêche la répétition de l'image */
    height: auto;                     /* Ajuste la hauteur selon le contenu */
    width: auto;                      /* Ajuste la largeur selon le texte */
    color: var(--blanc);
    width: 100%;
    position: relative;
    height: 30rem;
    overflow: hidden;
}


.suiviSc .banniere h2{
    font-size: 52px;
    margin: 0;
}

.suiviSc .textPhare {
    width: 35%;
    height: 60%;
    display: flex;
    flex-direction: column;
    margin: 120px 10% 0;
}

.suiviSc .textPhare p {
    font-size: var(--texte1);
}

.suiviSc .competences {
    display: grid;
    grid-template-columns: repeat(2,1fr) ;
    grid-template-rows: 1fr ;
    grid-gap: 10%;
    row-gap: 140px;
    margin: 6rem 10%;
}

.suiviSc #comp1 h2 {
    display: block;
    margin-bottom: 0;
    height: auto;
}
.suiviSc #comp1 span {
    font-size: var(--texte2);
    color: var(--vert);
    margin-bottom: 30px;
}

.suiviSc #comp1 img {
    top :-5rem;
    width: 10rem;
    left: -5rem;
}

.suiviSc #comp2 img {
    top :-5rem;
    width: 10rem;
    left: -4rem;
}
@media (max-width:800px) {
    .suiviSc .textPhare {
        margin: 80px 10% 0;
    }
}