/* styles.css */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Montserrat', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;

  background: #f4f4f4;

  color: #333;

  line-height: 1.4;

  padding: 20px;


}

.inscription_body{
  margin-top: -5vh;
}

/* ==== Force l'affichage des emojis drapeaux ==== */

body, input, select, option {

  /* ta police principale, puis au moins une police emoji */

  font-family: 'Montserrat', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

}





.checkout-container {

  display: flex;

  flex-wrap: wrap;

  max-width: 1000px;

  margin: 0 auto;

  background: #fff;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}



/* COLONNE GAUCHE */

.checkout-form {

  flex: 1 1 400px;

  padding: 30px;

  background: #fafafa;

}



.checkout-form fieldset {

  border: none;

  margin-bottom: 20px;

}



.checkout-form legend {

  font-size: 1.2rem;

  margin-bottom: 10px;

  font-weight: bold;

}



.checkout-form label {

  display: block;

  margin-top: 10px;

  font-size: 0.9rem;

}



.checkout-form input {

  width: 100%;

  padding: 8px 10px;

  margin-top: 5px;

  border: 1px solid #ccc;

  border-radius: 4px;

}



.btn-submit {

  width: 100%;

  padding: 15px;

  margin-top: 10px;

  background: #74c51b;

  color: #fff;

  font-size: 1.1rem;

  border: none;

  border-radius: 30px;

  cursor: pointer;

  transition: background 0.3s;

}



.btn-submit:hover {

  background: #bf0000;

}



/* COLONNE DROITE */

.checkout-info {

  flex: 1 1 400px;

  padding: 30px;

  text-align: center;

}



.promo-image {

  max-width: 100%;

  border-radius: 8px;

  margin-bottom: 20px;

}



.checkout-info h2 {

  font-size: 1.4rem;

  margin-bottom: 15px;

}



.benefits {

  list-style: none;

  text-align: left;

}



.benefits li {

  margin-bottom: 10px;

  font-size: 1rem;

}



/* Encadré prix exceptionnel */

.price-highlight {

  text-align: center;

  margin-bottom: 20px;

}

.price-highlight p {

  font-size: 1.3rem;

  font-weight: bold;

  color: white;

}

.price-highlight strong {

  color: #f89310;

  font-size: 2rem;

}

.price-highlight del {

  color: #999;

  margin-left: 10px;

  font-size: 1.4rem;

}



.gradient-text {

  background: linear-gradient(90deg, #FF006B, #f89310);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.underline-anim {

  position: relative;

  color: #FF006B;

}

.underline-anim::after {

  content: '';

  position: absolute;

  left: 0; bottom: -3px;

  width: 0; height: 3px;

  background: #f89310;

  transition: width .3s ease;

}

.underline-anim:hover::after {

  width: 100%;

}



.checkout-form select {

  width: 100%;

  padding: 8px 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

  background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20...%3E") no-repeat right 10px center;

  appearance: none;

  font-size: 0.95rem;

  line-height: 1.4;

  margin-top: 5px;

}



/* Style de l'input/datalist */

#country {

  width: 100%;

  padding: 8px 10px;

  margin-top: 5px;

  margin-bottom: 15px;

  border: 2px solid #FF006B;   /* rose vif */

  border-radius: 4px;

  font-size: 1rem;

  font-family: 'Segoe UI Emoji', 'Arial', sans-serif; /* pour bien voir les drapeaux */

}



/* Quand on clique ou focus */

#country:focus {

  outline: none;

  border-color: #f89310;       /* orange flamboyant */

  box-shadow: 0 0 5px rgba(248,147,16,0.5);

}



/* Astuce pour forcer le placeholder plus discret */

#country::placeholder {

  color: #aaa;

  font-style: italic;

}



/* === Champ Téléphone sans fieldset === */

.phone-container {

  margin-bottom: 20px;

}



.phone-container > label {

  display: block;

  font-weight: bold;

  margin-bottom: 8px;

}



.phone-group {

  display: flex;

  gap: 10px;

}



/* Indicatif pays */

.phone-code {

  flex: 0 0 80px;

  padding: 8px 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

  font-size: 0.95rem;

}



/* Numéro principal */

