@font-face {
    font-family: "Ubuntu";
    src: url('../ressources/fonts/Ubuntu-Medium.woff2') format("woff2");
    src: url('../ressources/fonts/Ubuntu-Medium.ttf') format("truetype");
    font-weight: 500;
}

@font-face{
    font-family:'Ubuntu';
    src: url('../ressources/fonts/Ubuntu-Light.woff2') format("woff2");
    src: url('../ressources/fonts/Ubuntu-Light.ttf') format("truetype");
    font-weight: 300;
}

@font-face{
    font-family:'Ubuntu';
    src: url('../ressources/fonts/Ubuntu-Bold.woff2') format("woff2");
    src : url(../ressources/fonts/Ubuntu-Bold.ttf) format("truetype");
    font-weight: 700;
}
body{
    margin: 0;
    background-color: #2B3040;
    font-family: 'Ubuntu', sans-serif;
}

.logotitle{
    display:flex;
    justify-content:center;
    margin-top: 2rem;
}
.logotitle img{
    width: 14rem;
    height: 8rem;
}
.kineimage img{
    margin-left: -7px;
    width: 104%;
    height: auto;
    margin-top: 4rem;
}
.gestionTitle{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    margin-top:2rem;
}
.gestionTitle h2{
    font-weight: 700;
    color: #FFFFFF;
    font-size: 33px;
    margin-bottom:0;
}
.gestionTitle h3{
    font-weight: 300;
    color:#FFFFFF;
    margin-top:0;
}
.contact{
    display:flex;
    justify-content:center;
    align-items: center;
    flex-direction:column;
    margin-top: 1rem;
}
.contact a{
    text-decoration: none;
}

.text p{
    font-weight: 300;
    color: #4FBAAE;
}
.phone{
    background-color:#4FBAAE;
    margin-bottom: 1rem;
    width: 41%;
}
.phone p{
    font-weight: 700;
    color:#FFFFFF;
    text-align:center;
    font-size: 20px;
    margin: 0;
    padding: 20px 0;
}
.mail{
    background-color:#4FBAAE;
    width: 75%;
}
.mail p{
    font-weight: 700;
    color:#FFFFFF;
    text-align: center;
    font-size: 20px;
    margin: 0;
    padding: 20px 0;
}
.address{
    margin-top: 1rem;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}
