:root {
    --langues: rgb(192, 94, 54);
    --logiciels: rgb(40, 50, 114);
    --gestion: rgb(175, 56, 104);
    --securite: rgb(107, 127, 177);
    --autres: rgb(97, 67, 148);
    --ifpase: rgb(5, 147, 170);
    --ifpase-light: rgb(90, 197, 242);
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

html {
    overflow:hidden;
}

.page-content>* {
    margin-top: 75px;
}

a {
    text-decoration: none;
}

p {
    font-family: Arial;
}

#cookieConsent {
    background-color: rgba(200, 200, 200, 0.7);
    text-align: center;
    position: fixed;
    z-index: 999999;
    bottom: 0px;
    width: 100%;
    font-size: 14px;
    margin: 0;
}

#cookieConsent .cookieButton {
    background: var(--ifpase);
    color: white;
    border: none;
    border-radius: 0.2em;
    margin: 0.5em;
    padding: 0.2em 0.5em 0.2em 0.5em;
}


/*****Barre de navigation*****/

nav {
    max-width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.navbar-brand img {
    width: 300px;
    height: auto;
}

.navbar-nav {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
}

.nav-link {
    font-size: 20px;
}

.nav-link:not(.button) {
    color: black;
    font-weight: bold;
    transition: 0.2s;
}

.nav-link:not(.button):hover,
.dropdown-menu:hover~.dropdown-toggle {
    color: var(--ifpase);
    font-size: 22px;
}

.nav-item {
    margin: auto;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(5,147,170,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

body:not(.boutique) .navbar .panier,
body:not(.boutique) .navbar .filter {
    display: none;
}

.navbar svg {
    margin-top: auto;
    margin-bottom: auto;
    width: 70px;
}

.snipcart-checkout {
    display: flex;
}

.snipcart-checkout>* {
    transition: 0.2s;
}

.snipcart-checkout>*:hover {
    fill: var(--ifpase);
    transform: scale(1.1);
}

.infos-panier {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.infos-panier * {
    color: var(--ifpase);
    margin: 0;
}

.navbar-toggler {
    float: right;
}

.navbar .button {
    width: fit-content;
    font-size: 20px;
}

/*****Dropdown formation*****/

@media (min-width:1200px) {
    .dropdown:hover>.dropdown-menu {
        display: block;
    }
}

.dropdown:hover .dropdown-toggle {
    font-size: 22px;
    color: var(--ifpase);
}

.dropdown-item {
    font-weight: bold;
    text-align: center;
}

.dropdown-item:active {
    background-color: rgba(150, 150, 150, 0.5);
}

.dropdown-item:first-of-type {
    color: var(--langues);
}

.dropdown-item:nth-of-type(2) {
    color: var(--logiciels);
}

.dropdown-item:nth-of-type(3) {
    color: var(--gestion);
}

.dropdown-item:nth-of-type(4) {
    color: var(--securite);
}

.dropdown-item:nth-of-type(5) {
    color: var(--autres);
}


/*****Boutons*****/

.button {
    font-weight: bold;
    border-radius: 40px;
    text-align: center;
    padding: 8px;
    font-size: 20px;
    width: fit-content;
    transition: 0.2s;
    cursor: pointer;
}

.foncé {
    color: white;
    border: 2px solid var(--ifpase);
    background-color: var(--ifpase);
}

.foncé:hover {
    background-color: white;
    border: 2px solid var(--ifpase);
    padding: 8px;
    color: var(--ifpase);
}

.foncé2 {
    color: white;
    border: 2px solid rgb(111, 127, 173);
    background-color: rgb(111, 127, 173);
}

.foncé2:hover {
    background-color: white;
    border: 2px solid rgb(111, 127, 173);
    padding: 8px;
    color: rgb(111, 127, 173);
}

.clair {
    color: white;
    border: 2px solid var(--ifpase-light);
    background-color: var(--ifpase-light);
}

.clair:hover {
    background-color: white;
    border: 2px solid var(--ifpase-light);
    padding: 8px;
    color: var(--ifpase-light);
}

.blanc {
    color: var(--ifpase-light);
    background-color: white;
    border: 2px solid var(--ifpase-light);
    padding: 8px;
}

.blanc:hover {
    background-color: var(--ifpase-light);
    border: none;
    padding: 10px;
    color: white;
}

.button.langues {
    color: white;
    background-color: var(--langues);
}

.button.langues:hover {
    background-color: white;
    border: 2px solid var(--langues);
    padding: 8px;
    color: var(--langues);
}

.button.logiciels {
    color: white;
    background-color: var(--logiciels);
}

.button.logiciels:hover {
    background-color: white;
    border: 2px solid var(--logiciels);
    padding: 8px;
    color: var(--logiciels);
}

.button.gestion {
    color: white;
    background-color: var(--gestion);
}

.button.gestion:hover {
    background-color: white;
    border: 2px solid var(--gestion);
    padding: 8px;
    color: var(--gestion);
}

.button.autres {
    color: white;
    background-color: var(--autres);
}

.button.autres:hover {
    background-color: white;
    border: 2px solid var(--autres);
    padding: 8px;
    color: var(--autres);
}

.button.securite {
    color: white;
    background-color: var(--securite);
}

.button.securite:hover {
    background-color: white;
    border: 2px solid var(--securite);
    padding: 8px;
    color: var(--securite);
}

.button.formations {
    margin-left: auto;
    margin-right: auto;
    width: 12vw;
    min-width: 260px;
}

.button.catalogue {
    margin-left: auto;
    margin-right: auto;
    width: 35vw;
}

.button.resultats {
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
}

.button.tp {
    margin-left: auto;
    margin-right: auto;
}

.editorial-button {
    margin-top: 0;
    border-radius: 50%;
}

.editorial-button p {
    position: absolute;
    z-index: 4;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size:20px;
    opacity: 0;
    transition: 0.3s;
    text-shadow: 1px 1px black;
}

.editorial-button img{
    width:130px;
    transform: translateZ(0) scale(1.0);
    height: auto;
    transition: 0.2s;
}

.editorial-button:hover img{
    filter: blur(2px);
}

.editorial-button:hover p{
    opacity: 1;
}

.fixed-bottom-right {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 3;
}

.fixed-bottom-left {
    position: fixed;
    left: 15px;
    bottom: 15px;
    border: none;
    z-index: 3;
}

/*****Bannière*****/

.banner {
    background-image: url("/assets/Images/batiment.png");
    width: 100%;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.hiddenimage {
    width: 100%;
    height: auto;
}

.banner .layer {
    opacity: 1;
    transition: 0.2s linear;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.container {
    position: absolute;
    min-width: 100vw;
    width: 100%;
    bottom: 30%;
    text-align: center;
    z-index: 1;
}

.container.formations .citation {
    width: 70%;
}

.container.formations .citation h2 {
    color: white;
}

.container.formations p {
    color: white;
}

.container.accueil .bienvenue {
    font-size: 38px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px black;
}

.tp {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-align: center;
}

.tp h1 {
    color: var(--ifpase-light);
}

.tp ul {
    list-style-type: none;
}

.qualiopi {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.qualiopi .qualiopi-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.qualiopi .qualiopi-header img {
    width: 25%;
}

.qualiopi .qualiopi-header h1 {
    width: 65%;
    color: var(--ifpase-light);
    font-size: 40px;
}

.qualiopi .portage-qualiopi {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.qualiopi .portage-qualiopi img {
    width: 45%;
}

.qualiopi .portage-qualiopi div {
    width: 45%;
    margin-top: auto;
    margin-bottom: auto;
}

/*****Actualités*****/
#actualités {
    border-top: 1px solid gray;
    background-color: var(--ifpase);
    background-image: url("/assets/Images/checkered-pattern.png");
    height: fit-content;
    margin: 0;
    box-shadow: 0px 5px 5px darkgray;
}

#actualités * {
    color: white;
}

#actualités h1 {
    text-align: center;
    text-shadow: 1px 1px black;
}

#actualités h2 {
    text-align: center;
    padding-bottom: 30px;
}

.carousel-indicators li {
    cursor: pointer;
    width: 30px;
    height: 5px;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.carousel-indicators li:hover {
    filter: brightness(0.9);
}
.carousel-indicators .active {
    background-color: rgb(200, 200, 200);
}

.carousel-item h2 a {
    color : rgb(200, 200, 200) !important;
    transition: 0.2s;
    text-decoration: underline;
}

.carousel-item h2 a:hover {
    filter : brightness(0.9);
}

/*****Citation*****/

.wrap-citation {
    width: 100%;
    text-align: center;
}

.citation {
    width: 70%;
    margin: auto;
    text-align: center;
    border-top: 1px solid var(--ifpase-light);
    border-bottom: 1px solid var(--ifpase-light);
}

.citation h1 {
    color: var(--ifpase-light);
    font-size: 40px;
}

.citation h2 {
    font-weight: lighter;
    font-size: 30px;
}

.wrap-citation p {
    color: grey;
    text-align: center;
    font-size: 20px;
    font-family: Arial;
}


/*****Réseaux*****/

.réseaux {
    text-align: center;
}

.réseaux img {
    width: 50px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
    transition: 0.2s;
}

.réseaux img:hover {
    transform: scale(1.5);
}


/*****Recommandations*****/

.recommandation {
    display: flex;
    justify-content: center;
}

.recommandation * {
    margin-left: 20px;
    margin-right: 20px;
}

.recommandation h1 {
    color: var(--ifpase-light);
    font-size: 40px;
}

.recommandation a {
    height: auto;
}

.recommandation img {
    width: 150px;
}


/*****Avis*****/

.wrap-avis {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avis {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
}

.wrap-avis h1 {
    font-size: 30px;
    margin-bottom: 50px;
    text-decoration: underline;
}

.avis h2 {
    text-align: center;
    font-size: 20px;
    vertical-align: center;
    width: 80%;
    margin-top: auto;
    margin-bottom: auto;
}

.avis .etoile {
    height: fit-content;
    margin: auto;
}

.avis .etoile img {
    width: 30px;
    height: auto;
}


/*****Contacts*****/

.wrap-contact {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}

.contact-card {
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}

.contact-card h2 {
    font-size: 30px;
    color: grey;
}

.contact-card p {
    font-size: 17px;
    transition: 0.1s;
}

.contact-card a p:hover {
    transform: scale(1.02);
    filter: brightness(0.8);
}

.contact-card .small {
    display: none;
}

.contact-card:nth-of-type(2) {
    border-left: 1px solid rgba(150, 150, 150, 0.5);
    border-right: 1px solid rgba(150, 150, 150, 0.5);
}

.contact-card h2 {
    color: grey;
}

.contact-card .modal-title {
    color: black;
}

.contact-card p:nth-of-type(1) {
    color: grey;
}

.contact-card a p {
    font-weight: bold;
}


/*****Formulaire*****/

.newsletter>* {
    margin-bottom: 5px;
}


/*****Formations*****/

h1.formations {
    text-align: center;
    color: rgb(54, 113, 143);
}

.row {
    display: flex;
    justify-content: space-around;
}

.formation-card {
    width: 250px;
    height: auto;
}

.formation-card>* {
    margin-bottom: 0;
}

.formation-item {
    position: relative;
    width: 100%;
    height: auto;
    border: 1px solid grey;
}

.formation-item img {
    width: 100%;
    height: auto;
}

.formation-item .layer {
    opacity: 0;
    position: relative;
    transition: 0.2s linear;
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.formation-item:hover .layer {
    opacity: 1;
}

.nom-formation {
    opacity: 0;
    transition: 0.2s linear;
    color: white;
    font-size: 22px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    z-index: 2;
    text-shadow: 1px 1px black;
}

.formation-card:first-of-type .formation-item .nom-formation {
    top: 50%;
    right: 25%;
    left: 25%;
    width: 50%;
}

.formation-card:not(.formation-card:first-of-type) .formation-item .nom-formation {
    top: 40%;
    right: 10%;
    left: 10%;
    width: 80%;
}

.formation-item:hover .nom-formation {
    opacity: 1;
}

.formation-card p {
    font-size: 0.9vw;
    color: grey;
}

.hidden {
    display: none;
    width: 100%;
}

.logos {
    margin: 0;
    width: 100%;
    display: flex;
}

.formation-card.logiciels .logos>img {
    width: 80%;
    height: auto;
    margin: auto;
    margin-bottom: 5px;
}

.formation-card.logiciels .logos div img{
    width: 18%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.formation-card.langues .logos>div {
    width: 70%;
}

.formation-card.langues .logos>img {
    width: 30%;
    height: auto;
}

.formation-card.langues .logos div {
    width: 100%;
}

/*****Info*****/

.wrap-infoform {
    display: flex;
    justify-content: space-around;
}

.infoform-card {
    text-align: center;
    max-width: 25%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.infoform-card>* {
    margin-top: 20px;
}

.infoform-card .button {
    font-size: 2vh;
    width: 75%;
    margin: auto;
    text-align: center;
}

.infoform-card h1 {
    color: var(--ifpase-light);
    font-size: 1.5vw;
    font-weight: bold;
}

.infoform-card h2 {
    font-size: 1vw;
    color: rgb(54, 113, 143);
    font-weight: bold;
}

.infoform-card p {
    font-size: 0.8vw;
    text-align: justify;
}

.infoform-card>a {
    text-decoration: none;
    font-size: 0.8vw;
    padding: 0;
}


/*****Pages catégories*****/

body.categorie {
    padding-top: 70px;
}

body.categorie>*:not(.categorie-footer):not(.button.categorie),
.categorie-footer>* {
    margin-bottom: 50px;
}

.wrap-categorie-presentation {
    display: flex;
    justify-content: center;
    position: relative;
}

.wrap-categorie-presentation>* {
    margin-right: 20px;
    margin-left: 20px;
}

body.langues .wrap-categorie-presentation .formation-card:not(.langues) {
    display: none;
}

body.logiciels .wrap-categorie-presentation .formation-card:not(.logiciels) {
    display: none;
}

body.gestion .wrap-categorie-presentation .formation-card:not(.gestion) {
    display: none;
}

body.securite .wrap-categorie-presentation .formation-card:not(.securite) {
    display: none;
}

body.autres .wrap-categorie-presentation .formation-card:not(.autres) {
    display: none;
}

.wrap-categorie-presentation .formation-card>*:not(.formation-item) {
    display: none;
}

.wrap-categorie-presentation .formation-card {
    pointer-events: none;
}

.wrap-categorie-presentation .row,
.wrap-categorie-presentation .wrap-formations {
    width: fit-content;
    height: fit-content;
}

.wrap-categorie-presentation .formation-item .layer,
.categorie-footer .formation-item .layer {
    opacity: 1;
}

.wrap-categorie-presentation .formation-item .nom-formation,
.categorie-footer .formation-item .nom-formation {
    opacity: 1;
}

body.langues .categorie-description h2,
body.langues .categorie-description b,
body.langues .certifications h2,
body.langues .wrap-avis h1,
body.langues .referentiel {
    color: var(--langues);
}

body.langues .referentiel:hover {
    filter: brightness(0.8);
}

body.logiciels .categorie-description h2,
body.logiciels .categorie-description b,
body.logiciels .certifications h2,
body.logiciels .wrap-avis h1,
.logiciel-card i {
    color: var(--logiciels);
}

body.gestion .categorie-description h2,
body.gestion .categorie-description b,
body.gestion .certifications h2,
body.gestion .wrap-avis h1 {
    color: var(--gestion);
}

body.securite .categorie-description h2,
body.securite .categorie-description b,
body.securite .certifications h2,
body.securite .wrap-avis h1 {
    color: var(--securite);
}

body.autres .categorie-description h2,
body.autres .categorie-description b,
body.autres .certifications h2,
body.autres .wrap-avis h1,
.autre-card i {
    color: var(--autres);
}

.categorie-description h2 {
    font-size: 30px;
}

.categorie-description p,
.categorie-description li {
    color: grey;
}

.certifications h2 {
    text-align: center;
    font-weight: lighter;
}

.certifications .images {
    display: flex;
    justify-content: center;
}

.certifications .images img {
    height: 50px;
    margin-left: 40px;
    margin-right: 40px;
}

body.langues .certifications .images img {
    height: 50px;
}

body.langues .certifications .images img:nth-of-type(3) {
    height: 45px;
}

body.logiciels .certifications .images img:nth-of-type(2) {
    height: 45px;
}

body.gestion .certifications .images img {
    height: 75px;
}

body.gestion .certifications .images img:nth-of-type(2) {
    height: 60px;
}

body.categorie .list .group {
    margin-bottom: 15px;
}

.wrap-langues {
    display: flex;
    justify-content: space-around;
}

.langues-card {
    width: 300px;
    height: fit-content;
}

.langues-card:first-of-type {
    background-color: rgb(214, 220, 234);
}

.langues-card:nth-of-type(2) {
    background-color: rgb(252, 221, 223);
}

.langues-card:nth-of-type(3) {
    background-color: rgb(255, 246, 214);
}

.langues-card img {
    width: 100%;
    height: auto;
}

.langues-card ul {
    padding: 0;
}

.langues-card ul a li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: var(--langues);
}

.langues-card h2 {
    font-weight: bold;
    color: var(--langues);
    margin-top: 20px;
}

.langues-card>*:not(img),
.langues-card .group i,
.langues-card li {
    margin-left: 15px;
}

.langues-card ul>a li{
    margin-bottom: 15px;
}

.langues-card i {
    font-weight: lighter !important;
    color: grey;
}

.langues-card .group{
    display: flex;
    flex-direction: column;
}

body.categorie .row {
    justify-content: center;
}

body.categorie .row:not(.categorie-footer .row)>* {
    margin-left: 50px;
    margin-right: 50px;
}

body.logiciels .row:first-of-type {
    margin-bottom: 50px;
}

.logiciel-card,
.gestion-card,
.autre-card,
.securite-card {
    width: 20vw;
    height: fit-content;
    text-align: center;
    margin-bottom: 50px;
}

.logiciel-card img {
    width: 70%;
    height: auto;
}

.gestion-card img {
    width: 60%;
    height: auto;
}

.autre-card img {
    width: 60%;
    height: auto;
}

.securite-card img {
    height: 200px;
    width: auto;
}

.logiciel-card h2,
.logiciel-card .modal-toggle * {
    color: var(--logiciels);
}

.gestion-card h2,
.gestion-card .modal-toggle * {
    color: var(--gestion);
}

.autre-card h2,
.autre-card .modal-toggle * {
    color: var(--autres);
}

.securite-card h2,
.securite-card .modal-toggle * {
    color: var(--securite);
}

.logiciel-card .images img {
    width: auto;
    height: 50px;
    margin: 10px;
}

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

.wrap-packs img {
    height: 125px;
    width: auto;
    margin-right: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

.packs {
    width: 50%;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

.packs h1 {
    color: var(--gestion);
    font-size: 3vh;
}

.packs p {
    color: var(--gestion);
    font-weight: bold;
}


body.categorie .wrap-citation p {
    display: none;
}

.categorie-footer {
    padding-bottom: 1px;
}

.categorie-footer .row {
    justify-content: center;
}

.autres-categories h2 {
    color: rgb(54, 113, 143);
    text-align: center;
    font-size: 25px;
}

.modal-toggle {
    cursor: pointer;
}

.modal-toggle * {
    transition: 0.1s linear;
    font-weight: bold;
    text-decoration: underline;
}

.modal-toggle>*:hover {
    transform: scale(1.02);
    filter: brightness(0.7);
}

.modal .list a {
    transition: 0.2s;
}

.modal .list a:hover {
    color: var(--ifpase);
}

.categorie-footer .formation-item:hover~.hidden,
.categorie-footer .formation-card p,
.categorie-footer .formation-card .logos {
    display: none;
}

.categorie-footer .formation-item {
    transition: 0.2s linear;
}

.categorie-footer .formation-item:hover {
    transform: scale(1.1);
}

body.langues .categorie-footer .langues {
    display: none;
}

body.langues .categorie-footer .langues {
    display: none;
}

body.logiciels .categorie-footer .logiciels {
    display: none;
}

body.gestion .categorie-footer .gestion {
    display: none;
}

body.securite .categorie-footer .securite {
    display: none;
}

body.autres .categorie-footer .autres {
    display: none;
}

body.langues .fixed-bottom-right {
    background-color: var(--langues);
}

body.logiciels .fixed-bottom-right {
    background-color: var(--logiciels);
}

body.gestion .fixed-bottom-right {
    background-color: var(--gestion);
}

body.securite .fixed-bottom-right {
    background-color: var(--securite);
}

body.autres .fixed-bottom-right {
    background-color: var(--autres);
}


/*****Page contact*****/
body.contact {
        padding-top: 110px;
}

.wrap-directrice p {
    color: grey;
}

.wrap-directrice>div {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.wrap-directrice>div>* {
    margin-right: 20px;
    margin-left: 20px;
}

.directrice-presentation {
    width: 30%;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

.directrice-presentation h1 {
    color: black;
}

.directrice-presentation h2 {
    color: rgb(54, 113, 143);
    font-weight: lighter;
}

.domaines h2 {
    color: rgb(54, 113, 143);
}

.anchor {
    display: block;
    height: 115px;
    margin-top: -115px;
    overflow-y: scroll;
    visibility: hidden;
    scroll-behavior: smooth;
}

.page-footer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-footer img {
    width: 45%;
    height: auto;
}

.page-footer p {
    font-size: 10px;
}


/*****Formulaire de contact*****/

.formulaire-contact {
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding-bottom: 50px;
}

.formulaire-contact h1 {
    color: rgb(111, 127, 173);
}

.formulaire-contact input:not(input[type=submit]):not(input[type=checkbox]),
.formulaire-contact select,
.formulaire-contact textarea {
    width: 100%;
    height: 30px;
    margin-top: 20px;
    font-family: Arial;
    background-color: rgb(240, 240, 240);
    border: none;
    padding: 2px;
}

.formulaire-contact textarea {
    height: 100px;
    resize: none;
}

.formulaire-contact *::placeholder {
    color: dimgray;
}

.formulaire-contact #submitBtn {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: white;
    border: 2px solid var(--ifpase-light);
    border-radius: 40px;
    color: var(--ifpase-light);
    font-weight: bold;
    cursor: pointer;
    height: 50px;
    font-size: 20px;
    transition: 0.2s;
}

.formulaire-contact #submitBtn:hover {
    background-color: var(--ifpase-light);
    color: white;
}

.formulaire-contact .categories {
    display: flex;
    justify-content: space-between;
}

.formulaire-contact .categories .row {
    display: flex;
    justify-content: space-between;
    max-width: 50%;
}

input[type=checkbox] {
    margin-bottom: auto;
    margin-right: 5px;
}


/*****Modal formations*****/

.modal {
    overflow-y: hidden;
    height: 100%;
    margin: 0;
}

.modal-header {
    background: linear-gradient(to bottom, rgba(90, 197, 242, 1), rgba(5, 147, 170, 1));
}

.inscription, .referentiel {
    color: var(--ifpase);
    font-weight: bold;
    transition: 0.2s;
}

.inscription:hover, .referentiel:hover {
    color: var(--ifpase-light);
}

body.categorie .modal a {
    cursor: pointer;
}

body.categorie .modal ul {
    margin-bottom: 15px;
    list-style-type: disc;
}

body.categorie .modal ul p {
    margin: 0;
    margin-top: 20px;
}

.modal-open {
    padding-right: 0 !important;
    overflow: scroll;
}

.modal-return {
    color: black;
    transition: 0.2s;
}

.modal-return:hover {
    color: var(--ifpase);
    fill: var(--ifpase);
}


/*****Page Boutique*****/

body.boutique {
    padding-top: 120px;
    background-image: url("/assets/Images/fond\ boutique.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.snipcart-modal__container {
    padding-top: 100px !important;
}

#Categorie-List {
    width: 100%;
    margin: 0;
    padding: 0;
}

#Categorie-List .list-row{
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px ;
}

#Categorie-List .categorie-box {
    text-align: center;
    background-color: var(--ifpase);
    background-image: url("/assets/Images/translucent-fibres.png");
    width: 350px;
    height: 350px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: 50px;
}

#Categorie-List .categorie-box .header{
    background-color: var(--ifpase);
    background-image: url("/assets/Images/translucent-fibres.png");
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    font-weight: bold;
    color: white;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#Categorie-List .categorie-box .header h2{
    font-weight: bold;
    color: white;
    width: 90%;
    margin: auto;
}

#Categorie-List .categorie-box .carousel {
    height: 70%;
    width: 90%;
    margin: auto;
}

#Categorie-List .categorie-box .carousel-inner {
    height: 100%;
    width: 100%;
    margin: auto;
}

#Categorie-List .categorie-box .carousel-control-prev {
    color: #000;
}

#Categorie-List .categorie-box .carousel-control-next {
    color: #000;
}

#Categorie-List .categorie-box .box-page.active {
    display: flex !important;
}
#Categorie-List .categorie-box .box-page {
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#Categorie-List .categorie-box .box-row {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-around;
}

#Categorie-List .categorie-box .box-largepage {
    height: 70%;
    width: 98%;
    margin: auto;
    display: flex;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    justify-content: space-around;
    align-items: center;
}

