/* ACTU STAGE */

.actu-stage {
    padding: 7em 0 3em;
}

.actu-stage .bloc-2>*,
.actu .bloc-2>* {
    color: var(--blanc);
}

.actu-stage h2 {
    color: var(--blanc);
}

.actu-stage h3 {
    margin-bottom: 0.5em;
}

.actu-stage img,
.actu img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border: var(--border-img);
}

.actu-stage p {
    margin-bottom: 1.5em;
}

.actu-stage .bloc-2:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.actu-stage .date,
.actu .date {
    color: var(--vert);
    text-transform: uppercase;
    margin-bottom: 0.5em;
    font-weight: 500;
}

.actu-stage .btn,
.actu .btn {
    color: var(--gris-bleu);
    background-color: var(--vert);
}

.actu-stage a:hover,
.actu a:hover {
    background-color: var(--blanc);
}

@media screen and (max-width:800px) {
    .actu-stage h3 {
        margin: 0.5em 0;
    }
}

@media screen and (min-width:481px) and (max-width:800px) {
    .actu-stage {
        padding: 4em 0 2em;
    }
}

@media screen and (max-width:480px) {
    .actu-stage {
        padding: 3em 0 1em;
    }

    .actu-stage h3 {
        font-size: 20px;
    }

    .actu-stage .btn {
        padding: 12px 92px 12px 26px;
    }
}

/* PARTENAIRE */
.partenaire {
    padding: 4em 0 0 0;
}

.bloc-carou img {
    height: 150px;
    object-fit: contain;
}

.partenaire .btn-border a::before {
    width: 270px;
    background: var(--gris-bleu);
}

.partenaire .btn-border .btn:hover {
    color: var(--blanc);
    background-color: var(--gris-bleu);
}

.partenaire .btn-border .btn:hover::after {
    background-image: url(/wp-content/themes/HPV/images/fleche-btn-blanc.svg);
}

.partenaire .btn-border .btn:hover::before {
    background: var(--blanc);
}

@media screen and (max-width:800px) {
    .partenaire {
        padding: 2em 0 0;
    }
}

@media screen and (max-width: 480px) {
    .bloc-carou img {
        height: 100px;
    }

    .partenaire .btn {
        padding: 12px 60px 12px 12px;
    }

    .partenaire .btn-border a::before {
        width: 235px;
    }
}

/* ACTUALITE & EVENT*/

.actu {
    padding-top: 2em;
}

.actu::after {
    top: 30%;
    height: 70%;
}

.actu .bloc-2 h3 {
    margin: 0.5em 0;
}

.actu p {
    margin-bottom: 2em;
}

.actu .btn-border a::before {
    width: 370px;
}

@media screen and (max-width:800px) {
    .actu {
        padding: 4em 0 2em;
    }

    .actu h2 {
        color: var(--blanc);
    }

    .actu .bloc-2:nth-child(2) {
        margin-bottom: 3em;
    }
}

@media screen and (min-width:481px) and (max-width:800px) {
    .actu::after {
        top: 0%;
        height: 100%;
    }
}

@media screen and (max-width:480px) {
    .actu::after {
        top: 0%;
        height: 100%;
    }

    .actu .btn {
        padding: 12px 92px 12px 26px;
    }

    .actu .btn-border .btn {
        padding: 12px 20px 12px 0px;
    }

    .actu .btn-border .btn::after {
        top: 50%;
        right: -4%;
    }
}

@media screen and (min-width:373px) and (max-width:480px) {
    .actu .btn-border a::before {
        width: 330px;
    }
}

@media screen and (min-width:352px) and (max-width:372px) {
    .actu .btn-border a::before {
        width: 310px;
    }
}

@media screen and (max-width:372px) {
    .actu .btn-border .btn::after {
        top: 65%;
        right: -8%;
    }
}

@media screen and (max-width:351px) {
    .actu .btn-border a::before {
        width: 220px;
    }
}

/* SUIVEZ NOUS */

.nous-suivre {
    padding: 4em 0 0 0;
}

.nous-suivre .bloc-res {
    margin: 2em 0;
}

.nous-suivre .menu-res {
    display: flex;
    justify-content: center;
}

.nous-suivre .menu-res li {
    padding: 0 1em;
}

.nous-suivre .menu-icon {
    width: 25px;
    height: 25px;
}

