html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol,ul {list-style: none;margin: 0;padding: 0;}
blockquote,q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table {border-collapse: collapse;border-spacing: 0;}
:root {
    --primaire: #149d4c;
    --primaire-100: rgba(20, 157, 76, 0.1);
    --primaire-200: rgba(20, 157, 76, 0.2);
    --primaire-250: rgba(20, 157, 76, 0.25);
    --primaire-300: rgba(20, 157, 76, 0.3);
    --primaire-400: rgba(20, 157, 76, 0.4);
    --primaire-500: rgba(20, 157, 76, 0.5);
    --primaire-600: rgba(20, 157, 76, 0.6);
    --primaire-700: rgba(20, 157, 76, 0.7);
    --primaire-800: rgba(20, 157, 76, 0.8);
    --primaire-900: rgba(20, 157, 76, 0.9);

    --primary-100: rgba(21, 101, 192,.1);
    --primary-200: rgba(21, 101, 192,.2);
    --primary-300: rgba(21, 101, 192,.3);
    --primary-400: rgba(21, 101, 192,.4);
    --primary-500: rgba(21, 101, 192,.5);
    --primary-600: rgba(21, 101, 192,.6);
    --primary-700: rgba(21, 101, 192, 0.7);
    --primary-800: rgba(21, 101, 192,.8);
    --primary-900: rgba(21, 101, 192,.9); 

    --danger-50: rgba(220,53,69,.05);
    --danger-100: rgba(220,53,69,.1);
    --danger-200: rgba(220,53,69,.2);
    --danger-300: rgba(220,53,69,.3);
    --danger-400: rgba(220,53,69,.4);
    --danger-500: rgba(220,53,69,.5);
    --danger-600: rgba(220,53,69,.6);
    --danger-700: rgba(220,53,69, 0.7);
    --danger-800: rgba(220,53,69,.8);
    --danger-900: rgba(220,53,69,.9);

    --secondaire: #3c99dc;
    --tertiaire: #8e8ffa;
    --primaire2c: #2c6bb3;

    --bleu-0: #183a86;
    --bleu-1: #195abc;
    --bleu-2: #0166c7;
    --bleu-3: #4996e0;
    --bleu-4: #53a7fa;
    --vert-drapeau: #009641;
    --sage: #677D6A;

    --bleu-50: rgba(44, 107, 179, 0.05);
    --bleu-100: rgba(44, 107, 179, 0.1);
    --bleu-200: rgba(44, 107, 179, 0.2);
    --bleu-250: rgba(44, 107, 179, 0.25);
    --bleu-300: rgba(44, 107, 179, 0.3);
    --bleu-400: rgba(44, 107, 179, 0.4);
    --bleu-50: rgba(44, 107, 179, 0.5);
    --bleu-600: rgba(44, 107, 179, 0.6);
    --bleu-700: rgba(44, 107, 179, 0.7);
    --bleu-800: rgba(44, 107, 179, 0.8);
    --bleu-900: rgba(44, 107, 179, 0.9);

    --green-25: rgba(25, 135, 84, 0.025);
    --green-50: rgba(25, 135, 84, 0.05);
    --green-100: rgba(25, 135, 84, 0.1);
    --green-200: rgba(25, 135, 84, 0.2);
    --green-300: rgba(25, 135, 84, 0.3);
    --green-400: rgba(25, 135, 84, 0.4);
    --green-500: rgba(25, 135, 84, 0.5);
    --green-600: rgba(25, 135, 84, 0.6);
    --green-700: rgba(25, 135, 84, 0.7);
    --green-800: rgba(25, 135, 84, 0.8);
    --green-900: rgba(25, 135, 84, 0.9);
    
    --violet:#6e62e6;
    --violet-100:rgb(110,98,230,.1);
    --violet-700:rgb(110,98,230,.7);
    

    --lecon-1: #0168ff;
    --lecon-2: #d075ff;
    --lecon-3: #fbdb39;
    --lecon-4: #ed7071;
    --lecon-5: #6e62e6;
    --lecon-6: var(--primaire);
    --lecon-7: #1a95b0;
    --lecon-8: #F39C12;
    --lecon-9: #2C3E50;
    --lecon-10: #C0392B;
    --lecon-11: #8E44AD;
    --lecon-12: #74b550;
    --lecon-13: #F39C12;
    --lecon-14: #A8A878;
    --lecon-15: #45B7D1;
    --lecon-16: #FF6B6B;
    --lecon-17: #4ECDC4;
    --lecon-18: #45B7D1;
    --lecon-19: #FDCB6E;
    --lecon-20: #6C5CE7;
    --lecon-21: #A8A878;
    --lecon-22: #C0A080;
    --lecon-23: #708090;
    --lecon-24: #6B5B95;
    --lecon-25: #8B7355;
    --lecon-26: #2C3E50;
    --lecon-27: #16A085;
    --lecon-28: #8E44AD;
    --lecon-29: #C0392B;
    --lecon-30: #F39C12;
    --lecon-31: #4682B4;
    --lecon-32: #2E8B57;
    --lecon-33: #8A2BE2;
    --lecon-34: #8B4513;
    --lecon-35: #48D1CC;
    --lecon-36: #F39C12;
    --lecon-37: #DA70D6;
    --lecon-38: #DA70D6;
  



    --table-border-05: rgba(102, 145, 231, 0.05);
    --table-border: rgba(102, 145, 231, 0.15);
    --table-border-5: rgba(102, 145, 231, 0.5);
    --table-gris: #f7f9f9;
    --table-bleu: #4cc2c0;
    --table-rouge: #f15b26;
    --table-orange: #fcb03b;
    --table-vert: #3cb878;
    --table-text-color: rgba(255, 255, 255, 0.1);
    --fe: #fefefe;
    --ef: #efefef;
    --ddd: #ddd;
    --color-111: #111;
    --vert: #3f9f42;
    --rouge: #ff4040;
    --jaune: #fcb900;
    --jaune_2: #ffc001;
    --bleu: #3858f9;
    --blackColor: #111;
    --inputBg: #eff1f5;
    --f7f7fc: #f7f7fc;
    --f4f5f6: #f4f5f6;
    --e4e5e6: #e4e5e6;
    --fafafd: #fafafd;
    --7f7c90: #7f7c90;
    --191f45: #191f45;
    --f5f7fa: #f5f7fa;
    --gradient-bg: linear-gradient(45deg, #f33057, #3858f9);
    --text1: 1rem;
    --text15: 1.5rem;
    --text75: 1.75rem;
    --text2: 2rem !important;
}
html {overflow-y: scroll;}
body { background: repeat center url(../img/bg.jpeg); height: 100vh; color: #000; font-family: "AirbnbCerealBook"; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar {display: none;}
body a {
    transition: 0.5s all;
    text-decoration: none;
    overflow-x: hidden;
}
body a:focus,a:hover {text-decoration: none;}
.Light{font-family: "AirbnbCerealLight";}
.Book{font-family: "AirbnbCerealBook";}
.Medium{font-family: "AirbnbCerealMedium";}
.Bold{font-family: "AirbnbCerealBold";}
.Black{font-family: "AirbnbCerealBlack";}
.w-fit{width: fit-content!important;}
.app-container{display: flex;}
.app-container-content{
  width: 76%;
  margin: 0;
  flex: 0 0 auto;}
.container {
  max-width: 100% !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  position: relative;
}
/* button,a{all: unset;} */
/*:::::::::::::::::::::::::::: Espace pub ::::::::::::::::::::::::::::*/
.container-pub{
  background-color: var(--primaire);
    color: white;
    border-radius:1rem;
    padding: 1.25rem 1.875rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}
.container-pub::before {
  content: "";
  position: absolute;
  top: -3.125rem;
  right: -3.125rem;
  background: rgba(255, 255, 255, 0.2);
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  z-index: 0;
}
.container-pub::after {
  content: "";
  position: absolute;
  bottom: -3.125rem;
  left: -3.125rem;
  background: rgba(255, 255, 255, 0.1);
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  z-index: 0;
}
.container-pub h6 {
  color: rgba(255,255,255,.9) !important;
  font-size: 1.75rem !important;
  font-family: "AirbnbCerealLight" !important;
  font-family: "AirbnbCerealBlack"!important;
  font-family: "AirbnbCerealExtraBold" !important;
  color: #000 !important;
  /* text-transform: uppercase; */
}
.container-pub h2 {
  font-size: 1.25rem;
  font-family: "AirbnbCerealExtraBold";
  font-family: "AirbnbCerealMedium";
  font-family: "AirbnbCerealBook";
}
.container-pub a {
  display: inline-flex;
  align-items: center;
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 5rem !important;
  transition: all 0.3s ease;
  font-family: "AirbnbCerealBook" !important;
  margin-top: 1rem;
  padding:0.5rem 1rem 0.5rem 1.5rem!important;
}

.container-pub a i {
  margin-left: 0.625rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
  background-color: #fff;
  border-radius: 100%;
  width: 1.75rem;
  height: 1.75rem;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.container-pub a:hover {
  background-color: #fff!important;
  /* color: white; */
}

.container-pub a:hover i {
  transform: translateX(5px);
}
/*:::::::::::::::::::::::::::: Fin Espace pub ::::::::::::::::::::::::::::*/
.text-error { color: var(--bs-danger);text-align: center;font-size: 0.9rem;}
.nota-bene {
    font-size: 0.85rem;
    color: rgba(var(--bs-danger-rgb), 0.8) !important;
}
.nota-bene li {
    list-style-type: disc;
    margin-left: 2rem;
}
.alert {
    text-align: center;
    z-index: 10000;
}
.w-90{width: 90% !important;}
.w-400{width: 400% !important;}
.wv-100{width:100vw !important;}
.wv-90{width:90vw !important;}
.h-90{height: 90% !important;}
.mh-90{max-height: 90% !important;}
.h100 {
    height: 100vh;
}
.no-margin {
    margin: 0 var(--bs-gutter-x, -0.75rem);
}
.li-square {
    list-style: square !important;
}
.text-75 {
    font-size: 0.75rem !important;
}
.text-08 {
    font-size: 0.8rem !important;
}.text-09 {
    font-size: 0.9rem !important;
}
.text1 {
    font-size: 1rem !important;
}
.text125 {
    font-size: 1.25rem !important;
}.text15 {
    font-size: 1.5rem !important;
}
.text75 {
    font-size: 1.75rem !important;
}
.text2 {
    font-size: 2rem !important;
}
.text-none {
    text-transform: none !important;
}
.line-1 {
    line-height: 1 !important;
}
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle.active,
.btn:focus,
.btn:active,
.btn.active,
.form-control:focus,
.form-control:active,
.form-control.active {
    box-shadow: none !important;
    outline: none !important;
}
a.disabled,[disabled] {
    pointer-events: none;
}
.bg-primaire {
    background-color: var(--primaire) !important;
}
.bg-primaire-100 {
    background-color: var(--primaire-100) !important;
}
.bg-danger-100 {
    background-color: var(--danger-100) !important;
}
.bg-primary-100 {
    background-color: var(--primary-100) !important;
}
.bg-violet-100 {
    background-color: var(--violet-100) !important;
}
.bg-violet-700 {
    background-color: var(--violet-700) !important;
}
.bg-green-200 {
    background-color: var(--green-200) !important;
}
.bg-green-500 {
    background-color: var(--green-500) !important;
}
.bg-green-actif {
    background-color: rgba(19, 197, 107, 0.1) !important;
}
.bg-rouge-retire {
    background-color: rgba(237, 94, 94, 0.1) !important;
}
.bg-violet {
    /* color: #fff; */
    background-color: rgba(134, 92, 226, 1) !important;
}
.bg-jaune {
    background-color: rgba(242, 175, 76, 1) !important;
}
.bg-gray-100 {background-color: var(--bs-gray-100) !important;}
.bg-gray-200 {background-color: var(--bs-gray-200) !important;}
.bg-gray-300 {background-color: var(--bs-gray-300) !important;}
.text-primaire {color: var(--primaire)!important;}
.text-vert {
    color: var(--primaire);
}
.text-bleu-0 {
    color: var(--bleu-0)!important;
}
.text-bleu-1 {
    color: var(--bleu-1)!important;
}
.text-bleu-2 {
    color: var(--bleu-2)!important;
}
.text-bleu-3 {
    color: var(--bleu-3)!important;
}
.text-bleu-4 {
    color: var(--bleu-4)!important;
}
.text-sage {color: var(--sage)!important;}
.text-violet {color: var(--violet)!important;}
.bg-sage {
    background-color: var(--sage)!important;
}
small,
.small {
    font-size: 0.9rem;
}
img {
    max-width: 100%;
}
.fontLight {
    font-family: "AirbnbCerealLight" !important;
}
.fontBook {
    font-family: "AirbnbCerealBook" !important;
}
.fontMedium {
    font-family: "AirbnbCerealMedium" !important;
}
.fontBold {
    font-family: "AirbnbCerealBold" !important;
}
.fontExtraBold {
    font-family: "AirbnbCerealExtraBold" !important;
}
.fontBlack {
    font-family: "AirbnbCerealBlack" !important;
}
input[type="button"],
input[type="submit"] {
    transition: 0.5s all;
}
.input-group {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 3px 10px;
    border: 1px solid #ddd;
    background: #fff;
}
.btn-block {
    background: var(--primaire);
    border: none;
    color: #fff;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 5rem;
    height: 2.8125rem;
    width: 100%;
}
.btn-block:hover {
    background: var(--tertiaire);
    color: #fff;
}
input[type="email"],
input[type="password"],
input[type="text"] {
    font-size: 15px;
    height: 46px;
    color: #000;
    text-align: left;
    padding: 14px 10px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: transparent;
}
.form-control::placeholder {
    color: var(--bs-gray-500);
    opacity: 1;
    font-family: "AirbnbCerealBook";
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
.b {
    font-family: "AirbnbCerealBold";
}
.h7 {
    font-size: 0.9rem;
}
p {
    color: #333;
    font-size: 16px;
}
.pwd-input-valid {
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: -5px;
}
.pwd-input-valid.faible-password {
    background-color: #fbe1e1;
}
.pwd-input-valid.moyen-password {
    background-color: #fd0;
}
.pwd-input-valid.bon-password {
    background-color: #d5f9d5;
}
.footer p {
    color: #333;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.footer p a {
    color: #333;
}
/* oops */
#oops {
    position: relative;
    height: 100vh;
}
#oops .oops {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.oops {
    max-width: 860px;
    width: 100%;
    padding-left: 160px;
    line-height: 1.1;
    position: relative;
}
.oops .oops-500 {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 140px;
    height: 140px;
    background-image: url("../img/emoji.png");
    background-size: cover;
}
.oops .oops-500:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(2.4);
    -ms-transform: scale(2.4);
    transform: scale(2.4);
    border-radius: 50%;
    background-color: #f3f5f8;
    z-index: -1;
}
.oops h1 {
    font-size: 5rem;
    margin-bottom: 2rem;
}
.oops p {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    line-height: 1.5;
}
.oops a {
    margin-top: 2rem;
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: var(--primaire);
}

/* Fin opppppp */
.bg {
    background: rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.5);
    z-index: 101;
}
/* .bg-dico {
  background: rgba(0, 0, 0, .8);
} */
.panel-wrap {
    border-radius: 0.5rem;
    position: fixed;
    max-width: 98%;
    max-height: 98%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 102;
    transition: 0.3s ease-out;
    overflow-x: hidden;
    overflow-y: visible;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    background: repeat center url(../img/bg.jpeg);
    padding: 1rem;
}
.bg-dico .panel-wrap{
  background: transparent;
  max-width: 56.25rem;
  width: 100%;
}
/* .panel-lecon */
.panel-wrap .panel-close{
  /* border-radius: 2rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--danger-100);
  color: var(--bs-danger);
  font-size: 2rem; */
  /* position: absolute;
  right: 1rem;
  top: 1rem; */
  margin-left: auto;
  margin-bottom: .5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  color: #fff;
  font-size: 3rem;
}
.bg-dico .panel-wrap .panel-close{

}
.panel-wrap form {
    height: 100%;
}
.panel-wrap .errorTexte {
    background: var(--bs-gray-100);
}
.panel {
    padding: 1rem;
    overflow-y: auto;
    height: 100%;
    background: var(--bs-gray-100);
    position: relative;
}
.panel-topbar {
    background: #fff;
    border-top: 1px solid #e8ebed;
    border-bottom: 1px solid #e8ebed;
    height: 3.75em;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 37;
}
.panel-topbar .panel-titre {
    font-size: 1.5rem;
}
.panel .form-group-container {
    background-color: #fff;
    box-shadow:
        rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    box-shadow:
        rgba(50, 50, 93, 0.25) 0px 2px 0 -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 2rem;
    border-radius: 6px;
    margin-bottom: 10rem;
}
.panel .form-group-container h1 {
    text-transform: uppercase;
    font-family: "AirbnbCerealMedium";
    font-size: 2rem;
}
.panel .form-group-container h1.position-absolute {
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-gray-200);
    padding: 0.5rem 2rem;
    border-radius: 1rem;
    top: -2rem;
    font-size: 1.5rem;
    color: var(--primaire);
    text-align: center;
}
.panel .form-group-container em.flotte-genre {
    margin-bottom: 2rem;
    display: block;
    color: var(--bleu-2);
    font-size: 1.5rem;
    font-family: "AirbnbCerealBook";
}
.panel .form-group-container h6 {
    text-transform: uppercase;
    font-family: "AirbnbCerealMedium";
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
    color: var(--primaire);
    letter-spacing: 0.05rem;
}
.panel .form-group-container h6 button,
.del-row {
    border: 0;
    border-radius: 0.5rem;
    margin-left: 1rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    color: var(--bs-success);
    font-size: 2rem;
    font-family: "AirbnbCerealBook";
}
/*:::::::::::: Article  :::::::::::: */
.panel article {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eae8f1;
    border-radius: 4px;
    padding: 1rem;
}
.panel article h3 + em,
.panel article h3 + small {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    display: block;
}
.panel article .table th,
.panel article .table td {
    vertical-align: top;
    padding: 0.25rem 0.75rem;
    border: 1px solid #dee2e6;
    border-bottom-color: rgb(222, 226, 230);
    border-right: 0;
    font-size: 0.75rem;
}
.panel article .table th {
    font-family: "AirbnbCerealBold";
}
.panel article .table th.border-right,
.panel article .table td.border-right {
    border: 1px solid #dee2e6;
}
/*:::::::::::: Form step :::::::::::: */
.form-step {
    width: 75rem;
    overflow-x: hidden;
}
.form-step-content {
    width: 150rem;
    display: flex;
    align-items: center;
    transform: translateX(0);
    transition: 0.5s ease-out;
}
.form-step section {
    width: 100%;
}
.next-btn {
    padding: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 100%;
}
.next-btn i {
    background: var(--bs-gray-100);
    padding: 1rem;
    border-radius: 100%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.next-btn i {
    background: var(--bg-primaire);
    color: #fff;
}
.next-btn:disabled,
.next-btn[disabled] {
    border: 1px solid var(--bs-gray-500) !important;
    background: var(--bs-gray-300) !important;
}
.next-btn:disabled i,
.next-btn[disabled] i {
    background: var(--bs-gray-400);
    color: var(--bs-gray-600);
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--bs-gray-600);
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.step.active {
    opacity: 1;
}
.step.finish {
    background-color: var(--bs-success);
    pointer-events: auto;
    cursor: pointer;
}

.form-step section select,
.form-step section select:focus,
.form-step section input.highlight,
.form-step section input.highlight:focus {
    width: 100%;
    height: 3.5rem;
    border-radius: 1rem;
    background-color: var(--bs-gray-400);
    font-size: 1rem;
    font-family: "AirbnbCerealMedium";
    color: var(--bs-gray-900);
    font-size: 1rem;
    border: 0 !important;
}
.form-step section input.highlight::placeholder {
    color: var(--bs-black);
    font-size: 0.85rem;
    font-family: "AirbnbCerealBook";
    white-space: nowrap;
    text-transform: none;
}
.form-step section input.highlight.searchable {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search'  viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1rem center;
    padding-left: 2.5rem;
}
.form-step section input.highlight.searchable:disabled,
.form-step section input.highlight.searchable[disabled] {
    background-image: url("../img/spin.svg");
    background-size: 2rem;
    background-position-x: 0.5rem;
}
.form-step section label {
    color: var(--bs-gray-900);
    font-size: 0.85rem;
    font-family: "AirbnbCerealMedium";
    margin-bottom: 0.5rem;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
.panel .form-group {
    margin-bottom: 2rem;
}
.panel .form-group h1 {
    text-transform: uppercase;
    font-family: "AirbnbCerealMedium";
    font-size: 2rem;
}
.panel label {
    font-family: "AirbnbCerealMedium";
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
    color: var(--primaire);
    letter-spacing: 0.05rem;
}

/* .panel input:not([type="submit"]),
.panel input:not([type="file"]),
.panel select,.panel textarea
{
  height: 2.875rem;
  border: .012rem solid var(--bs-gray-700);
  border-radius: .5rem;
  background-color: #fff;
  font-size: .85rem;
} */

.panel table input:not([type="submit"]),
.panel table input:not([type="file"]),
.panel table select,
.panel table select:focus,
.panel table textarea,
.panel textarea:focus {
    height: 2rem !important;
    border-radius: 0.25rem !important;
    padding: 0 0.625rem !important;
    font-size: 0.75rem !important;
    border: 0 !important;
    background-color: var(--bs-gray-200);
    margin: 0 !important;
}
.panel table input.white:not([type="submit"]),
.panel table input.white:not([type="file"]),
.panel table select.white,
.panel table select.white:focus,
.panel table textarea.white,
.panel textarea.white:focus {
    background-color: #fff !important;
    border: 1px solid var(--table-border-5) !important;
}
.panel textarea,
.panel table textarea,
.panel table textarea:focus {
    height: 5rem;
}

.panel input[type="file"] {
    padding: 0 0.25rem;
    border: 1px dashed var(--primaire);
    border-radius: 1rem;
    font-size: 0.8rem;
    color: var(--bs-black);
    background-color: #fff;
    cursor: pointer;
}
input[type="file"]::file-selector-button,
input[type="file"]:hover::file-selector-button {
    margin: 0;
    border: 0;
    background-color: var(--primaire);
    padding: 0.5rem 0.75rem;
    /* border-radius: 1.5rem; */
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    font-size: 0.75rem;
}
.panel table input[type="file"]::file-selector-button,
input[type="file"]:hover::file-selector-button {
    /* height: 100% !important; */
    background-color: var(--primaire);
    margin: 0;
    margin-left: -0.625rem;
    margin-right: 1rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
/* input[type="file"]:hover::file-selector-button {
  background-color: var(--primaire-700);
} */
.file-container {
    background: #fff;
    border-radius: .5rem;
    border: .012rem solid var(--primaire);
    height: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 1.5rem;
    color: var(--bs-black);
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
    color: var(--bs-black);
}
.file-container:hover {
    background: var(--primaire-100);
}
/* .file-container input[type="file"] {
  padding: 0 .25rem;
  border: 1px dashed var(--primaire);
  border-radius: 1rem;
  font-size: .8rem;
  color: var(--bs-black);
  background-color: #fff;
} */

.file-container input[type="file"]::file-selector-button {
  margin: .5rem .5rem .5rem 0;
  border: none;
  background-color: var(--primaire);
  padding: .5rem .75rem;
  border-radius: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
  font-size: .75rem;
}
/* .file-container:hover .file-title {
    color: #222;
}
.file-container .file-title {
    text-align: center;
    transition: color 0.2s ease-in-out;
    font-size: 1rem;
    font-family: "AirbnbCerealMedium";
    color: var(--bs-black);
} */
.form-error,
select.form-error + .chosen-container .chosen-choices,
select.form-error + .chosen-container .chosen-single {
    position: relative;
    background-image: url("../img/error-mark.png");
    background-position: 98% center;
    background-repeat: no-repeat;
    background-size: 1rem;
}
select.form-error + .chosen-container .chosen-single {
    background-position: 92% center;
}
/*:::::::::::: Form step :::::::::::: */
.del-row {
    color: var(--bs-danger);
    position: absolute;
    width: auto;
    right: -2rem;
    top: 5rem;
    font-size: 1.25rem;
}
.panel .form-group-container h6 + em {
    text-transform: uppercase;
    font-family: "AirbnbCerealMedium";
    font-size: 1rem;
    color: var(--bs-gray-900);
    letter-spacing: 0.05rem;
    background: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-400);
    padding: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    display: block;
    border-radius: 3px;
    min-height: 3rem;
}
.panel .form-group-container .container-info {
    flex: 1 1 0;
}
.panel .form-group-container .bordered {
    border-left: 1px solid var(--bs-gray-500);
    border-right: 1px solid var(--bs-gray-500);
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 1rem;
}
.panel .form-group-container h6 + em span {
    font-family: "AirbnbCerealBook";
    text-transform: none;
}
.panel .form-group-container h6 + em span,
.panel .form-group-container h6 + em b {
    font-size: 0.85rem;
    display: block;
}
.panel .form-group-container input[type="text"],
.panel .form-group-container input[type="date"],
.panel .form-group-container input[type="time"],
.panel .form-group-container select {
    background-color: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-400);
    width: 100%;
    height: 46px;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
}
.panel .form-group-container .container-vehicule {
    border: 1px solid var(--bs-gray-400);
    padding: 0.5rem;
    border-radius: 6px;
    height: 8rem;
    background-color: #fff;
    text-align: center;
    position: relative;
}
.panel .form-group-container .container-vehicule i {
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primaire);
    color: #fff;
    display: none;
    border-radius: 1.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.panel .form-group-container .container-vehicule.active {
    border: 2px solid #269cf7;
    background: #f6fbff;
}
.panel .form-group-container .container-vehicule.active i {
    display: flex;
}
.panel .form-group-container .container-vehicule img {
    height: 100%;
}
/*.panel form,*/
.panel form input[type="email"],
.panel form input[type="password"],
.panel form input[type="text"] {
    width: 100%;
}
/* .panel form#form-sin{
  display: block;
} */
.panel .data-col {
    padding-left: 0;
    padding-right: 0.5rem;
}
.panel h2 {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.panel h2 + div {
    color: #484a4d;
    font-weight: 400;
    font-size: 0.75rem;
}
.panel-btn-submit button,
.panel-btn-submit button:hover,
.panel-btn-submit button:focus,
.panel-btn-submit button.active,
.table button,
.table button:hover,
.table button:focus,
.table button.active,
.table a.button,
.table a.button:hover,
.table a.button:focus,
.table a.button.active {
    background: var(--bs-green);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.5rem 1.5rem;
    border: 0 !important;
    border-radius: 0.5rem !important;
    margin-left: 1rem;
    line-height: 1.5;
}
.zone-saisie {
    padding: 1rem;
    background: #f1f1f1;
}
.form-group {
    margin-bottom: 1rem !important;
}
/*::::::::::::::::: Loading :::::::::::*/
.line-scale-pulse-out{
  /* width: 5rem; */
  /* height: 3rem; */
  /* border-radius: .5rem; */
  /* background: #fff; */
  text-align: center;
}
.line-scale-pulse-out > div {
  background-color: var(--bs-dark);
  width: 0.125rem;
  height: 2.1875rem;
  border-radius: 0.125rem;
  margin: 0.125rem;
  margin: 0 .25rem;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
          animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); 
}
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
-webkit-animation-delay: -0.4s !important;
      animation-delay: -0.4s !important; 
}
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
-webkit-animation-delay: -0.2s !important;
        animation-delay: -0.2s !important; 
}
@-webkit-keyframes line-scale-pulse-out {
0% {-webkit-transform: scaley(1);transform: scaley(1); }
50% {-webkit-transform: scaley(0.4);transform: scaley(0.4); }
100% {-webkit-transform: scaley(1);transform: scaley(1); } 
}  
@keyframes line-scale-pulse-out {
0% {-webkit-transform: scaley(1); transform: scaley(1);}
50% {-webkit-transform: scaley(0.4); transform: scaley(0.4);}
100% {-webkit-transform: scaley(1); transform: scaley(1);} 
}