.box-row .box-item {
    min-width: 50%;
}

.box-item {
    width: fit-content;
    transition: 0.2s;
    text-align: center;
    margin-left:auto;
    margin-right: auto;
}

.box-item:hover {
    transform: scale(1.1);
}

.box-item img {
    width: 120px;
    height: auto;
}

#logiciels-box .box-item img, #otherList .box-item img {
    width: 80px;
    height: auto;
}

.box-item h3 {
    color: black;
}

.categorie-box .btn-voirplus, .categorie-box .btn-reduire {
    background-color: white ;
    border: 1px solid black;
    border-radius: 10px;
}

#Product-List {
    list-style-type: none;
}

.admin #Product-List {
    height: 80%;
}

.admin #Product-List #content {
    height: fit-content;
    overflow: auto;
}

.product-item {
    margin-bottom: 20px;
    width: 90%;
}

.product-item .content{
    background-color: darkgray;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid darkgray;
    padding: 30px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

.product-item .header{
    width: 100%;
    border: 1px solid black !important;
}


.product-item .modal-content {
    width: fit-content;
}

.product-item img {
    height: 180px;
    margin: auto;
}

.product-content {
    display: flex;
    justify-content: space-around;
    padding-left: 20px;
    width: 100%;
    max-width: 70%;
}

.product-pay {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#otherList {
    display: flex;
    justify-content: space-around;
}

/*****Page Connexion*****/
body.admin .connexion {
    text-align: center;
}

/*****Sidebar admin*****/
.sidebar {
    height: 80%;
    width: 0;
    position: fixed;
    z-index: 1;
    border-top-right-radius: 20px;
    bottom: 0;
    left: 0;
    background-color: var(--ifpase);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    filter:brightness(0.8);
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.openbtn {
    position: fixed;
    font-size: 20px;
    cursor: pointer;
    background-color: var(--ifpase);
    color: white;
    padding: 10px 15px;
    top: 20%;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.openbtn:hover {
    filter: brightness(0.8);
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
}
/*****Formulaires admin*****/

body.admin {
    padding-top: 120px;
    background-color: rgb(243, 243, 243);
}

body.dashboard {
    text-align: center;
}

body.dashboard .fonctions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.dashboard .fonctions a{
    margin-top: 20px;
    width: 300px;
}

.admin form {
    margin: auto;
    width: 50%;
}

.admin form:not(.connexion) input:not(input[type=radio]):not(input[type=checkbox]):not(input[type=submit]):not(input[type=file]),
.admin form textarea {
    width: 100%;
}

.admin form textarea {
    height: 100px;
}

.admin form select {
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    transition: 0.2s;
}

.admin form button {
    background-color: var(--ifpase-light);
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    transition: 0.2s;
}

.admin form button:hover, .admin form input[type=submit]:hover {
    filter: brightness(0.8);
}

.admin .function {
    color: var(--ifpase) !important;
    transition: 0.2s;
}

.admin .function.hide {
    visibility: hidden;
}

.admin .function:hover {
    filter: brightness(0.6);
}

.formedito textarea, .formedito input[type=text] {
    background-color: transparent;
    border: none;
    resize: none;
}

.formedito #titre {
    font-weight: bolder;
    font-size: 30px;
}

.formedito .stitre {
    font-weight: bold;
}

.adminbtn, .buy-button  {
    background-color: var(--ifpase);
    color: black !important;
    border: 1px solid black;
    border-radius: 5px;
    transition: 0.2s;
    padding: 3px;
    cursor: pointer;
}

.adminbtn:hover, .buy-button:hover {
    filter: brightness(0.8);
}

/*****Admin List****/


.admin .loader {
    position : fixed;
    z-index: 9999;
    color: var(--ifpase);
    top: 50%;
    width: 10vw;
    height: 10vw;
    margin-left: 45vw;
    margin-right: 45vw;
    cursor : wait;
}

.filter {
    width: 100%;
    list-style-type: none;
    text-align: center;
}

#SearchBar {
    width: 80%;
    height: 30px;
    margin: auto;
}

#filterOptions {
    padding: 0;
    width: 100%;
    list-style-type: none;
}

