/* styles */
:root {
  /* contourner bulma */
  --bulma-family-primary: 'Uniform Rounded', sans-serif;
  --bulma-family-secondary: 'Uniform Rounded Condensed', sans-serif;
  --bulma-body-background-color: #DFF2FF;
  
  /* couleurs des gradients */
  --gradient-pink-start: #FF49CF;
  --gradient-pink-end: #FF00BB;
  --gradient-blue-start: #4998FF;
  --gradient-blue-end: #2986FF;
  --gradient-orange-start: #FFB049;
  --gradient-orange-end: #FFA229;
  --gradient-purple-start: #8349FF;
  --gradient-purple-end: #6D29FF;
  --gradient-green-start: #00C735;
  --gradient-green-end: #00611A;
  --gradient-yellow-start: #FFD549;
  --gradient-yellow-end: #FFC229;
  --card-bg-start: #F1F1F1;
  --card-bg-end: #E0E0E0;
  
  /* footer */
  --footer-gradient-blue-start: #1F5BAA;
  --footer-gradient-blue-end: #1A4C8E;
  --footer-gradient-overlay-1-start: #A4A4A4;
  --footer-gradient-overlay-1-end: #949494;
  --footer-gradient-overlay-2-start: #BFBFBF;
  --footer-gradient-overlay-2-end: #BFBFBF;

  /* header dimensions */
  --header-height: 90px;
}

/* s'assurer que les polices sont partout */
body {
  font-family: var(--bulma-family-primary);
  padding-top: var(--header-height); /* Spacer for fixed header */
}

.is-page-yellow {
  --bulma-body-background-color: #FFF1DF !important;
  background-color: var(--bulma-body-background-color) !important;
}

.is-family-primary {
  font-family: var(--bulma-family-primary) !important;
}

.is-family-secondary {
  font-family: var(--bulma-family-secondary) !important;
}

/* utilitaires */

/* force l'element a prendre toute la largeur */
.is-fullwidth {
  width: 100% !important;
}

/* uniform rounded */
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded';
  src: url('../fonts/Uniform_Rounded_Ultra.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
}

/* condensed */
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Condensed';
  src: url('../fonts/Uniform_Rounded_Condensed_Ultra.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
}

/* extra condensed */
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Uniform Rounded Extra Condensed';
  src: url('../fonts/Uniform_Rounded_ExtraCondensed_Ultra.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
}

