@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700");

      :root {
        --font: Inter;
        --alt-font: Oswald;
        --accent-color: #12212b;
        --secondary-color: #ffe956;
        --link-color: #0061ad;
        --accent-highlight-color: #12212b;
        --accent-highlight-background-color: #e2ecf3;
        --accent-tinted-color-70: #b8bcbf;
        --accent-tinted-color-80: #d0d3d5;
        --accent-tinted-color-90: #e7e9ea;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #213d4f;
        --secondary-hover-color: #ffe223;
        --secondary-contrast-color: #111;
        --link-hover-color: #1498ff;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/ba8d19a6-2f5d-4bb0-bfdd-3511713c5195/opa8i9qbse3z-Light-1.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}

/* + ---------------------------------------------------------------------- + */
/* |                                 Fonts                                  | */
/* + ---------------------------------------------------------------------- + */

/* Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Anton */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');



/* + ---------------------------------------------------------------------- + */
/* |                                 Colors                                 | */
/* + ---------------------------------------------------------------------- + */

:root {
  /* Primary */
  --void: #12212B;
  --canary: #FFE956;
  /* Secondary */
  --cloud: #BBC5CF;
  /* Neutral */
  --black: #000000;
  --grey-dark: #E0E1DF;
  --grey-medium: #F4F5F3;
  --grey-light: #F9F9FA;
  --white: #FFFFFF;
  /* Tertiary */
  --void-medium: #1E2B35;
  --void-light: #28353F;
  --canary-dark: #F5DF4C;
  --cloud-dark: #CFD9E3;
  /* System */
  --alert: #DA5552;
  --link: #0061AD;
}



/* + ---------------------------------------------------------------------- + */
/* |                                 Header                                 | */
/* + ---------------------------------------------------------------------- + */

.header--article,
.header--dashboard,
.header--microsite {
  background-color: var(--void);
  padding: 1rem 2.5rem;
}

.header__inner {
  align-items: center;
  display: flex;
}

.header__inner a {
  color: var(--white);
}

.nav--top {
  order: 3;
  white-space: nowrap;
}

.nav--top span {
  font-family: "Inter";
  font-size: 1rem;
}

.nav--top *:active,
.nav--top *:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.company__beta-logo:hover {
  opacity: 0.7;
  transition: opacity 0.5s;
}

.top-bar {
  background-color: transparent;
  border: 0px;
  padding-left: 2.5rem;
  height: 55.19px;
  width: 100%;
}

.top-bar-section ul {
  align-items: center;
  display: flex;
  height: 55.19px !important;
  width: 100%;
}

.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) { 
  background-color: transparent;
}

.top-bar-section ul.left > li:nth-of-type(3) {
  margin-left: auto !important;
}

.top-bar-section ul.left > li:nth-of-type(2) {
  display: none;
}

.top-bar-section ul li a {
  color: white;
}

#cart-button {
  display: none;
}

.btn--link.btn--secondary {
  color: var(--link);
}

.btn--link.btn--secondary:hover {
  color: var(--link);
}

li.has-dropdown:hover {
  background-color: none !important;
}

li.has-dropdown:hover > a,
li.has-dropdown > a:focus {
  background: transparent !important;
  color: white !important;
}



/* + ---------------------------------------------------------------------- + */
/* |                               Hero Image                               | */
/* + ---------------------------------------------------------------------- + */

.hero img {
  position: relative;
}



/* + ---------------------------------------------------------------------- + */
/* |                               Search Bar                               | */
/* + ---------------------------------------------------------------------- + */

.widget--searchbar {
  left: 50%;
  position: absolute;
  top: 32.5%;
  transform: translateX(-50%);
  width: 75%;
}

.widget--searchbar input {
  border-radius: 5px;
}

@media screen and (min-width: 1440px) {
  .widget--searchbar {
    height: 100px;
  }
  .widget--searchbar input {
    height: 66px !important;
  }

  .widget--searchbar .btn--submit {
    height: 66px;
  }
}



/* + ---------------------------------------------------------------------- + */
/* |                              About Blocks                              | */
/* + ---------------------------------------------------------------------- + */

.widget--about-blocks {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 42.5%;
}

.widget--about-blocks ul {
  display: flex;
  gap: 40px;
}

.widget--about-blocks ul li  {
  background-color: var(--void-medium);
  border-radius: 12.5px;
  height: auto;
  width: 33.3333%;
}

.about-block__container *:not(img):not(h3):not(p) {
  height: 100%;
  width: 100%;
}