#filterOptions>div{
    width: 100%;
    display: flex;
    justify-content: center;
}

#filterOptions li {
    max-height: 50px !important;
    width: auto;
    margin-top: 5px;
}

#filterOptions li a {
    font-size: 15px;
    padding: 0 20px;
    border-left: 1px solid var(--ifpase);
    color: var(--ifpase);
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    display: block;
}

#filterOptions li:last-of-type a {
    border-right: 1px solid var(--ifpase);
}

#filterOptions li a:hover {
    filter: brightness(0.9);
}

#filterOptions li.active a {
    background: var(--ifpase);
    color: white;
    border-color: var(--ifpase);
}

.List {
    padding: 0;
    margin-left: 30px;
}

.ListItem {
    background-color: white;
    display:flex;
    border:1px solid grey;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}

.ListItem h2{
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ListItem.hidden {
    display: none !important;
}

.List .trash {
    border: none;
    background-color: transparent;
    transform: scale(1.5);
}

.List .trash svg{
    transition: 0.1s;

}

.List .trash svg:hover {
    fill: red;
    transform: scale(1.1);
}

.admin .ListItem {
    width: 95%;
    align-self: flex-end;
}

.admin .listresultat, .admin .listcommande {
    width: 80%;
    margin:auto;
}

.listresultat .resultat, .listcommande .commande {
    background-color: white;
    margin-bottom: 10px;
}

.resultat .header, .product-item .header, .commande .header {
    display:flex;
    border: 1px solid darkgray;
    background-color: var(--ifpase);
    cursor: pointer;
    height: 50px;
}

.resultat .header .toggle, .resultat .header #add, .product-item .header .toggle, .commande .header .toggle {
    background-color: var(--ifpase) !important;
    font-size: 20px;
    width:auto;
    text-align: center;
    border: none !important;
}

