/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Modale "drawer" animée */
#menu-modal.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 6000;
  background: rgba(0,0,0,0.25);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.3s;
}
#menu-modal.modal.hidden {
  pointer-events: none;
  background: rgba(0,0,0,0); /* fade out du fond */
}

/* MODAL */

.menu-big-modal {
  height: 100%;
  aspect-ratio: 8 / 16;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  container-type: inline-size;

  /* Animation slide */
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.7,0,.3,1);
}
#menu-modal:not(.hidden) .menu-big-modal {
  transform: translateX(0);
}


.menu-modal-content {
  height: 100%;
  width: 100%;
  background: var(--color-popup);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: clamp(5px,5cqw,80px);;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.14);
  font-family: 'Nunito', Arial, sans-serif;
  animation: fade-in 0.0s ease-out;
}

.menu-modal-header {
  width: 100%;
  flex: 5%;
  display: flex;
  padding: 5px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-border);
}

.menu-modal-header-text {
  width: 100%;
  font-weight: bold;
  display: flex;
  color: var(--color-secondary);
  align-items: center;
  justify-content: space-between;
}

.menu-text {
  font-size: clamp(8px, 9cqw, 70px);
  margin-right: 8px;
}

.menu-modal-close-btn {
  width: clamp(20px, 9cqw, 50px);        /* Ou clamp(28px, 8cqw, 44px) si tu veux du responsive ! */
  height: clamp(20px, 9cqw, 50px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-close);
  border: none;
  border-radius: 7px;
  padding: 0;         /* Mets à zéro pour un carré parfait */
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 8px;   /* Garde la marge si tu veux séparer du titre */
}

.menu-modal-close-btn .modal-close {
  width: clamp(12px, 7cqw, 44px);
  height: clamp(12px, 7cqw, 44px);
  display: block;
  transition: transform 0.28s cubic-bezier(.62,.18,.21,.97);
}
.menu-modal-close-btn:hover .modal-close {
  transform: rotate(90deg);
}
.menu-modal-close-btn:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.menu-modal-body_1 {
  width: 100%;
  flex: 70%;
  padding: 5px;
  padding-bottom: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.menu-row-game {
  width: 100%;
  aspect-ratio: 60 / 9;
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.menu-row-game:hover {
  background: var(--color-primary-menu);  /* couleur au survol, à personnaliser */
}

.menu-row-game-icon {
  width: 33%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.menu-icons {
  width: 100%;
  object-fit: contain; /* ou cover, selon ce que tu veux */
  padding: 5px;;
}
#daily {
  width: 70%;
}
#infinite {
  width: 55%;
}
#lexicool {
  width: 90%;
}

