/* Responsive font-size selon la hauteur d'écran */
@media (min-height: 1800px) {
  :root {
    font-size: 34px;
  }
}

@media (min-height: 1700px) and (max-height: 1799px) {
  :root {
    font-size: 30px;
  }
}

@media (min-height: 1450px) and (max-height: 1699px) {
  :root {
    font-size: 26px;
  }
}

@media (min-height: 1200px) and (max-height: 1449px) {
  :root {
    font-size: 23px;
  }
}

@media (min-height: 900px) and (max-height: 1199px) {
  :root {
    font-size: 20px;
  }
}

@media (min-height: 720px) and (max-height: 899px) {
  :root {
    font-size: 15px;
  }
}

@media (max-height: 719px) {
  :root {
    font-size: 13px;
  }
}

:root {
  --button: #dc2626;
  --button_clickable: #dc2626;
  --title: #dc2626;
  --cadre: #dc2626;
}

/* Global Reset */
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  /* Désactive la sélection de texte */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none; /* Désactive le callout sur iOS/Android */
}

/* Conteneur principal fixe */
#header {
  height: 95%;
  width: 95%;
}

/* Conteneur des étapes */
#containerStep {
  flex-grow: 1;
  height: 0;
  position: relative;
  overflow: hidden;
}

/* Étapes individuelles positionnées en absolu */
#step1,
#step2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Contenu scrollable à l'intérieur de chaque étape */
.stepContent {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 1rem;
}

/* Footer bouton visible en bas */
.stepFooter {
  padding-top: 1rem;
}

/* Masquer une étape */
#step1.hidden,
#step2.hidden {
  display: none !important;
}

.selected-slot {
  background-color: var(--button); /* red-600 */
}

.selected-length {
  background-color: var(--button); /* red-600 */
}

/* Boutons de sélection de type (Step 0) */
.type-btn {
  border: 2px solid transparent;
  cursor: pointer;
}

.type-btn:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

.type-btn.selected-type {
  background-color: var(--button) !important;
  border-color: var(--button);
}

.type-icon {
  flex-shrink: 0;
}

/* Step 0 visible par défaut, caché quand .hidden */
#step0 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#step0.hidden {
  display: none !important;
}

/* Appliquer aux cadres uniquement */
.cadre {
  border-color: var(--cadre) !important;
}

/* Appliquer uniquement aux titres */
.title {
  color: var(--title) !important;
}

/* Appliquer uniquement aux boutons */
.button {
  background-color: var(--button);
}

.button:disabled {
  background-color: #4b5563 !important; /* gray-600 */
  cursor: not-allowed;
}

.button:hover:not(:disabled) {
  background-color: color-mix(
    in srgb,
    var(--button_clickable) 80%,
    black
    ) !important;
}

.button:disabled:hover {
  background-color: #4b5563 !important; /* gray-600 - pas de hover quand disabled */
}

/* Hover uniquement sur les boutons NON sélectionnés */
.duration-btn:not(.selected):not(.selected-length):not(.selected-slot):hover {
  background-color: var(--button) !important;
  color: white;
}

/* Désactive l'effet :active sur les boutons NON sélectionnés pour éviter confusion */
.duration-btn:not(.selected):not(.selected-length):not(.selected-slot):active {
  /* Garde la couleur d'origine bg-gray-700 */
  background-color: #374151 !important; /* gray-700 */
}

/* Pour les boutons sélectionnés, garde leur apparence même en :active */
.duration-btn.selected:active,
.duration-btn.selected-length:active,
.duration-btn.selected-slot:active {
  background-color: var(--button) !important;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

/* QR Code CGV - Gestion Android/Desktop */
.cgv-qrcode-container {
  /* Taille gérée par Tailwind (max-w-[]) */
  height: auto;
}

.cgv-qrcode-container.hidden-desktop {
  display: none !important;
}

.cgv-link-disabled {
  pointer-events: none !important;
  text-decoration: none !important;
  cursor: default !important;
  color: inherit !important;
}

/* Pour marquer un bouton sélectionné */
.duration-btn.selected {
  background-color: var(--button) !important;
  font-weight: bold;
}

/* Thème sombre pour jQuery UI datepicker */
.ui-datepicker {
  background-color: #1f2937; /* gray-800 */
  color: #f9fafb; /* gray-50 */
  border: 1px solid #4b5563; /* gray-600 */
  border-radius: 0.75rem;
  padding: 1rem;
  font-family: "Inter", sans-serif;
}

.ui-datepicker td a {
  background-color: #374151; /* gray-700 */
  color: #f9fafb;
  padding: 0.5rem;
  display: block;
  border-radius: 0.5rem;
  text-align: center;
}

.ui-datepicker td a:hover {
  background-color: #ef4444; /* red-500 */
}

.ui-datepicker td.ui-datepicker-unselectable span {
  background-color: transparent;
  color: #6b7280; /* gray-400 */
}

.ui-datepicker-title {
  color: #f87171; /* red-400 */
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.ui-datepicker-header {
  background: none !important;
  border: none !important;
}

/* Flèches visibles */
.ui-datepicker-prev,
.ui-datepicker-next {
  background: none;
  color: #f9fafb;
  border: none;
  font-size: 20px !important; /* Pixels fixes au lieu de rem */
  cursor: pointer;
  top: 2px !important; /* Remonte légèrement les flèches */
}

/* Fix height de ui-icon pour visibilité en mode portrait */
.ui-datepicker .ui-icon {
  height: auto !important; /* Retire la height fixe */
}
/* Remplace les icônes invisibles par du texte */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  background-image: none !important;
  text-indent: 0 !important;
  color: white !important;
  font-size: 18px !important; /* Pixels fixes au lieu de rem */
  font-weight: bold;
}

/* Empêche l'effet de hover blanc sur les flèches du datepicker */
.ui-datepicker .ui-datepicker-prev-hover span,
.ui-datepicker .ui-datepicker-next-hover span {
  background: none !important;
  border: none !important;
  color: white !important;
}

/* Scrollbar personnalisée - Style moderne et discret */
/* Appliqué à toutes les zones scrollables */
/* Pour Firefox */
.stepContent,
.overflow-y-auto,
.flex-grow.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937; /* thumb: gray-600, track: gray-800 */
}

/* Pour Chrome, Safari, Edge */
.stepContent::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.flex-grow.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.stepContent::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.flex-grow.overflow-y-auto::-webkit-scrollbar-track {
  background: #1f2937; /* gray-800 */
  border-radius: 10px;
}

.stepContent::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.flex-grow.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #4b5563; /* gray-600 */
  border-radius: 10px;
}

.stepContent::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.flex-grow.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* gray-500 - plus clair au hover */
}

/* Alternative : scrollbar qui n'apparaît qu'au hover */
/* Décommentez ci-dessous si vous préférez cette option
.stepContent::-webkit-scrollbar {
width: 6px;
opacity: 0;
transition: opacity 0.3s;
}

.stepContent:hover::-webkit-scrollbar {
opacity: 1;
}
*/

/* Alternative : scrollbar invisible (scroll possible mais barre cachée) */
/* Décommentez ci-dessous si vous préférez cette option
.stepContent {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}

.stepContent::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
*/