/* entete */
.scandeck-header {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* logo */
.header-logo {
  min-width: 150px;
}

.box-3d-logo {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-width: 6px;
  height: 80px;
}

.item-search .control .icon {
  height: auto !important;
  width: 3.5rem !important;
  position: absolute !important;
  top: 1px !important;
  bottom: 6px !important;
  left: 0 !important;
  pointer-events: none;
  z-index: 4;
}

/* style champ recherche 3d */
.input-3d {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-bottom-width: 6px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.1s ease;
  height: auto !important;
  padding-top: 18.5px !important;
  padding-bottom: 18.5px !important;
  width: 100%;
  padding-left: 3.5rem !important;
}

.input-3d:focus {
  border-color: rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
}

.input-3d::placeholder {
  color: #aaa;
}

/* bouton 3d de base */
.button.button-3d {
  border-color: rgba(0, 0, 0, 0.3);
  border-bottom-width: 6px;
  transition: all 0.1s ease;
}

.button.button-3d:hover {
  color: white !important;
  opacity: 0.9;
  border-bottom-width: 6px;
}

.button.button-3d:active, 
.button.button-3d.is-active {
  border-bottom-width: 2px !important;
  margin-bottom: 4px;
  transform: translateY(4px);
  box-shadow: none;
}

.is-gradient-pink {
  background: linear-gradient(var(--gradient-pink-start) 0%, var(--gradient-pink-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.is-gradient-blue {
  background: linear-gradient(var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.is-gradient-orange {
  background: linear-gradient(var(--gradient-orange-start) 0%, var(--gradient-orange-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.is-gradient-purple {
  background: linear-gradient(180deg, var(--gradient-purple-start) 0%, var(--gradient-purple-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.is-gradient-green {
  background: linear-gradient(180deg, var(--gradient-green-start) 0%, var(--gradient-green-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.is-gradient-yellow {
  background: linear-gradient(180deg, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.action-card {
  background: linear-gradient(180deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
  border: 2px solid #2c2c2c;
  border-top-width: 4px;
  position: relative;
}

.card-decoration-pokeball {
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 55px;
  height: 55px;
}

.action-card-title {
  color: #00264f;
  font-size: 3.5rem !important;
  line-height: 0.9 !important;
}

.search-rounded {
  border-radius: 500px !important;
  border: 2px solid rgba(0,0,0,0.2) !important;
  box-shadow: none !important;
}

/* contour du texte */
.has-text-stroke {
  -webkit-text-stroke: 5px rgba(0, 0, 0, 0.4);
  paint-order: stroke fill;
}

.has-text-stroke iconify-icon {
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 5px;
  paint-order: stroke fill;
  fill: currentColor;
}

.footer-custom {
  background: 
    linear-gradient(180deg, var(--footer-gradient-overlay-1-start) 0%, var(--footer-gradient-overlay-1-end) 100%),
    linear-gradient(90deg, var(--footer-gradient-overlay-2-start) 0%, var(--footer-gradient-overlay-2-end) 100%),
    linear-gradient(180deg, var(--footer-gradient-blue-start) 0%, var(--footer-gradient-blue-end) 100%);
  background-blend-mode: overlay, overlay, normal;
  padding: 3rem 1.5rem;
  color: white;
}

.footer-link {
  color: white;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-link:hover {
  color: white;
  opacity: 1;
}

.social-icon {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}


@media screen and (min-width: 1024px) {
  .button.is-large {
    height: auto !important;
    padding-top: 18.5px !important;
    padding-bottom: 18.5px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* reduire logo mobile tablette */
  .header-logo img {
    max-height: 50px !important;
  }
  
  /* reduire boutons mobile tablette meme avec is-large */
  .button.is-large {
    font-size: 1rem !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    border-bottom-width: 4px !important;
  }
  
  .button.button-3d:hover {
    border-bottom-width: 6px !important;
  }

  .button.button-3d:active, 
  .button.button-3d.is-active {
    border-bottom-width: 2px !important;
    margin-bottom: 2px !important;
    transform: translateY(2px) !important;
  }
  
  .header-logo {
    padding: 0.5rem !important;
  }
  .item-search {
    padding: 0.5rem !important;
  }
  
  .input-3d {
    font-size: 0.9rem !important;
  }
  
  .action-card-title {
    font-size: 2.5rem !important;
  }
}


/* hero */
.hero-scandeck {
  /* background-color: #dff2ff; supprimé, géré par var */
  min-height: 600px;
  overflow: hidden;
}

/* pokemon du fond */
.pokemon-left {
  position: absolute; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%) translate(-10%, 0) scaleX(-1); 
  max-height: 480px;
  width: auto;
  max-width: 100%;
  z-index: 2; 
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  animation: float-up 6s ease-in-out infinite;
}

.pokemon-left-bg {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%) scale(1.4) scaleX(-1);
  max-height: 550px;
  width: auto;
  max-width: 100%;
  z-index: 1;
  filter: grayscale(100%) opacity(0.8);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: float-up 6s ease-in-out infinite;
}

.pokemon-right {
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%) translate(30%, 0); 
  max-height: 450px;
  width: auto;
  max-width: 100%;
  z-index: 2; 
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  animation: float-down 12s ease-in-out infinite;
}

.pokemon-right-bg {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%) scale(1.4);
  max-height: 450px;
  width: auto;
  max-width: 100%;
  z-index: 1;
  filter: grayscale(100%) opacity(0.8);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: float-down 12s ease-in-out infinite;
}

@keyframes float-up {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: -20px; }
}

@keyframes float-down {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: 20px; }
}

/* ecran de demarrage */
.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.start-screen.is-fading-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.button-mute {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 3.5rem;
  height: 3.5rem;
  border: 4px solid #000;
  box-shadow: 4px 4px 0px #000;
  transition: all 0.1s ease;
  background-color: #fff;
}

.button-mute:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000;
  border-color: #000;
}

.button-mute:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000;
  border-color: #000;
}

/* extras carte pokemon */
.is-radius-large {
  border-radius: 25px !important;
}

.is-radius-medium {
  border-radius: 15px !important;
}

.is-radius-pill {
  border-radius: 9999px !important;
}

.has-text-stroke-black {
  -webkit-text-stroke: 2px #000000;
  paint-order: stroke fill;
}

.has-border-dark {
  border: 2px solid rgba(0,0,0,0.25) !important;
}

.has-border-light {
  border: 2px solid rgba(0,0,0,0.14) !important;
}

/* css minimal carte pokemon */
.type-badge-stroke {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.4);
  paint-order: stroke fill;
}

/* contour noir solide pour badges clairs */
.type-incolore.type-badge-stroke,
.type-normal.type-badge-stroke,
.type-air.type-badge-stroke {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.02);
}

/* dégradés types pokemon */
.type-plante {
  background: linear-gradient(180deg, #00c735 0%, #00611a 100%);
}

.type-feu {
  background: linear-gradient(180deg, #c71b00 0%, #610d00 100%);
}

.type-eau {
  background: linear-gradient(180deg, #0085c7 0%, #004161 100%);
}

.type-electrique {
  background: linear-gradient(180deg, #ffb915 0%, #ae7a00 100%);
}

.type-psy {
  background: linear-gradient(180deg, #c700c4 0%, #610060 100%);
}

.type-combat {
  background: linear-gradient(180deg, #c74600 0%, #612200 100%);
}

.type-obscurite {
  background: linear-gradient(180deg, #4a4a4a 0%, #171717 100%);
}

.type-metal {
  background: linear-gradient(180deg, #8f8f8f 0%, #5c5c5c 100%);
}

.type-incolore {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
}

.type-dragon {
  background: linear-gradient(180deg, #c42c36 0%, #711a1f 100%);
}

.type-poison {
  background: linear-gradient(180deg, #8f00c7 0%, #460061 100%);
}

.type-normal {
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%),
    linear-gradient(180deg, rgba(255, 185, 21, 1) 0%, rgba(174, 122, 0, 1) 100%);
}

.type-air {
  background: linear-gradient(180deg, #b3e6ff 0%, #4dc4ff 100%);
}

.type-fee {
  background: linear-gradient(180deg, #ff1fdd 0%, #b8009c 100%);
}

.type-air {
  background: linear-gradient(180deg, #b3e6ff 0%, #4dc4ff 100%);
}

/* animations modale */
.modal.is-active .modal-background {
  animation: fadeIn 0.3s ease-out;
}

.modal.is-active .modal-content {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.is-closing .modal-background {
  animation: fadeOut 0.3s ease-out;
}

.modal.is-closing .modal-content {
  animation: slideDown 0.3s cubic-bezier(0.7, 0, 0.84, 0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
}