* {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-sizing: border-box;
}

html, body, main {
  width: 100%;
  height: 100%;
}

header {
  display: flex;
  width: 100%;
  height: 35%;
  background: linear-gradient(to bottom, green 20%, white 100%);
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#sushishop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  font-size: 116px;
  font-weight: bold;
  color: orange;
}

#sushishop > span {
  font-family: 'Damion', cursive;
  font-size: 108px;
  letter-spacing: 0.02em;
  color: orange;
  text-shadow:
    0 2px 3px rgba(0,0,0,0.3),
    0 6px 14px rgba(0,0,0,0.35);
}


.sushi-icon {
  width: 192px; /* adapte selon la taille souhaitée */
  height: auto;
  padding-top: 4rem;
}

#imgLeft {
  padding-right: 2rem;
}

#imgRight {
  padding-left: 2rem;
}

.sushi-dish-icon {
  width: 192px;
  height: auto;
}

#sushidishA {
  padding-left: 1rem;
}

#sushidishB {
  padding-right: 1rem;
}



#butCreateLoginToggle {
  padding-left: 0;
  width: 20px;
  cursor: pointer;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 900px;
    margin: 1rem auto;
    padding: 0;
    gap: 2em;
    border: 3px solid orange;
    border-radius: 2rem;
}

.card {
    max-width: 220px;
    border: 2px solid black;
    border-radius: 0.5rem;
    padding:1%;
}

.card img {
    max-width: 200px;
    border: 1px solid;
}

.card ul li img {
    max-width: 200px;
    border: 2px solid;
}

ul {
  list-style-type: none;
  padding: 0;
}

.card ul {
  text-align: center;
}

.boutons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
}

.boutons .button {
  flex: 0 1 15rem;
}

#summaryActions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
}

fieldset[id="address-full-data"] {
  width: 70%;
  border: 3px solid orange;
  border-radius: 2rem;
  padding: 2rem;
  max-width: 900px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

#lblDelivery {
  width: 70%;
  border: 3px solid orange;
  border-radius: 2rem;
  padding: 2rem;
  max-width: 900px;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

fieldset[id="fieldsetImages"] {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  border:none;
}

input[name="civilité"] {
  border-radius: 0.5rem;
}


#lblName, #nom, #lblPrenom, #prenom {
    display: inline-block;
    margin-top: 2rem;
}

#lblPrenom {
  padding-left: 1rem;
}

#fieldset-address {
    margin-top: 2rem;
}

#fieldset-address label, input {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

fieldset {
  padding: 0px;
}

#fieldset-address label {
    width: 10rem;
}

#legendLivraison {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#numero-civique {
    width: 3rem;
}

#type-de-voie {
    width:5rem;
}

#code-postal {
    width:3rem;
}

#lblPrenom {
  white-space: nowrap;
  margin-left: 0.25rem;
}

#prenom {
    padding-left: 0;
    margin-left: -5rem;
    width:13rem;
}


.align-code-commune {
  align-items: center;
}

.commune-label {
  white-space: nowrap;
  margin-right: 0.25rem; /* ✅ réduit l’espace entre label et input */
}


.autocomplete-wrapper {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
}

.code-commune-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.autocomplete-container {
  position: relative;
  width: 265px;
}

#suggestions {
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

#suggestions li {
  padding: 0.5rem;
  cursor: pointer;
}

#suggestions li:hover {
  background: #f0f0f0;
}

#suggestions:empty {
  display: none;
  border: none;
}


.code-commune-wrapper input {
  height: 2.2rem;
  font-size: 1rem;
}

#commune {
    padding-left: 0;
    margin-left: -5rem;
    width:13rem;
}

