/* 0.4.3 — presentation joueur uniquement. Assets locaux, sans requête externe. */
.vute-app .vute-card { margin-block: 20px; padding: 22px; border-color: rgba(57,211,213,.25); }
.vute-app .vute-card-head { flex-wrap: wrap; }
.vute-app .vute-card-head > strong { flex: 1 1 160px; }
.vute-app .vute-level, .vute-app .vute-team-label { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; line-height: 1.4; color: #071a2d; background: #d6e4ed; }
.vute-app .vute-level { min-width: 30px; background: #39d3d5; }
.vute-app .vute-team-label.is-forming { background: #b8c9d8; }
.vute-app .vute-team-label.is-complete { background: #ffb575; }
.vute-app .vute-team-label.is-finalized { background: #39d3d5; }
.vute-app .vute-player-card > .vute-avatar, .vute-app .vute-row > .vute-avatar, .vute-app .vute-member-row .vute-avatar { display: inline-grid; vertical-align: middle; margin-right: 10px; }
.vute-app .vute-create-team > summary, .vute-app .vute-create-team button { background: #ff914d !important; color: #071a2d !important; }
.vute-app .vute-create-team > summary:after { color: #071a2d; }
.vute-app .vute-journey { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 20px 0 24px; list-style: none; font-size: .86rem; font-weight: 750; }
.vute-app .vute-journey li { color: #b8c9d8; }
.vute-app .vute-journey li.is-reached { color: #39d3d5; }
.vute-app .vute-team-greeting { font-weight: 800; color: #fff; }
.vute-app .vute-countdown { padding: 14px; border: 1px solid #ff914d; border-radius: 10px; background: rgba(255,145,77,.1); color: #ffe0c7; font-weight: 800; }
.vute-app .vute-notification:not(.is-read) > strong:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #39d3d5; box-shadow: 0 0 8px rgba(57,211,213,.65); }
.vute-app .vute-notification.is-read { opacity: 1; background: #102d48; border-left-color: #718b9e; }
.vute-app .vute-notification.is-read strong, .vute-app .vute-notification.is-read p { color: #b8c9d8; }
.vute-app .vute-search-filters { gap: 20px; padding: 18px; background: rgba(7,26,45,.5); border: 1px solid var(--vute-line); border-radius: 12px; }
.vute-app .vute-search-filters button { flex: 1 1 100%; }
.vute-app .vute-empty { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.vute-app .vute-dashboard > h4 { padding-top: 22px; margin-top: 30px; border-top: 1px solid rgba(57,211,213,.4); }
.vute-app .vute-dashboard > h4:first-of-type { margin-top: 14px; }
.vute-app .vute-row, .vute-app .vute-member-row { padding-block: 18px; }
.vute-app .vute-member-row button { min-height: 44px; }
@media (max-width: 640px) {
  .vute-app .vute-card { padding: 17px; margin-block: 22px; }
  .vute-app form { gap: 16px; margin-block: 18px; }
  .vute-app button, .vute-app .vute-member-row button { min-height: 48px; padding-block: 14px; }
  .vute-app .vute-search-filters { padding: 14px; }
  .vute-app .vute-search-filters button { flex-basis: auto; }
}

/* 0.4.4: explicit, scoped visual elements; no decorative CSS image dependency. */
.vute-app svg.vute-places { display: inline-block; flex: 0 0 102px; width: 102px; height: 16px; overflow: visible; vertical-align: middle; }
.vute-app .vute-journey { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; padding: 0; gap: 10px; }
.vute-app .vute-journey li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vute-app .vute-journey li + li::before { content: none; }
.vute-app .vute-step-number { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; }
.vute-app .is-reached .vute-step-number { color: #071a2d; background: #39d3d5; border-color: #39d3d5; }
.vute-app .vute-step-arrow { margin-inline: 6px; font-size: 1.2rem; color: #39d3d5; }
.vute-app .vute-create-team > summary { min-height: 58px; font-size: 1.1rem; }
.vute-app .vute-slot .vute-level { display: inline-flex; flex: 0 0 auto; min-width: 32px; width: auto; font-size: .8rem; padding: 3px 9px; line-height: 1.4; color: #071a2d; background: #39d3d5; border-radius: 999px; }
.vute-app .vute-empty::before { content: none; }
.vute-app .vute-empty-art { display: block; flex: 0 0 38px; width: 38px; height: 38px; margin: 0; border: 0; background: transparent; opacity: .6; }
@media (max-width: 640px) {
 .vute-app .vute-journey { flex-direction: row; align-items: flex-start; gap: 5px; font-size: .72rem; }
 .vute-app .vute-journey li { flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 5px; position: relative; padding-right: 12px; }
 .vute-app .vute-step-number { flex-basis: 24px; width: 24px; height: 24px; margin-right: calc(100% - 24px); }
 .vute-app .vute-step-arrow { position: absolute; top: 0; right: -5px; margin: 0; }
}
@media print {
}

/* Pro C — Moderne v3: presentation limited to the player banner.
   Container queries also cover narrow WordPress theme columns. */
.vute-app { container-type: inline-size; container-name: vute-player; }
.vute-app .vute-app-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 40px;
  min-height: 360px;
  padding: 40px 55px;
  border: 0;
  background: linear-gradient(to bottom, #103650, #0a2338);
}
.vute-app .vute-app-hero::before,
.vute-app .vute-app-hero::after,
.vute-app .vute-app-hero h2::after { content: none; }
.vute-app .vute-hero-copy { min-width: 0; }
.vute-app .vute-app-kicker {
  display: block;
  min-height: 0;
  padding: 0;
  color: #2fd6d8;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.4;
}
.vute-app .vute-hero-rule {
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 10px;
  background: #ff914d;
}
.vute-app .vute-app-hero h2 {
  max-width: none;
  margin: 20px 0 0;
  color: #fff !important;
  font-size: clamp(28px, 4.815vw, 52px);
  font-size: clamp(28px, 4.815cqi, 52px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.vute-app .vute-app-hero h2 > span { display: block; }
.vute-app .vute-app-hero p {
  max-width: none;
  margin: 18px 0 0;
  color: #c9d8e4 !important;
  font-size: 21px;
  line-height: 1.5;
}
.vute-app .vute-hero-logo {
  display: block;
  width: 360px;
  height: 360px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}
@media (min-width: 641px) and (max-width: 900px) {
  .vute-app .vute-app-hero { grid-template-columns: minmax(0, 1fr) 315px; gap: 16px; padding-inline: 24px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .vute-app .vute-hero-logo { width: 315px; height: 315px; }
}
@media (max-width: 640px) {
  .vute-app .vute-app-hero {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 8px;
    min-height: 220px;
    padding: 24px 12px;
  }
  .vute-app .vute-app-kicker { font-size: 15px; }
  .vute-app .vute-app-hero h2 {
    margin-top: 16px;
    font-size: clamp(14px, 5.3vw, 30px);
  }
  .vute-app .vute-app-hero p { margin-top: 12px; font-size: 14px; }
  .vute-app .vute-hero-logo { width: 100px; height: 100px; }
}

@container vute-player (min-width: 641px) and (max-width: 900px) {
  .vute-app .vute-app-hero { grid-template-columns: minmax(0, 1fr) 315px; gap: 16px; padding-inline: 24px; }
}
@container vute-player (min-width: 641px) and (max-width: 900px) {
  .vute-app .vute-hero-logo { width: 315px; height: 315px; }
}
@container vute-player (max-width: 640px) {
  .vute-app .vute-app-hero {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 8px;
    min-height: 220px;
    padding: 24px 12px;
  }
  .vute-app .vute-app-kicker { font-size: 15px; }
  .vute-app .vute-app-hero h2 {
    margin-top: 16px;
    font-size: clamp(14px, 5.3cqi, 30px);
  }
  .vute-app .vute-app-hero p { margin-top: 12px; font-size: 14px; }
  .vute-app .vute-hero-logo { width: 100px; height: 100px; }
}

/* Profile level help remains next to the selector and preserves the current form. */
.vute-app .vute-levels-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 4px 0 8px 8px; padding: 8px 14px;
  border: 2px solid #39d3d5; border-radius: 8px;
  background: #123650; color: #fff; font-weight: 800; text-decoration: none;
}
.vute-app .vute-levels-link:hover { background: #1b4c65; color: #fff; }
.vute-app .vute-levels-link:focus-visible { outline: 3px solid #ff914d; outline-offset: 3px; }