:root {
    --lp-c-primary: #17213D;
    --lp-c-secondary: #244285;
    --lp-c-text: #444444;
    --lp-c-texthigh: #2F66AE;
    --lp-c-gradient-start: #2660A0;
    --lp-c-gradient-end: #0A8AA6;


    --lp-primary-bgcolor:var(--lp-c-primary);
    --lp-primary-color:#FFF;
}


/* HACKS
================================================== */
#app.lp .overlay {background-color:var(--color-overlay-default) !important; color:var(--color-content-neutral-primary) !important;}
#app.lp .overlay-content {background-color:var(--color-background-light-neutral-underground-1) !important; border:1px solid var(--color-content-primary-accent-light) !important;}
#app.lp .overlay-content.width-medium {width:80rem;}


/* Fixes
================================================== */
#app.lp #root {display:block; position:relative; background-color:#FFF;}
#app.lp #root main {padding:0;}
#app.lp img {width:100%;}

#app.lp p {color:var(--lp-c-text);}


/* Layout
================================================== */
#app.lp header {z-index:99999; position:sticky; background-color:#FFF; top:0; box-shadow:0px -1px 0px 0px var(--color-background-light-neutral-underground-3) inset;}
#app.lp #nav-right > * {min-width:8rem;}

#app.lp button.nav-primary {background-color:var(--lp-primary-bgcolor); color:var(--lp-primary-color);}
#app.lp button.nav-primary:hover {opacity:0.9;}
#app.lp button.nav-secondary {}


#app.lp .lp-container {margin:0 auto; width:60%; max-width:90%; text-align:center; display:flex; flex-direction:column; gap:var(--margin-large);}


#app.lp main section {padding:4rem 0;}


#app.lp .lp-features {display:flex; flex-direction:row; gap:var(--margin-large);}

#app.lp .lp-features-items {flex-basis:33%; display:flex; flex-direction:column; gap:var(--margin-large);}
#app.lp .lp-features-items * {margin:0;}
#app.lp .lp-features-item {display:flex; flex-direction:row; gap:var(--margin-small);}
#app.lp .lp-features-item > div {display:flex; flex-direction:column; align-items:start;}

#app.lp .lp-features-item h3 {color:var(--lp-c-primary); text-align:left;}
#app.lp .lp-features-item p {color:var(--lp-c-text); font-size:1.125em; text-align:left;}
#app.lp .lp-features-item img {width:43px; height:43px;}

#app.lp .lp-features-video {flex-basis:66%;}
#app.lp .lp-features-video .lp-video-player {position:relative; padding-bottom:56.33%; padding-top:0; height:0; background-color:var(--app-tiles-bgcolor); backdrop-filter:blur(3px); overflow:hidden;}
#app.lp .lp-features-video .lp-video-player iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:none;}


#app.lp #journey {background:url('../images/landing/bg-journey.png') no-repeat center / 100% 100%;}
#app.lp #journey p {font-size:1.25em;}
#app.lp #journey h3 {background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); background-clip:text; color:transparent;}
#app.lp .lp-journey-items {display:flex; flex-direction:column; gap:var(--margin-medium);}
#app.lp .lp-journey-items * {margin:0;}
#app.lp .lp-journey-item {display:flex; flex-direction:row; gap:var(--margin-medium); align-items:center;}
#app.lp .lp-journey-item .lp-journey-gap {flex-basis:50%;}
#app.lp .lp-journey-item .lp-journey-desc {flex-basis:50%; display:flex; flex-direction:column; align-items:start;}
#app.lp .lp-journey-item .lp-journey-step {display:flex; align-items:center; justify-content:center; border:2px solid transparent; border-radius:4em; background:linear-gradient(white, white) padding-box, linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)) border-box;}
#app.lp .lp-journey-item .lp-journey-step > label {font-size:1.5em; font-weight:600; width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); background-clip:text; color:transparent;}

#app.lp .lp-journey-items .lp-journey-item:nth-child(odd) .lp-journey-desc {text-align:left; line-height:1.4;}
#app.lp .lp-journey-items .lp-journey-item:nth-child(even) .lp-journey-desc {align-items:end; text-align:right; line-height:1.4;}
#app.lp .lp-journey-items .lp-journey-item:nth-child(even) {flex-direction:row-reverse;}


