/* ==========================================================
   YGGDRASIL HOSTING - VITRINE V4 RESPONSIVE DYNAMIC
   Couche responsive : adapte les blocs à la taille navigateur.
   ========================================================== */

:root {
  --v4-vh: 1vh;
  --v4-safe-x: clamp(14px, 3vw, 36px);
  --v4-container-dynamic: min(1320px, calc(100vw - (var(--v4-safe-x) * 2)));
  --v4-section-gap: clamp(18px, 3vw, 42px);
  --v4-card-gap: clamp(14px, 2vw, 22px);
  --v4-card-min: clamp(230px, 24vw, 330px);
  --v4-card-media-ratio: 16 / 9;
}

/* Base container dynamique */
.v4-nav,
.v4-container,
.v4-footer {
  width: var(--v4-container-dynamic) !important;
}

.v4-container {
  padding-top: clamp(24px, 4vw, 66px) !important;
  padding-bottom: clamp(46px, 7vw, 105px) !important;
}

.v4-stack {
  gap: var(--v4-section-gap) !important;
}

/* Navbar : plus souple */
.v4-nav {
  display: grid !important;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.v4-brand {
  min-width: 0 !important;
}

.v4-brand span:last-child {
  white-space: nowrap;
}

.v4-links {
  justify-self: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.v4-links::-webkit-scrollbar {
  display: none;
}

.v4-actions {
  justify-self: end;
}

/* Hero dynamique */
.v4-hero-inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(clamp(280px, 30vw, 420px), 0.72fr) !important;
  gap: clamp(20px, 4vw, 58px) !important;
  padding: clamp(24px, 5vw, 70px) !important;
}

.v4-title {
  font-size: clamp(40px, 7vw, 96px) !important;
  max-width: min(920px, 100%) !important;
}

.v4-lead {
  font-size: clamp(16px, 1.45vw, 21px) !important;
  max-width: 68ch !important;
}

/* Cartes dynamiques */
.v4-grid,
.v4-grid-wide {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--v4-card-min)), 1fr)) !important;
  gap: var(--v4-card-gap) !important;
  align-items: stretch !important;
}

.v4-card {
  min-width: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.2vw, 26px) !important;
}

.v4-card h3 {
  font-size: clamp(21px, 2.1vw, 27px) !important;
}

.v4-card p {
  flex: 1;
}

.v4-card-actions {
  margin-top: auto !important;
  padding-top: 18px;
}

/* Images de cartes : plus de hauteur fixe */
.v4-card-media {
  min-height: unset !important;
  aspect-ratio: var(--v4-card-media-ratio) !important;
  width: calc(100% + clamp(36px, 4.4vw, 52px));
  margin: calc(clamp(18px, 2.2vw, 26px) * -1) calc(clamp(18px, 2.2vw, 26px) * -1) 20px !important;
  border-radius: var(--radius) var(--radius) 20px 20px !important;
}

.v4-config-game-preview {
  min-height: unset !important;
  aspect-ratio: 16 / 10 !important;
  width: 100%;
}

/* Résumé / aside */
.v4-aside-card {
  padding: clamp(20px, 2.4vw, 28px) !important;
}

.v4-status-row {
  min-width: 0;
}

.v4-status-row span,
.v4-status-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Boutons */
.v4-hero-actions,
.v4-card-actions,
.v4-actions {
  display: flex;
  flex-wrap: wrap;
}

.v4-btn {
  white-space: nowrap;
}

/* Page simple : vraie hauteur responsive */
.v4-page-simple {
  min-height: calc(var(--v4-vh) * 72) !important;
}

/* Très grand écran */
@media (min-width: 1500px) {
  :root {
    --v4-card-min: 300px;
  }

  .v4-container,
  .v4-nav,
  .v4-footer {
    width: min(1420px, calc(100vw - 72px)) !important;
  }

  .v4-title {
    font-size: clamp(62px, 6vw, 108px) !important;
  }
}

/* Laptop classique */
@media (max-width: 1180px) {
  :root {
    --v4-card-min: clamp(240px, 32vw, 310px);
  }

  .v4-nav {
    grid-template-columns: auto 1fr;
  }

  .v4-links {
    order: 3;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }

  .v4-actions {
    justify-self: end;
  }
}

/* Tablette */
@media (max-width: 980px) {
  :root {
    --v4-safe-x: clamp(12px, 3vw, 24px);
    --v4-card-min: min(100%, 300px);
  }

  .v4-nav {
    position: relative !important;
    top: auto !important;
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .v4-brand,
  .v4-actions,
  .v4-links {
    justify-self: stretch !important;
    justify-content: center !important;
  }

  .v4-hero-inner {
    grid-template-columns: 1fr !important;
  }

  .v4-aside-card {
    order: 2;
  }

  .v4-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .v4-section-title {
    font-size: clamp(30px, 7vw, 52px) !important;
  }

  .v4-card-media {
    aspect-ratio: 16 / 9 !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --v4-safe-x: 11px;
    --v4-section-gap: 24px;
    --v4-card-gap: 14px;
    --v4-card-min: 100%;
  }

  .v4-container {
    padding-top: 22px !important;
  }

  .v4-nav {
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .v4-brand {
    justify-content: center;
    font-size: 19px !important;
  }

  .v4-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .v4-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .v4-links a {
    text-align: center;
    padding: 11px 10px !important;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(120,210,255,.10);
  }

  .v4-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
  }

  .v4-hero {
    border-radius: 24px !important;
  }

  .v4-hero-inner {
    padding: 22px !important;
    gap: 22px !important;
  }

  .v4-title {
    font-size: clamp(38px, 12vw, 56px) !important;
    letter-spacing: -0.065em !important;
  }

  .v4-lead {
    font-size: 16px !important;
  }

  .v4-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .v4-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .v4-grid,
  .v4-grid-wide {
    grid-template-columns: 1fr !important;
  }

  .v4-card {
    border-radius: 22px !important;
  }

  .v4-card-media {
    aspect-ratio: 16 / 10 !important;
    border-radius: 22px 22px 18px 18px !important;
  }

  .v4-card-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .v4-status-row {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .v4-state {
    align-self: flex-start;
  }

  .v4-footer {
    flex-direction: column;
    text-align: center;
    border-radius: 20px !important;
  }
}

/* Petit mobile */
@media (max-width: 420px) {
  .v4-links {
    grid-template-columns: 1fr;
  }

  .v4-title {
    font-size: clamp(34px, 13vw, 48px) !important;
  }

  .v4-section-title {
    font-size: clamp(28px, 10vw, 40px) !important;
  }

  .v4-card-media {
    aspect-ratio: 4 / 3 !important;
  }
}

/* Mode navigateur très bas en hauteur */
@media (max-height: 720px) and (min-width: 981px) {
  .v4-nav {
    position: relative !important;
    top: auto !important;
  }

  .v4-container {
    padding-top: 28px !important;
  }

  .v4-hero-inner {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .v4-title {
    font-size: clamp(42px, 5.5vw, 74px) !important;
  }

  .v4-card-media {
    aspect-ratio: 16 / 8.5 !important;
  }
}