/*::::::::::::::::: Tableau de bord :::::::::::*/
.stat-container{
    padding: 1.5rem 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
  }
  .stat-container article{
    background: #fff;
    border-radius: .5rem;
    padding: 1rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--bs-gray-300);
  }
  .stat-container article.bg-vert{
    background: rgba(30, 169, 24, 0.125);
  }
  .stat-container .article-header{
    font-size: 1.5rem;
    font-family: 'AirbnbCerealBold';
  }
  .stat-container .article-consulter-link{
    font-size: .85rem;
    font-family: 'AirbnbCerealBook';
    background: var(--e4e5e6);
    font-family: 'AirbnbCerealBook';
    padding: .25rem 1rem;
    border-radius: 1rem;
  }
  .stat-container .article-link{
    font-size: .85rem;
    color: var(--bs-success);
  }
  .stat-container .article-link i{
    font-size: .85rem;
    font-family: 'AirbnbCerealMedium';
    background: var(--color-111);
    color: #fff;
    border-radius: .25rem;
    padding: .0125rem .125rem;
    width: 1.5rem;
    height: 1.15rem;
  }
  .stat-container article .article-bubble i{
    font-size: 1.25rem;
    background: var(--color-111);
    color: #fff;
    border-radius: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: .5rem;
  }
  .stat-container article .article-bubble p{
    font-size: 1rem;
    color: var(--primaire);
    font-family: 'AirbnbCerealMedium';
  }
  .stat-container article .article-title{
    font-size: 1rem;
    font-family: 'AirbnbCerealLight';
  }
  .stat-container .article-value{
    font-size: 1.5rem;
    font-family: 'AirbnbCerealMedium';
  }

  .container-dictionnaire-item{
    gap: 1rem!important;
    width: 100%;
    flex-wrap: wrap
  }
  .container-dictionnaire-item .dico-item {
    flex: 0 0 auto!important;
    font-family: "AirbnbCerealBook" !important;
    font-size: .85rem !important;
    padding: .25rem .5rem !important;
    gap: .5rem;
  }
  .container-dictionnaire-item .dico-item i{
    width: 1.5rem!important;
    height: 1.5rem!important;
    border-radius: 2rem!important;
    font-size: 1.125rem;
  }
  .container-lecon{
    width: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1rem;
    position: relative;
  }
  .container-lecon:nth-child(odd){padding-left: 0;}
  .container-lecon:nth-child(even){padding-right: 0;}
  .dico-matiere-item{
    margin-left: auto;
    display: block;
    border-radius: .25rem;
    border: 0;
    margin-bottom: .5rem;
    padding: .25rem .775rem;
    font-size: .9rem;
    color: #fff;
  }
  .lecon-item{
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    padding:1rem;
    position: relative;
  }
  .lecon-item:disabled{
    background: var(--bs-gray-200)!important;
    border: 1px solid var(--bs-gray-400);
  }
