/***** COLORS *****/
/***** FONTS *****/
.nunito-black {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.nunito-extra {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.nunito-medium {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.nunito-medium-ita {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}
/***** FONT COLORS & BACKGROUND COLORS *****/
.bg-lightblue {
  background: #e9f8ff;
}
.bg-blue {
  background: #0babee;
}
.bg-white {
  background: white;
}
.bg-lightgreen {
  background: #e4f7f4;
}
.bg-red {
  background: #ff6464;
}
.bg-forest {
  background: #3a8574;
}
.bg-pink {
  background: #e85ba0;
}
.white {
  color: white;
}
.blue {
  color: #0babee;
}
.forest {
  color: #3a8574;
}
.black {
  color: #555555;
}
.darkblue {
  color: #096a95;
}
.uppercase {
  text-transform: uppercase;
}
.bold {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.italic {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}
/***** BUTTONS *****/
.btn {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 16px;
  border: none;
}
.btn.btn-pink {
  background: #e85ba0;
  color: white;
}
.btn.btn-forest {
  background: #3a8574;
  color: white;
}
.btn.btn-unlocked {
  background: white;
  color: #0babee;
}
.btn.btn-locked {
  background: #66CCF6;
  color: white;
}
body {
  padding: 0;
  margin: 0;
}
/***** HEADER *****/
#header-logo {
  text-align: center;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 4em;
}
#header-logo img {
  height: 30px;
  width: auto;
}
@media screen and (min-width: 992px) {
  #header-logo img {
    height: 40px;
  }
}
/***** MAIN *****/
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  /***** INTRO *****/
  /***** BOARD *****/
}
main #intro-desktop h1,
main #intro-mobile h1 {
  color: #0babee;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  line-height: 120%;
  max-width: 700px;
  margin: 0 auto 0.8em;
}
@media screen and (min-width: 992px) {
  main #intro-desktop h1,
  main #intro-mobile h1 {
    font-size: 36px;
  }
}
main #intro-desktop p,
main #intro-mobile p,
main #intro-desktop #avantages,
main #intro-mobile #avantages {
  color: #555555;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
}
main #intro-desktop #avantages li,
main #intro-mobile #avantages li {
  list-style-type: "- ";
}
main #intro-desktop {
  display: none;
}
@media screen and (min-width: 992px) {
  main #intro-desktop {
    display: block;
  }
}
main #intro-mobile {
  display: block;
}
@media screen and (min-width: 992px) {
  main #intro-mobile {
    display: none;
  }
}
main #board-desktop {
  padding-top: 2em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 8px;
}
main #board-desktop .card {
  border-radius: 15px;
  min-height: 320px;
  background: #e9f8ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  min-width: 260px;
  max-width: 260px;
  margin: 0 auto;
}
@media screen and (min-width: 992px) {
  main #board-desktop .card {
    min-width: unset;
    max-width: unset;
    margin: unset;
  }
}
main #board-desktop .card h2 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  line-height: 120%;
  font-size: 20px;
  color: #0babee;
  margin: 0;
}
main #board-desktop .card p {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
main #board-desktop .card .emoji {
  max-height: 60px;
  width: auto;
  margin-bottom: 10px;
}
main #board-desktop .card.team {
  justify-content: start;
  padding-top: 20px;
}
main #board-desktop .card.team .team-img {
  max-height: 270px;
  width: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
main #board-desktop .card.team.alexandra .team-img {
  right: 0;
  left: unset;
  border-radius: 0 0 15px 0;
}
main #board-desktop .card.team.anais .team-img {
  max-height: unset;
  max-width: 100%;
  height: auto;
  border-radius: 0 0 15px 15px;
}
main #board-desktop .card.card-locked img {
  max-height: 260px;
}
main #board-desktop .card.bravo {
  background: #e4f7f4;
}
main #board-desktop .card.has-video {
  transition: all 0.3s ease-in-out;
  z-index: 10;
}
main #board-desktop .card.has-video p {
  line-height: 100%;
}
main #board-desktop .card.has-video.bravo {
  background: #3a8574;
  position: relative;
}
main #board-desktop .card.has-video.bravo.sticker {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
}
main #board-desktop .card.has-video.video-unlocked .sticker-done {
  top: -20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px 15px;
  background: #e4f7f4;
  color: #3a8574;
  border-radius: 6px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  transform: rotate(-3deg);
  width: 50%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