.resultat .header .toggle, .product-item .header .toggle, .commande .header .toggle {
    width:50px !important;
}

.resultat .header .trash,.commande .header .trash  {
    background-color: var(--ifpase-light);
    border-radius: 100px;
    border: 1px solid white;
    margin-left: 20px;
}

.resultat .header .trash:hover *, .commande .header .trash:hover *{
    fill: black;
}

.resultat .header:hover>*:not(.trash), .product-item .header:hover>*, .commande .header:hover>*:not(.trash){
    color: black;
}

.resultat .header *, .product-item .header *, .commande .header * {
    margin-top: auto;
    margin-bottom: auto;
    color: white;
    transition: 0.2s;
}

.add-resultat {
    transition: 3s;
    width: fit-content;
}

#formresultat div>* {
    margin-top: auto;
    margin-bottom: auto;
}

#Formation-List .categorie-box {
    margin-bottom: 20px;
}

#Formation-List .souscategorie-box, #Formation-List .ListItem {
    width: 95%;
    margin-left: auto;
}

#Formation-List .header {
    display: flex;
    cursor: pointer;
}

#Formation-List .header .toggle {
    border: none;
    width: 40px;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    transition: 0.2s;
}

#Formation-List .header .toggle:hover {
    filter: brightness(0.8);
}

