/* ============================================================
   K FÉE DES JEUX 2026
   ============================================================ */


/* ── RESET OVERFLOW ───────────────────────────────────────── */
html, body {
  overflow-x: hidden;
}

/* ── Loader ─────────────────────────────────────────────── */
.kfdj-loader {
  display: flex;
  justify-content: center;
  padding: 100px 0;
}
.kfdj-spinner {
  width: 100px;
  height: 100px;
  border: 5px solid var(--color-light);
  border-top-color: var(--color);
  border-radius: 50%;
  animation: spin .80s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── FONTE & TYPOGRAPHIE ───────────────────────────────────── */
html {
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  color: var(--color-text);
  min-height: 100%;
  background-color: var(--color-light);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url("../img/back.webp") center center / cover no-repeat;
}

hr {
	border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color), rgba(0, 0, 0, 0));
}

h1, h3 {
  font-weight: 900;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  text-align: center;
  text-shadow:0 0 1.5rem #000000;
}

h1.transparent, h3.transparent {
  font-weight: 300;
}

h1 {
  margin-block-start: 0.5em;
  font-size: 3em;
  font-weight: 300;
}

h1 strong {
	font-weight: 600;
}

h6 {
  font-weight: 600;
}

.flow-text {
  font-weight: 300;
}

.caps {
  font-variant: small-caps;
}

sup {
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: calc(0.5em + 4px);
  top: calc(-0.83em + 3.32px);
}

p.tags {
    line-height: 2.5em;
}

/* ── NAVIGATION ───────────────────────────────────────────── */
nav,
footer {
  background-color: var(--color) !important;
}

nav {
  height: 80px;
}

nav ul {
  margin-right: 10px;
}

nav ul li,
nav ul li a,
.brand-logo {
  line-height: 80px;
  font-size: 1.2rem;
}

nav i.material-icons {
  height: 80px;
  line-height: 80px;
  font-size: 1.2rem;
}

nav ul li i.material-icons {
  margin-left: 0;
}

nav .sidenav-trigger i {
  line-height: 80px !important;
}

nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
	height: 80px !important;
	line-height: 80px !important;
}

.brand-logo svg {
  margin-top: 5px;
  margin-left: 12px;
}

@media only screen and (max-width: 1400px) {
  .hidemin {
    display: none !important;
  }
}

nav .sidenav-trigger {
	margin: 0;
}

/* gestion du dropdown de navigation*/
#dropdown_nav {
  top: 80px !important;
  width: auto !important; /* Force l'adaptation à la largeur du contenu */
  min-width: max-content !important;
  border-radius: 0 0 1rem 1rem;
  background-color: var(--color);
}

/* Empêcher le texte de se couper ou d'aller à la ligne */
#dropdown_nav li {
  min-width: max-content;
  
}

#dropdown_nav li:hover {
  background-color: transparent;
}

#dropdown_nav li > a {
  white-space: nowrap; /* Garde le texte sur une seule ligne */
  padding: 1rem;  /* Ajustez l'espace interne à votre guise */
  color: white;
}

/* Arrondir le lien du dernier élément pour épouser la forme du bloc */
#dropdown_nav li:last-child > a {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* ── BOUTONS ──────────────────────────────────────────────── */
.btn,
.btn-large,
.btn-small, 
.btn-floating {
  background-color: var(--color-marron);
  height:auto !important;
}

.btn:hover,
.btn-large:hover,
.btn-small:hover, 
.btn-floating:hover {
  background-color: var(--color-marron-light);
}

.btn:focus,
.btn-large:focus,
.btn-small:focus, 
.btn-floating:focus {
  background-color: var(--color-marron);
}

.btn,
.btn-large,
.btn-flat,
.btn-cta {
  padding: 1rem;
  height: auto !important;
  line-height: 1rem !important;
  border-radius: 0.5rem;
}

