/* =========================================================
   GLOBAL STYLESHEET
   Portee: base UI + utilitaires + composants transverses
   ========================================================= */

/* FONTS */
@font-face {
  font-family: "Hanson";
  src: url("../font/Hanson/Hanson-Bold-cqN2wWQ.otf");
}

@font-face {
  font-family: "Outfit";
  src: url("../font/Outfit/Outfit-VariableFont_wght-m9E2Ofk.woff2") format("woff2-variations"),
    url("../font/Outfit/Outfit-VariableFont_wght-m9E2Ofk.woff2") format("woff2");
  font-weight: 100 900; /* Indique la plage de graisses disponible */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MC";
  src: url("../font/Minecraft/MinecraftStandard-SpIsq1y.otf") format("opentype");
}

@font-face {
  font-family: "MC Bold";
  src: url("../font/Minecraft/MinecraftStandardBold-8j6kgDC.otf") format("opentype");
}

/* HIDE SCROLLBAR */
body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */


/* BASE RESET & TYPOGRAPHY */
html,
body {
  --res: calc(0.01 * 10vmin);
  scroll-behavior: smooth;
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  min-height: 100dvh;
}

/* Empêche le scroll sur le body quand la modal est active */
body.modal-open {
    height: 100vh;
    overflow-y: hidden;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  --responsive: calc(
    (var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))
  ); /* Ranges from 421px to 1199px */
}

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
  color: inherit;
}

/* Preserve Symfony Web Profiler toolbar behavior from app-wide resets. */
.sf-toolbarreset *,
[id^="sfwdt"] * {
  margin: revert;
  padding: revert;
  list-style: revert;
  list-style-type: revert;
  text-decoration: revert;
}

.sf-toolbarreset a,
.sf-toolbarreset button,
[id^="sfwdt"] a,
[id^="sfwdt"] button {
  border: revert;
  outline: revert;
  background: revert;
  color: revert;
  cursor: pointer;
}

/* Neutralise l'anneau bleu Bootstrap et harmonise les controles natifs */
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: 12px !important;
}

.form-check-input {
  border-radius: 6px !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible,
input:not([type="checkbox"]):not([type="radio"]):focus,
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

.form-control:focus,
.form-select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  border-color: #b8bec7 !important;
}

h1, h2, h3, strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
    font-synthesis: none;
}


/* GLOBAL LAYOUT & UTILS */
.pagecontainer__root {
  display: flex;
  flex-direction: column;
}

.container-fluid {
  padding: 0;
}

.custom-container {
      margin: 10vw auto;
}

.rounded-20 {
  border-radius: var(--border-radius-20);
}
.rounded-10 {
  border-radius: var(--border-radius-10);
}

.display-xds {
  font-size: calc(1.625rem + 13.5vw);
}

.outer {
  padding: var(--padding);
  border-radius: var(--outer-radius);
}

.inner {
  border-radius: var(--inner-radius);
}

.shadow-xds {
    box-shadow: var(--xds-shadow);
}

.shadow-xds-mini {
    box-shadow: var(--xds-shadow-mini);
}

.hover-xds {
    transition: all 0.5s ease !important;
    transform: scale(1);
}

.hover-xds:hover {
    transform: scale(1.015);
}

.hanson {
  font-family: "Hanson";
}

.outfit-regular {
  font-family: "Outfit";
  font-weight: 400;
}

.outfit-medium {
  font-family: "Outfit";
  font-weight: 500;
}

.outfit-bold {
  font-family: "Outfit";
  font-weight: 700;
}

.modal-size {
  min-width: 2000px;
}

.modal-size-1 {
  min-width: 1400px;
}


/* COLOR HELPERS */

.text-fixed-white {
  color: #ffffff !important;
}

/* BOOTSTRAP OVERRIDES */
body {
  background-color: var(--my-white-bg) !important;
}

[data-bs-theme="dark"] body {
  background-color: var(--my-dark-bg) !important;
}

.bg-white {
  background-color: var(--my-white-bg) !important;
}
[data-bs-theme="dark"] .bg-white {
  background-color: var(--my-dark-bg) !important;
}

.text-white {
  color: var(--my-white-text) !important;
}
[data-bs-theme="dark"] .text-white {
  color: var(--my-dark-text) !important;
}

.icon-dynamique svg {
  color: var(--my-white-text) !important;
}
[data-bs-theme="dark"] .icon-dynamique svg {
  color: var(--my-dark-text) !important;
}

.bg-light {
  background-color: var(--my-white-bg-subtle) !important;
}
[data-bs-theme="dark"] .bg-light {
  background-color: var(--my-dark-bg-subtle) !important;
}