#app.lp section#testimonials {background-color:#F0F8FF;}
#app.lp section#testimonials p {font-size:1.125em;}
#app.lp section#testimonials h3 {font-size:1.125em;}
#app.lp .lp-testimonials-items {display:flex; flex-direction:row; gap:var(--margin-medium); justify-content:center; gap:var(--margin-large); flex-wrap:wrap;}
#app.lp .lp-testimonials-items * {margin:0;}
#app.lp .lp-testimonials-item {display:flex; flex-direction:column; gap:var(--margin-medium); background-color:#FFF; border-radius:0.5rem; padding:2rem; flex-basis:30%;}
#app.lp .lp-testimonials-item:hover {box-shadow:0 0 #000, 0 0 #000, 0 0 #000, 0 0 #000, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
#app.lp .lp-testimonials-item > p::before {content:"\201C";}
#app.lp .lp-testimonials-item > p::after {content:"\201D";}
#app.lp .lp-testimonials-item > div {display:flex; flex-direction:row; gap:var(--margin-small); justify-content:space-between;}
#app.lp .lp-testimonials-item > div > img {width:3em; height:3em; border-radius:2em; flex-basis:3em; border:2px solid transparent; border-radius:4em; background:linear-gradient(white, white) padding-box, linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)) border-box;}
#app.lp .lp-testimonials-item > div > div {flex-basis:100%;}
#app.lp .lp-testimonials-item > div > div > p:nth-child(1) {text-align:left; font-size:1em !important; color:var(--lp-c-primary); font-weight:700;}
#app.lp .lp-testimonials-item > div > div > p:nth-child(2) {text-align:left; font-size:0.875em !important; color:var(--lp-c-texthigh);}


#app.lp .lp-faq-item {display:flex; flex-direction:row; justify-content:space-between; gap:var(--margin-small); padding: 2em 0; border-bottom:1px solid; border-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)) 1;}
#app.lp .lp-faq-item h3 {flex-basis:33%; text-align:left; font-size:1.25em; background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); background-clip:text; color:transparent;}
#app.lp .lp-faq-item p {flex-basis:66%; text-align:justify; font-size:1.125em;}
#app.lp .lp-faq-more {display:flex; flex-direction:row; gap:var(--margin-medium); justify-content:center;}
#app.lp .lp-faq-more > span {font-weight:700; color:var(--lp-c-primary); font-size:1.125em;}
#app.lp .lp-faq-more > a {font-weight:700; color:var(--lp-c-secondary); font-size:1.125em; text-decoration:none;}
#app.lp .lp-faq-more > a:hover {color:var(--lp-c-texthigh); text-decoration:underline;}


#app.lp footer {display:flex; align-items:center; justify-content:space-between; gap:var(--margin-small); padding:3rem 4rem; background-color:#17213D;}

#app.lp footer #lp-footer-desc {display:flex; flex-direction:column; gap:var(--margin-medium);}
#app.lp footer #lp-footer-desc * {margin:0;}
#app.lp footer #lp-footer-desc span.app-logo {font-family:var(--font-unbounded); font-size:1.2rem; color:var(--lp-primary-color);}
#app.lp footer #lp-footer-desc p {font-size:0.875em; color:var(--lp-primary-color);}
#app.lp footer #lp-footer-desc > div {display:flex; flex-direction:column; gap:0.5rem;}

#app.lp footer #lp-footer-help {display:flex; flex-direction:column; gap:var(--margin-small);}
#app.lp footer #lp-footer-help span {color:var(--lp-primary-color);}
#app.lp footer #lp-footer-help a {color:var(--lp-primary-color);}

#app.lp footer #lp-footer-logos {display:flex; flex-direction:row; justify-content:flex-end; gap:var(--margin-large);}

#app.lp footer #lp-footer-logos img {height:3em;}


#app.lp #lp-overlay-nhl .overlay-content {padding:0; max-height:calc(100% - 5rem); margin-top:5rem;}
#app.lp #lp-overlay-nhl h2 {padding:2rem 4rem 0; text-align:center; background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); background-clip:text; color:transparent;}
#app.lp #lp-overlay-nhl h3 {text-align:center; color:var(--lp-c-secondary);}
#app.lp #lp-overlay-nhl p {margin:0;}

