:root {
    --box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}
h1 {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 2.5em;
    line-height: 0.9;
    letter-spacing: 2;
    color: var(--black);
}
h2 {
    font-family: var(--primary-font);
    font-weight: 200;
    font-size: 1.375em;
    line-height: 1.2;
    letter-spacing: 2;
    color: var(--black);
}
h3 {
    font-family: var(--secondary-font);
    font-weight: 200;
    font-size: 1.5em;
    line-height: 1.2;
}
h4 {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 1.000em;
}
p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.000em;
}
a {
    font-family: var(--secondary-font);
    color: var(--secondary-normal);
}
body {
    margin: 0;
    padding: 0;
    border: 0;
}
.offre {
    width: 100%;
    height: 50px;
    border-bottom: 2px solid var(--second-light);
    position: fixed;
    top: 80px;
    transition: top 400ms linear;
    z-index: 1000;
    background-color: var(--blue-pausecafe);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    -moz-backdrop-filter: blur(30px);
}
.offre.scrolled {
    top: 0px;
}
.offre .limit {
    position: relative;
    width: calc(100% - 100px);
    height: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.offre h3 {
    color: var(--white);
    font-family: var(--primary-font);
    font-size: 0.75em;
    font-weight: 300;
}
.offre h3 strong {
    color: var(--white);
}
.webbanner {
    margin: 0px auto 0px auto;
    padding-top: 150px;
}
.webbanner_txt,
.web_banner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}
.webbanner_txt {
    width: 80%;
    text-align: center;
}
.webbanner_txt h3 {
    margin: 50px;
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 1.875em;
}
.webbanner_txt p {
    font-size: 1.250em;
    font-weight: 800;
    color: var(--fetedesmeres);
}
.webbanner_txt p:nth-child(2) {
    margin-top: 30px;
    margin-bottom: 15px
}
.webbanner_txt img {
    height: 150px;
}
.web_banner {
    width: 100%;
    background-image: url(../img/operation/pausecafe/bg_pausecafe.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 30px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 2%);
    border-radius: var(--primary-border-radius);
    padding: 20px 20px 260px 20px;
    position: relative;
    overflow: hidden;
}
.web_banner.png {
    background-image: url(../img/operation/pausecafe/bg_pausecafe.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.web_banner .web_banner_bottom_image {
    position: absolute;
    width: 400px;
    bottom: -40px;
    left: calc(50% - 200px);
}
.web_banner.lower .web_banner_bottom_image {
    bottom: 0px;
}

.web_banner p {
    color: var(--white);
}
.rdv img {
    height: 40px;
    margin-right: 10px;
}
.rdv div:first-child {
    margin-right: 30px;
}
.web_banner p {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 0.875em;
}
.web_banner .img_webbanner {
    max-height: 400px;
    width: 180px;
}
.concours {
    text-align: center;
    max-width: 550px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.concours img {
    width: 100px;
    margin-bottom: 30px;
}
.concours h2 {
    margin-bottom: 20px;
}
.main_content {
    margin: 20px auto 0px auto;
    max-width: 1200px;
}
.produit.first .pausecafe_produit {
    width: 120px;
}
.produit.second .pausecafe_produit {
    max-height: 230px;
}
.calendrier {
    max-width: 290px;
    background-color: var(--white);
    padding: 10px 15px;
    border-radius: 190px;
}
.calendrier.first,
.calendrier.second {
    cursor: pointer;
}
.calendrier.second {
    display: none !important;
}
.calendrier p {
    color: var(--blue-pausecafe);
    margin-right: 20px;
    padding-left: 5px;
}
.calendrier img {
    height: 40px;
}
.calendrier .date {
    height: 40px;
    width: 40px;
    border-radius: 9px;
}
.calendrier .mois {
    background-color: #F62B3B;
    height: 12px;
    border-radius: 9px 9px 0px 0px;
}
.calendrier .jour {
    background: linear-gradient(#FBFBFA, #EAEAE6);
    height: 28px;
    border-radius: 0px 0px 9px 9px;
}
.calendrier .mois p,
.calendrier .jour p {
    text-align: center;
    margin: inherit;
    padding: inherit;
}
.calendrier .mois p {
    font-family: sans-serif;
    color: var(--white);
    font-weight: 900;
    font-size: 0.50em;
    line-height: 1.8;
}
.calendrier .jour p {
    font-family: var(--apple-font);
    color: #212121;
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1.05;
}
.produit,
.modalites {
    width: 100%;
}
.duo_caracteristiques {
    width: 100%;
    max-width: 360px;
}
.duo_caracteristiques .caracteristiques_left:first-child,
.duo_caracteristiques .caracteristiques_right:first-child {
    margin-bottom: 30px;
}
.caracteristiques_left,
.caracteristiques_right {
    background-color: var(--white);
    width: 100%;
    border-radius: var(--primary-border-radius);
    padding: 25px;
}
.caracteristiques_left img,
.caracteristiques_right img {
    width: 45px;
    box-shadow: var(--box-shadow);
    border-radius: 11px;
}
.caracteristiques_left p,
.caracteristiques_right p {
    font-size: 0.875em;
    font-family: var(--secondary-font);
    font-weight: 400;
    line-height: normal;
}
.caracteristiques_left p a,
.caracteristiques_right p a {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875em;
}
.caracteristiques_right p {
    margin-left: 25px;
}
.caracteristiques_left p {
    margin-right: 25px;
    text-align: right;
}
.caracteristiques_left p:first-child,
.caracteristiques_right p:first-child {
    font-size: 0.875em;
    font-family: var(--primary-font);
    font-weight: 600;
    margin-bottom: 10px;
}
.modalites {
    margin-top: 120px;
    background-color: var(--grey-apple);
    border-radius: var(--primary-border-radius);
    padding: 10px 80px 80px 80px;
    margin-bottom: 80px;
}
.modalites h3 {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.000em;
}
.modalites p {
    font-size: 0.875em;
    margin-top: 10px;
}
.cta {
    width: 330px;
    margin: 40px 0px 0px 0px;
    color: var(--white);
    text-align: center;
    position: relative;
    top: -80px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--blue-pausecafe);
    padding: 20px 10px;
    border-radius: var(--secondary-border-radius);
    box-shadow: 0px 5px 20px rgb(0 0 0 / 2%);
}
.cta:hover {
    background-color: var(--black);
    color: var(--white);
}
.cta p {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.000em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0px;
}
.abonner {
    color: var(--blue-pausecafe);
    margin-bottom: 30px;
    font-family: var(--secondary-font);
    font-weight: 700;
}
.avis {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: var(--primary-border-radius);
    padding: 30px;
    margin-bottom: 20px;
}
.avis p {
    margin-top: 0px;
    margin-bottom: 10px
}
.avis p:first-child {
    font-weight: 600;
    color: var(--black);
    font-family: var(--primary-font);
}
.separator_title {
    width: 100%;
    background-color: #D8E3FF;
    margin: 0px 0px 80px 0px;
    border-radius: var(--primary-border-radius);
    text-align: center;
    padding: 40px 25px;
}
.separator_title p {
    font-weight: 400;
    color: var(--blue-pausecafe);
    font-family: var(--primary-font);
    font-size: 0.875em;
    margin-top: 5px;
}
.separator {
    width: 100%;
    height: 2px;
    background-color: var(--blue);
    margin: 80px 0px;
    border-radius: var(--primary-border-radius);
}
.input,
.textarea {
    height: auto;
    padding: 25px 25px 25px 25px;
    border-radius: var(--primary-border-radius);
    font-size: 0.875em;
    color: var(--dark);
    font-family: var(--secondary-font);
    font-weight: 600;
    color: var(--black);
    outline: none;
    --webkit-appearance: none;
    border: 2px solid var(--grey-apple);
    resize: none;
    box-shadow: none;
}
.input {
    max-height: 70px;
}
.name .form_auth {
    width: 48%;
}
.form_auth {
    margin-bottom: 30px;
}
.form_auth p {
    margin-top: 0px;
    font-size: 0.875em;
    font-family: var(--primary-font);
    color: var(--black);
    margin-bottom: 10px;
}
.textarea:focus,
.input:focus {
    box-shadow: none;
    border: 2px solid var(--primary-pressed);
    box-shadow: 0px 5px 20px rgb(0 0 0 / 2%);
}
.no_select {
    color: rgba(0, 0, 0, .3);
}
.list {
    position: relative;
    overflow: auto;
    width: 100%;
}
.service {
    border-radius: var(--primary-border-radius);
    background-color: var(--white);
    width: auto;
    padding: 30px;
    margin-right: 10px;
    height: auto;
    min-width: 130px;
    height: 80px;
    border: 3px solid var(--grey-apple);
    cursor: pointer;
}
.scrollgauche, 
.scrolldroite {
    cursor: pointer;
}
.service.active {
    background-color: var(--black);
}
.service.active p {
    color: var(--white);
}
.service:last-child {
    display: none;
}
.form_auth .service p {
    text-align: center;
    margin: 0px;
    font-size: 0.75em;
}
.button.is-primary {
    background-color: var(--blue-pausecafe);
    float: right;
}
.button.is-primary:hover,
.button.is-primary:active {
    background-color: var(--black);
    color: var(--white);
}
.button.is-primary:focus:not(:active),
.button:focus:not(:active),
.button.is-primary:focus {
    background-color: var(--black);
    color: var(--white);
}
.button.is-primary[disabled] {
    background-color: var(--blue-pausecafe);
    opacity: 0.2;
}
.consigne,
.form {
    width: 46%;
}
.consigne h2,
.form h2:first-child {
    margin-bottom: 50px;
}
.criteres {
    display: none !important;
}
.accordionFormation {
    border-radius: var(--secondary-border-radius);
    overflow: hidden;
}
.accordeonFormation {
    font-family: var(--primary-font);
    width: 100%;
    overflow: hidden;
}
.accordeonFormation-label {
    padding: 20px;
    font-weight: 400;
    font-size: 1em;
    color: var(--blue-pausecafe);
    cursor: pointer;
    border-top: 1px solid var(--second-light);
}
.accordeonFormation-label:checked {
    color: var(--secondary-normal);
}
.accordeonFormation-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all .20s;
}
.accordeonFormation-content {
    max-height: 0;
    transition: all .20s;
    padding-left: 20px;
    padding-right: 20px;
    display: none;
}
input:checked+.accordeonFormation-label::after {
    transform: rotate(90deg);
}
input:checked+.accordeonFormation-label~.accordeonFormation-content {
    max-height: 100vh;
    display: block;
}
.formation_list {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 500px;
    height: 100%;
    padding: 50px 30px;
    background-color: var(--white);
    overflow: auto;
}
.formation_list_accordeon .accordeonFormation input[type="radio"] {
    display: none;
}
.accordeonFormation-content p {
    font-family: var(--secondary-font);
    font-size: 0.875em;
    font-weight: 400;
    line-height: normal;
}
.accordeonFormation-content .formation_title {
    font-size: 0.875em;
    font-family: var(--primary-font);
    font-weight: 600;
    margin-bottom: 5px;
}
.accordeonFormation-content .media_bloc {
    overflow: auto;
}
.accordeonFormation-content img,
.accordeonFormation-content video {
    margin-right: 10px;
    border-radius: 12px;

    /* max-width: 250px; */
    max-width: 60px;
    max-height: 200px;
}
/** Modale d'affichage des media du programme */
.overlayProgramme {
    visibility: hidden;
    opacity: 0;
    z-index: 4000;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(50, 50, 50, 0.70);
}
.overlayProgramme.target {
    visibility: visible;
    opacity: 1;
}
.overlayProgrammeBlock {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 30px;
    background-color: var(--white);
    overflow: auto;
}
.fermetureProgramme {
    position: fixed;
    height: 80px;
    max-width: 1024px;
    width: 100%;
    float: right;
}
.overlayProgramme .fermetureProgramme {
    top: 0;
    max-width: 100%;
}
.fermetureProgramme .closeProgramme {
    background-color: var(--primary-normal);
    cursor: pointer;
    width: 80px;
    max-width: inherit;
}
.fermetureProgramme .closeProgramme img {
    height: 35px;
}
.overlayProgrammeBlock img,
.overlayProgrammeBlock video {
    max-width: 85%;
    max-height: 85%;
}
/** Responsive **/
@media screen and (max-width: 1300px) {
    .main_content,
    .web_banner {
        width: calc(100% - 100px);
    }
}
@media screen and (max-width: 1200px) {
    .modalites {
        padding: 10px 50px 50px 50px;
    }
}
@media screen and (max-width: 1150px) {
    .duo_caracteristiques {
        display: none !important;
    }
    .criteres {
        display: flex !important;
        margin-top: 30px;
        
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .produit {
        display: block !important;
        text-align: center;
    }
    .caracteristiques_left,
    .caracteristiques_right {
        width: 45%;
        text-align: center;
    }
    .caracteristiques_left p,
    .caracteristiques_right p {
        text-align: center;
        margin: 20px 0px 0px 0px;
    }
}
@media screen and (max-width: 1050px) {
    .concours {
        margin-top: 30px;
    }
}
@media screen and (max-width: 980px) {
    .participation {
        display: block !important;
    }
    .consigne,
    .form {
        width: 100%;
    }
    .form {
        margin-top: 200px;
    }
    .cta {
        margin-top: 35px;
        top: -70px;
    }
    .modalites {
        padding: 1px 50px 50px 50px;
    }
}
@media screen and (max-width: 930px) {
    .rdv {
        width: 100%;
    }
    .calendrier.first {
        display: none !important;
    }
    .calendrier.second {
        display: flex !important;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    .web_banner {
        padding: 50px 30px 260px 30px;
    }
}
@media screen and (max-width: 920px) {
    .criteres {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .caracteristiques_left,
    .caracteristiques_right {
        width: 35%;
    }
}
@media screen and (max-width: 800px) {
    .offre .limit {
        width: calc(100% - 100px);
        margin: 0 50px;
        text-align: center;
    }
}
@media screen and (max-width: 760px) {
    .caracteristiques_left,
    .caracteristiques_right {
        width: 50%;
    }
    .web_banner {
        width: 100%;
        border-radius: 0px;
    }
}

@media screen and (max-width: 660px) {
    h1 {
        font-size: 1.875em;
    }
    h2 {
        font-size: 1.250em;
    }
    .name {
        display: block !important;
    }
    .name .form_auth {
        width: 100%;
    }
}

@media screen and (max-width: 630px) {
    .caracteristiques_left,
    .caracteristiques_right {
        width: 100%;
    }
    .main_content {
        width: 100%;
    }
    .modalites {
        border-radius: 0px;
    }
    .separator_title {
        border-radius: 0px;
    }
    .concours {
        width: 100%;
    }
}
@media screen and (max-width: 530px) {
    .modalites {
        border-radius: 0px;
        padding: 10px 30px 50px 30px;
    }
    .formation_list {
        width: 100%;
    }
    .web_banner {
        padding: 50px 20px 200px 20px;
    }
    .cta {
        width: 100%;
    }
    .rdv {
        flex-wrap: wrap;
    }
    .web_banner div:first-child {
        flex-wrap: wrap;
    }
    .rdv .calendrier {
        margin: 0px 30px 0px 30px;
    }
    .rdv .calendrier:first-child {
        margin: 0px 30px 15px 30px;
    }
    .calendrier.second {
        margin-top: 15px;
    }
    .web_banner .web_banner_bottom_image {
        width: 300px;
        left: calc(50% - 150px);
    }
}
@media screen and (max-width: 470px) {
    .rdv .calendrier:first-child {
        margin: 0px 0px 15px 0px;
    }
}
@media screen and (max-width: 450px) {
    .formation_list {
        padding: 30px 10px;
    }
    .offre {
        height: 65px;
    }
    .offre .limit {
        width: calc(100% - 60px);
        margin: 0 30px;
    }
}
@media screen and (max-width: 330px) {
    .web_banner p {
        font-size: 0.75em;
    }
}