.menu-row-game-text {
  width: 63%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.menu-game-text_1{
  color: var(--color-secondary);
  font-weight: 700;
  font-size: clamp(8px, 5.8cqw, 50px);
}
.menu-game-text_2{
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: clamp(5px, 3.8cqw, 50px);
}

.menu-row-infinite {
  width: 100%;
  aspect-ratio: 60 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}
.menu-row-infinite:hover {
  background: var(--color-primary-menu);  /* couleur au survol, à personnaliser */
}

.menu-row-infinite-icon {
  width: 33%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.menu-row-infinite-text {
  width: 63%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.menu-infinite-text_1{
  color: var(--color-secondary);
  font-weight: 700;
  font-size: clamp(8px, 5.8cqw, 50px);
}
.menu-infinite-text_2{
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: clamp(5px, 3.8cqw, 50px);
}

.menu-row-lexicool {
  width: 100%;
  aspect-ratio: 60 / 9;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
}
.menu-row-lexicool:hover {
  background: var(--color-primary-menu);  /* couleur au survol, à personnaliser */
}


.menu-row-lexicool-icon {
  width: 33%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.menu-row-lexicool-text {
  width: 63%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.menu-lexicool-text_1{
  color: var(--color-secondary);
  font-weight: 700;
  font-size: clamp(8px, 5.8cqw, 50px);
}
.menu-lexicool-text_2{
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: clamp(5px, 3.8cqw, 50px);
}


.custom-line {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--color-border);
  margin: 1em 0;
}

.menu-row-mode {
  width: 100%;
  aspect-ratio: 40 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.menu-row-mode-switch_block {
  width: 33%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.theme-switch-container {
  width: 100%;
  aspect-ratio: 25/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-card-bg, #e0e0e0);
  border-radius: 28px;
  box-shadow: 0 2px 8px #0001;
  padding: 0 3px;
}

.theme-switch input[type="radio"] {
  display: none;
}

.theme-switch .slider {
  position: absolute;
  width: 35%;
  height: 82%;
  background: var(--color-bg, #fff);
  border-radius: 20px;
  box-shadow: 0 1px 5px #0002;
  transition: left 0.3s cubic-bezier(.6,.1,.3,1.4), background 0.2s;
  z-index: 1;
}

/* Labels (icônes) */
.theme-switch label.icon {
  flex: 1 1 0;
  text-align: center;
  font-size: clamp(5px, 4.5cqw, 70px);
  z-index: 2;
  cursor: pointer;
  user-select: none;
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s, font-weight 0.2s;
}

/* Position du slider selon le bouton coché */
.theme-switch input#switch-light:checked ~ .slider {
  left: 2%;
}
.theme-switch input#switch-auto:checked ~ .slider {
  left: 33%; /* centre */
}
.theme-switch input#switch-dark:checked ~ .slider {
  left: 63%; /* à droite, dépend de la width du switch */
}

.theme-switch input#switch-light:checked ~ label[for="switch-light"],
.theme-switch input#switch-auto:checked ~ label[for="switch-auto"],
.theme-switch input#switch-dark:checked ~ label[for="switch-dark"] {
  opacity: 1;
  font-weight: bold;
  color: var(--color-primary-dark);
}

.menu-row-mode-text {
  width: 63%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.menu-theme-title{
  color: var(--color-secondary);
  font-weight: 700;
  font-size: clamp(8px, 5.8cqw, 50px);
}
.menu-theme-subtitle{
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: clamp(5px, 3.8cqw, 50px);
}

.menu-account-info {
  width: 100%;
  aspect-ratio: 40 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.menu-account-info-row {
  width: 100%;
  aspect-ratio: 50 / 9;
  background-color: var(--color-connexion);
  border-radius: clamp(1px,1.5cqw,20px);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.menu-account-info-row:active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.acc-icon {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-badge-art {
  height: 80%;
}
.acc-info {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.acc-value {
  font-family: var(--font-family-nunito, 'Nunito', sans-serif);
  font-weight: 700;
}
.acc-name {
  color: var(--color-secondary);
  font-size: clamp(8px, 4.8cqw, 50px);
  font-family: var(--font-family-nunito, 'Nunito', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
}
.acc-email {
  color: var(--color-primary-dark);
  font-size: clamp(9px, 4.0cqw, 16px);
  opacity: .8;
}

.menu-row-connexion {
  width: 100%;
  aspect-ratio: 40 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.menu-primary-btn {
  width: 100%;
  aspect-ratio: 70 / 9;
  gap: 20px;
  background-color: var(--color-connexion);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: clamp(1px,1.5cqw,20px);
}
.menu-primary-btn:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.menu-primary-btn .btn-icon {
  height: 50%;
}
.menu-primary-btn .btn-text {
  font-weight: 700;
  color: var(--color-secondary);
  font-size: clamp(8px, 4.8cqw, 50px);
  font-family: var(--font-family-nunito, 'Nunito', sans-serif);
}


.menu-modal-body_2 {
  width: 100%;
  flex: 25%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* centre horizontalement tout le contenu */
  justify-content: center;/* centre verticalement tout le contenu */
}

.menu-body_2-text {
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.contact-phrase {
  text-align: start;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: clamp(5px, 4.8cqw, 50px);
}
.contact-mail {
  color: var(--text-black); /* ou une autre variable/couleur */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
  font-size: clamp(5px, 4.8cqw, 50px);
}
.contact-mail:hover,
.contact-mail:focus {
  text-decoration: underline solid;
}


/* Petite anim sympa */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* {
  outline: 1px dashed red;
}