#app.lp .lp-overlay-nhl-content {padding:2rem 4rem;}
#app.lp .lp-overlay-nhl-content > div {background-color:#F5F5F5; padding:2rem 3rem; border-radius:0.5rem; display:flex; flex-direction:row; justify-content:space-between; gap:var(--margin-medium);}
#app.lp .lp-overlay-nhl-content > div > div {display:flex; flex-direction:column; gap:var(--margin-small); flex-basis:50%; justify-content:center;}
#app.lp .lp-overlay-nhl-content > div > div:nth-child(1) {flex-basis:40%;}
#app.lp .lp-overlay-nhl-content > div > div:nth-child(2) {flex-basis:60%;}

#app.lp .lp-overlay-nhl-details {padding:2rem 4rem; background-color:#EFF7FF; display:flex; flex-direction:column; gap:var(--margin-small);}
#app.lp .lp-overlay-nhl-details p {text-align:center;}
#app.lp .lp-overlay-nhl-details p.lp-overlay-warning {color:#FF0000; font-style:italic;}
#app.lp .lp-overlay-nhl-details .lp-overlay-nhl-details-actions {display:flex; flex-direction:row; justify-content:center; gap:var(--margin-small);}
#app.lp .lp-overlay-nhl-details .lp-overlay-nhl-details-actions > span {border-right:1px solid #DDD; width:1px;}


#app.lp #lp-overlay-actions {padding:1em; text-align:center;}
#app.lp #lp-overlay-actions #btn-lp-nhl-overlay-close {background-color:#ea8000; color:var(--lp-primary-color); border-radius:0.375rem; padding:0.65em 3em; max-width:100%;}
#app.lp #lp-overlay-actions #btn-lp-nhl-overlay-close:hover {background-color:#ff9c00 !important; color:var(--lp-primary-color) !important;}

#app.lp .lp-overlay-nhl-details #btn-lp-register {background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); color:var(--lp-primary-color); border-radius:0.375rem; padding:0.65em 3em; max-width:100%;}
#app.lp .lp-overlay-nhl-details #btn-lp-register:hover {background-image:linear-gradient(to left, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); color:var(--lp-primary-color) !important;}
#app.lp .lp-overlay-nhl-details #btn-lp-registermay19,
#app.lp .lp-overlay-nhl-details #btn-lp-registermay27,
#app.lp .lp-overlay-nhl-details #btn-lp-registermay28 {border:2px solid transparent; border-radius:0.5em; background:linear-gradient(white, white) padding-box, linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)) border-box;}
#app.lp .lp-overlay-nhl-details #btn-lp-registermay19:hover,
#app.lp .lp-overlay-nhl-details #btn-lp-registermay27:hover,
#app.lp .lp-overlay-nhl-details #btn-lp-registermay28:hover {background:linear-gradient(white, white) padding-box, linear-gradient(to left, var(--lp-c-gradient-start), var(--lp-c-gradient-end)) border-box; color:var(--lp-c-text) !important;}

#app.lp .lp-overlay-nhl-details > div > span {border-right:1px solid #DDD; width:1px;}

#app.lp .lp-overlay-nhl-content-features li span {font-weight:600; margin-right:0.25em;}

#app.lp .lp-overlay-nhl-details > div {display:flex; flex-direction:row; gap:var(--margin-large);}
#app.lp .lp-overlay-nhl-details > div > div {display:flex; flex-direction:column; gap:var(--margin-small); flex-basis:50%; }
#app.lp .lp-overlay-actions {display:flex; flex-direction:column; gap:var(--margin-small);}
#app.lp .lp-overlay-actions > div {display:flex; flex-direction:row; gap:var(--margin-small);}
#app.lp .lp-overlay-actions > div button {flex-basis:50%;}

/* Styling
================================================== */
#app.lp section#welcome h1 > span {background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); background-clip:text; color:transparent;}
#app.lp section#welcome p {font-size:1.25em;}
#app.lp section#welcome button#btn-educator-register {background-image:linear-gradient(to right, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); color:var(--lp-primary-color); font-size:1.25em; border-radius:0.375rem; padding:0.65em 4em; max-width:100%;}
#app.lp section#welcome button#btn-educator-register:hover {background-image:linear-gradient(to left, var(--lp-c-gradient-start), var(--lp-c-gradient-end)); color:var(--lp-primary-color) !important;}