.about-block {
  color: var(--white);
}

.about-block h3 {
  font-weight: bold;
}

@media screen and (min-width: 1440px) {
  .widget--about-blocks {
    top: 50%;
  }
}

@media screen and (max-width: 1023px) {
  .widget--about-blocks {
    top: 45%;
  }
  .about-block p {
    display: none;
  }
  .about-block h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .widget--about-blocks {
    top: 47%;
  }
  .about-block img {
    margin-bottom: 0 !important;
  }
  .about-block h3 {
    display: none;
  }
}



/* + ---------------------------------------------------------------------- + */
/* |                                Article                                 | */
/* + ---------------------------------------------------------------------- + */

.article-content img {
  border: 2px solid var(--void);
  box-shadow: 2px 2px 5px var(--cloud);
  height: auto;
  margin-bottom: 10px;
  max-width: 100%;
}

.article-content pre {
  background-color: #2d2d2d;
  color: #f8f8f2;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  font-size: 1em;
  padding: 1em 1.2em;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  line-height: 1.5;
  margin: 1.2em 0;
  white-space: pre-wrap;
}

.article-content pre code {
  background-color: #2d2d2d;
  color: #f8f8f2;
  display: block;
  border: none;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  font-size: 0.95em;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

.article-content__body .editor-content {
  width: 100%;
}

.catalog-grid-item__stars .stars-1 i:nth-child(1)::before,
.catalog-grid-item__stars .stars-2 i:nth-child(-n+2)::before,
.catalog-grid-item__stars .stars-3 i:nth-child(-n+3)::before,
.catalog-grid-item__stars .stars-4 i:nth-child(-n+4)::before,
.catalog-grid-item__stars .stars-5 i:nth-child(-n+5)::before {
  color: var(--canary) !important;
}

.catalog-grid-item__completed {
  transform: none;
  display: flex;
  flex-direction: row-reverse;
}

.catalog-grid-item__completed p {
  display: none;
}

.catalog-grid-item__completed i {
  font-size: 0.65rem;
  margin-top: 5px;
  margin-right: 5px;
}



/* + ---------------------------------------------------------------------- + */
/* |                                Courses                                 | */
/* + ---------------------------------------------------------------------- + */

.learner__sidebar .right {
  display: none !important;
}

.learner__container__toggle pre { 
  background-color: #2d2d2d;
  color: #f8f8f2;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  font-size: 1em;
  padding: 1em 1.2em;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  line-height: 1.5;
  margin: 1.2em 0;
  white-space: pre-wrap;
}

.learner__container__toggle pre code {
  background-color: #2d2d2d;
  color: #f8f8f2;
  display: block;
  border: none;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  font-size: 0.95em;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}
.course__container .editor-content,
.learner__container .editor-content {
  width: 100%;
}

.learner-section__title {
  color: var(--void-light);
}

.learner-lesson__title {
  color: var(--canary-dark);
}

.widget--course-purchase .editor-content {
  width: 575px !important;
}

.modal-content .modal-header h4 {
  text-align: center;
}

.modal-content .modal-body .row {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.modal-content .modal-body .row .medium-4 {
  width: 60%;
  text-align: center;
  padding: 2.5% 0 2.5% 0;
}

.modal-content .modal-body .row .ask__form input,
.modal-content .modal-body .row .ask__form textarea{
  background-color: var(--void);
  border: none;
  border-radius: 10px;
  color: var(--white);
}

.modal-content .modal-body .row .ask__form input::placeholder {
  color: var(--grey-dark);
}

.modal-content .modal-body .row .ask__form button {
  background-color: var(--canary);
  border: none;
  border-radius: 10px;
  color: var(--void);
}

.modal-footer button {
  background-color: var(--void);
  border: none;
  border-radius: 10px;
  color: var(--grey-dark);
}

.article-sidebar .panel--article-sidebar:has(select) {
  display: none !important;
}

.article-sidebar .panel--article-sidebar {
  display: block !important;
}



/* + ---------------------------------------------------------------------- + */
/* |                                  FAQ                                   | */
/* + ---------------------------------------------------------------------- + */

.widget--four-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.widget--four-column .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 1024px) {
  .widget--four-column .columns {
    width: 280px;
  }
}

@media screen and (max-width: 640px) {
  .widget--four-column .columns {
    width: 100%;
  }
}

.widget--four-column .editor-content {
  width: 280px;
}

@media screen and (max-width: 1440px) {
  .editor-content {
    width: 240px;
    max-width: 100%;
    height: auto;
  }
  .editor-content p {
    font-size: 0.9rem;
  }
}



/* + ---------------------------------------------------------------------- + */
/* |                                Support                                 | */
/* + ---------------------------------------------------------------------- + */

.widget--three-column .row {
  text-align: center;
}

.widget--three-column .row .medium-4 .indent-list {
  text-align: center;
  width: auto !important;
}

.widget--three-column:first-of-type .row .indent-list img{
  border-radius: 0.5rem;
}
 


/* + ---------------------------------------------------------------------- + */
/* |                               Dashboard                                | */
/* + ---------------------------------------------------------------------- + */

.dashboard-home {
  padding: 0 !important;
  position: relative;
  margin-top: -32px;
}

.dashboard-home .indent-list {
  width: 100% !important;
}

.learning-path_custom-layout h1 {
  display: none;
}

.learning-path_custom-layout .hero__caption {
  display: none;
}

.learning-path_custom-layout .learning-content-hero__overlay {
  background-image: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0)) !important;
}