/* Lecon 1 */
  .lecon-item-bg-1,
  .lecon-view-container-bg-1 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-1 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-1::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-1  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-1 button.active,
  .capsule-label.lecon-view-container-bg-1
  {background-color: var(--lecon-1)!important;color: #fff!important;}
  .lecon-view-container-bg-1 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-1 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-1)!important;}
  .lecon-view-container-bg-1 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-1 .exercice-filter li a.active, 
  .lecon-view-container-bg-1 .exercice-filter li a:hover{border: 1px solid var(--lecon-1)!important;}
  .lecon-view-container-bg-1 .lecon-panel-section a.exercice i{color: var(--lecon-1)!important;}
/* Lecon 2 */
  .lecon-item-bg-2,
  .lecon-view-container-bg-2 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-2 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-2::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-2  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-2 button.active,
  .capsule-label.lecon-view-container-bg-2
  {background-color: var(--lecon-2)!important;color: #fff!important;}
  .lecon-view-container-bg-2 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-2 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-2)!important;}
  .lecon-view-container-bg-2 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-2 .exercice-filter li a.active, 
  .lecon-view-container-bg-2 .exercice-filter li a:hover{border: 1px solid var(--lecon-2)!important;}
  .lecon-view-container-bg-2 .lecon-panel-section a.exercice i{color: var(--lecon-2)!important;}