.btn-cta {
  background: linear-gradient(145deg, rgba(255, 145, 0, 1) 0%, rgba(255, 234, 0, 1) 100%) !important;
  color: #000000;
  font-weight: bold;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.btn-cta:hover {
  background: linear-gradient(145deg, rgba(255, 234, 0, 1) 0%, rgba(255, 145, 0, 1) 100%) !important;
  transform:translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-cta:active{
	transform:scale(.95);
}

.guest-btn:hover {
  background-color: var(--color-light) !important;
  color: var(--color) !important;
}

.guest-btn:focus,
.guest-btn:active {
  background-color: var(--color) !important;
}

.sidenav li > a.cta {
	height: 48px !important;
	color: #000000;
	background: linear-gradient(145deg, rgba(255, 145, 0, 1) 0%, rgba(255, 234, 0, 1) 100%);
	border-radius: 0.5rem;
	margin-left: 16px;
	margin-right: 16px;
	padding-left: 16px;
	line-height: 48px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
              0 3px 1px -2px rgba(0,0,0,.12),
              0 1px 5px 0 rgba(0,0,0,.2);
}

.sidenav li > a.cta:hover {
  background: linear-gradient(145deg, rgba(255, 234, 0, 1) 0%, rgba(255, 145, 0, 1) 100%);
}

/* ── BTN-FLOATING — protection contre les règles globales ── */
.btn-floating,
.btn-floating.btn-large,
.btn-floating.btn-small {
  border-radius: 50% !important;
  padding: 0 !important;
  height: 40px !important;
  width: 40px !important;
  line-height: 40px !important;
}

.btn-floating.btn-large {
  height: 56px !important;
  width: 56px !important;
  line-height: 56px !important;
}

.btn-floating.btn-small {
  height: 32px !important;
  width: 32px !important;
  line-height: 32px !important;
}

.btn-floating i {
  line-height: inherit !important;
}

button[disabled], a[disabled] {
	background: transparent;
    background-color: #DFDFDF;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #9F9F9F;
}

.input-field > label.active {
	color: var(--color-form-focus) !important;
}


/* ── BOUTON CTA ────────────────────────────────── */
nav a.cta {
  color: #000000;
  background: linear-gradient(145deg, rgba(255, 145, 0, 1) 0%, rgba(255, 234, 0, 1) 100%);
  border-radius: 0.5rem;
  margin: 15px 0;
  line-height: 50px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
              0 3px 1px -2px rgba(0,0,0,.12),
              0 1px 5px 0 rgba(0,0,0,.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

nav a.cta:hover {
  background: linear-gradient(145deg, rgba(255, 234, 0, 1) 0%, rgba(255, 145, 0, 1) 100%);
  transform:translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}



/* ── COULEURS ──────────────────────────────────────────── */

.vert {
  background-color: var(--color-vert) !important;
}
.btn.vert:focus, .btn.vert:hover, .btn-large.vert:hover {
  background-color: var(--color-vert-light) !important;
}
.vert-text {
  color: var(--color-vert) !important;
}

.bleu, .bleu.btn-flat {
  background-color: var(--color-bleu) !important;
}
.btn.bleu:focus, .btn.bleu:hover, .btn-large.bleu:hover {
  background-color: var(--color-bleu-light) !important;
}
.bleu-text {
  color: var(--color-bleu) !important;
}

.rose, .rose.btn-flat {
  background-color: var(--color-rose) !important;
}
.btn.rose:focus, .btn.rose:hover, .btn-large.rose:hover {
  background-color: var(--color-rose-light) !important;
}
.rose-text {
  color: var(--color-rose) !important;
}

.marron, .marron.btn-flat {
  background-color: var(--color-marron) !important;
}
.btn.marron:focus, .btn.marron:hover, .btn-large.marron:hover {
  background-color: var(--color-marron-light) !important;
}
.marron-text {
  color: var(--color-marron) !important;
}

table.striped > tbody > tr:nth-child(odd) {
  background-color: rgba(200, 200, 200, 0.5);
}

.gris, .gris.btn-flat {
  background-color: #666 !important;
}

output {
	background-color: var(--color-form);
	color: white;
	padding: 0.5rem;
	border-radius: 0.85rem;
}

input:required::after {
	content: "*";
}

/* ── CARDS ────────────────────────────────────────────────── */
.card,
.card-panel {
  border-radius: 1rem;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
}

.card.archive, .card-panel.archive {
	background-color: rgba(96, 96, 96, 0.9);
	color: white;
}

.card.coeur, .card-panel.coeur {
  background-color: rgba(255, 210, 210, 0.9);
}

.archive .card-content .card-title a {
	color: white !important;
}

.card .card-action {
  border: none;
  background-color: transparent;
  border-radius: 0 0 1rem 1rem;
}

.card .card-image,
.card .card-image img            { border-radius: 1rem 1rem 0 0; }
.card .card-image:last-child,
.card .card-image:last-child img { border-radius: 1rem; }
.card .card-content:last-child   { border-radius: 0 0 1rem 1rem; }
.card .card-reveal               { border-radius: 1rem; }

.card.horizontal                 { border-radius: 1rem; }
.card.horizontal .card-image,
.card.horizontal .card-image img { border-radius: 1rem 0 0 1rem; }
.card.horizontal .card-stacked   { border-radius: 0 1rem 1rem 0; }
.card.sticky-action .card-action { border-radius: 0 0 1rem 1rem; }

.card-title {
  font-size: 1.2rem !important;
  font-weight: bold !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.card-panel a {
    color: var(--color-marron-dark);
	/* text-decoration: underline; */
}

.card-panel a:hover {
    color: var(--color-marron-light);
	/* text-decoration: underline; */
}

.card-panel a.title,
.card-title a {
  color: var(--color-text);
}

.card-panel a.btn {
  color: white;
}

.card-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  /* object-position: top center; */
}

.card-content strong  {
	color: var(--color-marron);
	text-transform: uppercase;
}

strong.upper  {
	color: var(--color-marron);
	text-transform: uppercase;
}

.card-panel.lmdlc strong  {
	color: var(--color-marron);
	text-transform: uppercase;
}

.full-img {
  height: 100%;
  max-height: 100% !important;
}

.full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hover (compatible AOS : placer data-aos sur un div parent du .hoverable) */
.hoverable {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.hoverable:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Heart */
.pulsingheart {
  position: absolute;
  top: 20px;
  right: 20px;
  animation: pulse 1s infinite;
}

#pulsingheart { 
  position: relative; 
  width: 60px; 
  height: 55px;
} 

#pulsingheart:before, #pulsingheart:after { 
  position: absolute; 
  content: ""; 
  left: 25px; 
  top: 0; 
  width: 25px; 
  height: 40px; 
  background: #aa0000; 
  border-radius: 25px 25px 0 0; 
  transform: rotate(-45deg);  
  transform-origin: 0 100%;
  animation:pulsecolor 1s infinite;
} 

#pulsingheart:after { 
  left: 0; 
  transform: rotate(45deg); 
  transform-origin :100% 100%;
  animation:pulsecolor 1s infinite;
}

@keyframes pulse {
	10% {transform: scale(1.1)}
}

@keyframes pulsecolor {
  10% {background: #dd0000}
}

/* ── MODALES ──────────────────────────────────────────────── */
.modal {
  border-radius: 1rem;
  overflow: hidden; /* re-applicable sans footer : clips les coins proprement */
}

.modal .modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

/* ── GRILLE JEUX ──────────────────────────────────────────── */
/* Grid sur .row.games-grid uniquement — les .row imbriquées
   dans les card-action ne sont pas affectées               */
.row.games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
}

@media (min-width: 600px) {
  .row.games-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .row.games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hauteur égale : game-card en flex, card s'étire */
.row.games-grid > .game-card {
  display: flex;
}

.row.games-grid > .game-card .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.game-card .card .card-content { flex: 1; padding: 1em;}
.game-card .card .card-action  { padding: 1em; }

.larg_max {
  grid-column: 1 / -1; /* S'étend de la première à la dernière colonne */
}

.jaune {
  background-color: rgba(255, 255, 125, 0.9);
}

/* ── SLIDER ───────────────────────────────────────────────── */
.slider,
.slider .slides,
.slider .slides li,
.slider .slides li img,
.slider .slides li .caption {
  /*
  border-radius: 1rem;
  */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  
}

.slider .slides li .caption {
  top: 30%;
}

.slider .indicators .indicator-item {
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
              0 3px 1px -2px rgba(0,0,0,.12),
              0 1px 5px 0 rgba(0,0,0,.2);
}

.slider .indicators .indicator-item.active {
  background-color: var(--color) !important;
}

@media (max-width: 600px) {
  .slider {
    height: 250px;
  }
}

.slider .slides {
    background-color: var(--color-light);
}

/* ── COLLAPSIBLE ───────────────────────────────────────────────── */
.collapsible {
		border: none !important;
		box-shadow: none !important;
		background: transparent;
	}

	.collapsible li {
		backdrop-filter: blur(15px) saturate(180%);
		-webkit-backdrop-filter: blur(15px) saturate(180%);
		background: rgba(255,255,255,.95);
		border-radius: 1rem;
		overflow: hidden;
	}
	
	.collapsible li.archive {
		background-color: rgba(96, 96, 96, 0.9);
		color: white;
	}

	.collapsible-header,
	.collapsible-body {
		background: transparent;
	}

	.keyboard-focused .collapsible-header:focus {
		background-color: transparent;
	}

	.collapsible li {
		margin-bottom: .75rem;
		border-radius: 1rem;
		overflow: hidden;
		border: none;
	}

	.collapsible-header {
		border: none;
		border-radius: 0;
		transition: background .3s ease;
	}

	.collapsible-body {
		border: none !important;
		border-radius: 0;
		
		padding: 1rem;
		padding-top: 0;
	}

	.chips-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.filter-chip {
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.filter-chip:hover {
		background: var(--color) !important;
	}

	.filter-chip.active {
		background: var(--color-dark) !important;
		color: white;
	}

	.chip.selected {
		background: var(--color);
		color: var(--color-text) !important;
	}
	
	#switchcat {
		cursor: pointer;
	}
	
	#catplus {
		transition: all 0.2s ease;
	}
	
	#catplus.visible {
		display: inherit;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	
	#catplus.hidden {
		display: none;
	}
	

/* ── HERO ────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 400px;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  display: block;
}

.hero h1, .hero h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  text-align: center;
}

/* ── DIVERS ───────────────────────────────────────────────── */
.blur {
	filter: blur(0.4rem);
}

.scroll {
	overflow: auto;
}

.pagination li {
	border-radius: 0.5rem;
	padding: 0.5rem;
	margin: 0.5rem;
	height: auto;
	line-height: normal;
	font-weight: 600;
	backdrop-filter: blur(15px) saturate(180%);
	-webkit-backdrop-filter: blur(15px) saturate(180%);
	background-color: rgba(255, 255, 255, 0.9);
}

.chip {
  background-color: var(--color-gris);
  color: white !important;
  margin: 0px;
  height: auto !important;
  line-height: 24px !important;
  text-transform: uppercase;
}

a.chip {
  color: white !important;
}

.transparent {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-radius: 1rem;
  padding: 0.5rem;
}

.footer-copyright .container .row {
  margin-top: 10px;
  margin-bottom: 10px;
}

[data-icon] {
  --mask-icon-size: 2rem;
  --mask-icon-color: white;
  display: inline-grid;
  width: var(--mask-icon-size);
  height: var(--mask-icon-size);
  background-color: var(--mask-icon-color);
  mask: var(--mask-icon-svg) no-repeat center;
  mask-size: contain;
}

[data-icon="facebook"]  { --mask-icon-svg: url("../img/facebook.svg"); }
[data-icon="instagram"] { --mask-icon-svg: url("../img/instagram.svg"); }
[data-icon="discord"]   { --mask-icon-svg: url("../img/discord.svg"); }

/* affichage des galleries dans les notes */

.note-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.note-gallery a {
    display: block;
}

.note-gallery img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: .5rem;
    transition: transform .2s;
    cursor: zoom-in;
}

.note-gallery img:hover {
    transform: scale(1.05);
}

.autocomplete-content {
  z-index: 9999 !important;
}

.material-icons.local {
  color: #558b2f;
}