.border {
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}
[data-bs-theme="dark"] .border {
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.modal-content {
    background-color: var(--my-white-bg-subtle) !important;
}
[data-bs-theme="dark"] .modal-content {
     background-color: var(--my-dark-bg-subtle) !important;
}

/* Transitions light/dark */

body,
.bg-white,
.bg-light,
.text-white,
.card,
.navbar,
.container {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Boutons Bootstrap */
.btn {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Boutons globaux */
.btn-twitch {
  background-color: #9146ff;
  color: #fff;
}

.btn-twitch:hover {
  background-color: #772ce8;
  color: #fff;
}

.btn-check:checked + .btn-twitch,
.btn-twitch.active,
.btn-twitch.show,
.btn-twitch:first-child:active,
:not(.btn-check) + .btn-twitch:active,
.btn-twitch:focus {
  background-color: #772ce8 !important;
  border-color: transparent !important;
  box-shadow: none;
  color: #fff;
}

.btn:focus,
.btn:active:focus,
.btn-close:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn:active,
.btn.active {
    box-shadow: none !important;
    transform: none !important;
}

@media screen and (max-width: 768px) {
  .xds-big-text {
    font-size: calc(1.625rem + 2vw);
  }
}

/* THEME SWITCHER */
/* Container */
.theme-switcher-container {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Boutons principaux */
#theme-toggle-desktop, #theme-toggle-mobile {
  position: relative;
  z-index: 0;
  padding: 16px;
  overflow: hidden; /* Important for the moon slide */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle-desktop::before, #theme-toggle-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bs-body-bg);
  transition: background-color 0.3s;
  opacity: 0.3;
  z-index: -1;
}

.icon-wrapper {
  position: absolute;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  transition: transform 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-wrapper .icon {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.icon-wrapper .fa-sun {
  color: var(--bs-warning);
}
.icon-wrapper .fa-moon {
  color: var(--bs-primary);
}

html[data-bs-theme="dark"] #theme-toggle-desktop .icon-wrapper,
html[data-bs-theme="dark"] #theme-toggle-mobile .icon-wrapper {
  transform: translateY(-50%);
}

html:not([data-bs-theme="dark"]) #theme-toggle-desktop .icon-wrapper,
html:not([data-bs-theme="dark"]) #theme-toggle-mobile .icon-wrapper {
  transform: translateY(0);
}

/* Indicateur "Auto" */

#auto-indicator-container {
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0.75rem;
}

#auto-indicator-container:hover {
  z-index: 10;
}

#auto-indicator {
  position: absolute;
  right: 0;
  overflow: hidden;
  font-size: small;
  width: 0.25rem;
  height: 60%;
  border-radius: 0.25rem;
  background-color: var(--bs-gray-500);
  transition: width 0.3s ease-out, background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#auto-indicator-container:hover #auto-indicator {
  width: 100%;
}

.is-auto #auto-indicator {
  background-color: var(--bs-success);
}

.is-auto:hover #auto-indicator {
  background-color: var(--bs-success);
}

html[data-bs-theme="dark"] #theme-toggle-desktop .icon-wrapper i svg,
html[data-bs-theme="dark"] #theme-toggle-mobile .icon-wrapper i svg {
  color: white;
}

#auto-indicator-text {
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.1s;
  transition-delay: 0s;
  font-weight: bold;
  color: white;
}

#auto-indicator-container:hover #auto-indicator-text {
  opacity: 1;
  transition-delay: 0.2s;
}



/* ICONS */
.icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.icon svg {
    width: 20px;
    height: 20px;
}

.clear-input-icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
  user-select: none;
  line-height: 10px;
  z-index: 10;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}
.clear-input-icon:hover,
.clear-input-icon:focus {
  opacity: 1;
  outline: none;
}

/* PARALLAX */
.parallax-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100dvh;
}

.parallax-item:nth-of-type(1) h1 {
  font-family: "Hanson";
}


/* MODALS */

.modal-content {
  /*
  max-width: 95vw;
  max-height: 90vh;
  */
  overflow: hidden;
  border: none;
  border-radius: 20px;
}

