/* ======= POLICES ======= */
@font-face {
  font-family: 'SoshBlack';
  src: url('../fonts/Sosh-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'SoshMedium';
  src: url('../fonts/Sosh-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden; /* Pas de scroll sur la borne */
  background: #dedfe0;
  font-family: 'SoshBlack', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-color);
}

body .welcome{
  background: #ffd72e;
}

/* Conteneur de la borne – fixe l'aspect 1080×1920 */
.kiosk-screen {
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  position: relative;
}

/* Logo */
.logo {
  max-width: 60%;
  height: auto;
}

/* Icône doigt */
.finger {
  width: 250px;
  height: auto;
  cursor: pointer;
}

/* Animation pulsante pour attirer l'œil */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pulse {
  animation: pulse 1.5s infinite;
}

/* Slogan */
.slogan {
  line-height: 1;
  font-size: 6rem;
  color:#009ba3;
  text-decoration: none;
}

a {
  text-decoration: none;
}

/* ======= HOME (retouches maquette) ======= */
.container-offre{
  width: 800px;
}
.home-screen {
  padding-left: 0;                 /* centrage total */
  padding-right: 0;
  justify-content: start;          /* logo + titre en haut */
}

.logo-drive {
  max-height: 280px;               /* logo plus grand */
  width: auto;
  margin-top: 80px;                /* aération haute */
}

/* Titre « Menu » — très grand, graisse black */
.home-title {
  font-family: 'SoshBlack', sans-serif;
  font-size: 10rem;                /* taille maquette */
  line-height: 0.9;                /* compacter */
  margin-top: 40px;
}

/* Sous-titre — plus petit, graisse medium */
.home-subtitle {
  font-family: 'SoshMedium', sans-serif;
  font-size: 2rem;
  margin-bottom: 80px;             /* espacement avant les vignettes */
}

/* Grille d’options : on réduit la largeur max pour mieux respirer */
.menu-box {
  width: 80%;
  max-width: 320px;
  transition: transform .2s;
}
.menu-box:hover { transform: scale(1.05); }

/* Bouton Quitter harmonisé */
.btn-exit {
  background-color: #00a1af;
  border: none;
  color:#fff;
  font-family: 'SoshBlack', sans-serif;
  font-size: 2rem;
  padding: 1rem 3rem;
  border-radius: 1rem;
}


/* === Offer === */
.screen-offer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-blur {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.content-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
}

.offer-box {
  width: 100%;
  max-width: 1000px;
  height: auto;
}



/* Cache par défaut */
#keyboard {
  display: none;
}

/* Quand affiché par le JS */
#keyboard.visible {
  display: block;
  width: 100%;
  max-width: none;
}

/* Forcer toutes les lignes du clavier à s'étirer */
.simple-keyboard {
  width: 100% !important;
  max-width: none !important;
  justify-content: center;
}

.simple-keyboard .hg-row {
  justify-content: center;
  gap: 0.5rem;
}

.simple-keyboard .hg-button {
  padding: 1.5rem 1rem;
  font-size: 1.8rem;
  flex-grow: 1;
}

.offer-form{width:90%;max-width:450px}
.form-input{width:100%;padding:.8rem 1.2rem;border:none;border-radius:40px;font-size:1.6rem;color:var(--pink);font-family:'ClientFont','Helvetica Neue',Arial,sans-serif;background:#fff;min-height:64px}
.form-input:focus{outline:2px solid var(--pink)}
.keyboard-container{width:100%}
.btn-validate{background-color:#da3d6e;color:#fff;font-size:1.6rem;padding:.75rem 2rem;border:none;border-radius:.75rem}

.container-keyboard{
  width: 900px;
}

.offer-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Formulaire par-dessus l’image */
.form-overlay {
  position: absolute;
  top: 65%; /* à ajuster selon image */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Champs input */
.form-overlay input {
  width: 80%;
  padding: 0.8rem 1.4rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  border: none;
  border-radius: 40px;
  background: white;
  color: #ec008c;
}

/* Boutons */
.btn-row {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.btn {
  font-size: 1.6rem;
  padding: 1rem 2rem;
  border-radius: 15px;
  border: none;
  font-family: 'SoshMedium';
  cursor: pointer;
}
.btn-outline {
  background: #fddc00;
  color: #ec008c;
  border: 2px solid #ec008c;
}
.btn-solid {
  background: #ec008c;
  color: #fff;
}