#Formation-List div.group {
    border-left: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
    margin-bottom: 20px;
}

#Formation-List .results {
    margin-bottom:auto;
    margin-top:auto;
    margin-left: 20px;
}

.admin .downbar {
    justify-content: space-between;
    width: 30%;
    background-color: white;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-top-right-radius: 20px;
    bottom: 0;
    left: 0;
}

.admin .downbar>div{
    display: flex;
    width: 100%;
    padding-top: 5px;
    justify-content:center;
    margin: 0;
}


.admin .downbar .btn, .admin #choice .btn {
    margin: auto;
    max-width: 30%;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    transition: 0.2s;
}

.admin .downbar .btn:hover, .admin #choice .btn:hover {
    filter:brightness(0.8);
}

.admin .downbar-content .btn {
    background-color: var(--ifpase);
}

.admin .downbar.valid, .admin #choice .valid {
    background-color: #2ecc71;
}

.admin .downbar .cancel, .admin #choice .cancel {
    background-color: #e74c3c;
}

/*****Page Editorial*****/
.editorial {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 25%;
    text-align:justify;
    height: 85%;
    overflow-y: auto;
    margin: auto;
    background-color: rgb(243, 243, 243);
}


.editorial p{
    word-wrap:break-word;
}

.editorial #titre {
    text-align: center;
    align-self: center;
    width: 100%;
}

