/*
** Réalisation : LaFabrikk
** https://www.lafabrikk.fr
*/

/* --- DISTANCIEL --- */

/* --- ARCHIVE --- */
.distanciel-qualiopi {
  text-align: center;
}
.distanciel-qualiopi img {
    width: 18.75rem;
}
.distanciel-modules-avant {
  justify-content: center;
  gap: var(--KPM024);
}
.distanciel-modules-avant h3 {
  width: 100%;
}
.distanciel-module-avant {
  width:18.75rem;
  padding: var(--KPM030) var(--KPM040);
  background-color: #fff;
}


/* --- À LA CARTE --- */
#configurateur {
  justify-content: space-between;
  margin-top: var(--KPM060);
  margin-bottom: var(--KPM050);
}
.configurateur-filtres {
  width: 28.10%;
  background-color: #fff;
}
.filtres-top {
  align-items: center;
  justify-content: space-between;
  padding-top: var(--KPM018);
  padding-bottom: var(--KPM021);
  padding-left: var(--KPM042);
  padding-right: var(--KPM042);
}
.filtres-top-left {
  align-items: center;
  gap: var(--KPM010);
  color: var(--KPMcoldarkblue);
}
.filtres-top-right button {
  color: #627384;
}

.configurateur-filtres .thematique {
  width: 100%;
  padding-left: var(--KPM042);
  padding-right: var(--KPM042);
  border-top: var(--KPM001) solid #EFEFEF;
  padding-top: var(--KPM018);
  padding-bottom: var(--KPM021);
}
.btn-carte.btn-thematique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--KPM016);
  color: var(--KPMcoldarkblue);
}
.sous-thematique-liste {
  margin-top: var(--KPM015);
}
.sous-thematique-liste label {
  display: block;
  margin-top: var(--KPM005);
}

.sous-thematique-liste label input[type=checkbox]{
    display: none;
}
.sous-thematique-liste label input[type=checkbox] + span {
  position: relative;
  display: block;
  cursor: pointer;
  margin-left: 0;
  padding-left: var(--KPM034);
}
.sous-thematique-liste label input[type=checkbox] + span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--KPM018);
    height: var(--KPM018);
    background: transparent;
    border-radius: var(--KPM004);
    border: var(--KPM001) solid #DEDEDE;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.sous-thematique-liste label input[type=checkbox] + span:after {
    content: '';
    position: absolute;
    top: var(--KPM004);
    left: var(--KPM004);
    width: var(--KPM010);
    height: var(--KPM010);
    background: #0F3D66;
    border-radius: var(--KPM004);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    opacity: 0;
}
.sous-thematique-liste label input[type=checkbox]:checked + span:after {
    opacity: 1;
}

#btn-voirpacks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--KPM016);
  color: var(--KPMcoldarkblue);
}

#btn-voirtout {
  width: 100%;
}

.configurateur-liste {
  width: 70.07%;
}
.configurateur-liste .thematique {
  margin-top: var(--KPM088);
}
.configurateur-liste .thematique:first-child {
  margin-top: 0;
}
.sousthematique {
  margin-top: var(--KPM088);

}
.sousthematique:first-child {
  margin-top: 0;
}
.sousthematique .sousthematique-titre {
  width: 100%;
  margin-bottom: var(--KPM050);
  font-size: var(--KPM044);
  color: var(--KPMcoldarkblue);
  text-align: center;
}
.sousthematique .offre {
  width: 31.6%;
  margin-top: 2.6%;
  margin-right: 2.6%;
  padding: var(--KPM030) var(--KPM040);
  background-color: #fff;
}
.sousthematique .offre:nth-child(3n+1){
  margin-right: 0;
}
.module-thematique {
  margin-bottom: var(--KPM010);
  font-size: var(--KPM013);
  line-height: var(--KPM016);
  color: #004C98;
  text-transform: uppercase;
}
.module-titre {
  height: var(--KPM100);
  margin-bottom: var(--KPM010);
  font-size: var(--KPM020);
  line-height: var(--KPM023);
}
.module-titre a {
  color: var(--KPMcoldarkblue);
  transition: all 0.2s;
}
.sousthematique .offre:hover .module-titre a {
  color: var(--KPMcolblue);
}
.module-temps {
  margin-bottom: var(--KPM008);
  font-size: var(--KPM014);
  color: #627384;
}
.module-temps span {
  color: var(--KPMcolgreen);
}
.module-prix p {
  margin-bottom: var(--KPM040);
  font-size: var(--KPM014);
  color: #627384;
}
.module-prix p span {
  font-size: var(--KPM028);
  font-weight: 500;
  color: var(--KPMcoldarkblue);
}
.module-prix .add-module {
  width: 100%;
}

.pack {
  gap: var(--KPM021);
  align-items: center;
  justify-content: center;
  width: 65.8%;
  margin-top: 2.6%;
  padding: var(--KPM040) var(--KPM016);
  background-color: var(--KPMcolblue);
  color: #fff;
}
.pack-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 16.5rem;
  height: 16.5rem;
  border-radius: 50rem;
  padding: var(--KPM016);
  background-color: #004C98;
  font-size: var(--KPM022);
  line-height: var(--KPM025);
  text-align: center;
}
.card-modules {
  font-size: var(--KPM040);
  line-height: var(--KPM047);
  font-weight: 500;
}

.pack-right {
  width: 14rem;
}
.pack-titre {
  margin-bottom: var(--KPM019);
  font-size: var(--KPM020);
  line-height: var(--KPM025);
}
.pack-prix p {
  margin-bottom: var(--KPM022);
  font-size: var(--KPM014);
}
.pack-prix p span {
  font-size: var(--KPM028);
  font-weight: 500;
}
.pack-prix .add-pack {
  width: 100%;
}

/* --- MODULE SINGLE --- */
#single-module-header {
  justify-content: space-between;
  padding-top: var(--KPM020);
  padding-bottom: var(--KPM050);
  background-color: #fff;
  font-size: var(--KPM018);
  line-height: var(--KPM024);
}
.single-module-header-top {
  width: 100%;
  margin-bottom: var(--KPM050);
  text-align: center;
}
.single-module-header-top p {
  margin-top: var(--KPM013);
  font-size: var(--KPM026);
  line-height: var(--KPM032);
  color: var(--KPMcolgreen);
}
.single-module-header-top h1 {
  width: 65.27%;
  margin: var(--KPM016) auto;
}
.single-module-header-left {
  width: 49.03%;
}
.single-module-header-right {
  width: 49.03%;
}
#single-module-header p.titre {
  margin-top: var(--KPM013);
  margin-bottom: var(--KPM021);
  font-size: var(--KPM026);
  line-height: var(--KPM032);
  color: var(--KPMcoldarkblue);
}

#single-module-content {
  align-items: center;
  justify-content: space-between;
  margin-top: 8.125rem;
  margin-bottom: var(--KPM100);
}
#single-module-content .content-content {
  width: 59.46%;
}
#single-module-content .content-image {
  position: relative;
  width: 32.04%;
  aspect-ratio: 1.33;
}
#single-module-content .content-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--KPM012);
}

.distanciel-seo {
  width: 100%;
  margin-top: 8.125rem;
  padding: 7.125rem;
  background-color: var(--KPMcolblue);
  font-size: var(--KPM020);
  line-height: var(--KPM024);
  color: #fff;
}
.distanciel-seo h3 {
  margin-bottom: var(--KPM020);
  color: #fff;
}
.distantiel-seo-retour {
  margin-top: var(--KPM053);
}

/* --- PANIER --- */
#demande-devis {
  display: none;
}