.phone-number {

  flex: 1;

  padding: 8px 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

  font-size: 0.95rem;

}



/* Focus styling cohérent */

.phone-code:focus,

.phone-number:focus {

  outline: none;

  border-color: #FF006B;

  box-shadow: 0 0 5px rgba(255,0,107,0.5);

}



.offer-urgency {

  text-align: center;

  background: #FF006B;

  color: #fff;

  padding: 15px;

  border-radius: 8px;

  margin-bottom: 20px;

  font-size: 1rem;

}

.offer-urgency #countdown {

  font-weight: bold;

  margin-bottom: 8px;

}

.offer-urgency #spots {

  font-size: 1.2rem;

}



/* animation “pulse” pour les nombres qui changent */

@keyframes pulse {

  0%   { transform: scale(1); }

  50%  { transform: scale(1.2); }

  100% { transform: scale(1); }

}

.spot-change {

  display: inline-block;

  animation: pulse 0.3s ease;

}



.spots-container {

  font-size: 1.2rem;

  color: #fff;

  margin: 0.5rem 0 1rem;

  text-align: center;

}



/* conteneur des digits */

.spots-display {

  display: inline-flex;

  gap: 0.4rem;

  vertical-align: middle;

  margin: 0 0.3rem;

}



/* chaque “carte” de chiffre */

.digit-box {

  background: linear-gradient(135deg, #FF006B, #f89310);

  color: #fff;

  width: 2.5rem;

  height: 2.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3rem;

  font-weight: bold;

  border-radius: 0.5rem;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  transition: transform 0.2s ease;

}



/* petit “pop” quand ça change */

.digit-box.pulse {

  animation: pulse 0.3s ease;

}



@keyframes pulse {

  0%   { transform: scale(1); }

  50%  { transform: scale(1.2); }

 100%  { transform: scale(1); }

}



.info-btn {

  background: none;

  border: none;

  cursor: pointer;

  margin-left: 0.5em;

  font-size: 1.2em;

  color: #007BFF;

}

.info-btn:hover {

  color: #0056b3;

}



#guide-image{

  width: 60%;

}

/* CSS à ajouter dans votre feuille de styles */

#guide-image {

  position: relative;

  /* On la place hors écran à gauche au départ */

  transform: translateX(-100%);

  /* On la cache un peu si nécessaire */

  opacity: 0;

}



#guide-image.slide-in {

  /* quand la classe est ajoutée, on déclenche l’anim */

  animation: slide-in 5s ease forwards;

  /* on fait aussi apparaître progressivement */

  animation-delay: 0s;

}



@keyframes slide-in {

  from {

    transform: translateX(-100%);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



/* CSS à ajouter dans votre feuille de styles */

.bonus-guide {

  background-color: #111;

  border: 2px dashed #e63946;

  padding: 1.5rem;

  color: #f1faee;

  font-family: 'Segoe UI', sans-serif;

  text-align: center;

  box-shadow: 0 0 10px rgba(0,0,0,0.7);

  margin: 1rem 0;

  border-radius: 8px;

}

.bonus-guide h3 {

  font-size: 1.5rem;

  margin-bottom: 0.5rem;

  color: #FF006B6;

  text-transform: uppercase;

}

.bonus-guide p {

  font-size: 1rem;

  line-height: 1.4;

  margin-bottom: 1rem;

}

.bonus-guide p strong {

  display: block;

  margin-top: 0.5rem;

  color: #FF006B;

}

.bonus-guide .btn-bonus {

  display: inline-block;

  background-color: #FF006B;

  color: #fff;

  text-decoration: none;

  text-transform: uppercase;

  padding: 0.6rem 1.4rem;

  border-radius: 4px;

  font-weight: bold;

  transition: background-color 0.2s ease-in-out;

}

.bonus-guide .btn-bonus:hover {

  background-color: #c62a3e;

}



#alert_erreur{

  background-color: red;

  color: white;

  padding: 15px;

  margin-bottom: 15px;

}


.info_western {
  list-style: none;
  padding: 0;
}

.info_western li {
  padding-left: 2em;
  position: relative;
  margin-bottom: 5px;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.info_western li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: green; /* bleu pro */
  font-weight: bold;
}


.checkout-container{
  margin-top: 10vh;
}