/* Lecon 3 */
.lecon-item-bg-3,
  .lecon-view-container-bg-3 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-3 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-3::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-3  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-3 button.active,
  .capsule-label.lecon-view-container-bg-3
  {background-color: var(--lecon-3)!important;color: #000!important;}
  .lecon-view-container-bg-3 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-3 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-3)!important;}
  .lecon-view-container-bg-3 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-3 .exercice-filter li a.active, 
  .lecon-view-container-bg-3 .exercice-filter li a:hover{border: 1px solid var(--lecon-3)!important;}
  .lecon-view-container-bg-3 .lecon-panel-section a.exercice i{color: var(--lecon-3)!important;}
/* Lecon 4 */
.lecon-item-bg-4,
  .lecon-view-container-bg-4 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-4 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-4::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-4  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-4 button.active,
  .capsule-label.lecon-view-container-bg-4
  {background-color: var(--lecon-4)!important;color: #fff!important;}
  .lecon-view-container-bg-4 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-4 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-4)!important;}
  .lecon-view-container-bg-4 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-4 .exercice-filter li a.active, 
  .lecon-view-container-bg-4 .exercice-filter li a:hover{border: 1px solid var(--lecon-4)!important;}
  .lecon-view-container-bg-4 .lecon-panel-section a.exercice i{color: var(--lecon-4)!important;}
/* Lecon 5 */
  .lecon-item-bg-5,
  .lecon-view-container-bg-5 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-5 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-5::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-5  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-5 button.active,
  .capsule-label.lecon-view-container-bg-5
  {background-color: var(--lecon-5)!important;color: #fff!important;}
  .lecon-view-container-bg-5 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-5 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-5)!important;}
  .lecon-view-container-bg-5 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-5 .exercice-filter li a.active, 
  .lecon-view-container-bg-5 .exercice-filter li a:hover{border: 1px solid var(--lecon-5)!important;}
  .lecon-view-container-bg-5 .lecon-panel-section a.exercice i{color: var(--lecon-5)!important;}
/* Lecon 6 */
.lecon-item-bg-6,
.lecon-view-container-bg-6 .exercice-container .lexique-capsule-liste li a.active,
.lecon-view-container-bg-6 .exercice-filter li a.active em ,
.capsule-pagination-container.exercice.lecon-view-container-bg-6::before,
.capsule-pagination-container.exercice.lecon-view-container-bg-6  .exercice-capsule-liste li a.active,
.btn-switch-container.lecon-view-container-bg-6 button.active,
.capsule-label.lecon-view-container-bg-6
{background-color: var(--lecon-6)!important;color: #fff!important;}
.lecon-view-container-bg-6 .lecon-panel-section a.exercice.active,
.lecon-view-container-bg-6 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-6)!important;}
.lecon-view-container-bg-6 .lecon-section-container section.exercice-container,
.lecon-view-container-bg-6 .exercice-filter li a.active, 
.lecon-view-container-bg-6 .exercice-filter li a:hover{border: 1px solid var(--lecon-6)!important;}
.lecon-view-container-bg-6 .lecon-panel-section a.exercice i{color: var(--lecon-6)!important;}
/* Lecon 7 */
  .lecon-item-bg-7,
  .lecon-view-container-bg-7 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-7 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-7::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-7  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-7 button.active,
  .capsule-label.lecon-view-container-bg-7
  {background-color: var(--lecon-7)!important;color: #fff!important;}
  .lecon-view-container-bg-7 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-7 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-7)!important;}
  .lecon-view-container-bg-7 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-7 .exercice-filter li a.active, 
  .lecon-view-container-bg-7 .exercice-filter li a:hover{border: 1px solid var(--lecon-7)!important;}
  .lecon-view-container-bg-7 .lecon-panel-section a.exercice i{color: var(--lecon-7)!important;} 