.nous-suivre .fb {
    background-image: url(/wp-content/themes/HPV/images/facebook-noir.svg);
}

.nous-suivre .fb:hover {
    background-image: url(/wp-content/themes/HPV/images/facebook-vert.svg);
}

.nous-suivre .insta {
    background-image: url(/wp-content/themes/HPV/images/instagram-noir.svg);
}

.nous-suivre .insta:hover {
    background-image: url(/wp-content/themes/HPV/images/instagram-vert.svg);
}

@media screen and (max-width:480px) {
    .nous-suivre {
        padding: 0;
    }
}

/* CHIFFRE */
.chiffres {
    margin: 2em 0 0 0;
    padding: 6em 0;
}

.chiffres h3,
.chiffres p {
    text-align: center;
}

.chiffres h3 {
    color: var(--vert);
    font-size: 50px;
    line-height: 1.2;
}

.chiffres p {
    color: var(--blanc);
    text-transform: uppercase;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
}

.chiffres .bloc-5 {
    position: relative;
}

.chiffres .bloc-5::after {
    content: "LICENCIÉS";
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    bottom: -30%;
    left: 50%;
    transform: translate(-50%, 0%);
    color: var(--transparent);
    opacity: 0.3;
    font-size: 32px;
    text-align: center;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 2px;
}

.chiffres .bloc-5:nth-of-type(2)::after {
    content: "DIRIGEANTS";
}

.chiffres .bloc-5:nth-of-type(3)::after {
    content: "ÉQUIPES";
}

.chiffres .bloc-5:nth-of-type(4)::after {
    content: "PRO";
}

.chiffres .bloc-5:last-of-type::after {
    content: "APPRENTIS";
}

@media screen and (min-width:801px) and (max-width:1024px) {
    .chiffres .bloc-5::after {
        font-size: 24px;
    }
}

@media screen and (min-width:481px) and (max-width:800px) {
    .chiffres .row {
        justify-content: center;
    }

    .chiffres .bloc-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width:480px) {
    .chiffres {
        padding: 4em 0;
    }
}

/* INSCRIRE */
#inscrire {
    scroll-margin-top: 270px;
}

#inscrire .bloc-2:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#inscrire .bloc-2:last-child>* {
    margin-bottom: 0.5rem;
}

#inscrire .bloc-2 .btn {
    position: relative;
    display: block;
    width: max-content;
    padding: 12px 66px 12px 0px;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
}

#inscrire .bloc-2 .btn::before {
    content: "";
    width: 90%;
    height: 2px;
    background: var(--gris-bleu);
    position: absolute;
    bottom: 4%;
}

#inscrire .bloc-2 .btn:hover::after {
    background-image: url(/wp-content/themes/HPV/images/fleche-btn-vert.svg);
}

#inscrire .bloc-2 .btn:hover::before {
    background: var(--vert);
}

#inscrire p a {
    text-decoration: underline;
}

@media screen and (max-width:1024px) {
    #inscrire .bloc-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #inscrire .bloc-2:nth-child(2) {
        align-items: center;
        padding-bottom: 1em;
    }
}

/* BENEVOLE */

.benevole {
    padding: 8em 0 4em 0;
}

.benevole .btn {
    color: var(--gris-bleu);
    background-color: var(--vert);
}

.benevole .btn:hover {
    background-color: var(--blanc);
}


.benevole h3,
.benevole p {
    color: var(--blanc);
    text-align: center;
    margin-bottom: 0.5em;
}

.benevole p {
    margin-bottom: 1em;
}

.contenu-bene {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width:800px) {
    .benevole {
        padding: 4em 0;
    }
}

/* ORGANIGRAMME */

.organigramme {
    padding: 8em 0 6em 0;
}

.organigramme .presentation p {
    color: var(--blanc);
    text-align: center;
    margin-bottom: 1em;
}

.individu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.membre .bloc-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}

.membre .bloc-4 img {
    height: 130px;
    width: 130px;
    border-radius: 100%;
    border: 4px solid var(--blanc);
}

.membre h3 {
    color: var(--gris-bleu);
    background-color: var(--blanc);
    text-align: center;
    padding: 0.5em 0;
    margin: 0.5em 0 1em;
    line-height: 1.2;
}

.membre p {
    text-align: center;
}