.ligne-code-commune {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

  .mytextarea1 {
    display: block;
    margin-top: 10%;
    margin: auto;
    width: 100%;
    aspect-ratio: 8 / 1;
    font-size: 18px;
    text-align: left;
    line-height: 1.5;
    overflow: hidden;
  }
  
  .mytextarea1::placeholder {
    color: gray;
    font-style: italic;
  }

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-row label {
  display: inline-block;
  width: 10rem;     /* ← largeur colonne gauche */
  font-weight: bold;
}

.form-row input,
.form-row select {
  width: 15rem;     /* ← largeur colonne droite */
  padding: 0.25rem;
}

.form-row-email {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-row-email label {
  display: inline-block;
  width: 10rem;     /* ← largeur colonne gauche */
  font-weight: bold;
}

.form-row-email input {
  width: 20rem;     /* ← largeur colonne droite */
  padding: 0.25rem;
}

input[id="nom"] {
    display: block;
}

#myText {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

#butSaveAddress {
  margin-top: 5rem;
}

button[id="reset"] {
    display: inline-block;
    height: 4rem;
}

button[id="envoyer"] {
    display: inline-block;
    height: 4rem;
}

.button {
    background-color: green;
    border: 1px solid brown;
    border-radius: 0% 25% 0% 25%;
    padding: 1% 4%;
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.button:hover {
    box-shadow: 5px 2px 2px rgba(0, 0, 0, 1);
}

input[name="nom"]::placeholder {
    font-size: 7px;
}

fieldset[id="fieldset-paiement"] {
  width: 70%;
  border: 3px solid orange;
  border-radius: 2rem;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

#fieldset-paiement ul li,
#inCodeSecurite {
  display: inline;
}

#inCodeSecurite {
  width: 3.3rem;
}


#lblCode {
  margin-left: 1rem;
}

#fieldset-paiement
{
    display: block;
}

.font {

  font-weight: bold;
}

#ulCartes {
  text-align: center;
}

#lblPorteur {
  width: 150px;
  margin-right: 1rem;
}

/*#inPorteur {
  margin-left: 1rem;
}*/

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* important pour placer les blocs verticalement */
  gap: 1rem;
}

.modal.show {
  display: flex;
}

.modalCreateLogin {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* important pour placer les blocs verticalement */
  gap: 1rem;
}

.modalCreateLogin.show {
  display: flex;
}

#modalButtonsLogin.show {
  display: flex;
}

.modalStillCustomerLogin {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* important pour placer les blocs verticalement */
  gap: 1rem;
}

.modalStillCustomerLogin.show {
  display: flex;
}

#address {
  max-width: 800px;
  max-height: 90vh;
  width: 90%;
}

#address.show {
  display: flex;
  flex-wrap: wrap;
}


#ulCartes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

#ulCartes li {
  display: flex;
  margin-bottom: 1rem;       /* espace entre chaque ligne */
  display: flex;             /* aligne input + image + texte */
  align-items: center;
  gap: 0.5rem;               /* espace entre input et label */
}

.card #ulCartes input[type="radio"],
#ulEspeces input[type="radio"] {
  transform: scale(1.5);     /* plus gros si tu veux, facultatif */
}


.carte-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  width: 100%; /* ← prend toute la largeur disponible */
}

.carte-item img {
  width: 40px;
  vertical-align: middle;
}

.ligne-paiement {
  display: grid;
  grid-template-columns: 150px 300px; /* largeur fixe pour le champ input */
  align-items: center;
  margin-bottom: 1rem;
  column-gap: 1rem;
}

.ligne-paiement label {
  font-weight: bold;
}

#inPorteur {
  width: 15rem;
}

#numero-carte {
  /*margin-left: 1rem;*/
  width: 10rem;
}

#lblExpiration {
  margin-left: 1rem;
}

#inExpiration {
  width: 9rem;
}

#inCvv {
  width: 4rem;
}


.input-porteur,
.input-carte,
.input-date,
.input-cvv {
  width: 100%;
  padding: 0.4rem;
  font-size: 1rem;
}

#paypal-button-container {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

.invalid {
  border: 2px solid red !important;
  background-color: #fff3f3;
  outline: none;
}

.span-block {
  display: block;
  text-align: center;
}

.form-section-title {
  display: block;
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: left;
}

/* Nettoyage UL/LI */
ul.modalCreateLogin,
ul.modalStillCustomerLogin {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: normal; /* au cas où un parent impose nowrap */
}

/* Chaque ligne = grille verticale 1 colonne */
ul.modalCreateLogin > li,
ul.modalStillCustomerLogin > li {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
}

/* Une seule ligne : label | input | bouton */
/* Conteneur du formulaire (limite la largeur et centre) */
/* Conteneur global centré */
#CustomerRegistration {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box; /* évite le débordement */
  padding: 0 1rem; /* marge interne fluide */
}

/* 3 colonnes : label | input | bouton */
.input-group {
  display: grid;
  grid-template-columns: max-content 15rem 2rem; /* largeur de l'input décidée ici */
  column-gap: 8px;
  align-items: center;
}

/* L’input occupe la colonne 2 */
.input-group input {
  grid-column: 2;
  width: 100%;
  box-sizing: border-box;
}

/* Le bouton occupe la colonne 3 */
.input-group button {
  grid-column: 3;
  width: auto;
  padding: 2px 6px;
  cursor: pointer;
}