.modal-btn {
  color: white;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.modal-header .btn-xds-close svg {
  width: 30px !important;
  height: 30px !important;
}

.modal-header .btn-xds-close {
    opacity: 0.5;
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin-top: calc(-.5 * var(--bs-modal-header-padding-y));
    margin-right: calc(-.5 * var(--bs-modal-header-padding-x));
    margin-bottom: calc(-.5 * var(--bs-modal-header-padding-y));
    margin-left: auto;
}

.modal-header .btn-xds-close:hover {
    opacity: 1;
}

.icon-modal svg {
  width: 25px !important;
  height: 25px !important;
}

/* FILTERS (mobile sticky) */

.mobile-filter-toggle,
.desktop-filter-toggle {
	position: sticky;
  bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
}

.mobile-filter-toggle.stuck,
.desktop-filter-toggle.stuck {
	bottom: 0;
	left: 0;
	right: 0;
}

.filter-border-collapsible {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 15px;
  background: rgba(235, 235, 235, 0.85);
  box-shadow: var(--xds-shadow-mini);
  backdrop-filter: blur(10px);
  margin-bottom: 15px;
}

[data-bs-theme="dark"] .filter-border-collapsible {
  background: rgba(12, 12, 12, 0.85);
}

.filters-content {
	max-height: 0;
	opacity: 0;
	width: 100%;
	overflow: hidden;
	transform: translateY(50px);
	transition: max-height 0.8s cubic-bezier(0.77, 0, 0.2, 1) 0s,
		opacity 0.4s ease 0.2s, transform 0.4s ease 0.5s;
}

/* Etat ouvert */
.filter-border-collapsible.open .filters-content {
	max-height: 600px;
	opacity: 1;
	transform: translateY(0);
	transition: max-height 0.6s cubic-bezier(0.77, 0, 0.2, 1) 0s,
		opacity 0.8s ease 0.3s, transform 0.6s ease 0.2s;
}


/* MARQUEE */
.box_alert_text {
  z-index: -2;
  position: absolute;
  -webkit-mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 2%,
    rgba(0, 0, 0, 1) 5% 95%,
    rgba(0, 0, 0, 0) 98%
  );
  mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 2%,
    rgba(0, 0, 0, 1) 5% 95%,
    rgba(0, 0, 0, 0) 98%
  );
}

.marquee {
  font-family: "Hanson";
  font-size: 11.4rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--marquee-stroke-color);
  letter-spacing: 2px;
  --marquee-stroke-color: var(--my-white-text);
  -webkit-text-stroke: 2px var(--marquee-stroke-color);
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}

@supports (-webkit-text-stroke: 1px black) {
  .marquee {
    color: transparent;
  }
}

[data-bs-theme="dark"] .marquee {
  --marquee-stroke-color: var(--my-dark-text);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ARTICLE CARD HELPERS */

.articles-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  grid-auto-flow: dense;
  justify-content: center;
}

.article-trigger {
  transition: transform 0.3s ease;
  height: -webkit-fill-available;
  margin: 0 auto;
}
.article-trigger:hover {
  transform: scale(0.99);
  transition: transform 0.3s ease;
}

.card-article-body {
  height: 100%;
}
.card-article-title {
  font-size: 1.25rem;
}
.card-article-text {
  font-size: 1rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  height: 100%;
}

.article-card__media {
  position: relative;
  flex: 0 0 150px;
  height: 150px;
  overflow: hidden;
}

.article-card__image,
.article-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.article-card__image {
  object-fit: cover;
  transition: transform 220ms ease;
}

.article-card__placeholder {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.48), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.42), transparent 24%),
    linear-gradient(135deg, rgba(126, 184, 230, 0.95), rgba(255, 128, 140, 0.82) 55%, rgba(255, 211, 128, 0.92));
}

.article-card:hover .article-card__image {
  transform: scale(1.04);
}

.article-card__meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

.article-card__tag {
  margin-left: auto;
}

@media (max-width: 767px) {
  .article-card {
    min-height: 225px;
  }

  .article-card__media {
    flex-basis: 85px;
    height: 85px;
  }

  .article-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* SHARED COMPONENTS */

.profile-share-btn-inline {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.65;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, color 0.28s ease;
}

.profile-share-btn-inline:hover,
.profile-share-btn-inline:focus-visible {
  transform: scale(1.1);
  opacity: 1;
}

.profile-share-btn-inline svg {
  width: 18px;
  height: 18px;
  transition: color 0.28s ease;
}

.profile-share-btn-inline.is-copied svg {
  color: #2ecc71 !important;
}

.profile-share-btn-inline::after {
  content: attr(data-share-feedback);
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #1f2937;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.profile-share-btn-inline.is-copied-feedback::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-background-fallback {
  background: linear-gradient(180deg, #dfe7f3 0%, #c8d5ea 45%, #b5c5df 100%);
}

[data-bs-theme="dark"] .video-background-fallback {
  background: linear-gradient(180deg, #1b202b 0%, #131925 45%, #0d1118 100%);
}