/* Responsive
================================================== */
@media only screen and (min-width: 1080px) {
    #app.lp .lp-hero-img-std {display:block;}
    #app.lp .lp-hero-img-mob {display:none;}
    #app.lp .lp-hero-bg {background:url('../images/landing/hero-background.png') no-repeat center / 100% 100%;}
}
@media only screen and (max-width: 1080px) {
    #app.lp .lp-hero-img-std {display:none;}
    #app.lp .lp-hero-img-mob {display:block;}
    #app.lp .lp-hero-bg {background:url('../images/landing/hero-background-mobile.png') no-repeat center / 100% 100%;}

    #app.lp .lp-journey-item {align-items:flex-start;}
    #app.lp .lp-journey-item .lp-journey-gap {display:none;}
    #app.lp .lp-journey-item .lp-journey-desc {flex-basis:100%;}
    #app.lp .lp-journey-items .lp-journey-item:nth-child(even) {flex-direction:row;}
    #app.lp .lp-journey-items .lp-journey-item:nth-child(even) .lp-journey-desc {align-items:start; text-align:left;}

    #app.lp .lp-testimonials-items {flex-direction:column;}

    #app.lp .lp-overlay-nhl-content > div,
    #app.lp .lp-overlay-nhl-details .lp-overlay-nhl-details-actions {flex-direction:column;}
    #app.lp .lp-overlay-nhl-content, #app.lp .lp-overlay-nhl-content > div, #app.lp #lp-overlay-nhl .lp-overlay-nhl-details {padding:2rem;}

    #app.lp footer {flex-direction:column; gap:var(--margin-large);}
    #app.lp footer > * {width:100%;}
    #app.lp footer #lp-footer-help {flex-direction:row; justify-content:center;}
    #app.lp footer #lp-footer-logos {justify-content:center;}
}
@media only screen and (max-width: 1440px) {
    #app.lp .lp-container {width:80%;}
}
@media only screen and (max-width: 768px) {
    #app.lp #btn-account-register {display:none;}
    #app.lp #btn-account-login, #app.lp #select-language {min-width:0;}

    #app.lp .lp-features, #app.lp .lp-faq-item {flex-direction:column;}

    #app.lp .lp-overlay-nhl-details > div {flex-direction:column;}
    #app.lp .lp-overlay-nhl-details > div > span {border-top:1px solid #DDD; width:100%; height:1px;}
}


/* Titres
================================================== */
#app.lp h1, #app.lp h2, #app.lp h3, #app.lp h4 {margin:0; font-weight:600; line-height:1.2;}
#app.lp h1 {font-size:3em;}
#app.lp h2 {font-size:2.25em; color:var(--lp-c-secondary);}
#app.lp h3 {font-size:1.5em;}
#app.lp h4 {font-size:1em;}


/* Carousel
================================================= */
.carousel {  position: relative;   display: flex;   align-items: center;   gap: 1rem;  padding: 1rem 0; }

/* ── Boutons précédent / suivant ── */
.carousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0e3ea;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1a3a6b;
  transition: background 0.2s;
  z-index: 2;
}
.carousel-btn:hover { background: #f0f4fb; }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Zone de défilement ── */
.carousel-track-wrapper {
  overflow: hidden;
  flex: 1;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Une carte ── */
.carousel-card {
  display: flex;
  flex-direction: column; /* colonne : header puis content */
  gap: 1.25rem;
}

.carousel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.carousel-card-content {
  display: flex; /* ligne : visual + body */
  gap: 1.5rem;
}

/* ── Illustration gauche ── */
.carousel-card-visual {
  flex: 0 0 240px;
  background: #eef3fb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

/* ── Contenu droit ── */
.carousel-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
}

/* ── Titre de la carte (ex: "The Process Detective") ── */
.carousel-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a3a6b;
  margin: 0 0 0.25rem 0;
}

/* ── Labels colorés (Scenario / Role / Goal) ── */
.carousel-card-label {
  font-size: 14px;
  font-weight: 700;
  color: #1a75d2;
  margin: 0 0 4px 0;
}

/* ── Texte courant ── */
.carousel-card-text {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* ── Points de pagination ── */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cdd5e0;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active {
  background: #1a75d2;
  transform: scale(1.25);
}