.ember2071 {
  display: none !important;
}



/* + ---------------------------------------------------------------------- + */
/* |                                Register                                | */
/* + ---------------------------------------------------------------------- + */

.registration {
  width: 100%;
  height: 100%;
  max-height: 675px;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
}

/* Conteneur de contenu superposé */
.registration-container {
  width: 550px;
  max-width: 95vw;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 3rem 0 3rem 0;
}

.registration-content {
  width: 100%;
}

/* Typographie */
.registration-title {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: #121418;
  margin: 0 0 25px 0;
  line-height: 1.1;
}

.registration-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  text-align: center;
}

.registration-info {
  font-size: 15px;
  font-style: italic;
  color: #2a2a2a;
  margin: 0 0 24px 0;
  text-align: center;
  line-height: 1.4;
}

.registration-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
  text-align: center;
}

/* Sections */
.registration-section {
  margin-bottom: 35px;
  text-align: center;
}

/* Boutons */
.registration-btn {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 18px 0;
  margin: 0 auto 16px auto;
  background: #19222e;
  color: #cfc478;
  border: none;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.08s;
}



@media screen and (max-width: 1439px) {
  .registration {
    max-height: 575px;
    top: 12%;
  }

  .registration-title {
    font-size: 32px;
    letter-spacing: 2px;
    margin: 0 0 16px 0;
  }

  .registration-subtitle {
    font-size: 13px;
    margin: 0 0 6px 0;
    text-align: center;
  }

  .registration-info {
    font-size: 13px;
    margin: 0 0 16px 0;
  }

  .registration-section {
    margin-bottom: 17.5px;
  }

  .registration-btn {
    font-size: 16px;
    margin: 0 auto 8px auto;
    max-width: 275px;
    padding: 12px 0;
  }
}

@media screen and (max-width: 1023px) {
  .registration {
    max-height: 435px;
    top: 14.5%;
  }

  .registration-title {
    font-size: 26px;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
  }

  .registration-subtitle {
    font-size: 13px;
    margin: 0 0 6px 0;
    text-align: center;
  }

  .registration-info {
    font-size: 11px;
    margin: 0 0 12px 0;
  }

  .registration-section {
    margin-bottom: 12.5px;
  }

  .registration-section-title {
    font-size: 12px;
    margin: 0 0 8px 0;
  }

  .registration-btn {
    font-size: 12px;
    margin: 0 auto 8px auto;
    max-width: 200px;
    padding: 8px 0;
  }
}



/* + ---------------------------------------------------------------------- + */
/* |                                 Footer                                 | */
/* + ---------------------------------------------------------------------- + */

footer {
  background-color: var(--void);
  color: var(--white);
  padding: 0.5rem 3rem !important;
}

.footer__inner {
  border: none;
}

.footer__company__info,
.footer__links a,
.footer__links span {
  color: var(--white);
  font-size: 1rem;
  margin: 0;
}



h1,
h2,
h3,
h4 {
  text-transform: uppercase;
}



.widget--learning-path-content {
  margin-top: -375px;
}

@media screen and (max-width: 1919px) {
  .widget--learning-path-content {
    margin-top: -275px;
  }
}

@media screen and (max-width: 1439px) {
  .widget--learning-path-content {
    margin-top: -175px;
  }
}

@media screen and (max-width: 1024px) {
  .widget--learning-path-content {
    margin-top: -125px;
  }
}