.address p{
    font-weight: 300;
    color:#FFFFFF;
}
.para1{
    margin-bottom:0;
}
.para2{
    margin-top: 5px;
}
.block{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin: 4rem 1rem;
    justify-content: space-between;
}
.Rect{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:#FFFFFF;
    width: 47%;
    height: 45vw;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.Rect img{
    width: 4rem;
}
.imageRect{
    margin-top: 1rem;
}
.textRect{
    text-align:center;
    width: 100%;
}
.Rect p{
    font-weight: 700;
}
.Rappel{
    height: 4rem;
}
.impayes{
    margin-left: 1rem;
    text-align: center;
}
.Traitements{
    margin-top:0.5rem;
}
.footer{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width: 100%;
    height: 94vw;
    background-color: #FFFFFF;
    margin-left: -4px;
}
.footerlogo img{
    width:14rem;
    height:8rem;
}
.footer .address{
    margin-top: 1rem;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.footer .address p{
    font-weight: 300;
    color: black;
}
.footerpara1{
    margin-top: 2rem;
    margin-bottom:0;
    font-weight: 500;
    margin-left:3rem;
}
.footerpara2{
    margin-top:0;
    font-weight:500;
}

.footer a{
    color: #2B3040;
    text-decoration: none;
}

/* TABLETTE */
@media only screen and ( min-width: 768px ){
    .kineimage{
        margin-top: 2rem;
    }
    .gestionTitle h2 {
        font-size: 60px;
    }
    .gestionTitle h3{
        font-size:33px;
    }
    .text p{
        font-size: 27px;
    }
    .phone p, .mail p{
        padding: 28px 0;
        font-size: 28px;
    }
    .address p{
        font-size: 25px;
    }
    .block{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin: 4rem 4rem;
            justify-content: space-between;
            margin-top: 10rem;

    }
    .Rect img{
        width: 8rem;
    }
    .textRect p{
        font-size: 25px;
        margin: 1.5rem 2rem 0;
    }
    .Rappel{
        height: unset;
    }
    .impayes{
        font-size:25px;
    }
    .footer{
        margin-top: 15rem;
        height: 55vw;
    }
    .footerlogo img {
        width: 16rem;
        height: 10rem;
    }
    .footerpara1{
        font-size: 20px;
        margin-left: 3rem;
    }
    .footerpara2{
        font-size: 21px;
    }
}


/* IPAD PRO */
@media only screen and ( min-width: 1024px ){
    .logotitle img {
        width: 16rem;
        height: 10rem;
    }
    .Rect{
        margin-bottom: 3rem;
    }
    .Rect img{
        width: 10rem;
    }
    .textRect p, .impayes{
        font-size: 40px;
    }
    .footer{
        height: 39vw;
    }
}

/* DESKTOP */
@media only screen and ( min-width: 1280px ){
    .black{
        display: flex;
        width: 88%;
        height: 49vw;
        margin-left: auto;
        margin-right: auto;
        background-color: #1e212e;
        margin-top: 9rem;
    }

    .logotitle{
        margin-top: 4.5rem;
    }
    
    .kineimage img {
        margin-left: 28px;
        width: 38vw;
        height: auto;
        margin-top: 6rem;
    }
    .gestionTitle h2 {
        font-size: 35px;
    }

    .gestionTitle h3 {
        font-size: 23px;
    }
    .text p {
        font-size: 27px;
    }
    .phone {
        background-color: #4FBAAE;
        margin-bottom: 1rem;
        width: 20rem;
        transition: background-color 0.7s;
    }
    .phone p{
        transition: color 0.7s;
    }
    .phone:hover{
        background-color: #FFFFFF;
    }
    .phone:hover p{
        color: #4FBAAE;
    }
    .mail {
        background-color: #4FBAAE;
        width: 30rem;
        transition: background-color 0.7s;
    }
    .mail p{
        transition: color 0.7s;
    }
    .mail:hover{
        background-color: #FFFFFF;
    }
    .mail:hover p{
        color: #4FBAAE;
    }
    .address {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .gestion{
        margin: 0 auto;
    }

    .Rect {
        display: flex;
        justify-content: start;
        align-items: center;
        background-color: #FFFFFF;
        margin-bottom: 1rem;
        border-radius: 10px;
        width: 137px;
        height: 11rem;
        position: relative;
    }
    .imageRect{
        margin-top: 15px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Rect img{
        width: 3rem;

    }

    .textRect p, .impayes{
        font-size: 15px;
        text-align: center;
        margin: 1.5rem 4px 0;
    }
    .Traitements{
        margin-top: 0;
    }


    .footer{
        height: 22rem;
    }
    .block{
        margin-top: 5rem;
    }

    .footer .end{
        margin-top: 3rem;
        display: flex;
        justify-content: center;
    }

    .footer .end div{
        display: flex;
        justify-content: center;
    }
    .footer .end div p{
        margin: 0 2rem;
        font-size: 1.2rem;
    }
    .footer .address{
        margin-top: 0;
        margin-left: 0;
        flex-direction: row;
    }
    .footer .end .address .para1{
        margin-right: 0;
        position: relative;
    }
    .footer .end .address .para1:after{
        content: '-';
        width: auto;
        height: 3rem;
        margin-left: 0.5rem;
    }
    .footer .end .address .para2{
        margin-left: 0.5rem;
    }

    .footer .end .endText p{
        position: relative;
    }

    
    .footer .end .endText p:after{
        content: '';
        position: absolute;
        right: -2rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: #4FBAAE;
        height: 2rem;
        width: 0.1rem;
    }

    .footerpara1, .footerpara2{
        font-weight: 300;
    }

    .footer a{
        transition: color 0.7s;
    }

    .footer a:hover{
        color: #4FBAAE;
    }
    
}
/* DESKTOP 1920*/
@media only screen and ( min-width: 1920px ){
    .black{
        display: flex;
        width: 88%;
        height: 49vw;
        margin-left: auto;
        margin-right: auto;
        background-color: #1e212e;
        margin-top: 9rem;
    }

    .gestionTitle h2 {
        margin-top:2rem;
        font-size: 35px;
    }

    .gestionTitle h3 {
        font-size: 23px;
        margin-bottom: 3rem;
    }
    .contact {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: -1rem;
    }
    .text p {
        font-size: 27px;
    }
    .phone {
        background-color: #4FBAAE;
        margin-bottom: 1rem;
    }
    .mail {
        background-color: #4FBAAE;
    }
    .address {
        margin-top: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .Rect {
        background-color: #FFFFFF;
        margin-bottom: 1rem;
        border-radius: 10px;
        width: 207px;
        height: 15rem;
        position: relative;
    }

    .imageRect{
        margin-top: 30px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Rect img{
        width: 4rem;
    }

    .textRect p, .impayes {
        font-size: 20px;
        margin: 1.5rem 10px 0;

    }

    .footer{
        height: 32vw;
    }
    .block{
        margin-top: 5rem;
    }
    .gestionTitle {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 9rem;
    }
}