main #board-desktop .div5 {
  grid-column-start: 4;
  grid-row-start: 2;
}
main #board-desktop .div6 {
  grid-column-start: 4;
  grid-row-start: 3;
}
main #board-desktop .div7 {
  grid-column-start: 3;
  grid-row-start: 3;
}
main #board-desktop .div8 {
  grid-column-start: 2;
  grid-row-start: 3;
}
main #board-desktop .div9 {
  grid-column-start: 1;
  grid-row-start: 3;
}
main #board-desktop .div10 {
  grid-column-start: 1;
  grid-row-start: 4;
}
main #board-desktop .div11 {
  grid-column-start: 1;
  grid-row-start: 5;
}
main #board-desktop .div12 {
  grid-column-start: 2;
  grid-row-start: 5;
}
main #board-desktop .div13 {
  grid-column-start: 3;
  grid-row-start: 5;
}
main #board-desktop .div14 {
  grid-column-start: 4;
  grid-row-start: 5;
}
main #board-desktop .div15 {
  grid-column-start: 4;
  grid-row-start: 6;
}
main #board-desktop .div16 {
  grid-column-start: 4;
  grid-row-start: 7;
}
main #board-desktop .div17 {
  grid-column-start: 3;
  grid-row-start: 7;
}
main #board-desktop .div18 {
  grid-column-start: 2;
  grid-row-start: 7;
}
main #board-desktop .div19 {
  grid-column-start: 1;
  grid-row-start: 7;
}
main #board-desktop .div20 {
  grid-column-start: 1;
  grid-row-start: 8;
}
main #board-desktop .div21 {
  grid-column-start: 1;
  grid-row-start: 9;
}
main #board-desktop .div22 {
  grid-column-start: 2;
  grid-row-start: 9;
}
main #board-desktop .div23 {
  grid-column-start: 3;
  grid-row-start: 9;
}
main #board-desktop .div24 {
  grid-column-start: 4;
  grid-row-start: 9;
}
main #board-desktop .div25 {
  grid-column-start: 4;
  grid-row-start: 10;
}
main #board-desktop .div26 {
  grid-column-start: 4;
  grid-row-start: 11;
}
main #board-desktop .div27 {
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 2;
}
main #board-desktop .div28 {
  grid-column: span 3 / span 3;
  grid-column-start: 2;
  grid-row-start: 4;
}
main #board-desktop .div29 {
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 6;
}
main #board-desktop .div30 {
  grid-column: span 3 / span 3;
  grid-column-start: 2;
  grid-row-start: 8;
}
main #board-desktop .div31 {
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-column-start: 1;
  grid-row-start: 10;
}
main #board-desktop .div1 {
  border-radius: 60px 60px 15px 15px;
  position: relative;
  padding: 0 15px;
}
main #board-desktop .div1 .piou-start {
  max-height: 150px;
  width: auto;
}
main #board-desktop .div1 #sticker {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px 15px;
  background: #ff6464;
  color: white;
  border-radius: 6px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  transform: rotate(-3deg);
  width: 50%;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div1 #sticker {
    top: 20px;
    left: -20px;
    right: unset;
    width: unset;
  }
}
@media screen and (min-width: 992px) {
  main #board-desktop .div1 {
    border-radius: 60px 15px 15px 60px;
  }
}
main #board-desktop .div3,
main #board-desktop .div6,
main #board-desktop .div8,
main #board-desktop .div11,
main #board-desktop .div14,
main #board-desktop .div16,
main #board-desktop .div18,
main #board-desktop .div21,
main #board-desktop .div23,
main #board-desktop .div26 {
  background: #0babee;
  color: white;
  padding: 0 15px;
}
main #board-desktop .div3 h2,
main #board-desktop .div6 h2,
main #board-desktop .div8 h2,
main #board-desktop .div11 h2,
main #board-desktop .div14 h2,
main #board-desktop .div16 h2,
main #board-desktop .div18 h2,
main #board-desktop .div21 h2,
main #board-desktop .div23 h2,
main #board-desktop .div26 h2 {
  color: white;
  font-size: 18px;
  line-height: 100%;
}
main #board-desktop .div3 p,
main #board-desktop .div6 p,
main #board-desktop .div8 p,
main #board-desktop .div11 p,
main #board-desktop .div14 p,
main #board-desktop .div16 p,
main #board-desktop .div18 p,
main #board-desktop .div21 p,
main #board-desktop .div23 p,
main #board-desktop .div26 p {
  font-size: 15px;
  line-height: 120%;
}
main #board-desktop .div3 .time,
main #board-desktop .div6 .time,
main #board-desktop .div8 .time,
main #board-desktop .div11 .time,
main #board-desktop .div14 .time,
main #board-desktop .div16 .time,
main #board-desktop .div18 .time,
main #board-desktop .div21 .time,
main #board-desktop .div23 .time,
main #board-desktop .div26 .time {
  display: flex;
  margin-top: 10px;
}
main #board-desktop .div3 .time img,
main #board-desktop .div6 .time img,
main #board-desktop .div8 .time img,
main #board-desktop .div11 .time img,
main #board-desktop .div14 .time img,
main #board-desktop .div16 .time img,
main #board-desktop .div18 .time img,
main #board-desktop .div21 .time img,
main #board-desktop .div23 .time img,
main #board-desktop .div26 .time img {
  max-height: 20px;
  width: auto;
  margin-right: 5px;
}
main #board-desktop .div3 .time .duration,
main #board-desktop .div6 .time .duration,
main #board-desktop .div8 .time .duration,
main #board-desktop .div11 .time .duration,
main #board-desktop .div14 .time .duration,
main #board-desktop .div16 .time .duration,
main #board-desktop .div18 .time .duration,
main #board-desktop .div21 .time .duration,
main #board-desktop .div23 .time .duration,
main #board-desktop .div26 .time .duration {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
main #board-desktop .div27,
main #board-desktop .div28,
main #board-desktop .div29,
main #board-desktop .div30 {
  background: white;
}
main #board-desktop .div27 img,
main #board-desktop .div28 img,
main #board-desktop .div29 img,
main #board-desktop .div30 img {
  max-height: 150px;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div4,
  main #board-desktop .div14,
  main #board-desktop .div24 {
    border-radius: 15px 60px 15px 15px;
  }
}
@media screen and (min-width: 992px) {
  main #board-desktop .div11,
  main #board-desktop .div21 {
    border-radius: 15px 15px 15px 60px;
  }
}
@media screen and (min-width: 992px) {
  main #board-desktop .div6,
  main #board-desktop .div16 {
    border-radius: 15px 15px 60px 15px;
  }
}
@media screen and (min-width: 992px) {
  main #board-desktop .div9,
  main #board-desktop .div19 {
    border-radius: 60px 15px 15px 15px;
  }
}
main #board-desktop .div26 {
  border-radius: 15px 15px 15px 15px;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div26 {
    border-radius: 15px 15px 60px 15px;
  }
}
main #board-desktop .div26 .emoji-end {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-height: 50px!important;
  width: auto;
  z-index: 11;
}
main #board-desktop .div31 {
  border-radius: 15px 15px 60px 60px;
  text-align: center;
  padding: 20px;
  display: none;
  position: relative;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div31 {
    border-radius: 60px 15px 15px 60px;
    padding: 0 20px;
  }
}
main #board-desktop .div31 img {
  height: 80px;
  width: auto;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div31 img {
    height: 140px;
  }
  main #board-desktop .div31 img#gift {
    height: unset;
    max-height: 250px;
    margin-bottom: 20px;
    width: auto;
  }
}
main #board-desktop .div31 h2 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  line-height: 120%;
  margin: 10px auto 10px;
  font-size: 20px;
}
@media screen and (min-width: 992px) {
  main #board-desktop .div31 h2 {
    font-size: 30px;
  }
}
main #board-desktop .div31 .btn {
  margin: 0 auto 30px;
}
/* ===============================
VISIBILITÉ CONTRÔLÉE PAR LE JS
=============================== */
/* Par défaut, on ne touche à rien */
/* Cartes explicitement masquées par le JS */
.card.is-hidden {
  display: none !important;
}
/* Cartes affichées par le JS */
.card.is-visible {
  display: flex !important;
}
/* ===============================
MOBILE < 992px (SAFE MODE)
=============================== */
@media screen and (max-width: 991px) {
  #board-desktop {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding-top: 1.5em;
  }
  /* Neutralise le grid sans casser le DOM */
  #board-desktop > .card {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Carte de fin */
  #board-desktop .div31 {
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
  }
  /* Piou maskey mobile */
  #board-desktop .card-locked img {
    max-height: 180px;
  }
}
/***** FOOTER *****/
footer {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  max-width: 90%;
  margin: 50px auto 0;
  border-top: 1px solid #e6e6e6;
}
#footer-logo {
  text-align: center;
  padding: 10px;
}
#footer-logo img {
  height: 28px;
  width: auto;
}
@media screen and (min-width: 992px) {
  #footer-logo img {
    height: 35px;
  }
}
#footer-logo .foot-links {
  margin-top: 15px;
}
#footer-logo a {
  padding: 10px 0 0;
  color: #0babee;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-decoration: none;
}
#footer-logo p {
  margin: 5px auto;
}
/***** MODAL *****/
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.video-modal.is-active {
  display: flex;
}
.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0babee;
  padding: 20px;
  border-radius: 12px;
  z-index: 1;
}
.video-modal__title {
  margin: 0 0 15px;
  font-size: 18px;
  text-align: center;
  color: white;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.video-modal__video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
}
.video-modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 34px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color: white;
}
/* Ajustements mobile */
@media (max-width: 768px) {
  .video-modal__content {
    padding: 15px;
  }
  .video-modal__title {
    font-size: 16px;
  }
  .video-modal__video {
    border-radius: 8px;
  }
}
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}
.confirm-modal.is-open {
  display: flex;
}
.confirm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.confirm-modal__content {
  position: relative;
  width: 90%;
  max-width: 350px;
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  padding: 20px;
  border-radius: 12px;
  z-index: 1;
}
.confirm-modal__actions {
  margin-bottom: 20px;
}
.confirm-modal h3 {
  margin: 10px 0 15px;
}
/***** STICKY *****/
#sticky {
  position: fixed;
  z-index: 11;
  padding: 20px 20px;
  border-radius: 15px 0 0 15px;
  background: #e4f7f4;
  top: 20px;
  right: 0;
}
#sticky h3,
#sticky p {
  margin: 5px 0;
}
/***** EFFECTS *****/
.zoom {
  transform: rotate(2deg) scale(1.1);
  -webkit-transform: rotate(2deg) scale(1.1);
}
.card-unlocked {
  background: #e9f8ff !important;
}
.card-unlocked h2 {
  color: #0babee !important;
}
.card-unlocked.completed {
  background: #e4f7f4 !important;
}
.card-unlocked.completed h2 {
  color: #3a8574 !important;
}
.card-unlocked.has-video {
  background: #0babee !important;
}
.card-unlocked.has-video h2 {
  color: white !important;
}
.card-unlocked.has-video.video-unlocked.completed {
  background: #3a8574 !important;
}
.card-unlocked.has-video.video-unlocked.completed .btn-unlocked {
  color: #3a8574 !important;
}