.editorial-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editorial-header img {
    transform: translateZ(0);
    width: 250px;
    height: auto;
}

/*****RGPD*****/
body.rgpd {
    padding-top: 120px;
    padding-left: 10px;
}

@media (max-width: 1600px) {
    .container.formations {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/*****Affichage responsive*****/
@media (max-width:1260px) {
    .filter {
        width: 950px;
    }

    #filterOptions {
        width: 100%;
    }
}

@media (max-width:1200px) {
    .page-content>* {
        margin-top: 50px;
    }
    /*Navbar*/
    .navbar .button {
        width: fit-content;
        padding: 10px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .navbar-brand img {
        width: 200px;
        height: auto;
    }
    /*Banner*/
    .banner .container {
        bottom: 20%;
        padding: 0;
    }

    .banner .citation {
        width: 90% !important;
    }

    .banner .wrap-citation * {
        margin-bottom:0;
    }

    .banner .wrap-citation h1 {
        font-size: 30px;
    }
    .banner .wrap-citation h2 {
        font-size: 25px;
    }
    .banner .wrap-citation p {
        font-size: 17px;
    }
    /*Boutons*/
    .button {
        font-size: 20px;
        width: fit-content !important;
    }
    /*Recommandation*/
    .recommandation h1 {
        font-size: 30px;
    }
    .recommandation img {
        width: 100px;
    }
    /*Avis*/
    .avis .etoile img {
        width: 40px;
        height: auto;
    }
    .avis h2 {
        font-size: 20px;
        width: 60%;
    }
    /*Contacts*/
    .wrap-contact {
        padding: 0;
    }
    .contact-card .large {
        display: none;
    }
    .contact-card .small {
        display: block;
    }
    /*Formations*/
    .formation-card {
        margin-bottom: 30px;
    }
    .formation-card .hidden,
    .formation-card .layer,
    .formation-card .nom-formation {
        opacity: 1;
        display: block;
    }
    .formation-card p {
        font-size: 15px;
    }
    .logos img {
        height: 25px;
    }
    /*Infos formations*/
    .wrap-infoform {
        display: flex;
        flex-direction: column;
        width: 75%;
        margin: auto;
        align-items: center;
    }
    .infoform-card {
        max-width: 100%;
    }
    .infoform-card h1 {
        font-size: 30px;
    }
    .infoform-card h2 {
        font-size: 22px;
    }
    .infoform-card p,
    .infoform-card>a {
        font-size: 20px;
    }
    /*Pages catégories*/
    .certifications .images img {
        margin: auto;
    }
    .logiciel-card,
    .gestion-card,
    .autre-card,
    .securite-card {
        width: 30%;
    }
    body.logiciels .row:nth-of-type(2) .logiciel-card>img {
        width: 100%;
    }
    body.logiciels .row:nth-of-type(2) .logiciel-card br {
        display: none;
    }
    /*Page contact*/
    .domaines .directrice-presentation {
        display: none;
    }

    /*Footer*/
    .page-footer {
        padding-bottom: 50px;
    }
}

@media (max-width:950px) {
    .filter {
        width: 100vw;
    }

    #SearchBar {
        width: 90%;
        margin-left: 5%;
    }

    #filterOptions {
        width: 100vw;
        overflow-x: scroll;
    }

    #filterOptions>div {
        width: 950px;
    }
}

