@charset "UTF-8";
@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/boldonse-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/boldonse-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/unbounded-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --main-color: 21, 2, 99;
  --accent-color: 38, 9, 156;
  --highlight-color: 199, 255, 110;
  --yellow: 254, 203, 0;
  --green: 46, 125, 50;
  --dark-green: 27, 94, 32;
  --red: 214, 0, 86;
  --card-edge: 237, 231, 214; /* tranche crème des piles de cartes empilées */
  --transition-dynamic: .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-color: .25s ease;
  --font-global: 'Unbounded', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Boldonse', Tahoma, Geneva, Verdana, sans-serif;
  --r-bouton: 5px;
  --r-champ: 10px;
  --r-carte: 15px;
  --r-bloc: 20px;
  --btn-padding: 10px 15px;
  --btn-taille: 12px;
  --btn-bordure: 2px;
  --carte-ombre: 4px 4px 0 0 rgba(var(--main-color), 0.8);
  --card-u: calc(100cqi / 300);
  --vitrine-largeur: var(--bp-page-width, 1100px);
  --grille-espace: var(--bp-page-grid-gap, 37px);
}

:root {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
}

[x-cloak] {
  display: none !important;
}

.u-hidden {
  display: none !important;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body {
  font-family: var(--font-global);
  background: var(--vt-fond, #0a0333) var(--vt-texture, url("../assets/img/play-mat-bg.jpg")) center/var(--vt-fond-taille, auto) var(--vt-fond-repeat, repeat) fixed;
  --ink: var(--card-edge);
  --text-strong: var(--vt-titre, #ffffff);
  --text: rgb(var(--card-edge));
  --text-muted: rgba(var(--card-edge), 0.78);
  --text-faint: rgba(var(--card-edge), 0.6);
  --line: rgba(var(--card-edge), 0.18);
  --link: rgb(var(--highlight-color));
  --danger-text: var(--vt-erreur, #ff8fb3);
  --success-text: var(--vt-succes, #86efac);
  --warning-text: var(--vt-alerte, #fde68a);
  --btn-edge: var(--vt-btn-edge, rgba(var(--highlight-color), 0.55));
  --btn-hover-bg: var(--vt-survol, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-texte, rgb(var(--accent-color)));
  --btn-2: var(--vt-btn2, rgb(var(--ink)));
  color: rgb(var(--ink));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.app-container {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 480px;
  max-height: 85vh; /* Fixe la hauteur max sur l'écran */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-container .logo {
  display: inline-block;
  width: 274px;
  aspect-ratio: 171.33/24.99;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
          mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
  display: block;
  max-width: 100%;
  color: var(--text-strong);
  margin-bottom: 20px;
}
.app-container .app-module {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1rem;
}

.error-message {
  color: var(--danger-text);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.app-container--menu {
  --ink: var(--card-edge);
  --text-strong: var(--vt-titre, #ffffff);
  --text: rgb(var(--card-edge));
  --text-muted: rgba(var(--card-edge), 0.78);
  --text-faint: rgba(var(--card-edge), 0.6);
  --line: rgba(var(--card-edge), 0.18);
  --link: rgb(var(--highlight-color));
  --danger-text: var(--vt-erreur, #ff8fb3);
  --success-text: var(--vt-succes, #86efac);
  --warning-text: var(--vt-alerte, #fde68a);
  --btn-edge: var(--vt-btn-edge, rgba(var(--highlight-color), 0.55));
  --btn-hover-bg: var(--vt-survol, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-texte, rgb(var(--accent-color)));
  --btn-2: var(--vt-btn2, rgb(var(--ink)));
  color: rgb(var(--ink));
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: 1200px;
  max-height: none;
  overflow: visible;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 24px;
}
.app-container--menu > .logo {
  display: none;
}

.bp-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bp-menu__titre {
  margin: 24px 0;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.55;
  color: var(--text-strong);
}
@media (max-width: 599px) {
  .bp-menu__titre {
    font-size: 24px;
  }
}
.bp-menu__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(160px, 1fr));
  gap: 16px;
  padding: 8px;
}
.bp-menu__grille > .bp-tuile--decks {
  grid-column: 1;
  grid-row: 1/span 2;
}
.bp-menu__grille > .bp-tuile--friends {
  grid-column: 2;
  grid-row: 1;
}
.bp-menu__grille > .bp-tuile--collections {
  grid-column: 3;
  grid-row: 1;
}
.bp-menu__grille > .bp-tuile--couleur {
  grid-column: 2;
  grid-row: 2;
}
.bp-menu__grille > .bp-tuile--santa {
  grid-column: 3;
  grid-row: 2;
}
.bp-menu__grille > .bp-tuile--compte:not(.is-expanded) {
  display: none;
}
@media (max-width: 599px) {
  .bp-menu__grille {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(92px, auto);
    gap: 12px;
  }
  .bp-menu__grille > .bp-tuile:not(.is-expanded) {
    grid-column: auto;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
  }
}

.bp-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  background: #F7F3E8 url("../themes/default/images/card-bg.jpg") center/cover;
  border-radius: 20px;
  box-shadow: 5px 5px 0 rgb(var(--main-color));
  text-align: left;
  cursor: pointer;
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
}
.bp-tuile.is-expanded {
  position: fixed; /* La tuile ouverte recouvre toute la page (animée par View Transitions) */
  inset: 0;
  z-index: 100;
  max-width: none;
  border-radius: 0;
  background: var(--vt-fond, #0a0333) var(--vt-texture, url("../assets/img/play-mat-bg.jpg")) center/var(--vt-fond-taille, auto) var(--vt-fond-repeat, repeat) fixed;
  --ink: var(--card-edge);
  --text-strong: var(--vt-titre, #ffffff);
  --text: rgb(var(--card-edge));
  --text-muted: rgba(var(--card-edge), 0.78);
  --text-faint: rgba(var(--card-edge), 0.6);
  --line: rgba(var(--card-edge), 0.18);
  --link: rgb(var(--highlight-color));
  --danger-text: var(--vt-erreur, #ff8fb3);
  --success-text: var(--vt-succes, #86efac);
  --warning-text: var(--vt-alerte, #fde68a);
  --btn-edge: var(--vt-btn-edge, rgba(var(--highlight-color), 0.55));
  --btn-hover-bg: var(--vt-survol, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-texte, rgb(var(--accent-color)));
  --btn-2: var(--vt-btn2, rgb(var(--ink)));
  color: rgb(var(--ink));
  padding: 32px;
  justify-content: flex-start;
  align-items: stretch;
  cursor: default;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bp-tuile.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}
.bp-tuile__etiquette {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bp-tuile__icone {
  font-size: 2rem;
}
.bp-tuile__titre {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: rgb(var(--main-color));
}
.bp-tuile__texte {
  margin: 0;
  font-family: var(--font-global);
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in srgb, rgb(var(--main-color)) 80%, #ffffff);
}

.bp-menu__grille .bp-tuile__etiquette {
  justify-content: end;
  align-items: flex-start;
  gap: 16px;
}
.bp-menu__grille .bp-tuile__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.bp-menu__grille .bp-tuile__icone svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
  stroke: none;
}
.bp-menu__grille .bp-tuile__icone svg.is-trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bp-menu__grille .bp-tuile__corps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.bp-menu__grille .bp-tuile__titre {
  display: block;
  font-size: 18px;
}
.bp-menu__grille .bp-tuile__texte {
  display: block;
  font-size: 14px;
}
.bp-menu__grille .bp-tuile__soon,
.bp-menu__grille .bp-tuile__count {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}

@media (max-width: 599px) {
  .bp-menu__grille .bp-tuile__etiquette {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
  .bp-menu__grille .bp-tuile__eventail {
    display: none;
  }
  .bp-menu__grille .bp-tuile__soon,
  .bp-menu__grille .bp-tuile__count {
    top: 8px;
    right: 8px;
  }
}
.bp-tuile--decks {
  background: rgb(var(--highlight-color));
}
.bp-tuile--decks:not(.is-expanded) {
  overflow: hidden;
}
.bp-tuile--decks .bp-tuile__texte {
  color: rgb(var(--main-color));
}

.bp-tuile__eventail {
  position: absolute;
  right: 8px;
  bottom: -32px;
  width: 192px;
  height: 128px;
  pointer-events: none;
}

.bp-tuile__carte {
  position: absolute;
  bottom: 0;
  width: 96px;
  aspect-ratio: 0.7142857143;
  box-sizing: border-box;
  background: #F7F3E8 url("../themes/default/images/card-bg.jpg") center/cover;
  border: 2px solid rgb(var(--main-color));
  border-radius: 15px;
  box-shadow: 4px 4px 0 rgb(var(--main-color));
  transform-origin: bottom center;
}
.bp-tuile__carte:nth-child(1) {
  right: 96px;
  transform: rotate(-14deg);
}
.bp-tuile__carte:nth-child(2) {
  right: 48px;
  transform: rotate(-2deg);
}
.bp-tuile__carte:nth-child(3) {
  right: 0;
  transform: rotate(12deg);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ink), 0.3);
  padding-bottom: 1rem;
}

.module-body {
  flex: 1;
  min-height: 0; /* Essentiel pour activer l'overflow en Flexbox */
  overflow-y: auto;
  padding: 10px;
  width: 100%;
  max-width: 1500px;
  margin: auto;
}
.module-body .hero-image {
  width: 100%;
  max-width: 800px;
  max-height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
}

/* ==================== SECTION 1 : BARRE AMIS ==================== */
.friends-bar {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--line);
}

.friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 64px;
}

.friend-avatar-wrapper {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  padding: 3px;
  border: 3px solid transparent;
}

.friend-item.active .friend-avatar-wrapper {
  border-color: rgb(var(--red));
}

.friend-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.friend-name {
  font-size: 0.8rem;
  margin-top: 6px;
  text-align: center;
  font-weight: 600;
  color: #374151;
  max-width: 75px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== SECTION 2 : CARTE CADEAUX (FLIPCARD) ==================== */
.flipcard {
  perspective: 2000px;
  display: flex;
  container-type: inline-size;
}
.flipcard .flipcard-content {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--transition-dynamic), box-shadow var(--transition-dynamic);
  display: flex;
  flex: 1;
}
.flipcard .flipcard-content .front, .flipcard .flipcard-content .back {
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  font-smoothing: antialiased;
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow: hidden;
}
.flipcard .flipcard-content .front {
  position: relative;
  z-index: 2;
  transform: rotateY(0deg);
}
.flipcard .flipcard-content .back {
  position: absolute;
  transform: rotateY(180deg);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 1;
}
.flipcard.flipped .flipcard-content {
  transform: rotateY(180deg);
}
.flipcard.flipped .flipcard-content .front {
  z-index: 1;
}
.flipcard.flipped .flipcard-content .back {
  z-index: 2;
}

.card {
  aspect-ratio: 300/420;
  background-color: var(--bp-carte-fond-couleur, white);
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  display: flex;
  flex-flow: column wrap;
  position: relative;
  transition: all 0.5s ease-in-out;
  border: var(--bp-carte-bordure-largeur, 0) var(--bp-carte-bordure-style, solid) var(--bp-carte-bordure-couleur, rgb(var(--main-color)));
  border-radius: var(--bp-carte-arrondi, calc(15 * var(--card-u)));
  background-image: var(--bp-carte-fond-image, url("../themes/default/images/card-bg.jpg"));
  background-size: var(--bp-carte-fond-taille, auto);
  background-repeat: var(--bp-carte-fond-repeat, repeat);
  background-position: center;
}
.card.back {
  background-color: var(--bp-card-back-background-couleur, var(--bp-carte-fond-couleur, white));
  background-image: var(--bp-card-back-background-image, var(--bp-carte-fond-image, url("../themes/default/images/card-bg.jpg")));
  background-size: var(--bp-card-back-background-taille, var(--bp-carte-fond-taille, auto));
  background-repeat: var(--bp-card-back-background-repeat, var(--bp-carte-fond-repeat, repeat));
  border-width: var(--bp-card-back-border-largeur, var(--bp-carte-bordure-largeur, 0));
  border-style: var(--bp-card-back-border-style, var(--bp-carte-bordure-style, solid));
  border-color: var(--bp-card-back-border-color, var(--bp-carte-bordure-couleur, rgb(var(--main-color))));
}
.card .card__inner {
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  height: 100%;
  border-radius: calc(4 * var(--card-u));
}
.card .img_frame {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  aspect-ratio: var(--bp-carte-image-ratio, 1);
  font-size: 0;
  mask-image: var(--bp-carte-masque, url("../assets/img/card-mask.svg"));
  mask-mode: var(--bp-carte-masque-mode, alpha);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--bp-carte-masque, url("../assets/img/card-mask.svg"));
  -webkit-mask-source-type: var(--bp-carte-masque-mode, alpha);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mix-blend-mode: multiply;
}
.card .img_frame--illustration {
  mask-image: var(--bp-carte-illustration-mask, var(--bp-carte-masque, url("../assets/img/card-mask.svg")));
  -webkit-mask-image: var(--bp-carte-illustration-mask, var(--bp-carte-masque, url("../assets/img/card-mask.svg")));
}
.card .img_frame img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
  border-radius: calc(2 * var(--card-u));
  overflow: hidden;
  opacity: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.card .img_frame img.illustration-img {
  padding: calc(30 * var(--card-u));
  box-sizing: border-box;
}
.card .img_frame--contain img {
  -o-object-fit: contain;
     object-fit: contain;
  padding: calc(20 * var(--card-u)) calc(20 * var(--card-u)) max(20 * var(--card-u), (300 / var(--bp-carte-image-ratio, 1) - 220) * var(--card-u));
  box-sizing: border-box;
}
.card .img_frame svg.illustration-img {
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(30 * var(--card-u));
  box-sizing: border-box;
}
.card .card__covertext {
  position: relative;
  display: flex;
  flex-flow: column;
  margin-top: auto;
  padding: 0 calc(15 * var(--card-u)) calc(15 * var(--card-u)) calc(15 * var(--card-u));
  aspect-ratio: 3/2;
  gap: calc(5 * var(--card-u));
  justify-content: center;
  text-align: center;
}
.card .card__covertext .brand {
  font-family: var(--bp-carte-marque-police, var(--font-global));
  font-weight: var(--bp-carte-marque-graisse, 900);
  font-style: var(--bp-carte-marque-style, normal);
  font-size: var(--bp-carte-marque-taille, calc(16 * var(--card-u)));
  line-height: var(--bp-carte-marque-line-height, normal);
  letter-spacing: var(--bp-carte-marque-lettres, normal);
  color: var(--bp-carte-marque-couleur, rgb(var(--ink)));
  text-transform: var(--bp-carte-marque-casse, uppercase);
  text-align: var(--bp-carte-marque-alignement, center);
}
.card .card__covertext h2 {
  margin: 0;
  font-family: var(--bp-carte-titre-police, var(--font-display));
  color: var(--bp-carte-titre-couleur, rgb(var(--accent-color)));
  font-weight: var(--bp-carte-titre-graisse, 400);
  font-style: var(--bp-carte-titre-style, normal);
  font-size: var(--bp-carte-titre-taille, calc(32 * var(--card-u)));
  line-height: var(--bp-carte-titre-line-height, normal);
  text-transform: var(--bp-carte-titre-casse, none);
  letter-spacing: var(--bp-carte-titre-lettres, normal);
  text-align: var(--bp-carte-titre-alignement, center);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow: visible clip;
  padding-top: 0.25em;
  margin-top: -0.25em;
}
.card .card__covertext .comment {
  font-family: var(--bp-carte-texte-police, var(--font-global));
  font-weight: var(--bp-carte-texte-graisse, 400);
  font-style: var(--bp-carte-texte-style, normal);
  font-size: var(--bp-carte-texte-taille, calc(16 * var(--card-u)));
  line-height: var(--bp-carte-texte-line-height, normal);
  color: var(--bp-carte-texte-couleur, rgb(var(--ink)));
  text-align: var(--bp-carte-texte-alignement, center);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow: visible clip;
  padding-top: 0.25em;
  margin-top: -0.25em;
}
.card .backcard_title {
  margin: calc(10 * var(--card-u)) 0 calc(20 * var(--card-u)) 0;
  font-family: var(--bp-carte-titre-police, var(--font-display));
  font-size: calc(var(--bp-carte-titre-taille, calc(32 * var(--card-u))) * 0.5625);
  line-height: var(--bp-carte-titre-line-height, normal);
  font-weight: var(--bp-carte-titre-graisse, 400);
  font-style: var(--bp-carte-titre-style, normal);
  text-transform: var(--bp-carte-titre-casse, none);
  letter-spacing: var(--bp-carte-titre-lettres, normal);
  color: var(--bp-carte-titre-couleur, rgb(var(--accent-color)));
  padding-right: calc(40 * var(--card-u));
  text-align: left;
}
.card .backcard_title .brand {
  font-family: var(--bp-carte-marque-police, var(--font-global));
  font-weight: var(--bp-carte-marque-graisse, 900);
  font-style: var(--bp-carte-marque-style, normal);
  font-size: calc(var(--bp-carte-marque-taille, calc(16 * var(--card-u))) * 0.875);
  line-height: var(--bp-carte-marque-line-height, normal);
  letter-spacing: var(--bp-carte-marque-lettres, normal);
  color: var(--bp-carte-marque-couleur, rgb(var(--main-color)));
  text-transform: var(--bp-carte-marque-casse, uppercase);
}
.card .bottomzone {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-flow: column;
  gap: 10px;
}
.card .card-actions {
  display: flex;
  gap: 10px;
}
.card .close {
  position: absolute;
  top: calc(20 * var(--card-u));
  right: calc(20 * var(--card-u));
  text-transform: uppercase;
  padding: calc(5 * var(--card-u));
  width: calc(20 * var(--card-u));
  height: calc(20 * var(--card-u));
  color: rgb(var(--red));
  transition: color var(--transition-color), background-color var(--transition-color);
  font-weight: 700;
  line-height: calc(24 * var(--card-u));
  text-align: center;
  font-size: calc(30 * var(--card-u));
}
.card .close:hover {
  cursor: pointer;
  color: rgb(var(--highlight-color));
  background-color: rgb(var(--red));
}
.card .close:hover svg {
  fill: rgb(var(--red));
}

.bp-card-flags {
  position: absolute;
  top: var(--bp-card-flags-corner-top, 0);
  right: var(--bp-card-flags-corner-right, 0);
  bottom: var(--bp-card-flags-corner-bottom, auto);
  left: var(--bp-card-flags-corner-left, auto);
  z-index: 2;
  margin: var(--bp-card-flags-offset, calc(12 * var(--card-u)));
  display: flex;
  flex-direction: var(--bp-card-flags-direction, row);
  gap: var(--bp-card-flags-gap, calc(6 * var(--card-u)));
}
.bp-card-flags__item {
  display: flex;
  padding: var(--bp-card-flags-padding, 0);
  border-radius: var(--bp-card-flags-radius, calc(40 * var(--card-u)));
  background-color: var(--bp-card-flags-background, transparent);
  color: var(--bp-card-flags-color, rgb(var(--main-color)));
}
.bp-card-flags__item svg {
  display: block;
  width: var(--bp-card-flags-size, calc(26 * var(--card-u)));
  height: var(--bp-card-flags-size, calc(26 * var(--card-u)));
  fill: currentColor;
}
.bp-card-flags__text {
  padding: calc(4 * var(--card-u)) calc(6 * var(--card-u));
  font-size: calc(12 * var(--card-u));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.bp-card-mentions {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--card-u));
  margin: 0 0 calc(10 * var(--card-u));
  padding: 0;
  list-style: none;
}
.bp-card-mentions__item {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--card-u));
  font-family: var(--bp-carte-texte-police, var(--font-global));
  font-size: calc(14 * var(--card-u));
  color: var(--bp-carte-texte-couleur, rgb(var(--ink)));
}
.bp-card-mentions__item svg {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  fill: currentColor;
  color: var(--bp-card-flags-color, rgb(var(--main-color)));
}

.flipcard .flipcard-content {
  box-shadow: var(--bp-carte-ombre, calc(4 * var(--card-u)) calc(4 * var(--card-u)) 0 0 rgba(var(--main-color), 0.8));
  border-radius: var(--bp-carte-arrondi, calc(15 * var(--card-u)));
}
.flipcard .flipcard-content .back {
  padding: calc(15 * var(--card-u));
  box-sizing: border-box;
}
.flipcard.flippable:not(.flipped):hover {
  cursor: pointer;
}
.flipcard.flippable:not(.flipped):hover .flipcard-content {
  transform: translateX(calc(-5 * var(--card-u))) translateY(calc(-5 * var(--card-u)));
  box-shadow: var(--bp-carte-survol-ombre, calc(15 * var(--card-u)) calc(15 * var(--card-u)) calc(2 * var(--card-u)) 0px rgba(var(--main-color), 0.6));
}
.flipcard.flipped .flipcard-content {
  transform: rotateY(180deg) translateX(0px) translateY(calc(-30 * var(--card-u)));
  box-shadow: calc(-40 * var(--card-u)) calc(40 * var(--card-u)) calc(2 * var(--card-u)) 0px rgba(var(--main-color), 0.3);
}

.add-card-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.add-card-wrapper .add-card-input {
  width: 100%;
  max-width: 600px;
  padding: 1.2rem 1.5rem;
  font-size: 1.1rem;
  border: 2px solid rgb(var(--accent-color));
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(var(--accent-color), 0.1);
  color: rgb(var(--accent-color));
}
.add-card-wrapper .add-card-input:focus {
  outline: none;
  border-color: rgb(var(--highlight-color));
  box-shadow: 0 6px 20px rgba(var(--accent-color), 0.2);
}

.bp-deck-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.bp-switch {
  --switch-inset: 3px;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--switch-inset);
  background: var(--bp-switch-background, rgb(var(--main-color)));
  border: var(--bp-switch-border-largeur, 2px) var(--bp-switch-border-style, solid) var(--bp-switch-border-color, var(--vt-discret, #B9AEEA));
  border-radius: var(--bp-switch-radius, var(--r-bouton));
}
.bp-switch::before {
  content: "";
  position: absolute;
  top: var(--switch-inset);
  bottom: var(--switch-inset);
  left: var(--switch-inset);
  width: calc((100% - 2 * var(--switch-inset)) / 2);
  background: var(--bp-switch-active-background, rgb(var(--highlight-color)));
  border-radius: max(0px, var(--bp-switch-radius, var(--r-bouton)) - var(--switch-inset));
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.bp-switch.is-second::before {
  transform: translateX(100%);
}
.bp-switch button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 8px 14px;
  min-height: 34px;
  background: none;
  border: 0;
  color: var(--bp-switch-text, var(--vt-discret, #B9AEEA));
  font-family: var(--bp-switch-font, var(--font-display));
  font-size: var(--bp-switch-size, 12px);
  font-weight: var(--bp-switch-weight, 400);
  text-transform: var(--bp-switch-case, uppercase);
  cursor: pointer;
  transition: color 0.25s ease;
}
.bp-switch button svg {
  display: var(--bp-switch-icons, inline-block);
}
.bp-switch button.active {
  color: var(--bp-switch-active-text, rgb(var(--main-color)));
}

.card-grid {
  display: grid;
  grid-gap: var(--grille-espace);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  justify-items: center;
}
.card-grid > .flipcard {
  width: 100%;
  max-width: 500px;
}

.card-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  overflow-x: hidden;
  padding: 3rem 0;
  position: relative;
}
.card-carousel .flipcard {
  position: absolute;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0.4s;
  width: 300px; /* Fixe la largeur pour l'éventail */
}
.card-carousel .flipcard:hover {
  z-index: 100 !important;
  transform: translateY(-40px) scale(1.05) !important;
}
.card-carousel .flipcard:hover .flipcard-content {
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
}
.card-carousel .flipcard.flipped {
  z-index: 110 !important;
  transform: translateY(-60px) scale(1.1) rotate(0deg) !important;
}

/* ==================== PILES DE CARTES (DOS DE CARTE) ==================== */
/* Chaque pile (deck) est représentée comme une carte face cachée, avec une
   épaisseur qui suggère le nombre de cartes qu'elle contient. Le dos n'a pas
   encore de vrai visuel : c'est un placeholder (fond + motif + monogramme "BP").
   Pour brancher la vraie image plus tard, remplacer le "background" de
   .deck-pile par : background-image: url("../assets/img/card-back.jpg"); background-size: cover; */
.decks-layout {
  display: flex;
  gap: 1rem;
}

.decks-sidebar {
  width: 82px;
  flex-shrink: 0;
  padding: 0.5rem 0;
}

.decks-sidebar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* Colonne de droite : cartes du deck, modales */
.decks-main {
  flex: 1;
  min-width: 0;
}

.deck-item {
  display: block;
}

/* Les piles sont des boutons : on retire leur habillage par défaut.
   .deck-item = pile de la sidebar, .deck-card = pile de la grille centrale,
   .deck-create = bouton « nouvelle pile » de la sidebar */
.deck-item,
.deck-card,
.deck-create {
  background: transparent;
  border: none;
  cursor: pointer;
}

.deck-item,
.deck-create {
  padding: 0;
}

.deck-pile-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.deck-pile {
  position: relative;
  width: 100%;
  aspect-ratio: 300/420;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(var(--yellow), 0.1) 0%, transparent 55%), repeating-linear-gradient(45deg, rgba(var(--accent-color), 0.16) 0px, rgba(var(--accent-color), 0.16) 2px, transparent 2px, transparent 13px), rgb(var(--main-color));
  border: 2px solid rgba(var(--main-color), 0.85);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-pile::before {
  /* Cadre intérieur doré, discret : signature classique d'un dos de carte */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--highlight-color), 0.45);
  border-radius: 8px;
  pointer-events: none;
}

.deck-pile__emblem {
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--accent-color), 0.18);
  border: 2px solid rgba(var(--highlight-color), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: rgb(var(--highlight-color));
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.deck-pile__count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgb(var(--highlight-color));
  color: rgb(var(--main-color));
  font-size: 0.75rem;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-display);
}

.deck-pile__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: rgba(var(--ink), 0.85);
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* Pile "fantôme" : bouton pour créer un nouveau deck, même gabarit que les piles */
.deck-pile--new {
  background: transparent;
  border: 2px dashed rgba(var(--ink), 0.3);
  box-shadow: none;
}

.deck-pile--new::before {
  display: none;
}

.deck-pile__plus {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: rgba(var(--ink), 0.45);
}

/* Grande taille : piles dans la grille centrale (aucune pile sélectionnée) */
.deck-pile--large {
  width: 128px;
}

.deck-pile-wrap:has(.deck-pile--large) .deck-pile__label {
  font-size: 0.8rem;
  max-width: 128px;
}

/* Mini taille : piles rangées dans la sidebar, une fois un deck sélectionné */
.deck-pile--mini {
  width: 58px;
}

.deck-pile--mini .deck-pile__emblem {
  font-size: 0.65rem;
  border-width: 1px;
}

.deck-pile--mini .deck-pile__count {
  font-size: 0.6rem;
  min-width: 16px;
  height: 16px;
  bottom: 4px;
  right: 4px;
  border-radius: 4px;
}

.deck-pile--mini::before {
  inset: 4px;
  border-radius: 6px;
}

.deck-pile-wrap--mini .deck-pile__label {
  font-size: 0.62rem;
  max-width: 58px;
}

/* Survol / sélection */
.deck-item.active .deck-pile {
  border-color: rgb(var(--highlight-color));
}

/* Centre les piles quand aucune n'est sélectionnée */
.decks-center-area {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.decks-piles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
  justify-content: center;
  gap: 1.5rem 1rem;
  width: 100%;
}

.bp-shell:not(.app-container--menu) {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  --text-strong: var(--bp-modal-title-color, #111827);
  --text: var(--bp-modal-text-color, #374151);
  --text-muted: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
  --text-faint: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
  --line: color-mix(in srgb, var(--bp-modal-text-color, #374151) 15%, transparent);
  --link: var(--bp-link-color, #2563eb);
  color: var(--bp-modal-text-color, rgb(var(--ink)));
  background: var(--bp-modal-background-image, none) center/var(--bp-modal-background-taille, auto) var(--bp-modal-background-repeat, repeat), var(--bp-modal-background-couleur, #ffffff);
  border: var(--bp-modal-border-largeur, 0px) var(--bp-modal-border-style, solid) var(--bp-modal-border-color, transparent);
  border-radius: var(--bp-modal-radius, var(--r-bloc));
  box-shadow: var(--bp-modal-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1));
  border-radius: var(--bp-modal-radius, 16px);
}
.bp-shell:not(.app-container--menu) .bp-input {
  font-family: var(--bp-field-font, inherit);
  font-size: var(--bp-field-size, 0.95rem);
  font-weight: var(--bp-field-weight, inherit);
}
.bp-shell:not(.app-container--menu) .bp-input:focus-visible {
  outline: var(--bp-field-focus-width, 2px) solid var(--bp-field-focus-color, var(--link));
  outline-offset: var(--bp-field-focus-offset, 2px);
}

.app-container .bp-userbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.app-container .bp-userbar__logo {
  display: block;
  height: 24px;
}
.app-container .bp-userbar__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.app-container .bp-userbar__compte {
  padding-left: 4px;
}
.app-container .bp-userbar__compte .bp-avatar {
  width: 24px;
  height: 24px;
  margin: -4px 0;
}
.app-container .bp-notif {
  position: relative;
}
.app-container .bp-notif__btn {
  position: relative;
  padding-left: 8px;
  padding-right: 8px;
}
.app-container .bp-notif__icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-container .bp-notif__count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
}
.app-container .bp-notif__panel {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  --text-strong: var(--bp-modal-title-color, #111827);
  --text: var(--bp-modal-text-color, #374151);
  --text-muted: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
  --text-faint: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
  --line: color-mix(in srgb, var(--bp-modal-text-color, #374151) 15%, transparent);
  --link: var(--bp-link-color, #2563eb);
  color: var(--bp-modal-text-color, rgb(var(--ink)));
  background: var(--bp-modal-background-image, none) center/var(--bp-modal-background-taille, auto) var(--bp-modal-background-repeat, repeat), var(--bp-modal-background-couleur, #ffffff);
  border: var(--bp-modal-border-largeur, 0px) var(--bp-modal-border-style, solid) var(--bp-modal-border-color, transparent);
  border-radius: var(--bp-modal-radius, var(--r-bloc));
  box-shadow: var(--bp-modal-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(360px, 100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 0;
  text-align: left;
}
.app-container .bp-notif__title {
  margin: 0 16px 8px;
  font-weight: 700;
  color: var(--text-strong);
}
.app-container .bp-notif__empty {
  margin: 0 16px 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.app-container .bp-notif__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app-container .bp-notif__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-color);
}
.app-container .bp-notif__item:hover, .app-container .bp-notif__item:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.app-container .bp-notif__item.is-unread .bp-notif__text {
  color: var(--text-strong);
  font-weight: 600;
}
.app-container .bp-notif__item.is-unread .bp-avatar {
  box-shadow: 0 0 0 2px #D60056;
}
.app-container .bp-notif__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app-container .bp-notif__text {
  font-size: 14px;
  line-height: 1.4;
}
.app-container .bp-notif__date {
  font-size: 12px;
  color: var(--text-muted);
}
.app-container .bp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--text-faint);
  background: rgb(var(--main-color));
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.app-container .bp-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.app-container .bp-auth-intro {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.app-container .bp-auth-title {
  font-family: var(--bp-modal-title-font, inherit);
  font-size: var(--bp-modal-title-size, 1.2rem);
  font-weight: var(--bp-modal-title-weight, 700);
  color: var(--text-strong);
  margin-bottom: 0.2rem;
}
.app-container .bp-auth-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.app-container .bp-auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.app-container .bp-auth-terms input {
  flex: none;
  margin: 0.2em 0 0;
}
.app-container .bp-auth-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.app-container .bp-auth-privacy {
  margin: 0 0 1.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.app-container .bp-auth-terms a,
.app-container .bp-auth-privacy a {
  color: var(--link);
}

.app-container.bp-vitrine--page {
  --ink: var(--card-edge);
  --text-strong: var(--vt-titre, #ffffff);
  --text: rgb(var(--card-edge));
  --text-muted: rgba(var(--card-edge), 0.78);
  --text-faint: rgba(var(--card-edge), 0.6);
  --line: rgba(var(--card-edge), 0.18);
  --link: rgb(var(--highlight-color));
  --danger-text: var(--vt-erreur, #ff8fb3);
  --success-text: var(--vt-succes, #86efac);
  --warning-text: var(--vt-alerte, #fde68a);
  --btn-edge: var(--vt-btn-edge, rgba(var(--highlight-color), 0.55));
  --btn-hover-bg: var(--vt-survol, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-texte, rgb(var(--accent-color)));
  --btn-2: var(--vt-btn2, rgb(var(--ink)));
  color: rgb(var(--ink));
  display: block;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 100vh;
}

.bp-vitrine--page .bp-input,
.bp-gate .bp-input {
  font-family: var(--bp-field-font, inherit);
  font-size: var(--bp-field-size, 0.95rem);
  font-weight: var(--bp-field-weight, inherit);
}
.bp-vitrine--page .bp-input:focus-visible,
.bp-gate .bp-input:focus-visible {
  outline: var(--bp-field-focus-width, 2px) solid var(--bp-field-focus-color, var(--link));
  outline-offset: var(--bp-field-focus-offset, 2px);
}

.bp-vitrine__sommaire {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--bp-nav-align-flex, center);
  align-items: center;
  gap: var(--bp-nav-gap, 10px);
  max-width: var(--vitrine-largeur);
  margin: 0 auto 40px;
  padding: 0 15px;
}
.bp-vitrine__sommaire .bp-booster__icon {
  display: var(--bp-nav-icons, inline-block);
  font-size: var(--bp-nav-icon-size, 1.2em);
  line-height: 1;
  transform: translateY(var(--bp-nav-icon-offset, 0px));
}
.bp-vitrine__sommaire .bp-booster__icon svg {
  display: block;
  vertical-align: initial;
}
.bp-vitrine__sommaire--below {
  display: var(--bp-hero-nav-position-below, flex);
}
.bp-vitrine__sommaire--inside {
  display: var(--bp-hero-nav-position-inside, none);
  justify-content: var(--bp-nav-align-flex, var(--bp-titre1-alignement-flex, center));
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.bp-vitrine__nav-link {
  display: inline-flex;
  flex-direction: var(--bp-nav-icon-position, row);
  align-items: center;
  justify-content: center;
  gap: var(--bp-nav-icon-gap, 0.5rem);
  box-sizing: border-box;
  padding: var(--bp-nav-padding, var(--bp-btn2-marges, var(--btn-padding)));
  border-width: var(--bp-nav-border-largeur, var(--bp-btn2-bordure-largeur, var(--btn-bordure)));
  border-style: var(--bp-nav-border-style, var(--bp-btn2-bordure-style, solid));
  border-radius: var(--bp-nav-radius, var(--bp-btn2-arrondi, var(--r-bouton)));
  font-family: var(--bp-nav-font, var(--bp-btn2-police, var(--font-display)));
  font-size: var(--bp-nav-size, var(--bp-btn2-taille, var(--btn-taille)));
  font-weight: var(--bp-nav-weight, var(--bp-btn2-graisse, 400));
  font-style: var(--bp-nav-style, var(--bp-btn2-style, normal));
  text-transform: var(--bp-nav-case, var(--bp-btn2-casse, uppercase));
  letter-spacing: var(--bp-nav-letter-spacing, var(--bp-btn2-lettres, normal));
  -webkit-text-decoration: var(--bp-nav-decoration, none);
          text-decoration: var(--bp-nav-decoration, none);
  text-align: center;
  background-color: var(--bp-nav-background-couleur, var(--bp-btn2-fond-couleur, transparent));
  background-image: var(--bp-nav-background-image, var(--bp-btn2-fond-image, none));
  background-size: var(--bp-nav-background-taille, var(--bp-btn2-fond-taille, cover));
  background-repeat: var(--bp-nav-background-repeat, var(--bp-btn2-fond-repeat, no-repeat));
  background-position: center;
  border-color: var(--bp-nav-border-color, var(--bp-btn2-bordure-couleur, transparent));
  color: var(--bp-nav-text, var(--bp-btn2-texte, var(--btn-2)));
  box-shadow: var(--bp-nav-shadow, var(--bp-btn2-ombre, none));
}
.bp-vitrine__nav-link:hover {
  -webkit-text-decoration: var(--bp-nav-survol-decoration, var(--bp-nav-decoration, none));
          text-decoration: var(--bp-nav-survol-decoration, var(--bp-nav-decoration, none));
  background-color: var(--bp-nav-survol-background-couleur, var(--bp-btn2-survol-fond-couleur, var(--btn-hover-bg)));
  background-image: var(--bp-nav-survol-background-image, var(--bp-nav-background-image, var(--bp-btn2-survol-fond-image, var(--bp-btn2-fond-image, none))));
  border-color: var(--bp-nav-survol-border-color, var(--bp-nav-border-color, var(--bp-btn2-survol-bordure-couleur, var(--bp-btn2-bordure-couleur, transparent))));
  color: var(--bp-nav-survol-text, var(--bp-btn2-survol-texte, var(--btn-hover-text)));
  box-shadow: var(--bp-nav-survol-shadow, var(--bp-nav-shadow, var(--bp-btn2-survol-ombre, var(--bp-btn2-ombre, none))));
}

.bp-vitrine__nav-separator {
  display: var(--bp-nav-separator-display, none);
  color: var(--bp-nav-separator-color, var(--text-faint));
  font-size: var(--bp-nav-size, var(--bp-btn2-taille, var(--btn-taille)));
}
.bp-vitrine__nav-separator::before {
  content: var(--bp-nav-separator, none);
}

.bp-vitrine__boosters {
  display: flex;
  flex-direction: column;
  max-width: var(--vitrine-largeur);
  margin: 0 auto;
  padding: 0 15px;
}

.bp-booster {
  scroll-margin-top: 20px;
}

.bp-booster__head {
  display: grid;
  grid-auto-flow: var(--bp-titre2-icon-position, column);
  justify-content: var(--bp-titre2-alignement-flex, flex-start);
  justify-items: var(--bp-titre2-alignement-flex, flex-start);
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.bp-booster__head .bp-booster__icon {
  display: var(--bp-titre2-icon, block);
  font-size: var(--bp-titre2-icon-size, 1.5rem);
  line-height: 1;
  color: var(--bp-titre2-icon-color, inherit);
}
.bp-booster__head .bp-booster__icon svg {
  display: block;
  vertical-align: initial;
}

.bp-booster__icon {
  font-size: 1.5rem;
}
.bp-booster__icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.bp-booster__title {
  margin: 0;
  font-family: var(--bp-titre2-police, var(--font-display));
  font-size: var(--bp-titre2-taille, 1.25rem);
  font-weight: var(--bp-titre2-graisse, 400);
  font-style: var(--bp-titre2-style, normal);
  text-transform: var(--bp-titre2-casse, none);
  letter-spacing: var(--bp-titre2-lettres, normal);
  text-align: var(--bp-titre2-alignement, left);
  line-height: var(--bp-titre2-line-height, 1.55);
  color: var(--bp-titre2-couleur, var(--text-strong));
}

.bp-booster__soon {
  margin: 0;
  opacity: 0.7;
}

.bp-booster__intro {
  margin: 0 0 10px;
}

.bp-booster .cards-container.is-collapsed,
.bp-booster .cards-container.is-unfolding {
  margin: -20px calc(-1 * clamp(15px, (100vw - 100%) / 2 - 10px, 40px)) 0;
  padding: 20px clamp(15px, (100vw - 100%) / 2 - 10px, 40px) 0;
  overflow: hidden;
}

.bp-booster .cards-container.is-collapsed {
  max-height: 760px;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.bp-booster__more {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.app-container.bp-vitrine {
  margin: 0 auto;
}
.app-container .bp-vitrine__header {
  display: flex;
  flex-direction: column;
  justify-content: var(--bp-hero-content-placement, center);
  box-sizing: border-box;
  margin: 0 -2rem var(--bp-hero-spacing, 1.75rem);
  padding-block: var(--bp-hero-padding, 0px);
  padding-inline: max(15px + 2rem, (100% - var(--vitrine-largeur)) / 2 + 15px + 2rem);
  background: linear-gradient(color-mix(in srgb, var(--bp-hero-overlay, var(--vt-fond, #0a0333)) var(--bp-hero-overlay-opacity, 0%), transparent), color-mix(in srgb, var(--bp-hero-overlay, var(--vt-fond, #0a0333)) var(--bp-hero-overlay-opacity, 0%), transparent)), var(--bp-hero-background-image, none) center/var(--bp-hero-background-taille, cover) var(--bp-hero-background-repeat, no-repeat), var(--bp-hero-background-couleur, transparent);
  text-align: var(--bp-titre1-alignement, center);
}
.app-container .bp-vitrine__heading {
  display: grid;
  grid-auto-flow: var(--bp-hero-icon-position, row);
  justify-content: var(--bp-titre1-alignement-flex, center);
  justify-items: var(--bp-titre1-alignement-flex, center);
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.app-container .bp-vitrine__icon {
  display: var(--bp-hero-icon, block);
  font-size: calc(var(--bp-hero-icon-size, 56px) / 1.4);
  line-height: 1;
  color: var(--bp-hero-icon-color, var(--bp-titre1-couleur, var(--text-strong)));
}
.app-container .bp-vitrine__icon svg {
  display: inline-block;
  width: var(--bp-hero-icon-size, 56px);
  height: var(--bp-hero-icon-size, 56px);
  fill: currentColor;
}
.app-container .bp-vitrine__title {
  font-family: var(--bp-titre1-police, var(--font-display));
  font-weight: var(--bp-titre1-graisse, 400);
  font-style: var(--bp-titre1-style, normal);
  font-size: var(--bp-titre1-taille, 1.4rem);
  line-height: var(--bp-titre1-line-height, normal);
  text-transform: var(--bp-titre1-casse, none);
  letter-spacing: var(--bp-titre1-lettres, normal);
  margin: 0.5rem 0 0.25rem;
  color: var(--bp-titre1-couleur, var(--text-strong));
}
.app-container .bp-vitrine__tagline {
  align-self: var(--bp-titre1-alignement-flex, center);
  max-width: 40em;
  margin: 0.25rem 0 0.75rem;
  font-size: var(--bp-hero-tagline-size, 17px);
  line-height: 1.5;
  color: var(--bp-hero-tagline-color, var(--text));
  white-space: pre-line;
}
.app-container .bp-vitrine__meta {
  display: flex;
  flex-direction: var(--bp-hero-meta-layout, column);
  flex-wrap: wrap;
  justify-content: var(--bp-titre1-alignement-flex, center);
  align-items: var(--bp-hero-meta-layout-items, var(--bp-titre1-alignement-flex, center));
  gap: 0.35rem 0.5rem;
}
.app-container .bp-vitrine__meta-separator {
  display: var(--bp-hero-meta-layout-separator, none);
  color: var(--bp-hero-owner-color, var(--text-faint));
  font-size: 0.8rem;
}
.app-container .bp-vitrine__date {
  color: var(--bp-hero-date-color, var(--text-muted));
  font-size: 0.9rem;
  margin: 0;
}
.app-container .bp-vitrine__owner {
  color: var(--bp-hero-owner-color, var(--text-faint));
  font-size: 0.8rem;
  margin: 0;
}
.app-container .bp-vitrine__empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.app-container .bp-vitrine__bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.app-container .bp-session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 70px;
}
.app-container .bp-session__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.app-container .bp-session__error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.85rem;
}
.app-container .bp-session__help {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
}
.app-container .bp-session__link {
  color: rgb(var(--accent-color));
}
.app-container .bp-vitrine__pick-intro {
  margin-top: 0;
}
.app-container .bp-vitrine__status {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}
.app-container .bp-vitrine__status--error {
  padding: 2rem 1rem;
  color: var(--danger-text);
}
.app-container .bp-vitrine__blank {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.app-container .bp-vitrine__blank-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.app-container.bp-gate {
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: var(--bp-modal-background-image, none) center/var(--bp-modal-background-taille, auto) var(--bp-modal-background-repeat, repeat), var(--bp-modal-background-couleur, #ffffff);
  border: var(--bp-modal-border-largeur, 0px) var(--bp-modal-border-style, solid) var(--bp-modal-border-color, transparent);
  border-radius: var(--bp-modal-radius, 16px);
  box-shadow: var(--bp-modal-shadow, 0 10px 25px rgba(0, 0, 0, 0.08));
}
.app-container .bp-gate__header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.app-container .bp-gate__icon {
  line-height: 1;
  color: var(--bp-modal-title-color, #111827);
}
.app-container .bp-gate__icon svg {
  width: 3rem;
  height: 3rem;
  fill: currentColor;
}
.app-container .bp-gate__title {
  font-family: var(--bp-modal-title-font, inherit);
  font-size: calc(var(--bp-modal-title-size, 1.125rem) * 1.155);
  font-weight: var(--bp-modal-title-weight, 700);
  margin: 0.5rem 0 0.25rem;
  color: var(--bp-modal-title-color, #111827);
}
.app-container .bp-gate__lead {
  color: var(--bp-modal-text-color, #6b7280);
  font-size: 0.9rem;
  margin: 0;
}
.app-container .bp-gate__card {
  background: var(--bp-form-panel-background, #ffffff);
  border: var(--bp-form-panel-border-largeur, 1px) var(--bp-form-panel-border-style, solid) var(--bp-form-panel-border-color, var(--line));
  border-radius: var(--bp-form-panel-radius, 16px);
  padding: var(--bp-form-panel-padding, 1.25rem);
  box-shadow: var(--bp-form-panel-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.app-container .bp-gate__text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--bp-modal-text-color, #374151);
}
.app-container .bp-gate__text--center {
  margin: 0;
  text-align: center;
}
.app-container .bp-gate__error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.85rem;
}
.app-container .bp-gate__error--spaced {
  margin: 0 0 0.75rem;
}
.app-container .bp-gate__help {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
  text-align: center;
}
.app-container .bp-gate__logo {
  display: inline-block;
  width: 140px;
  aspect-ratio: 171.33/24.99;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
          mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
  display: block;
  margin: 10px auto;
}
.app-container .bp-gate__session {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
}
.app-container .bp-gate__link {
  color: var(--bp-link-color, var(--link));
  -webkit-text-decoration: var(--bp-link-decoration, underline);
          text-decoration: var(--bp-link-decoration, underline);
}
.app-container .bp-gate__link:hover {
  color: var(--bp-link-survol-color, var(--bp-link-color, var(--link)));
  -webkit-text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
          text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
}
.app-container .bp-gate__link--muted, .app-container .bp-gate__link--muted:hover {
  color: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
}

html.bp-vitrine-snap {
  scroll-snap-type: y mandatory;
}

.app-container.bp-vitrine--screens {
  padding: 0;
}
.app-container.bp-vitrine--screens .bp-vitrine__bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 150;
  box-sizing: border-box;
  height: 56px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 16px;
  pointer-events: none;
}
.app-container.bp-vitrine--screens .bp-vitrine__bar > * {
  pointer-events: auto;
}
.app-container.bp-vitrine--screens .bp-vitrine__draft {
  min-width: 0;
  margin: 0 auto 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-container.bp-vitrine--screens .bp-vitrine__intro {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.app-container.bp-vitrine--screens .bp-vitrine__header {
  flex: 1 0 auto;
  margin: 0;
  padding-block: calc(var(--bp-hero-padding, 0px) + 56px);
  padding-inline: max(15px, (100% - var(--vitrine-largeur)) / 2 + 15px);
}
.app-container.bp-vitrine--screens .bp-vitrine__sommaire--below {
  margin: var(--bp-hero-spacing, 1.75rem) auto 32px;
}
.app-container.bp-vitrine--screens .bp-vitrine__empty {
  box-sizing: border-box;
  width: calc(100% - 30px);
  max-width: 480px;
  margin: 0 auto 32px;
}
.app-container.bp-vitrine--screens .bp-vitrine__boosters {
  gap: 0;
  padding: 0 15px;
}
@media (max-width: 600px) {
  .app-container.bp-vitrine--screens .bp-vitrine__boosters {
    padding-inline: 28px;
  }
}
.app-container.bp-vitrine--screens .bp-booster {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(56px + 16px) 0 48px;
  scroll-margin-top: 0;
}
.app-container.bp-vitrine--screens .bp-footer {
  scroll-snap-align: end;
}

.bp-vitrine__dots {
  position: fixed;
  top: 50%;
  right: 8px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .bp-vitrine__dots {
    right: 0;
  }
}

.bp-vitrine__dot {
  position: relative;
  display: block;
  padding: 7px;
  color: var(--text-strong);
}
.bp-vitrine__dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: transform 0.2s, opacity 0.2s;
}
.bp-vitrine__dot:hover::after, .bp-vitrine__dot:focus-visible::after {
  opacity: 0.8;
}
.bp-vitrine__dot.is-active::after {
  opacity: 1;
  transform: scale(1.5);
}
.bp-vitrine__dot:hover .bp-vitrine__dot-label, .bp-vitrine__dot:focus-visible .bp-vitrine__dot-label {
  opacity: 1;
}

.bp-vitrine__dot-label {
  position: absolute;
  top: 50%;
  right: 100%;
  padding: 4px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--vt-fond, #0a0333) 85%, transparent);
  color: var(--text-strong);
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.2s;
}

.bp-not-found {
  max-width: 420px;
  margin: 4rem auto;
  text-align: center;
  padding: 0 1rem;
}
.bp-not-found__icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.bp-not-found__title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
  color: var(--text-strong);
}
.bp-not-found__text {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.bp-text {
  font-family: var(--font-global);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.bp-text > :first-child {
  margin-top: 0;
}
.bp-text > :last-child {
  margin-bottom: 0;
}
.bp-text p {
  margin: 0 0 12px;
}
.bp-text h2 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: 21.6px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-text h3 {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-text ul,
.bp-text ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.bp-text li {
  margin-bottom: 4px;
}
.bp-text a {
  color: var(--link);
  text-decoration: underline;
}
.bp-text {
  max-width: 70ch;
  font-family: var(--bp-rich-font, var(--font-global));
  font-size: var(--bp-rich-size, 14px);
  font-weight: var(--bp-rich-weight, 400);
  line-height: var(--bp-rich-line-height, 1.6);
  text-align: var(--bp-rich-align, left);
  color: var(--bp-rich-color, var(--text));
}
.bp-text h3 {
  font-family: var(--bp-rich-subtitle-font, var(--font-display));
  font-size: var(--bp-rich-subtitle-size, 18px);
  font-weight: var(--bp-rich-subtitle-weight, 700);
  line-height: var(--bp-rich-subtitle-line-height, 1.55);
  text-transform: var(--bp-rich-subtitle-case, none);
  text-align: var(--bp-rich-subtitle-align, inherit);
  color: var(--bp-rich-subtitle-color, var(--text-strong));
}
.bp-text a {
  color: var(--bp-link-color, var(--link));
  -webkit-text-decoration: var(--bp-link-decoration, underline);
          text-decoration: var(--bp-link-decoration, underline);
}
.bp-text a:hover {
  color: var(--bp-link-survol-color, var(--bp-link-color, var(--link)));
  -webkit-text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
          text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
}

.bp-quiz,
.bp-quiz__body,
.bp-quiz__slides {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.bp-quiz__slides {
  overflow-x: clip;
  overflow-clip-margin: 4px;
}

.bp-quiz__intro {
  margin: 0 0 10px;
}

.bp-quiz__status {
  margin: 0;
  color: var(--text-muted);
}

.bp-quiz__slide {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  animation: bp-quiz-slide-in 0.3s ease-out;
}
.bp-quiz__slide--intro, .bp-quiz__slide--end {
  justify-content: center;
}
.bp-quiz.is-back .bp-quiz__slide {
  animation-name: bp-quiz-slide-back;
}
.bp-quiz__slide:focus {
  outline: none;
}

@keyframes bp-quiz-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes bp-quiz-slide-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}
.bp-quiz__count {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.bp-quiz__progress {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.bp-quiz__progress-bar {
  display: block;
  height: 100%;
  background: var(--bp-quiz-question-number-color, var(--link));
  transition: width 0.3s ease-out;
}

.bp-quiz__position {
  margin: 8px 0 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.bp-quiz__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.bp-quiz__next {
  margin-left: auto;
}

.bp-quiz__end-title {
  margin: 0 0 10px;
  font-family: var(--bp-quiz-question-title-font, var(--font-display));
  font-size: 1.5rem;
  color: var(--text-strong);
}

.bp-quiz__end-text {
  margin: 0 0 20px;
  color: var(--text);
  line-height: 1.6;
}
.bp-quiz__end-text:empty {
  display: none;
}

.bp-quiz__slide > .bp-quiz__question,
.bp-quiz__slide > .bp-quiz__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.bp-quiz__question,
.bp-quiz__panel {
  padding: var(--bp-quiz-question-padding, 15px);
  border: var(--bp-quiz-question-border-largeur, 1px) var(--bp-quiz-question-border-style, solid) var(--bp-quiz-question-border-color, var(--line));
  border-radius: var(--bp-quiz-question-radius, var(--r-carte));
  background: color-mix(in srgb, var(--bp-quiz-question-background, rgb(var(--card-edge))) var(--bp-quiz-question-background-opacity, 6%), transparent);
}

.bp-quiz__panel {
  gap: 10px;
}
.bp-quiz__panel > * {
  margin-top: 0;
  margin-bottom: 0;
}

.bp-quiz__label {
  margin: 0 0 15px;
  font-family: var(--bp-quiz-question-title-font, var(--font-display));
  font-size: var(--bp-quiz-question-title-size, 1rem);
  font-weight: var(--bp-quiz-question-title-weight, 400);
  line-height: 1.4;
  color: var(--bp-quiz-question-title-color, var(--text-strong));
  text-align: center;
}

.bp-quiz__number {
  color: var(--bp-quiz-question-number-color, var(--link));
}

.bp-quiz__options {
  display: flex;
  gap: 10px;
  flex-flow: column wrap;
}

.bp-quiz__option.is-selected {
  background: var(--bp-quiz-choice-background, rgb(var(--highlight-color)));
  border-color: var(--bp-quiz-choice-background, rgb(var(--highlight-color)));
  color: var(--bp-quiz-choice-text, rgb(var(--main-color)));
}
.bp-quiz__option.is-correct {
  outline: 2px solid var(--success-text);
  outline-offset: 2px;
}
.bp-quiz__option:disabled {
  cursor: default;
}
.bp-quiz__option:disabled:not(.is-selected) {
  opacity: 0.6;
}

.bp-quiz__field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-quiz__input {
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 15px;
  border: var(--bp-field-border-largeur, 1px) var(--bp-field-border-style, solid) var(--bp-field-border-color, var(--line));
  border-radius: var(--bp-field-radius, var(--r-champ));
  background: color-mix(in srgb, var(--bp-field-background, rgb(var(--card-edge))) var(--bp-field-background-opacity, 10%), transparent);
  color: var(--bp-field-text, var(--text-strong));
  font: inherit;
  font-family: var(--bp-field-font, inherit);
  font-size: var(--bp-field-size, inherit);
  font-weight: var(--bp-field-weight, inherit);
  color-scheme: dark;
}
.bp-quiz__input::-moz-placeholder {
  color: var(--text-faint);
}
.bp-quiz__input::placeholder {
  color: var(--text-faint);
}
.bp-quiz__input:focus-visible {
  outline: var(--bp-field-focus-width, 2px) solid var(--bp-field-focus-color, var(--link));
  outline-offset: var(--bp-field-focus-offset, 2px);
}
.bp-quiz__input:disabled {
  opacity: 0.7;
}

.bp-quiz__input--number {
  width: 140px;
}

.bp-quiz__input--text {
  flex: 1 1 auto;
  width: 100%;
}

.bp-quiz__unit {
  color: var(--text-muted);
}

.bp-quiz__feedback {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--success-text);
}

.bp-quiz__feedback--error {
  color: var(--danger-text);
}

.bp-quiz__correct {
  margin: 10px 0 0;
  color: var(--text);
}
.bp-quiz__correct strong {
  color: var(--success-text);
}

.app-container.bp-info {
  --ink: var(--card-edge);
  --text-strong: var(--vt-titre, #ffffff);
  --text: rgb(var(--card-edge));
  --text-muted: rgba(var(--card-edge), 0.78);
  --text-faint: rgba(var(--card-edge), 0.6);
  --line: rgba(var(--card-edge), 0.18);
  --link: rgb(var(--highlight-color));
  --danger-text: var(--vt-erreur, #ff8fb3);
  --success-text: var(--vt-succes, #86efac);
  --warning-text: var(--vt-alerte, #fde68a);
  --btn-edge: var(--vt-btn-edge, rgba(var(--highlight-color), 0.55));
  --btn-hover-bg: var(--vt-survol, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-texte, rgb(var(--accent-color)));
  --btn-2: var(--vt-btn2, rgb(var(--ink)));
  color: rgb(var(--ink));
  display: block;
  box-sizing: border-box;
  align-self: stretch;
  max-width: 840px;
  max-height: none;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 16px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.bp-info__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.bp-info__logo {
  display: block;
  height: 24px;
}

.bp-info__sheet {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  --text-strong: var(--bp-modal-title-color, #111827);
  --text: var(--bp-modal-text-color, #374151);
  --text-muted: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
  --text-faint: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
  --line: color-mix(in srgb, var(--bp-modal-text-color, #374151) 15%, transparent);
  --link: var(--bp-link-color, #2563eb);
  color: var(--bp-modal-text-color, rgb(var(--ink)));
  background: var(--bp-modal-background-image, none) center/var(--bp-modal-background-taille, auto) var(--bp-modal-background-repeat, repeat), var(--bp-modal-background-couleur, #ffffff);
  border: var(--bp-modal-border-largeur, 0px) var(--bp-modal-border-style, solid) var(--bp-modal-border-color, transparent);
  border-radius: var(--bp-modal-radius, var(--r-bloc));
  box-shadow: var(--bp-modal-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1));
  padding: 32px;
  border-radius: var(--bp-modal-radius, 16px);
  box-shadow: var(--bp-modal-shadow, 0 10px 25px rgba(0, 0, 0, 0.08));
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
@media (max-width: 599px) {
  .bp-info__sheet {
    padding: 24px 16px;
  }
}

.bp-info__title {
  margin: 0 0 8px;
  font-family: var(--bp-modal-title-font, var(--font-display));
  font-size: 26px;
  font-weight: var(--bp-modal-title-weight, 400);
  line-height: 1.55;
  color: var(--bp-modal-title-color, var(--text-strong));
}
@media (max-width: 599px) {
  .bp-info__title {
    font-size: 19px;
  }
}

.bp-info__date,
.bp-info__empty {
  margin: 0 0 24px;
  font-size: 12px;
  color: var(--bp-modal-text-color, var(--text-muted));
}

.bp-info__content {
  font-family: var(--font-global);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.bp-info__content > :first-child {
  margin-top: 0;
}
.bp-info__content > :last-child {
  margin-bottom: 0;
}
.bp-info__content p {
  margin: 0 0 12px;
}
.bp-info__content h2 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: 21.6px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-info__content h3 {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-info__content ul,
.bp-info__content ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.bp-info__content li {
  margin-bottom: 4px;
}
.bp-info__content a {
  color: var(--link);
  text-decoration: underline;
}
.bp-info__content {
  font-family: var(--bp-rich-font, var(--font-global));
  color: var(--bp-modal-text-color, var(--text));
}
.bp-info__content h2,
.bp-info__content h3 {
  font-family: var(--bp-modal-title-font, var(--font-display));
  color: var(--bp-modal-title-color, var(--text-strong));
}
.bp-info__content a {
  color: var(--bp-link-color, var(--link));
  -webkit-text-decoration: var(--bp-link-decoration, underline);
          text-decoration: var(--bp-link-decoration, underline);
}
.bp-info__content a:hover {
  color: var(--bp-link-survol-color, var(--bp-link-color, var(--link)));
  -webkit-text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
          text-decoration: var(--bp-link-survol-decoration, var(--bp-link-decoration, underline));
}

.bp-info__optout {
  margin-top: 32px;
  padding: 16px 24px;
  border: 2px solid var(--bp-modal-title-color, #150263);
  border-radius: 15px;
  scroll-margin-top: 24px;
}

.bp-info__optout-title {
  margin: 0 0 12px;
  font-family: var(--bp-modal-title-font, var(--font-display));
  font-size: 18px;
  font-weight: var(--bp-modal-title-weight, 400);
  line-height: 1.55;
  color: var(--bp-modal-title-color, var(--text-strong));
}

.bp-info__optout-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bp-modal-text-color, var(--text));
  cursor: pointer;
}
.bp-info__optout-choice input {
  flex: none;
  margin: 0.25em 0 0;
}

.bp-info__optout-text {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--bp-modal-text-color, var(--text-muted));
}

.bp-faq__heading {
  margin: 32px 0 12px;
  font-family: var(--bp-modal-title-font, var(--font-display));
  font-size: 18px;
  font-weight: var(--bp-modal-title-weight, 400);
  line-height: 1.55;
  color: var(--bp-modal-title-color, var(--text-strong));
}

.bp-faq__subheading {
  margin: 24px 0 8px;
  font-family: var(--bp-rich-font, var(--font-global));
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-modal-text-color, var(--text-muted));
}

.bp-faq__featured {
  padding: 16px 24px;
  border: 2px solid var(--bp-modal-title-color, #150263);
  border-radius: 15px;
}
.bp-faq__featured .bp-faq__heading {
  margin-top: 0;
}

.bp-faq__shortlist {
  margin: 0;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.6;
}
.bp-faq__shortlist li + li {
  margin-top: 4px;
}

.bp-faq__shortlink {
  color: var(--bp-link-color, var(--link));
}

.bp-faq__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.bp-faq__toc-link {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--bp-modal-text-color, var(--text));
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.bp-faq__toc-link:hover {
  border-color: currentColor;
}

.bp-faq__category,
.bp-faq__subcategory,
.bp-faq__entry {
  scroll-margin-top: 24px;
}

.bp-faq__entry {
  border-bottom: 1px solid var(--line);
}
.bp-faq__entry[open] .bp-faq__question::after {
  transform: rotate(45deg);
}

.bp-faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--bp-modal-title-color, var(--text-strong));
  cursor: pointer;
  list-style: none;
}
.bp-faq__question::-webkit-details-marker {
  display: none;
}
.bp-faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  transition: transform 0.15s;
}
.bp-faq__question:hover {
  color: var(--bp-link-color, var(--link));
}

.bp-faq__answer {
  padding: 0 0 16px;
}

.bp-footer {
  margin-top: 24px;
  padding: 16px 0;
}

.bp-footer__made {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

.bp-footer__brand {
  color: inherit;
}

.bp-footer__logo {
  display: inline-block;
  width: 96px;
  aspect-ratio: 171.33/24.99;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
          mask: url("../assets/img/logo-line.svg") center/contain no-repeat;
  vertical-align: -0.2em;
}

.bp-footer__cta {
  color: var(--link);
  white-space: nowrap;
}

.bp-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.bp-footer__link {
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: none;
}
.bp-footer__link:hover, .bp-footer__link[aria-current=page] {
  color: var(--text);
  text-decoration: underline;
}

.bp-gate .bp-footer__link {
  color: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
}
.bp-gate .bp-footer__link:hover {
  color: var(--bp-modal-text-color, #374151);
}

.bp-vitrine--page .bp-footer {
  max-width: var(--vitrine-largeur);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.bp-module-title {
  margin: 0;
  font-size: 1.25rem;
}

.bp-module-spacer {
  width: 70px;
}

.bp-status {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}
.bp-status--compact {
  padding: 1rem;
}

.bp-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.bp-empty--tight {
  padding: 2.5rem 1rem 1.5rem;
}
.bp-empty__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.bp-empty__title--spaced {
  margin: 0 0 0.5rem;
}
.bp-empty__title--dark {
  margin: 0 0 0.35rem;
  color: var(--text);
}
.bp-empty__text {
  margin: 0;
  font-size: 0.9rem;
}

.bp-notice {
  margin: 0 0 1rem;
  padding: var(--bp-notice-padding, 15px);
  border: var(--bp-notice-border-largeur, 1px) var(--bp-notice-border-style, solid) var(--bp-notice-border-color, var(--line));
  border-radius: var(--bp-notice-radius, var(--r-carte));
  background: color-mix(in srgb, var(--bp-notice-background, rgb(var(--ink))) var(--bp-notice-background-opacity, 6%), transparent);
  color: var(--bp-notice-text, var(--text));
  font-family: var(--bp-notice-font, inherit);
  font-size: var(--bp-notice-size, 0.875rem);
  font-weight: var(--bp-notice-weight, inherit);
  line-height: 1.5;
}
.bp-notice--action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
}
.bp-notice--action > p {
  margin: 0;
  flex: 1 1 240px;
}
.bp-notice--compact {
  margin: 1rem 0 0;
  padding: 10px 12px;
  font-size: 0.8rem;
}
.bp-notice--center {
  justify-content: center;
  text-align: center;
}
.bp-notice--danger {
  border-color: var(--danger-text);
  color: var(--danger-text);
}
.bp-notice--warning {
  border-color: var(--warning-text);
  color: var(--warning-text);
}
.bp-notice--success {
  border-color: var(--success-text);
  color: var(--success-text);
}

.bp-muted-line {
  color: var(--text-faint);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem 0;
}

.bp-section-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.bp-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.bp-meta--capitalize {
  text-transform: capitalize;
}
.bp-meta--inline {
  font-weight: normal;
  margin-left: 0.5rem;
}

.error-message--flush {
  margin: 0.75rem 0 0;
}

.success-message {
  color: var(--success-text);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.bp-separator {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.bp-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bp-stack--tight {
  gap: 0.5rem;
}
.bp-stack--roomy {
  gap: 0.9rem;
}
.bp-stack--loose {
  gap: 1rem;
}
.bp-stack--full {
  width: 100%;
}

.bp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bp-row--shrink {
  min-width: 0;
}
.bp-row--between {
  justify-content: space-between;
}

.bp-label, .form-group .bp-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.bp-label--head, .form-group .bp-label--head {
  margin-bottom: 0.4rem;
}
.bp-label__hint {
  font-weight: 400;
  color: var(--text-muted);
}

.bp-input, .form-group .bp-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--bp-field-radius, var(--r-champ));
  border: var(--bp-field-border-largeur, 1px) var(--bp-field-border-style, solid) var(--bp-field-border-color, #d1d5db);
  background-color: color-mix(in srgb, var(--bp-field-background, Field) var(--bp-field-background-opacity, 100%), transparent);
  color: var(--bp-field-text, FieldText);
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}
.bp-input--select option {
  background-color: Field;
  color: FieldText;
}
.bp-input--textarea {
  resize: vertical;
  font-family: inherit;
}
.bp-input--search {
  padding: 0.85rem 1rem;
  border-radius: 12px;
}
.bp-input--compact, .form-group .bp-input--compact {
  flex: 1;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: var(--btn-marges, var(--btn-padding));
  border: var(--btn-bordure) solid transparent;
  border-radius: var(--r-bouton);
  font-family: var(--font-display);
  font-size: var(--btn-taille-texte, var(--btn-taille));
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.primary-btn:disabled,
.secondary-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.primary-btn--sm,
.secondary-btn--sm {
  padding: 6px 10px;
  font-size: 10px;
}
.primary-btn--block,
.secondary-btn--block {
  display: flex;
  width: 100%;
  padding: 13px 15px;
}
.primary-btn--wide,
.secondary-btn--wide {
  flex: 1;
}
.primary-btn--icone,
.secondary-btn--icone {
  width: 44px;
  height: 44px;
  padding: 0;
}

.primary-btn {
  --btn-marges: var(--bp-btn1-marges, var(--btn-padding));
  --btn-taille-texte: var(--bp-btn1-taille, var(--btn-taille));
  border-width: var(--bp-btn1-bordure-largeur, var(--btn-bordure));
  border-style: var(--bp-btn1-bordure-style, solid);
  border-radius: var(--bp-btn1-arrondi, var(--r-bouton));
  font-family: var(--bp-btn1-police, var(--font-display));
  font-weight: var(--bp-btn1-graisse, 400);
  font-style: var(--bp-btn1-style, normal);
  text-transform: var(--bp-btn1-casse, uppercase);
  letter-spacing: var(--bp-btn1-lettres, normal);
  background-color: var(--bp-btn1-fond-couleur, rgb(var(--main-color)));
  background-image: var(--bp-btn1-fond-image, none);
  background-size: var(--bp-btn1-fond-taille, cover);
  background-repeat: var(--bp-btn1-fond-repeat, no-repeat);
  background-position: center;
  border-color: var(--bp-btn1-bordure-couleur, var(--btn-edge));
  color: var(--bp-btn1-texte, rgb(var(--highlight-color)));
  box-shadow: var(--bp-btn1-ombre, none);
}
.primary-btn:hover:not(:disabled) {
  background-color: var(--bp-btn1-survol-fond-couleur, var(--btn-hover-bg));
  background-image: var(--bp-btn1-survol-fond-image, var(--bp-btn1-fond-image, none));
  border-color: var(--bp-btn1-survol-bordure-couleur, var(--btn-hover-bg));
  color: var(--bp-btn1-survol-texte, var(--btn-hover-text));
  box-shadow: var(--bp-btn1-survol-ombre, var(--bp-btn1-ombre, none));
}
.primary-btn--danger {
  background-image: none;
  background-color: rgb(var(--red));
  border-color: rgb(var(--red));
  color: #ffffff;
}
.primary-btn--danger:hover:not(:disabled) {
  background-color: transparent;
  border-color: rgb(var(--red));
  color: rgb(var(--red));
}

.secondary-btn {
  --btn-marges: var(--bp-btn2-marges, var(--btn-padding));
  --btn-taille-texte: var(--bp-btn2-taille, var(--btn-taille));
  border-width: var(--bp-btn2-bordure-largeur, var(--btn-bordure));
  border-style: var(--bp-btn2-bordure-style, solid);
  border-radius: var(--bp-btn2-arrondi, var(--r-bouton));
  font-family: var(--bp-btn2-police, var(--font-display));
  font-weight: var(--bp-btn2-graisse, 400);
  font-style: var(--bp-btn2-style, normal);
  text-transform: var(--bp-btn2-casse, uppercase);
  letter-spacing: var(--bp-btn2-lettres, normal);
  background-color: var(--bp-btn2-fond-couleur, transparent);
  background-image: var(--bp-btn2-fond-image, none);
  background-size: var(--bp-btn2-fond-taille, cover);
  background-repeat: var(--bp-btn2-fond-repeat, no-repeat);
  background-position: center;
  border-color: var(--bp-btn2-bordure-couleur, transparent);
  color: var(--bp-btn2-texte, var(--btn-2));
  box-shadow: var(--bp-btn2-ombre, none);
}
.secondary-btn:hover:not(:disabled) {
  background-color: var(--bp-btn2-survol-fond-couleur, var(--btn-hover-bg));
  background-image: var(--bp-btn2-survol-fond-image, var(--bp-btn2-fond-image, none));
  border-color: var(--bp-btn2-survol-bordure-couleur, var(--bp-btn2-bordure-couleur, transparent));
  color: var(--bp-btn2-survol-texte, var(--btn-hover-text));
  box-shadow: var(--bp-btn2-survol-ombre, var(--bp-btn2-ombre, none));
}
.secondary-btn--danger {
  color: rgb(var(--red));
}
.secondary-btn--danger:hover:not(:disabled) {
  background-image: none;
  background-color: rgb(var(--red));
  color: #ffffff;
}

.bp-link-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.875rem;
  cursor: pointer;
}
.bp-link-btn--danger {
  color: #ef4444;
}

.bp-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bp-modal--bottom {
  align-items: flex-end;
}
.bp-modal__box {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  --text-strong: var(--bp-modal-title-color, #111827);
  --text: var(--bp-modal-text-color, #374151);
  --text-muted: color-mix(in srgb, var(--bp-modal-text-color, #374151) 75%, transparent);
  --text-faint: color-mix(in srgb, var(--bp-modal-text-color, #374151) 50%, transparent);
  --line: color-mix(in srgb, var(--bp-modal-text-color, #374151) 15%, transparent);
  --link: var(--bp-link-color, #2563eb);
  color: var(--bp-modal-text-color, rgb(var(--ink)));
  background: var(--bp-modal-background-image, none) center/var(--bp-modal-background-taille, auto) var(--bp-modal-background-repeat, repeat), var(--bp-modal-background-couleur, #ffffff);
  border: var(--bp-modal-border-largeur, 0px) var(--bp-modal-border-style, solid) var(--bp-modal-border-color, transparent);
  border-radius: var(--bp-modal-radius, var(--r-bloc));
  box-shadow: var(--bp-modal-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1));
  width: 100%;
  padding: var(--bp-modal-padding, 1.5rem);
}
.bp-modal__box--deck-create {
  max-width: 420px;
  padding: 1.25rem;
}
.bp-modal__box--deck-visibility {
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.bp-modal__box--collection {
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.bp-modal__box--card-editor {
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.bp-modal__box--friend-add {
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.bp-modal__box--confirm {
  max-width: 480px;
  display: flex;
  flex-direction: column;
}
.bp-modal__box--friend-request {
  max-width: 360px;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.bp-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.bp-modal__head--tight {
  margin-bottom: 0.25rem;
}
.bp-modal__head--snug {
  margin-bottom: 0.75rem;
}
.bp-modal__head--loose {
  margin-bottom: 1.25rem;
}
.bp-modal__title {
  margin: 0;
  font-family: var(--bp-modal-title-font, inherit);
  font-size: var(--bp-modal-title-size, 1.125rem);
  font-weight: var(--bp-modal-title-weight, 700);
  color: var(--bp-modal-title-color, inherit);
}
.bp-modal__title--large {
  font-size: calc(var(--bp-modal-title-size, 1.125rem) * 1.111);
  color: var(--bp-modal-title-color, var(--text-strong));
}
.bp-modal__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
}
.bp-modal__close--large {
  font-size: 1.5rem;
  line-height: 1;
}
.bp-modal__subtitle {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.bp-modal__scroll {
  overflow-y: auto;
  flex: 1;
  padding-right: 0.25rem;
}
.bp-modal__body {
  margin-bottom: 1.5rem;
}
.bp-modal__text {
  margin: 0;
  color: var(--bp-modal-text-color, #4b5563);
  font-size: var(--bp-modal-text-size, 0.95rem);
  line-height: 1.5;
}
.bp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.bp-modal__actions--tight {
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-family: var(--font-global);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}
.bp-badge--acide {
  background: rgb(var(--highlight-color));
  color: rgb(var(--main-color));
}

.bp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #D60056;
  color: #F7F3E8;
  font-family: var(--font-global);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bp-fill-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bp-fill-img--round {
  border-radius: 50%;
}
.bp-fill-img--contain {
  -o-object-fit: contain;
     object-fit: contain;
}

svg.bp-fill-img {
  display: block;
}

.bp-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.bp-user-avatar--mail {
  background: #e0e7ff;
  color: #4338ca;
}
.bp-user-avatar--large {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  color: inherit;
  font-size: 1.5rem;
}

.bp-user__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-strong);
}
.bp-user__name--mail {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-text-editor {
  border: 2px solid #150263;
  border-radius: 10px;
  background: #FFFDF8;
  overflow: hidden;
}
.bp-text-editor__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 2px solid #150263;
  background: #EDE7D6;
}
.bp-text-editor__tool {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 2px solid #150263;
  border-radius: 5px;
  background: transparent;
  color: #150263;
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
}
.bp-text-editor__tool:hover {
  background: #C7FF6E;
}
.bp-text-editor__zone {
  font-family: var(--font-global);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.bp-text-editor__zone > :first-child {
  margin-top: 0;
}
.bp-text-editor__zone > :last-child {
  margin-bottom: 0;
}
.bp-text-editor__zone p {
  margin: 0 0 12px;
}
.bp-text-editor__zone h2 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: 21.6px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-text-editor__zone h3 {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-strong);
}
.bp-text-editor__zone ul,
.bp-text-editor__zone ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.bp-text-editor__zone li {
  margin-bottom: 4px;
}
.bp-text-editor__zone a {
  color: var(--link);
  text-decoration: underline;
}
.bp-text-editor__zone {
  min-height: 192px;
  padding: 12px;
  color: #150263;
  outline: none;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.bp-text-editor__zone a {
  color: #26099C;
}
.bp-text-editor__zone h2,
.bp-text-editor__zone h3 {
  color: #150263;
}
.bp-text-editor__zone:focus-visible {
  box-shadow: inset 0 0 0 2px #26099C;
}

.u-grow {
  flex: 1;
}

.u-mt-xs {
  margin-top: 0.25rem;
}

.u-mt-sm {
  margin-top: 0.5rem;
}

.u-mt-md {
  margin-top: 1rem;
}

.bp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bp-progress.is-active {
  opacity: 1;
}
.bp-progress.is-done {
  opacity: 0;
  transition-delay: 0.2s;
}
.bp-progress__bar {
  height: 100%;
  background: rgb(var(--highlight-color));
  box-shadow: 0 0 8px rgba(var(--highlight-color), 0.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-out;
}

img.bp-img-pending {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, color-mix(in srgb, currentColor 8%, transparent) 30%, color-mix(in srgb, currentColor 18%, transparent) 50%, color-mix(in srgb, currentColor 8%, transparent) 70%);
  background-size: 300% 100%;
  animation: bp-skeleton 1.4s linear infinite;
}

@keyframes bp-skeleton {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  img.bp-img-pending {
    animation: none;
  }
  .bp-progress,
  .bp-progress__bar {
    transition: none;
  }
}
.bp-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-pick__state {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-pick__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(var(--main-color));
}
.bp-pick__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: rgba(var(--main-color), 0.75);
}
.bp-pick__count {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: rgb(var(--main-color));
}
.bp-pick__error {
  margin: 0;
  font-size: 11px;
  text-align: center;
  color: rgb(var(--red));
}
.bp-pick__people {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 84px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.bp-pick__person {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: rgb(var(--main-color));
}
.bp-pick__avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}
.bp-pick__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bp-pick__person-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-pick__person-meta {
  flex: none;
  color: rgba(var(--main-color), 0.75);
}

.bp-card-gauge {
  position: absolute;
  top: calc(12 * var(--card-u));
  left: calc(12 * var(--card-u));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--card-u));
  width: 45%;
  pointer-events: none;
}
.bp-card-gauge__label {
  font-family: var(--font-display);
  font-size: calc(10 * var(--card-u));
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bp-carte-texte-couleur, rgb(var(--ink)));
}
.bp-card-gauge__track {
  display: block;
  height: calc(6 * var(--card-u));
  border-radius: calc(3 * var(--card-u));
  background: rgba(var(--main-color), 0.2);
  overflow: hidden;
}
.bp-card-gauge__fill {
  display: block;
  height: 100%;
  border-radius: calc(3 * var(--card-u));
  background: rgb(var(--main-color));
  transition: width 0.4s ease;
}
.bp-card-gauge.is-mine .bp-card-gauge__fill {
  background: var(--btn-hover-bg);
}

.bp-pick-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-family: var(--font-global);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
  padding: calc(2 * var(--card-u)) calc(8 * var(--card-u));
  border-radius: calc(5 * var(--card-u));
  font-size: calc(10 * var(--card-u));
  position: absolute;
  top: calc(12 * var(--card-u));
  left: calc(12 * var(--card-u));
  z-index: 3;
  background-color: rgb(var(--main-color));
  color: var(--vt-btn2, #ffffff);
}
.bp-pick-badge.is-mine {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

.bp-pick-confirm {
  text-align: left;
}
.bp-pick-confirm__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.bp-pick-shares {
  margin-top: 0.75rem;
}
.bp-pick-shares__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.bp-pick-shares__step {
  min-width: 40px;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.1rem;
}
.bp-pick-shares__value {
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-align: center;
  color: var(--bp-modal-title-color, var(--text-strong));
}
.bp-pick-shares__info {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--bp-modal-text-color, #4b5563);
}

.bp-pick-organizer {
  margin-top: 0.75rem;
}
.bp-pick-organizer__row {
  display: flex;
  gap: 0.5rem;
}
.bp-pick-organizer__row .bp-input {
  flex: 1;
  min-width: 0;
}

.bp-pick-rules {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--bp-modal-text-color, #4b5563);
  font-size: 0.9rem;
  line-height: 1.5;
}
.bp-pick-rules li + li {
  margin-top: 0.25rem;
}

.bp-invite-pile {
  cursor: default;
}
.bp-invite-pile__card {
  width: 128px;
  aspect-ratio: 300/420;
  perspective: 800px;
}
.bp-invite-pile__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.bp-invite-pile.is-flipped .bp-invite-pile__inner {
  transform: rotateY(180deg);
}
.bp-invite-pile__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.bp-invite-pile button.deck-pile {
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.bp-invite-pile__ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.bp-invite-pile__back {
  --ink: var(--main-color);
  --text-strong: #111827;
  --text: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --line: #e5e7eb;
  --link: #2563eb;
  --danger-text: #dc2626;
  --success-text: #16a34a;
  --warning-text: #92400e;
  --btn-edge: rgb(var(--main-color));
  --btn-2: rgb(var(--ink));
  --btn-hover-bg: var(--vt-survol-clair, rgb(var(--highlight-color)));
  --btn-hover-text: var(--vt-survol-clair-texte, rgb(var(--accent-color)));
  color: rgb(var(--ink));
  transform: rotateY(180deg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem;
  border-radius: 14px;
  border: 2px solid #26099C;
  background: #F7F3E8;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
  cursor: pointer;
}
.bp-invite-pile__text {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
  color: #150263;
}

.bp-deck-form__label {
  font-weight: 600;
}
.bp-deck-form__input {
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.bp-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  padding: 0.25rem;
  border-radius: 10px;
  width: -moz-fit-content;
  width: fit-content;
}
.bp-tabs__tab {
  padding: 0.4rem 0.9rem;
  border-radius: 7px;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
.bp-tabs__tab.is-active {
  background: var(--bp-modal-background-couleur, #ffffff);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.bp-thumb-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  flex-shrink: 0;
}
.bp-thumb-box--lg {
  width: 48px;
  height: 48px;
}
.bp-thumb-box__placeholder {
  font-size: 0.7rem;
  color: var(--text-faint);
}
.bp-thumb-box__icon {
  width: 22px;
  height: 22px;
  color: var(--text-faint);
}

.bp-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--link);
  border-radius: 50%;
}

.bp-illustration-picker__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.bp-illustration-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.bp-illustration-grid__item {
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  background: #ffffff;
  border: 2px solid var(--line);
}
.bp-illustration-grid__item.is-selected {
  border-color: var(--link);
}
.bp-illustration-grid__empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  padding: 1.5rem 0;
}

.bp-image-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}
.bp-image-picker__stage {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bp-image-picker__img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.bp-image-picker__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #1f2937;
}
.bp-image-picker__nav--prev {
  left: 8px;
}
.bp-image-picker__nav--next {
  right: 8px;
}
.bp-image-picker__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.bp-image-picker__thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background: #ffffff;
}
.bp-image-picker__thumb.is-selected {
  border: 2px solid var(--link);
}

.bp-card-editor__fit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.bp-card-editor__fit .bp-label {
  margin: 0;
}
.bp-card-editor__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.bp-card-editor__toggle-sign {
  font-size: 1.1rem;
  line-height: 1;
}
.bp-card-editor__advanced {
  display: flex;
  gap: 1rem;
  padding-top: 0.5rem;
}
.bp-card-editor__shares {
  padding-top: 0.75rem;
}

.bp-friend-chip {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.bp-friend-chip--user {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.125rem;
  border: 2px solid #C7FF6E;
  background: #26099C;
  color: #C7FF6E;
}
.bp-friend-chip--user.is-pending-sent {
  border: 2px dashed #B9AEEA;
  background: rgba(185, 174, 234, 0.15);
  color: #B9AEEA;
}
.bp-friend-chip--user.is-active {
  box-shadow: 0 0 0 3px #0C0140, 0 0 0 5px #C7FF6E;
}
.bp-friend-chip--add {
  border: 2px dashed #F7F3E8;
  background: transparent;
  color: #F7F3E8;
  font-size: 1.5rem;
  line-height: 1;
}
.bp-friend-chip__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background-color: #D60056;
  border-radius: 50%;
  border: 2px solid #0C0140;
}

.bp-friend-search {
  margin-bottom: 1rem;
  position: relative;
}

.bp-friend-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.bp-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.bp-friend-request__name {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}
.bp-friend-request__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.bp-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 34px 24px;
  width: 100%;
  max-width: 860px;
}

.bp-box-row {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bp-box-row:focus-visible {
  outline: 2px solid #C7FF6E;
  outline-offset: 8px;
  border-radius: 14px;
}

.bp-box {
  position: relative;
  display: block;
  aspect-ratio: 1.6;
  color: var(--box-texte);
}
.bp-box::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 32px;
  border-radius: 0 0 var(--bp-box-radius, 14px) var(--bp-box-radius, 14px);
  background: linear-gradient(to bottom, var(--box-interieur, #0C0140) 0 26px, color-mix(in srgb, var(--box-fond) 60%, #000) 0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.bp-box__lid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px 24px 40px;
  box-sizing: border-box;
  text-align: center;
  border-radius: var(--bp-box-radius, 14px);
  background: var(--box-fond);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 0 color-mix(in srgb, var(--box-fond) 78%, #000);
}
.bp-box__lid::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: var(--bp-box-frame-largeur, 2px) var(--bp-box-frame-style, solid) color-mix(in srgb, var(--box-texte) 50%, transparent);
  border-radius: calc(var(--bp-box-radius, 14px) * 0.6);
  pointer-events: none;
}
.bp-box[data-placement=top] .bp-box__lid {
  justify-content: flex-start;
}
.bp-box[data-placement=bottom] .bp-box__lid {
  justify-content: flex-end;
}
.bp-box__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.bp-box[data-layout=row] .bp-box__heading {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  text-align: left;
}
.bp-box[data-layout=row] .bp-box__heading .bp-box__body {
  width: auto;
  flex: 0 1 auto;
}
.bp-box__emblem {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bp-box-icon-size, 44px);
  height: var(--bp-box-icon-size, 44px);
  font-size: 1.8rem;
  line-height: 1;
}
.bp-box__emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.bp-box__fan {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 30px;
  height: 30px;
}
.bp-box[data-tiles-place=top-left] .bp-box__fan {
  right: auto;
  left: 28px;
}
.bp-box[data-tiles-place=under-title] .bp-box__fan {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  margin-top: 4px;
}
.bp-box[data-tiles=row] .bp-box__fan {
  display: flex;
  gap: 4px;
  width: auto;
  height: auto;
}
.bp-box[data-tiles=row] .bp-box__icon {
  position: static;
  width: 26px;
  height: 26px;
  transform: none;
}
.bp-box__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #F7F3E8;
  border-radius: 5px;
  background: rgb(var(--main-color));
  box-shadow: 0 2px 0 #EDE7D6, 0 3px 0 #B9B19A;
  color: rgb(var(--highlight-color));
  transform-origin: 50% 170%;
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 14deg));
}
.bp-box__icon svg {
  display: block;
  width: 72%;
  height: 72%;
  fill: currentColor;
}
.bp-box__body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-box__title {
  font-family: var(--bp-box-title-font, var(--font-display));
  font-size: var(--bp-box-title-size, 18px);
  font-weight: var(--bp-box-title-weight, 400);
  text-transform: var(--bp-box-title-case, none);
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-box__sub {
  font-family: var(--bp-box-text-font, var(--font-global));
  font-size: 12px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-box__meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bp-box__status--strong {
  background: var(--box-texte);
  color: var(--box-fond);
}
.bp-box__visibility svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bp-box__ribbon {
  position: absolute;
  top: -8px;
  left: 24px;
  z-index: 2;
}
.bp-box--new {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 3px dashed rgba(var(--ink), 0.3);
  border-radius: 14px;
  color: rgba(var(--ink), 0.55);
}
.bp-box--new::before {
  display: none;
}
.bp-box__plus {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}
.bp-box__new-label {
  font-family: var(--font-display);
  font-size: 13px;
}
.bp-box--mini {
  width: 64px;
}
.bp-box--mini::before {
  left: 4px;
  right: 4px;
  bottom: -6px;
  height: 16px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(to bottom, var(--box-interieur, #0C0140) 0 13px, color-mix(in srgb, var(--box-fond) 60%, #000) 0);
}
.bp-box--mini .bp-box__lid {
  padding: 0;
  border-radius: var(--bp-box-mini-radius, 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 3px 0 color-mix(in srgb, var(--box-fond) 78%, #000);
}
.bp-box--mini .bp-box__lid::before {
  inset: 4px;
  border-width: 1px;
  border-radius: calc(var(--bp-box-mini-radius, 8px) * 0.6);
}
.bp-box--mini .bp-box__emblem {
  width: 22px;
  height: 22px;
  font-size: 0.9rem;
}
.bp-box--mini .bp-box__fan {
  position: relative;
  top: auto;
  right: auto;
  width: 18px;
  height: 18px;
}
.bp-box--mini .bp-box__icon {
  border-width: 1px;
  border-radius: 3px;
  box-shadow: 0 1px 0 #EDE7D6;
}
.bp-box--mini .bp-box__initial {
  font-family: var(--bp-box-title-font, var(--font-display));
  font-size: 1.1rem;
  line-height: 1;
}
.bp-box--mini.bp-box--new {
  border-width: 2px;
  border-radius: 8px;
}

.bp-box-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bp-box-item .deck-pile__label {
  font-size: 0.62rem;
  max-width: 72px;
}
.bp-box-item.active .bp-box__lid {
  outline: 2px solid rgb(var(--highlight-color));
  outline-offset: 3px;
}

.bp-box-open {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1.6;
  width: min(100%, max(320px, (100vh - 300px) * 1.6));
  width: min(100%, max(320px, (100dvh - 300px) * 1.6));
  box-sizing: border-box;
  padding: 8px;
  margin: 0 auto 26px;
  border-radius: 14px;
  background: var(--box-fond);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12), 0 10px 0 color-mix(in srgb, var(--box-fond) 60%, #000), 0 18px 22px rgba(0, 0, 0, 0.3);
}
.bp-box-open__well {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
  border: 22px solid;
  border-color: color-mix(in srgb, var(--box-fond) 45%, #000) color-mix(in srgb, var(--box-fond) 65%, #000) color-mix(in srgb, var(--box-fond) 85%, #000) color-mix(in srgb, var(--box-fond) 65%, #000);
  border-radius: 4px;
  background: var(--box-interieur);
  box-shadow: inset 0 10px 16px -6px rgba(0, 0, 0, 0.45);
  --text: rgb(var(--ink));
  --text-muted: rgba(var(--ink), 0.78);
  --text-strong: var(--box-interieur-titre);
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .bp-box-open__well {
    border-width: 12px;
    padding: 16px 8px;
  }
}
.deck-pile--tuile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 5px solid #F7F3E8;
  background: radial-gradient(circle at 50% 42%, rgba(var(--yellow), 0.1) 0%, transparent 60%), rgb(var(--main-color));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 5px 0 #EDE7D6, 0 7px 0 #B9B19A, 0 12px 14px rgba(0, 0, 0, 0.25);
}
.deck-pile--tuile::before {
  inset: 7px;
  border: 2px solid rgba(var(--highlight-color), 0.4);
  border-radius: 5px;
}
.deck-pile--tuile .deck-pile__emblem--icon {
  width: 62%;
  border: none;
  border-radius: 0;
  background: none;
}
.deck-pile--tuile .deck-pile__emblem--icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.deck-pile--tuile.deck-pile--new {
  background: transparent;
  border: 3px dashed rgba(var(--ink), 0.3);
  box-shadow: none;
}

.deck-card:hover .deck-pile.deck-pile--tuile {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 9px 0 #EDE7D6, 0 11px 0 #B9B19A, 0 18px 18px rgba(0, 0, 0, 0.25);
}
.deck-card:hover .deck-pile.deck-pile--tuile.deck-pile--new {
  box-shadow: none;
}

.bp-collection-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.bp-collection-head__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-strong);
  min-width: 0;
}
.bp-collection-head__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-collection-head__icon {
  flex-shrink: 0;
  display: flex;
}
.bp-collection-head__icon svg {
  display: block;
  width: 1.6em;
  height: 1.6em;
  fill: currentColor;
}
.bp-collection-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.bp-collection-link {
  display: inline-block;
  text-decoration: none;
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.bp-collection-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}

.bp-booster-pile {
  position: relative;
}
.bp-booster-pile__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  color: #6b7280;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-hero-tile {
  order: -1;
}
.bp-hero-tile:disabled {
  opacity: 0.5;
  cursor: default;
}

.bp-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.bp-choice--top {
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
}
.bp-choice.is-selected {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 10%, transparent);
}
.bp-choice.is-disabled {
  cursor: default;
  opacity: 0.6;
}
.bp-choice__radio {
  margin-top: 0.2rem;
}
.bp-choice__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-strong);
}
.bp-choice__title--grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-choice__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.bp-booster-choice {
  width: 100%;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.bp-booster-choice:hover:not(:disabled) {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 10%, transparent);
}
.bp-booster-choice:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.bp-booster-choice__icon {
  font-size: 1.3rem;
  line-height: 1.2;
}
.bp-booster-choice__icon svg {
  width: 1.4em;
  height: 1.4em;
  display: block;
  fill: currentColor;
}

.bp-theme-choice__intro {
  margin: 0 0 8px;
}
.bp-theme-choice__samples {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.bp-theme-choice__sample {
  display: block;
  width: 32px;
  height: 32px;
}

.bp-palette-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.bp-palette-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.bp-palette-choice.is-selected {
  border-color: var(--text-strong);
}
.bp-palette-choice:focus-within {
  outline: 2px solid #26099C;
  outline-offset: 2px;
}
.bp-palette-choice__swatches {
  display: flex;
}
.bp-palette-choice__swatch {
  width: 24px;
  height: 24px;
  border: 2px solid #FFFDF8;
  border-radius: 999px;
}
.bp-palette-choice__swatch + .bp-palette-choice__swatch {
  margin-left: -8px;
}
.bp-palette-choice__name {
  font-size: 12px;
}

.bp-booster-page__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.bp-booster-page__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--text-strong);
}
.bp-booster-page__icon svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.bp-booster-page__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-booster-page__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.bp-booster-page__section + .bp-booster-page__section {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.bp-sort-handle {
  flex-shrink: 0;
  width: 28px;
  height: 34px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.bp-sort-handle:hover, .bp-sort-handle:focus-visible {
  background: color-mix(in srgb, var(--link) 10%, transparent);
  color: var(--text-strong);
}

[data-sortable].is-sorting {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grabbing;
}
[data-sortable].is-sorting .bp-sort-handle {
  cursor: grabbing;
}

.bp-modal__box--quiz {
  width: min(640px, 100%);
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

.bp-quiz-section-title {
  margin: 0;
}

.bp-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.bp-quiz-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bp-quiz-question {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bp-quiz-question.is-dragging {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 10%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.bp-quiz-question__number {
  flex-shrink: 0;
  min-width: 1.5em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}
.bp-quiz-question__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bp-quiz-question__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.bp-quiz-question__delete {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--danger-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.bp-quiz-question__delete:hover {
  background: color-mix(in srgb, var(--danger-text) 12%, transparent);
}

.bp-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
}
.bp-quiz-option .bp-input {
  flex: 1;
  min-width: 0;
}
.bp-quiz-option.is-dragging {
  background: color-mix(in srgb, var(--link) 10%, transparent);
  box-shadow: 0 0 0 2px var(--link);
}
.bp-quiz-option--unknown {
  padding-left: calc(28px + 0.5rem);
  cursor: pointer;
}
.bp-quiz-option__remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.bp-quiz-number {
  display: flex;
  gap: 0.75rem;
}
.bp-quiz-number__value {
  flex: 1;
  min-width: 0;
}
.bp-quiz-number__unit {
  flex: 0 0 8rem;
}

.bp-collection-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.bp-collection-section-head .bp-collection-section-title {
  margin: 0;
}

.bp-booster-pile.is-reordering {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-booster-pile.is-dragging {
  position: fixed;
  left: var(--bp-drag-left);
  top: var(--bp-drag-top);
  width: var(--bp-drag-w);
  height: var(--bp-drag-h);
  z-index: 200;
  cursor: grabbing;
}

.bp-booster-slot {
  justify-self: center;
  align-self: start;
  width: 128px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 3px dashed #B9AEEA;
  border-radius: 12px;
}

.bp-deck-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.bp-deck-preview__card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bp-deck-preview__img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 40%, transparent);
}
.bp-deck-preview__img img,
.bp-deck-preview__img svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bp-deck-preview__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-deck-preview__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-account__photo {
  text-align: center;
  margin-bottom: 1.5rem;
}
.bp-account__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75rem auto;
  border-radius: 50%;
  border: 3px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
.bp-account__photo-link {
  cursor: pointer;
  color: var(--link);
  font-size: 0.9rem;
  font-weight: 600;
}

.primary-btn,
.secondary-btn,
.bp-vitrine__nav-link {
  transition: background-color var(--transition-color), color var(--transition-color), border-color var(--transition-color);
}

.bp-tuile {
  transition: opacity 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bp-tuile:hover:not(.is-expanded):not(.bp-tuile--statique) {
  transform: translateY(-3px);
  box-shadow: 8px 8px 0 rgb(var(--highlight-color));
}

.friend-item {
  transition: transform 0.2s ease;
}

.friend-item:hover {
  transform: translateY(-2px);
}

.friend-avatar-wrapper {
  transition: all 0.2s ease;
}

.bp-friend-chip--user {
  transition: all 0.2s ease;
}

.add-card-wrapper .add-card-input {
  transition: border-color var(--transition-color), box-shadow var(--transition-color);
}

@keyframes bp-spin {
  to {
    transform: rotate(360deg);
  }
}
.bp-spinner {
  animation: bp-spin 0.8s linear infinite;
}

.deck-pile {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.deck-card:hover .deck-pile,
.deck-item:hover .deck-pile {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(17, 24, 39, 0.22);
}

.deck-item.active .deck-pile {
  transform: translateY(-6px);
}

.bp-box__lid {
  transition: transform 0.22s ease;
}

.bp-box-row:hover .bp-box__lid {
  transform: translateY(-6px);
}

.bp-box-item:hover .bp-box__lid,
.bp-box-item.active .bp-box__lid {
  transform: translateY(-3px);
}

.bp-invite-pile__inner {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vol des piles entre la grille centrale et la sidebar (View Transitions API) */
::view-transition-group(*) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sidebar hidden until a deck is active */
.decks-layout .decks-sidebar {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: transform 260ms ease, opacity 260ms ease;
}

.decks-layout.has-active .decks-sidebar {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Smooth disappearance of center piles when a deck is active */
.decks-center-area {
  transition: opacity 220ms ease, transform 220ms ease;
}

.decks-center-area[style*="display:none"] {
  opacity: 0;
  transform: translateY(6px);
}

.bp-vt-hero {
  view-transition-name: module-hero;
}

.bp-vt-hero > .bp-tuile__etiquette {
  view-transition-name: module-label;
}

.bp-vt-hero > .app-module {
  view-transition-name: module-content;
}

.bp-vt-hero.is-expanded .module-header {
  view-transition-name: module-header;
}

.bp-tuile:not(.is-expanded) > .app-module {
  display: none !important;
}

.bp-vt-hero.is-expanded > .app-module {
  display: flex !important;
}

::view-transition-group(module-hero) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bp-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes bp-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes bp-header-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}
::view-transition-old(module-label) {
  animation: bp-fade-out 0.15s ease both;
}

::view-transition-new(module-content) {
  animation: bp-fade-in 0.3s 0.15s ease both;
}

::view-transition-new(module-header) {
  animation: bp-header-in 0.35s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-old(module-content) {
  animation: bp-fade-out 0.15s ease both;
}

::view-transition-old(module-header) {
  animation: bp-fade-out 0.15s ease both;
}

::view-transition-new(module-label) {
  animation: bp-fade-in 0.25s 0.25s ease both;
}

@keyframes bp-wiggle {
  0%, 100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}
.bp-booster-pile.is-reordering:not(.is-dragging),
.card-grid > .flipcard.is-reordering:not(.is-dragging) {
  animation: bp-wiggle 0.28s ease-in-out infinite;
}
.bp-booster-pile.is-reordering:not(.is-dragging):nth-child(even),
.card-grid > .flipcard.is-reordering:not(.is-dragging):nth-child(even) {
  animation-duration: 0.34s;
  animation-delay: -0.1s;
}

.bp-booster-pile.is-dragging,
.card-grid > .flipcard.is-dragging {
  transform: translate(var(--bp-drag-x, 0), var(--bp-drag-y, 0)) scale(1.05);
  transition: none;
}

.card-grid > .flipcard.is-reordering {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.card-grid > .flipcard.is-reordering img {
  pointer-events: none;
}

.card-grid > .flipcard.is-dragging {
  position: fixed;
  left: var(--bp-drag-left);
  top: var(--bp-drag-top);
  width: var(--bp-drag-w);
  max-width: none;
  height: var(--bp-drag-h);
  z-index: 200;
  cursor: grabbing;
}

.bp-card-slot {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  border: 3px dashed #B9AEEA;
  border-radius: 16px;
}

:root {
  --bp-reveal-delay: 0ms;
  --bp-reveal-duration: 450ms;
  --bp-reveal-step: 60ms;
  --bp-reveal-stagger: 40ms;
  --bp-reveal-word-stagger: 30ms;
  --bp-reveal-distance: 14px;
  --bp-reveal-blur: 0px;
  --bp-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-reveal-pop-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bp-deal-duration: 500ms;
  --bp-deal-stagger: 50ms;
  --bp-deal-distance: 40px;
  --bp-deal-tilt: 2deg;
  --bp-deal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-deal-return-distance: 0px;
  --bp-deal-return-duration: 500ms;
  --bp-deal-return-stagger: 30ms;
}

.bp-reveal-wait {
  opacity: 0 !important;
}

.bp-word {
  display: inline-block;
}

.bp-vitrine--page {
  --bp-reveal-duration: 900ms;
  --bp-reveal-step: 160ms;
  --bp-reveal-stagger: 90ms;
  --bp-reveal-word-stagger: 40ms;
  --bp-reveal-distance: 24px;
  --bp-deal-duration: 950ms;
  --bp-deal-stagger: 120ms;
  --bp-deal-distance: 140px;
  --bp-deal-tilt: 4deg;
  --bp-deal-return-distance: 20px;
  --bp-deal-return-duration: 700ms;
  --bp-deal-return-stagger: 40ms;
}
.bp-vitrine--page .bp-vitrine__intro {
  --bp-reveal-delay: 150ms;
}
.bp-vitrine--page .bp-vitrine__title {
  --bp-reveal-duration: 1300ms;
  --bp-reveal-word-stagger: 120ms;
  --bp-reveal-distance: 0.7em;
  --bp-reveal-blur: 12px;
}
.bp-vitrine--page .bp-vitrine__icon {
  --bp-reveal-duration: 1000ms;
}
.bp-vitrine--page .bp-booster__title {
  --bp-reveal-duration: 1000ms;
  --bp-reveal-word-stagger: 80ms;
  --bp-reveal-distance: 0.6em;
  --bp-reveal-blur: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}/*# sourceMappingURL=global.css.map */