:root {
    --couleur-primaire: #2C1F1F;
    --couleur-secondaire: #E7E1E1;
    --couleur-accent: #C1272D;
    --normal-font-family: KoHo;
}

body {
    font-family: var(--normal-font-family);
    color: var(--couleur-primaire);
    background-color: var(--couleur-secondaire);
    background-image: url(../Images/bg-apropos.png);
    background-size: cover;
    background-position: bottom right;
    margin:0;

}

.container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

header {
    background-color: var(--couleur-primaire);   
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;

    & .top-nav__logo {
        height: 7rem;
    }

    & .top-nav__icon {
        height: 1rem;
        padding-right: 0.2rem;
    }

    & .top-nav__lien {
        color: var(--couleur-secondaire);
        text-decoration: none;
        padding-left: 2rem;
    }

    & .top-nav__lien:hover {
        color: var(--couleur-accent);
    }
}

.hero {
    background-image: url(../Images/bg-banniere.png);
    background-size: cover;
    background-position: center;
    height: 50rem;
    color: var(--couleur-secondaire);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;

    & .hero__h1 {
        font-size: 4rem;
        margin: 0;
        line-height: 4rem;
    }

    & .hero__p {
        font-size: 1.2rem;
        font-weight: 300;
        max-width: 30rem;
        margin-bottom: 3.5rem;
    }

    & .hero__form {
        display: flex;
        flex-direction: column;
        margin-bottom: 3rem;
    }

    & .hero__select {
        padding: 0.3rem 2rem;
        border: none;
        background-color: var(--couleur-secondaire);
        margin-bottom: 1rem;
    }

    & .hero__select:hover,
      .hero__select:focus {
        outline: 0.15rem solid var(--couleur-accent);
    }
}

.btn-action {
    border-radius: 2rem;
    border: none;
    color: var(--couleur-secondaire);
    font-size: 1.2rem;
    background: var(--Couleur-primaire, #2C1F1F);
    padding: 0.4rem 2.5rem;

}

.btn-action--accent {
    border: 0.15rem solid var(--Couleur-accent, #C1272D);
}

.btn-action:hover {
    background-color: var(--couleur-accent);
}
    
.apropos {
    margin-top: 6rem;
    margin-bottom: 10rem;

    & .apropos__titre {
        font-size: 3rem;
        text-align: center;
    }

    & .apropos__contenu {
        display: grid;
        grid-template-columns: 50% 15% 35%;
        grid-template-rows: auto auto auto auto;
        gap: 2rem;
        align-items: start;         
    }

    & .apropos__image {
        grid-area: 1/1/5/2; /* lignes de la grid : <row-start> / <column-start> / <row-end> / <column-end>*/
        object-fit: cover;
        width:80%;
        justify-self: end;
    }

    & .apropos__paragraphe {
        grid-area: 1/2/2/4;
        max-width: 80%;
        font-size: 1.3rem;
        margin-top: 0;
    }

    & .apropos__paragraphe--italic {
        grid-area: 2/2/3/4;
        font-style: italic;
        font-weight: 500;
    }

    & .apropos__stat {
        grid-area: 3/2/4/3;    
    }

    & .apropos__chiffre {
        display: inline-block;
        font-size: 3.5rem;
        font-weight: 500;
        color: var(--couleur-accent);
        margin: 0;
    }
        
    & .apropos__stat-lable {
        font-size: 1.1rem;
        margin: 0;
    }

    & .apropos__stat--droite {
        grid-area: 3/3/4/4;
    }

    & .apropos__button {
        grid-area: 4/2/5/4; /*align-self: end;*/
    }

    @media screen and (max-width: 1200px) {
        & .apropos__image {
            width: 100%;
        } 
    }

    @media screen and (max-width: 900px) {
        & .apropos__paragraphe {
            font-size: 115%;
        }
    }

    @media screen and (max-width: 780px) {

        & .apropos__image {
            display: none;
        }

        & .apropos__paragraphe {
            width: 100%;
        }

        & .apropos__contenu {
            grid-template-columns: 1fr 1fr;
            justify-items: center;      
        }

        & .apropos__paragraphe {
            grid-area: 1/1/2/3;
        }
    
        & .apropos__paragraphe--italic {
            grid-area: 2/1/3/3;
        }

        & .apropos__stat {
            grid-area: 3/1/4/2;             
        }

        & .apropos__stat--droite {
            grid-area: 3/2/4/3;
        }

        & .apropos__button {
            grid-area: 4/1/5/3;
        }
    }
}

.footer__logo {
    display: block;
    height: 8rem;
    justify-self: center;
    margin-bottom: 3rem;
}

.footer__nav, .footer__info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    list-style-type: none;
    margin-bottom: 3rem;      
}

.footer__nav-item {
    color: var(--couleur-primaire);
    font-weight: 400;
    text-align: center;
}

.footer__nav-item:hover {
    color: var(--couleur-accent)
}

.footer__info {
    display: grid;
    grid-template-columns: 3.6fr 1fr 3.6fr;
    gap: 0.5rem;
    justify-items: center;
    align-items: center;
    margin: 1.5rem auto;
    border-top: 1px solid var(--couleur-primaire);
}

.footer__text {
    display: inline-block;
    margin-left: 1rem;
}

.footer__text--right {
    justify-self: end;
}

.footer__text--left {
    justify-self: start;
}

.footer__icon {
    height: 1.1rem;
    padding: 0 .2rem;
}

@media screen and (max-width: 900px) {
    .footer__info {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .footer__text--right, .footer__text--left {
        justify-self: center;
    }
}

@media screen and (max-width: 780px) {
    .footer__nav {
        flex-direction: column;
        align-items: center;
    }
}