@media (max-width:900px) {
    .wrap-langues {
        flex-direction: column;
        align-items: center;
    }
    .langues-card {
        width: 70%;
        margin-bottom: 50px;
    }

    .product-content {
        display: block;
    }

    .product-content>*{
        width: 100%;
    }

    .product-pay {
        text-align: center;
        display: block;
    }

    .product-item img {
        width: 120px;
        height: auto;
    }

    .banner .bienvenue {
        font-size: 30px !important;
    }
}

@media (max-width:800px) {
    .banner .container {
        bottom: 0;
        padding: 0;
    }
}

@media (max-width:800px) {
    .banner .wrap-citation h1 {
        font-size: 25px;
    }
    .banner .wrap-citation h2 {
        font-size: 20px;
    }
    .banner .wrap-citation p {
        font-size: 12px;
    }
}

@media (max-width:650px) {
    .banner .bienvenue {
        font-size: 25px !important;
        bottom: 0;
    }
}

@media (max-width:500px) {
    .page-content {
        height: fit-content;
        margin-top: 75px;
    }
    .page-content>* {
        margin-top: 25px;
    }

    /*Banner*/
    .banner .bienvenue {
        font-size: 17px !important;
        bottom: 0;
    }

    /*Actualités*/
    #actualités h1 {
        font-size: 17px;
    }
    #actualités h2 {
        font-size: 15px;
    }

    #actualités .carousel-indicators li {
        width: 20px;
        height: 3px;
    }
    /*Réseaux*/
    .réseaux img {
        width: 30px;
    }
    /*Citation*/
    .citation {
        width: 90%;
    }
    .citation h1 {
        font-size: 18px !important;
    }
    .citation h2 {
        font-size: 15px !important;
    }
    .wrap-citation p {
        font-size: 10px !important;
    }
    /*Boutons*/
    .button {
        font-size: 10px;
        width: fit-content !important;
    }
    /*Recommandation*/
    .recommandation h1 {
        font-size: 15px;
    }
    .recommandation img {
        width: 70px;
    }
    /*Avis*/
    .avis .etoile img {
        width: 20px;
        height: auto;
    }
    .avis h2 {
        font-size: 15px;
        width: 60%;
    }
    /*Contact*/
    .contact-card img {
        width: 50px;
        height: auto;
    }
    /*Footerimage*/
    .page-footer img {
        width: 100%;
        height: auto;
    }
    /*Formations*/
    h1.formations {
        font-size: 20px;
    }
    body.formations .row {
        display: inline-block;
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
    .formation-card .nom-formation {
        font-size: 20px;
    }
    .formation-card p {
        font-size: 12px;
    }
    .logos img {
        height: 22px;
    }
    /*Infos formations*/
    .wrap-infoform {
        display: inline-block;
        width: 100%;
    }
    .infoform-card h1 {
        font-size: 20px;
    }
    .infoform-card h2 {
        font-size: 15px;
    }
    .infoform-card p,
    .infoform-card>a {
        font-size: 12px;
    }
    /*Pages catégories*/
    .wrap-categorie-presentation {
        flex-direction: column;
    }
    .categorie-description h2 {
        font-size: 20px;
    }
    .certifications .images {
        width: 100vw;
        display: flex;
        flex-direction: column;
    }

    .autres-categories h2 {
        font-size: 15px;
    }
    .autres-categories .formation-card {
        width: 200px;
    }
    .prap-presentation {
        width: 75%;
    }
    body.categorie .row,
    .wrap-packs,
    .wrap-directrice>div {
        flex-direction: column;
        align-items: center;
    }
    .logiciel-card,
    .gestion-card,
    .autre-card,
    .securite-card {
        width: 70%;
    }
    .wrap-packs img {
        width: 200px
    }
    .packs {
        width: 75%;
    }
    /*Page contact*/
    .wrap-directrice img {
        width: 50%;
        height: auto;
    }
    .directrice-presentation {
        width: 80%;
    }
    .formulaire-contact {
        width: 80%;
    }
    .categories .row {
        display: flex;
        justify-content: space-around;
    }
    #submitBtn {
        content: "Envoyer";
    }
    /*Page Boutique*/
    #Product-List {
        width: 100vw;
        margin-left: 0;
    }

    .product-item   {
        width: 100vw;
        padding-left: 10px;
        overflow-x: scroll;
    }

}