/* Lecon 8 */
.lecon-item-bg-8,
  .lecon-view-container-bg-8 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-8 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-8::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-8  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-8 button.active,
  .capsule-label.lecon-view-container-bg-8
  {background-color: var(--lecon-8)!important;color: #fff!important;}
  .lecon-view-container-bg-8 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-8 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-8)!important;}
  .lecon-view-container-bg-8 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-8 .exercice-filter li a.active, 
  .lecon-view-container-bg-8 .exercice-filter li a:hover{border: 1px solid var(--lecon-8)!important;}
  .lecon-view-container-bg-8 .lecon-panel-section a.exercice i{color: var(--lecon-8)!important;}
/* Lecon 9 */
.lecon-item-bg-9,
  .lecon-view-container-bg-9 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-9 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-9::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-9  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-9 button.active,
  .capsule-label.lecon-view-container-bg-9
  {background-color: var(--lecon-9)!important;color: #fff!important;}
  .lecon-view-container-bg-9 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-9 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-9)!important;}
  .lecon-view-container-bg-9 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-9 .exercice-filter li a.active, 
  .lecon-view-container-bg-9 .exercice-filter li a:hover{border: 1px solid var(--lecon-9)!important;}
  .lecon-view-container-bg-9 .lecon-panel-section a.exercice i{color: var(--lecon-9)!important;}
/* Lecon 10 */
.lecon-item-bg-10,
  .lecon-view-container-bg-10 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-10 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-10::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-10  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-10 button.active,
  .capsule-label.lecon-view-container-bg-10
  {background-color: var(--lecon-10)!important;color: #fff!important;}
  .lecon-view-container-bg-10 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-10 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-10)!important;}
  .lecon-view-container-bg-10 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-10 .exercice-filter li a.active, 
  .lecon-view-container-bg-10 .exercice-filter li a:hover{border: 1px solid var(--lecon-10)!important;}
  .lecon-view-container-bg-10 .lecon-panel-section a.exercice i{color: var(--lecon-10)!important;}
/* Lecon 11 */
.lecon-item-bg-11,
  .lecon-view-container-bg-11 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-11 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-11::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-11  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-11 button.active,
  .capsule-label.lecon-view-container-bg-11
  {background-color: var(--lecon-11)!important;color: #fff!important;}
  .lecon-view-container-bg-11 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-11 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-11)!important;}
  .lecon-view-container-bg-11 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-11 .exercice-filter li a.active, 
  .lecon-view-container-bg-11 .exercice-filter li a:hover{border: 1px solid var(--lecon-11)!important;}
  .lecon-view-container-bg-11 .lecon-panel-section a.exercice i{color: var(--lecon-11)!important;}  
/* Lecon 12 */
.lecon-item-bg-12,
  .lecon-view-container-bg-12 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-12 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-12::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-12  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-12 button.active,
  .capsule-label.lecon-view-container-bg-12
  {background-color: var(--lecon-12)!important;color: #fff!important;}
  .lecon-view-container-bg-12 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-12 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-12)!important;}
  .lecon-view-container-bg-12 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-12 .exercice-filter li a.active, 
  .lecon-view-container-bg-12 .exercice-filter li a:hover{border: 1px solid var(--lecon-12)!important;}
  .lecon-view-container-bg-12 .lecon-panel-section a.exercice i{color: var(--lecon-12)!important;}
/* Lecon 13 */
.lecon-item-bg-13,
  .lecon-view-container-bg-13 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-13 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-13::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-13  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-13 button.active,
  .capsule-label.lecon-view-container-bg-13
  {background-color: var(--lecon-13)!important;color: #fff!important;}
  .lecon-view-container-bg-13 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-13 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-13)!important;}
  .lecon-view-container-bg-13 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-13 .exercice-filter li a.active, 
  .lecon-view-container-bg-13 .exercice-filter li a:hover{border: 1px solid var(--lecon-13)!important;}
  .lecon-view-container-bg-13 .lecon-panel-section a.exercice i{color: var(--lecon-13)!important;}