.membre p:first-of-type {
    color: var(--blanc);
    margin-top: 1em;
}

.membre span {
    color: var(--vert);
    font-size: 14px;
}

@media screen and (max-width:800px) {
    .organigramme {
        padding: 6em 0 4em 0;
    }

    .organigramme .bloc-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

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

    .organigramme .bloc-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ENTRAINEMENT */

.entrainement {
    padding: 4em 0 2em;
}

.entrainement .bloc-entrainement {
    background-color: var(--gris-bleu);
    padding-bottom: 2em;
}

.entrainement .titre-entrainement h3 {
    color: var(--blanc);
    text-align: center;
    margin: 1em 0 0;
}

.entrainement .info-entrainement {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.entrainement .bloc-3 {
    background-color: var(--blanc);
    text-align: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    max-width: 32%;
    margin-top: 1em;
}

.entrainement .bloc-3 {
    margin-left: 5px;
    margin-right: 5px;
}

.entrainement h4 {
    text-transform: uppercase;
    background-color: var(--vert);
    font-weight: 600;
}

.entrainement .horraire {
    font-weight: 500;
    text-transform: uppercase;
}

@media screen and (max-width:800px) {
    .entrainement {
        padding: 2em 0;
    }

    .entrainement .titre-entrainement h3 {
        margin: 1em 0;
    }

    .entrainement .info-entrainement {
        flex-direction: column;
    }

    .entrainement .bloc-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 1em 1em;
    }
}

/* STAGE */

.stage {
    padding: 6em 0 4em 0;
}

.stage.clip {
    margin-bottom: 4em;
}

.stage .btn {
    color: var(--gris-bleu);
    background-color: var(--vert);
}

.stage .btn:hover {
    background-color: var(--blanc);
}

.stage p {
    color: var(--blanc);
    text-align: center;
    margin-bottom: 1em;
}

.contenu-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 800px) {
    .stage {
        padding: 4em 0;
    }

    .stage.clip::after {
        clip-path: polygon(0% 3%, 10% 0%, 20% 2%, 30% 3%, 40% 4%, 50% 1%, 60% 3%, 70% 5%, 80% 2%, 90% 0%, 100% 2%, 100% 98%, 90% 100%, 80% 98%, 70% 96%, 60% 98%, 50% 100%, 40% 98%, 30% 96%, 20% 100%, 10% 97%, 0% 100%);
    }
}

/* CONTACT */
#gform_1>div.gform_footer.before {
    width: max-content;
    position: relative;
}

#gform_1 #gform_fields_1 {
    grid-row-gap: 30px;
}

#gform_1 #champ-obli {
    font-size: 14px;
    font-style: italic;
}

/* DEVENIR PARTENAIRE */

.devenir-partenaire {
    padding: 6em 0 4em 0;
}

.devenir-partenaire p {
    color: var(--blanc);
}

.devenir-partenaire h3,
.devenir-partenaire .bloc-2 span {
    color: var(--vert);
}

.devenir-partenaire .bloc-2:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.devenir-partenaire .photo img {
    height: 130px;
    width: 130px;
    border-radius: 100%;
    border: 4px solid var(--blanc);
}

.devenir-partenaire .profil {
    padding-left: 1.5em;
}

.devenir-partenaire .profil p {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
}

.devenir-partenaire .profil p:nth-child(2) {
    margin-bottom: 0.5em;
}

.devenir-partenaire .bloc-2:last-child {
    background-color: var(--gris-clair);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1em;
}

.devenir-partenaire .bloc-2:last-child h3 {
    margin-bottom: 0.5em;
}

.devenir-partenaire .bloc-2:last-child p {
    text-align: center;
    margin-bottom: 1.5em;
    line-height: 1.2;
    padding: 0 1em;
}

@media screen and (min-width:801px) and (max-width:900px) {
    .devenir-partenaire .profil {
        padding-left: 0.5em;
    }
}

@media screen and (max-width:800px) {
    .devenir-partenaire {
        padding: 4em 0;
    }

    .devenir-partenaire .bloc-2:nth-child(2) {
        padding-bottom: 1em;
    }
}

@media screen and (max-width:480px) {
    .devenir-partenaire .bloc-2:nth-child(2) {
        flex-direction: column;
    }

    .devenir-partenaire .profil {
        padding: 1em 0 0 0;
    }
}