/* Lecon 14 */
.lecon-item-bg-14,
.lecon-view-container-bg-14 .exercice-container .lexique-capsule-liste li a.active,
.lecon-view-container-bg-14 .exercice-filter li a.active em ,
.capsule-pagination-container.exercice.lecon-view-container-bg-14::before,
.capsule-pagination-container.exercice.lecon-view-container-bg-14  .exercice-capsule-liste li a.active,
.btn-switch-container.lecon-view-container-bg-14 button.active,
.capsule-label.lecon-view-container-bg-14
{background-color: var(--lecon-14)!important;color: #fff!important;}
.lecon-view-container-bg-14 .lecon-panel-section a.exercice.active,
.lecon-view-container-bg-14 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-14)!important;}
.lecon-view-container-bg-14 .lecon-section-container section.exercice-container,
.lecon-view-container-bg-14 .exercice-filter li a.active, 
.lecon-view-container-bg-14 .exercice-filter li a:hover{border: 1px solid var(--lecon-14)!important;}
.lecon-view-container-bg-14 .lecon-panel-section a.exercice i{color: var(--lecon-14)!important;}
/* Lecon 15 */
.lecon-item-bg-15,
  .lecon-view-container-bg-15 .exercice-container .lexique-capsule-liste li a.active,
  .lecon-view-container-bg-15 .exercice-filter li a.active em ,
  .capsule-pagination-container.exercice.lecon-view-container-bg-15::before,
  .capsule-pagination-container.exercice.lecon-view-container-bg-15  .exercice-capsule-liste li a.active,
  .btn-switch-container.lecon-view-container-bg-15 button.active,
  .capsule-label.lecon-view-container-bg-15
  {background-color: var(--lecon-15)!important;color: #fff!important;}
  .lecon-view-container-bg-15 .lecon-panel-section a.exercice.active,
  .lecon-view-container-bg-15 .lecon-panel-section a.exercice:hover {border: 2px solid var(--lecon-15)!important;}
  .lecon-view-container-bg-15 .lecon-section-container section.exercice-container,
  .lecon-view-container-bg-15 .exercice-filter li a.active, 
  .lecon-view-container-bg-15 .exercice-filter li a:hover{border: 1px solid var(--lecon-15)!important;}
  .lecon-view-container-bg-15 .lecon-panel-section a.exercice i{color: var(--lecon-15)!important;}

.lecon-item-bg-16 {background-color: var(--lecon-16)!important;}
.lecon-item-bg-17 {background-color: var(--lecon-17)!important;}
.lecon-item-bg-18 {background-color: var(--lecon-18)!important;}
.lecon-item-bg-19 {background-color: var(--lecon-19)!important;}
.lecon-item-bg-20 {background-color: var(--lecon-20)!important;}
.lecon-item-bg-21 {background-color: var(--lecon-21)!important;}
.lecon-item-bg-22 {background-color: var(--lecon-22)!important;}
.lecon-item-bg-23 {background-color: var(--lecon-23)!important;}
.lecon-item-bg-24 {background-color: var(--lecon-24)!important;}
.lecon-item-bg-25 {background-color: var(--lecon-25)!important;}
.lecon-item-bg-26 {background-color: var(--lecon-26)!important;}
.lecon-item-bg-27 {background-color: var(--lecon-27)!important;}
.lecon-item-bg-28 {background-color: var(--lecon-28)!important;}
.lecon-item-bg-29 {background-color: var(--lecon-29)!important;}
.lecon-item-bg-30 {background-color: var(--lecon-30)!important;}
.lecon-item-bg-31 {background-color: var(--lecon-31)!important;}
.lecon-item-bg-32 {background-color: var(--lecon-32)!important;}
.lecon-item-bg-33 {background-color: var(--lecon-33)!important;}
.lecon-item-bg-34 {background-color: var(--lecon-34)!important;}
.lecon-item-bg-35 {background-color: var(--lecon-35)!important;}
.lecon-item-bg-36 {background-color: var(--lecon-36)!important;}
.lecon-item-bg-37 {background-color: var(--lecon-37)!important;}
.lecon-item-bg-38 {background-color: var(--lecon-38)!important;}


  .lecon-item .lecon-item-desc{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }
  .lecon-item .lecon-item-desc .lecon-img{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-right: 1rem;
  }
  .lecon-item .lecon-item-desc .lecon-img img{width: 3rem;}
  .lecon-item .lecon-item-desc .lecon-img h2{
    color: #fff;
    text-align: left;
    font-size: 1.125rem;
    font-family: "AirbnbCerealMedium";
    padding-left: .5rem;
  }
  .lecon-item .lecon-id,.lecon-title .lecon-id {
      font-size: 1.5rem;
      font-family: 'AirbnbCerealBold';
      color: #000;
      background-color: #fff;
      border-radius: .5rem;
      width: 2.5rem;
      height: 2.5rem;
      flex-basis: 2.5rem;
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .lecon-item .lecon-capsule-count {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lecon-item .lecon-capsule-count li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .25rem .5rem;
      border-radius: .25rem;
      font-size: 0.8rem !important;
      text-decoration: none;
      color: rgba(255,255,255,.75);
      position: relative;
  }
  .lecon-item .lecon-capsule-count li:not(:first-child):before{
      content: '';
      position: absolute;
      height: .5rem;
      width: .1rem;
      background-color: var(--bs-gray-200);
      left: 0;
  }
  .lecon-item .lecon-capsule-count li b{
        font-family: 'AirbnbCerealMedium' !important;
        margin-right: .25rem;
        color: #fff;
  }

  .lecon-item-bg-19.lecon-item .lecon-item-desc .lecon-img h2,
  .lecon-item-bg-3.lecon-item .lecon-item-desc .lecon-img h2,
  .lecon-item-bg-3.lecon-title,
  .lecon-item-bg-19.lecon-title,
  .dico-matiere-item.lecon-item-bg-19{
    color: #000!important;
  }
  .lecon-item.lecon-item-bg-3 .lecon-capsule-count li{ color: rgba(0,0,0,.75)!important;}
  .lecon-item.lecon-item-bg-3  .lecon-capsule-count li b{color: #000!important;}
  .lecon-item.lecon-item-bg-3 .progress-bar-value-container .progress-bar-value-container-value span{color:rgba(0,0,0,.75)!important;}
  .lecon-item.lecon-item-bg-3 .progress-bar-value-container .progress-bar-value-container-value b{color: #000!important;}
  
  .lecon-item:disabled .lecon-item-desc .lecon-img h2{color:var(--bs-gray-500)!important;}
  .lecon-item:disabled .lecon-capsule-count li{ color: var(--bs-gray-500)!important;}
  .lecon-item:disabled .lecon-capsule-count li b{color: var(--bs-gray-500)!important;}
  .lecon-item:disabled .progress-bar-value-container .progress-bar-value-container-value .percentage{display:none;}
  .lecon-item:disabled .progress-bar-value-container .progress-bar-value-container-value span{color: var(--bs-gray-500)!important;}
  .lecon-item:disabled .progress-bar-value-container .progress-bar-value-container-value b{color: var(--bs-gray-500)!important;}
  .lecon-view-container h1{
    font-size: 1.75rem;
    font-family: "AirbnbCerealMedium";
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--primaire);
    color: white;
    border-radius: 1rem;
    padding: 1.25rem 1.875rem;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .lecon-view-container h1 .lecon-id{margin-left: auto;}
  .lecon-view-container h1 img{width: 4rem;}
  .lecon-view-container .lecon-panel-section a.lexique.active,.lecon-view-container .lecon-panel-section a.lexique:hover{ border:2px solid var(--primaire);}

  /* .lecon-view-container .lecon-panel-section a.exercice.active,
  .lecon-view-container .lecon-panel-section a.exercice:hover
  {border:2px solid var(--bs-dark);} */

  .lecon-view-container .lecon-panel-section a.crack.active,.lecon-view-container .lecon-panel-section a.crack:hover{border:2px solid var(--bs-primary);}
  .lecon-view-container .lecon-panel-section a.evaluation.active,.lecon-view-container .lecon-panel-section a.evaluation:hover{border:2px solid var(--bs-danger);}
  .lecon-view-container .lecon-section-container section{
    display: none;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    background-color: rgba(255,255,255,.3);
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--primaire);
  }
  .lecon-view-container .lecon-section-container section.active{display: block;opacity: 1;}
  .lecon-view-container .lecon-section-container section.lexique-container{border: 1px solid var(--primaire);}
  /* .lecon-view-container .lecon-section-container section.exercice-container{border: 1px solid var(--bs-dark);} */
  .lecon-view-container .lecon-section-container section.crack-container{border: 1px solid var(--bs-primary);}
  .lecon-view-container .lecon-section-container section.evaluation-container{border: 1px solid var(--bs-danger);}
  .lecon-view-container .lecon-section-container section h2{
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .lecon-view-container .lexique-filter,.lecon-view-container .exercice-filter,.lecon-view-container .crack-filter,.lecon-view-container .evaluation-filter{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    gap: 1rem;
    position: relative;
  }
  .lecon-view-container .lexique-filter li a,.lexique-filter li a:hover,
  .lecon-view-container .exercice-filter li a,.exercice-filter li a:hover,
  .lecon-view-container .crack-filter li a,.crack-filter li a:hover,
  .lecon-view-container .evaluation-filter li a,.evaluation-filter li a:hover{
    background-color: #fff;
    color: var(--bs-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:1rem;
    padding: .125rem .25rem;
    padding-left: 1rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-gray-300);
    font-size: .85rem;
    font-family: "AirbnbCerealBook";
    text-decoration: none;
    height: 2.375rem;
    width: fit-content;
    font-size: 1rem;
  }
  .lecon-view-container .evaluation-filter li a[disabled]{
    background-color: var(--bs-gray-200);
  }
  .lecon-view-container .lexique-filter li a em,
  .lecon-view-container .exercice-filter li a em,
  .lecon-view-container .crack-filter li a em,
  .lecon-view-container .crack-filter li a i,
  .lecon-view-container .evaluation-filter li a em,
  .lecon-view-container .evaluation-filter li a i{
    border-radius: 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
  }
  .lecon-view-container .lexique-filter li a.active,.lecon-view-container .lexique-filter li a:hover {
    border: 1px solid var(--primaire);
  }
  /* .lecon-view-container .exercice-filter li a.active,.lecon-view-container .exercice-filter li a:hover {
    border: 1px solid var(--bs-dark);
  } */
  .lecon-view-container .crack-filter li a.active,.lecon-view-container .crack-filter li a:hover {
    border: 1px solid var(--bs-primary);
  }
  .lecon-view-container .evaluation-filter li a.active,.lecon-view-container .evaluation-filter li a:hover {
    border: 1px solid var(--bs-danger);
  }
  .lecon-view-container .lexique-filter li a em {
    background-color: var(--primaire-100);
    color: var(--primaire);
  }
  .lecon-view-container .exercice-filter li a em {
    background-color: var(--bs-gray-200);
    color: var(--bs-dark);
  }
  .lecon-view-container .crack-filter li a em,.lecon-view-container .crack-filter li a i {
    background-color: var(--primary-100);
    color: var(--bs-primary);
  }
  .lecon-view-container .evaluation-filter li a em,.lecon-view-container .evaluation-filter li a i {
    background-color: var(--danger-100);
    color: var(--bs-danger);
  }
 
  .lecon-view-container .lexique-capsule-liste{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
  }
  .lecon-view-container .lexique-capsule-liste li a, .lexique-capsule-liste li a:hover {
      color: #000;
      border-radius: .5rem;
      display: flex;
      align-items: center;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 0 0 auto !important;
      /* font-family: "AirbnbCerealBold" !important; */
      font-size: .85rem !important;
      padding: .25rem .75rem !important;
      gap: .5rem;
  }
  .lecon-view-container .lexique-container .lexique-capsule-liste li a.active, 
  .capsule-container .lexique-capsule-liste li a.active,
  .lexique-container .lexique-capsule-liste li a:hover{background-color: var(--primaire);color: #fff;}

  /* .lecon-view-container .exercice-container .lexique-capsule-liste li a.active, 
  .capsule-container .lexique-capsule-liste.exercice-capsule-liste li a.active,
  .exercice-container .lexique-capsule-liste li a:hover{color: #fff;} */
  /* .exercice-container .lexique-capsule-liste li a:hover{background-color: var(--bs-dark);color: #fff;} */

  .lecon-view-container .crack-container .lexique-capsule-liste li a.active, .crack-container .lexique-capsule-liste li a:hover{background-color: var(--bs-primary);color: #fff;}
  .lecon-view-container .evaluation-container .lexique-capsule-liste li a.active, .evaluation-container .lexique-capsule-liste li a:hover{background-color: var(--bs-danger);color: #fff;}
  
  .lecon-view-container .lexique-container .lexique-titre-selectionne{color: var(--primaire);}
  .lecon-view-container .exercice-container .lexique-titre-selectionne{color: var(--bs-dark);}
  .lecon-view-container .crack-container .lexique-titre-selectionne{color: var(--bs-primary);}
  .lecon-view-container .evaluation-container .lexique-titre-selectionne{color: var(--bs-danger);}

  /* .lecon-view-container .lexique-container .video-container-sage{border: 1px solid var(--primaire);}
  .lecon-view-container .exercice-container .video-container-sage{border: 1px solid var(--bs-danger);}
  .lecon-view-container .crack-container .video-container-sage{border: 1px solid var(--bs-primary);}
  .lecon-view-container .evaluation-container .video-container-sage{border: 1px solid var(--violet);} */

  .lecon-view-container .video-container-sage,.video-container-sage{
    position: relative;
  }
  .btn-switch-container{
    /* position: absolute;
    top: 2rem;
    left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1; */
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1;
    justify-content: space-between;
    background-color: #fff;
    width: 32.25rem;
    border-radius: 2rem;
    margin: 1rem auto 0;
  }    
  .btn-switch-container button{
    background-color: #fff;
    color: var(--bs-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .125rem .75rem;
    border-radius: 2rem;
    border:0;
    font-size: .85rem;
    /* font-family: "AirbnbCerealBook"; */
    text-decoration: none;
    height: 2.75rem;
    font-size: 1rem;
    flex: 1;
  }  
  .btn-switch-container button.active{
    font-family: "AirbnbCerealMedium";
    font-size: 1.25rem;
  }
  .lecon-view-container .video-container-sage em{
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
  }
  .lecon-view-container .video-container-sage .line-scale-pulse-out{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        padding: 1rem;
        border-radius: 1rem;
  }
  .lecon-view-container .sign-evaluation-choix-container{
    padding: 1rem;
    border-radius: 1rem;
    background-color: #fff;
  }
  .lecon-view-container .sign-evaluation-choix-container h2{font-size: 1rem!important;}
  .lecon-view-container .sign-evaluation-choix-container h2 span{
    display: block;
    font-family: "AirbnbCerealBook";
    font-size: .85rem;
    margin-top: .25rem;
  }
  .lecon-view-container .sign-evaluation-choix-container .evaluation-error{
    margin-top: 1rem;
    color: #f00;
    font-size: .8rem;
    display: block;
    text-align: center;
  }
  .lecon-view-container .sign-evaluation-choix-container .lexique-capsule-liste,.lecon-view-container .sign-evaluation-choix-container .reponse-container{
    padding: 0.625rem;
    background: var(--bs-gray-200);
    border-radius: 0.625rem;
    gap: 1rem;
  }
  .lecon-view-container .sign-evaluation-choix-container .lexique-capsule-liste a,
  .lecon-view-container .sign-evaluation-choix-container .lexique-capsule-liste a:hover{
      background-color:#fff;
      color: #000;
  }
  .lecon-view-container .sign-evaluation-choix-container .lexique-capsule-liste li a i.bi-x{
    font-size:.85rem;
    background: #f00;
    color: #fff !important;
    border-radius: 2rem;
  }
  .lecon-view-container .sign-evaluation-choix-container .lexique-capsule-liste input{
    background: #fff;
    border-radius: 0.25rem;
    border: 1px solid var(--bs-gray-400);
    width: 100%;
  }
  .lecon-view-container .sign-evaluation-choix-container .reponse-container{
    margin: 1.5rem 0;
    color: var(--color-111);
    font-size: .85rem;
    font-family: 'AirbnbCerealMedium';
    font-family: 'AirbnbCerealBook';
    /* display: flex; */
  }
  .lecon-view-container .sign-evaluation-choix-container .reponse-container span,
  .lecon-view-container .sign-evaluation-choix-container .reponse-container b{
    display: block;
    text-align: center;
  }
  .lecon-view-container .sign-evaluation-choix-container .reponse-container b{
    font-size: 1.5rem;
    margin: .215rem 0;
  }
  .lecon-view-container .crack-container .sign-evaluation-choix-container .reponse-container b{
    color: var(--bs-primary);
  }
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .reponse-container b{
    /* color: var(--violet); */
  }
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-next,
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-suivant,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .evaluation-next,
  .lecon-view-container .crack-container .sign-evaluation-choix-container .evaluation-go,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .niveau-next,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .lecon-next,
  .lecon-view-container .felicitation-container button{
        display: flex;
        align-items: center;
        background-color: var(--primaire) !important;
        color: #fff !important;
        border-radius: 5rem !important;
        transition: all 0.3s ease;
        font-family: "AirbnbCerealBook" !important;
        margin-left: auto;
        padding: 0.5rem 1rem 0.5rem 1.5rem !important;
        border: 0;
        font-size: .9rem;
        gap: .5rem;
  }
  .lecon-view-container .crack-container .sign-evaluation-choix-container .evaluation-go,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .niveau-next,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .lecon-next{
    /* background-color: var(--violet) !important; */
    background-color: var(--bs-danger) !important;
  }
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-next:hover,
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-suivant:hover,
  
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .evaluation-next:hover{
    background-color: var(--primaire-700) !important;
  }
  .lecon-view-container .crack-container .sign-evaluation-choix-container .evaluation-go:hover,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .niveau-next:hover,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .lecon-next:hover{
    /* background-color: var(--violet-700) !important; */
    background-color: var(--danger-700) !important;
  }
  
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-next i,
  .lecon-view-container .crack-container .sign-evaluation-choix-container .crack-suivant i,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .evaluation-next i,
  .lecon-view-container .crack-container .sign-evaluation-choix-container .evaluation-go i,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .niveau-next i,
  .lecon-view-container .evaluation-container .sign-evaluation-choix-container .lecon-next i,
  .lecon-view-container .felicitation-container button i {
      font-size: .8rem;
      background-color: #fff;
      border-radius: 100%;
      width: 1.75rem;
      height: 1.75rem;
      color: #000;
      display:flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
  }
  .lecon-view-container .felicitation-container{
    background-color: #fff;
    width: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .lecon-view-container .felicitation-container h2 {
    text-align: center;
    color: var(--primaire);
    font-size: 3rem;
  }
  .lecon-view-container .felicitation-container h6 {
    font-family: "AirbnbCerealLight";
    text-align: center;
    font-size: 1.25rem;
  }
  .lecon-view-container .felicitation-container h6 em{
    font-family: "AirbnbCerealBold";
  }
  .lecon-view-container .felicitation-container button{
    background-color: var(--bs-danger) !important;
    margin: 0 auto;
    width: fit-content;
    height: auto;
    margin-top: 1rem;
  }
  .lecon-view-container .felicitation-container button:hover{
    background-color: var(--violet-700) !important;
  }


.panel-close-container{
  color: #fff;
  /* height: 3.5rem; */
  width: 100%;
  position: absolute;
  top: 0;right: 0;
  text-align: right;
  /* background: rgba(0,0,0,.5); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
}
.panel-close-container .panel-close{
  font-size: 3rem;
}

.capsule-container video{
  background: rgba(0, 0, 0, 0.75);
  margin:1.75rem auto;
  display: block;
  position: relative;
  max-height: calc(100% - 304px);
  max-height: calc(100% - 282px);
  max-height: calc(100% - 226px);
  box-shadow: 0 0 19px 0 rgba(0,0,0,.1), 0 19px 42px 0 rgba(0,0,0,.2) !important;
}
.capsule-container video:before,.capsule-container video:after{
  content: '';
  position: absolute;
  background-color: rgba(0,0,0,.5);
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
}
.capsule-container .capsule-label{
  color: #fff;
  color: var(--bs-dark);
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "AirbnbCerealBook";
  padding: 1rem;
  margin: .75rem auto;
  max-width: calc(100% - 38rem);
  background-color:#fff;
  border-radius: .5rem;
  font-size: 1.25rem;
}
.capsule-container .capsule-pagination-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: .75rem;
  padding:2rem 1rem;
  margin-top: .5rem;
  background: rgba(0,0,0,.5);
  /* bottom: 0; */
  position: absolute;
}
.capsule-container .capsule-pagination-container:before{
  content: attr(data);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -2rem;
  /* font-family: "AirbnbCerealExtraBold"; */
  font-size: 1.25rem;
  color: #fff;
  background-color: var(--primaire);
  border-radius: .5rem;
  padding: .125rem 8rem;
}

/* .capsule-container .capsule-pagination-container.exercice:before{
  background-color: var(--bs-dark);
} */
.capsule-container .capsule-nav{
  border: 0;
  font-size: 1.75rem;
  width: 3.75rem;
  height: 3.75rem;
  /* color: #fff; */
  color: #000;
  border-radius: 2.5rem;
  /* background: #262a31; */
  background: #fff;
  margin: 0 .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.capsule-container .capsule-nav[data-nav="prev"]{
  left:  .5rem;
}
.capsule-container .capsule-nav[data-nav="next"]{
  right: .5rem;
}




    h6.lexique-titre{
    font-size: .9rem;
    font-family: "AirbnbCerealMedium";
    display: flex;
  align-items: center;
  width: 14rem;
  flex-basis: 14rem;
  position: relative;
  }
  .container-filter h1{
    font-size: 1.85rem;
    font-family: 'AirbnbCerealMedium';
  }
  .container-filter h1 span{
    width: 2.5rem;
    height: 2.5rem;
    background-color:#677D6A;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    position: absolute;
    top: 0.25rem;
    top: 0;
    right: 5rem;
    right: -3rem;
  } 
  .container-filter h1 span.trophy{
    right: 3rem;
    right: -5rem;
    background-color: var(--primaire);
    border: 2px solid #fff;
    width: 2.75rem;
    height: 2.75rem;
    top: -.125rem;
  }
  .container-filter h1 span i{
    color: #fff;
    font-size: 1.125rem;
  }
  .container-filter h6{
    font-size: .95rem;
    font-family: 'AirbnbCerealBook';
    color: var(--color-111);
  }
  .container-filter .police-container{
    /* margin: 0  0 1.5rem 0; */
  }
  .container-filter .police-container span{
    font-family: 'AirbnbCerealLight';
    font-size: 1.15rem;
  }
  .container-filter .police-container .police-link{
    background: var(--e4e5e6);
    border-radius: 1rem;
    padding: .75rem .75rem;
    margin: 2rem 0;
    color: var(--color-111);
    font-size: .85rem;
    font-family: 'AirbnbCerealMedium';
    background-color: var(--primaire-100);
  }
  .container-filter .police-container .police-link span{
    background: #fff;
    width: 3rem;
    height: 3rem;
    color: var(--primaire);
    font-family: 'AirbnbCerealMedium';
    font-size: .95rem;
    border-radius: 1.5rem;
    margin-right: 1rem;
  }
  .container-filter .police-container .police-link h2{
    font-size: 1.25rem;
    margin-bottom: .5rem;
    color: var(--bs-gray-900);
    font-family: "AirbnbCerealMedium";
  }
  .container-filter .police-container .police-link p{
    font-size: .9rem;
    font-family: 'AirbnbCerealBook';
    white-space: nowrap;
  }
  .container-filter .police-container .police-link em{
    font-size: 1.125rem;
    font-family: 'AirbnbCerealBold';
    color: var(--primaire);
  }
  .container-filter .police-container .police-link i{
    margin:0 .25rem;
  }
  /*::::::::::::::::: Pagination de filtre :::::::::::::::::*/
   .pagination-container{
    display: flex;
    align-items: center;
    width: 100%;
    gap: .5rem;
   }
   .pagination-container h6{
    font-family: 'AirbnbCerealBook';
    white-space: nowrap;
   }
  .paginations{ 
    width: 100%;
    overflow: hidden;
    margin-right: .5rem;
  }
  .pagination{
    width: 1191px;
    overflow: hidden;
    transform: translateX(0);
  }
  .pagination li{display: inline-block;}
  .pagination > li > a, .pagination > li > span {
    position: relative;
    font-size: .8rem;
    font-family: 'AirbnbCerealBook';
    margin: .25rem;
    color: var(--bs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    width: 2.5rem;
    height: 1.6rem;
    border-radius: 0.4rem;
    background: var(--bs-gray-500);
    padding: 0;
    box-shadow: none;
    transition: transform 0.5s ease-in-out;
  }
  .pagination > li > a:hover {
    background-color: #fff;
    color: var(--bs-dark);
  }
  .pagination > li > a.active {
    background-color:#fff;
    font-family: "AirbnbCerealMedium";
  }
  .navigation-container{
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .navigation-container button{
    border: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
    background-color: #fff;
    font-size: .9rem;
    color: var(--bs-black);
  }
  .navigation-container button:hover,  .navigation-container button:focus{
    background-color: var(--primaire) !important;
    color: #fff;
  }
  

  h6 span{
    font-size: .9rem;
    font-family: "AirbnbCerealMedium";
    background-color: var(--primaire);
    color: rgba(255,255,255,.8);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
  }
/* Progress bar */
/* Container for the progress bar */
.progress-bar-container{
  width: 100%;
  height: .5rem;
  background-color: rgba(255, 255, 255, 0.5); ; 
  border-radius: 0.625rem;
  overflow: hidden; 
  position: relative;
  margin: .75rem 0;
}

/* The progress bar itself */
.progress-bar-container .progress-bar {
  height: 100%;
  background-color: #fff;
  transition: width 0.3s ease;
}
.progress-bar[data-percent="0"]  { width:   0%; }
.progress-bar[data-percent="5"]  { width:   5%; }
.progress-bar[data-percent="10"] { width:  10%; }
.progress-bar[data-percent="15"] { width:  15%; }
.progress-bar[data-percent="20"] { width:  20%; }
.progress-bar[data-percent="25"] { width:  25%; }
.progress-bar[data-percent="30"] { width:  30%; }
.progress-bar[data-percent="35"] { width:  35%; }
.progress-bar[data-percent="40"] { width:  40%; }
.progress-bar[data-percent="45"] { width:  45%; }
.progress-bar[data-percent="50"] { width:  50%; }
.progress-bar[data-percent="55"] { width:  55%; }
.progress-bar[data-percent="60"] { width:  60%; }
.progress-bar[data-percent="65"] { width:  65%; }
.progress-bar[data-percent="70"] { width:  70%; }
.progress-bar[data-percent="75"] { width:  75%; }
.progress-bar[data-percent="80"] { width:  80%; }
.progress-bar[data-percent="85"] { width:  85%; }
.progress-bar[data-percent="90"] { width:  90%; }
.progress-bar[data-percent="95"] { width:  95%; }
.progress-bar[data-percent="100"] { width: 100%; }
.progress-bar-value-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.progress-bar-value-container .progress-bar-value-container-value{
  padding-bottom: .75rem;
  font-size: .9rem;
}
.progress-bar-value-container .progress-bar-value-container-value span{
  font-size: .9rem;
  color: rgba(255, 255, 255, 0.8); 
}
.lecon-item-bg-3 .progress-bar-value-container .progress-bar-value-container-value span{
  color: rgba(0, 0, 0, 0.8); 
}
.progress-bar-value-container .progress-bar-value-container-value b{
  color: #fff; 
}
.lecon-item-bg-3 .progress-bar-value-container .progress-bar-value-container-value b{
  color: #000; 
}
/* Optional: Percentage text on the bar */
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
}
/* .cours-container,.base-container,.dico-container,.technique-container{ */
.cours-container,.options-container{
  display: none;
  opacity: 0; 
  transition: opacity 0.4s ease-in-out; 
}
.base-container.active,.dico-container.active,.technique-container.active,.options-container.active{
  display: block;
  opacity: 1;
}
.options-container.active{
  display: flex;
  opacity: 1;
}
.info-additionellle{
  display: block;
  color: var(--bs-red);
  font-size: .8rem;
  margin: -1rem 0 1rem 2rem;
}

.info-bulle{
  color: var(--bs-red);
  border: 0;
  padding: 1.75rem 1rem;
  border-radius: .5rem;
  font-size: 1.5rem;
  background-color: var(--danger-100);
  text-align: center;
}
.btn-new{
  gap:1rem;
}
.btn-new button{
  background: var(--bs-success);
  color: #fff !important;
  font-size: .85rem !important;
  padding: .5rem 1.5rem !important;
  border: 0 !important;
  border-radius: .5rem !important;
  line-height: 1.5 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.panel-wrap .forms-container {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eae8f1;
  border-radius: 4px;
  padding: 1rem;
  margin: 0;
}
.panel-wrap .forms-container table th, .panel-wrap .forms-container table td {
  vertical-align: middle;
  padding: .25rem;
  border: 1px solid #dee2e6;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(222, 226, 230);
    border-bottom-color: rgb(222, 226, 230);
  border-bottom-color: rgb(222, 226, 230);
  border-right: 0;
  font-size: .75rem;
}
.panel-wrap .forms-container table th {
  font-family: "AirbnbCerealBold";
}

.panel-wrap .forms-container  table input:not([type="submit"], [type="file"], [type="checkbox"], [type="radio"]), .panel-wrap .forms-container  table select {
  height: 2rem;
  border-radius: .25rem;
  border: .012rem solid var(--primaire);
  background-color: #fff;
  font-size: .8rem;
  padding: .25rem;
  color: var(--bs-black);
  text-align: left;
}

/* Growl */
.ontop,
#growls-default {
    z-index: 50000;
    position: fixed;
}
#growls-default {
    top: 0.25rem;
    right: 0.25rem;
}
.growl {
    position: relative;
    transition: 0.4s all ease-in-out;
    border-radius: 0.25rem;
    width: 20rem !important;
}
.growl.growl-incoming {
    opacity: 0;
}
.growl.growl-outgoing {
    opacity: 0;
}
.growl.growl-small {
    width: 200px;
    padding: 5px;
    margin: 5px;
}
.growl.growl-medium {
    width: 250px;
    width: 100%;
    padding: 10px;
    margin: 0;
}
.growl.growl-large {
    width: 300px;
    padding: 15px;
    margin: 15px;
}
.growl.growl-default {
    color: #fff;
    background: #7f8c8d;
}
.growl.growl-error {
    color: #fff;
    background: var(--rouge);
}
.growl.growl-notice {
    color: #fff;
    background: var(--vert);
}
.growl.growl-warning {
    color: #fff;
    background: #f39c12;
}
.growl .growl-close {
    cursor: pointer;
    float: right;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: normal;
    font-family: helvetica, verdana, sans-serif;
}
.growl .growl-title {
    display: none;
    font-size: 18px;
    line-height: 24px;
}
.growl .growl-message {
    text-align: center;
    font-size: 14px;
    line-height: 18px;
}
.whatsapp-button {
  background-color: #25d366;
  position: absolute;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(77, 194, 71, .44));
  bottom: 2rem;
  /* transform: translateY(-50%); */
}
.whatsapp-button:hover:after {
  transform: scale(1)
}

.whatsapp-button:after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  left: -5px;
  top: -5px;
  background: var(--primaire-100);
  border-radius: 50%;
  transform: scale(0);
  transition: .3s;
  z-index: 1
}
.whatsapp-button i {
  font-size: 1.875rem;
  color: #fff;
}
/* .whatsapp-button:hover {
  color: #fff;
  transform:translate(0,0);
} */
.whatsapp-button:hover i  {
  transform:rotate(360deg);
}