/* Valeurs reelles definies UNE SEULE FOIS dans /tokens.css (partage avec
   l'espace coiffeur ET proprietaire, voir ce fichier pour la source Mont
   Barbier). Ce qui suit ne fait qu'aliaser les noms historiques de CE
   fichier vers les tokens canoniques -- evite de reecrire les ~180 usages
   de var(--papier)/var(--encre)/etc. plus bas tout en gardant une seule
   source de verite pour les VALEURS. */
:root {
  --papier: var(--fond);
  --carte: var(--surface);
  --carte-degrade: var(--surface-degrade);
  --encre: var(--texte);
  --sourdine: var(--texte-sourdine);
  --sourdine-claire: var(--texte-sourdine-claire);
}

/* Le navigateur applique [hidden] avec la meme specificite qu'une classe ;
   comme .ticket-corps{display:flex} est chargee apres la feuille native,
   elle gagnait le conflit et [hidden] n'avait plus aucun effet. */
.ticket-corps[hidden],
.champ[hidden] {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32px 16px;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 480px) {
  body {
    padding: 12px 10px;
  }

  .ticket {
    margin-top: 0;
  }

  .ticket-header {
    padding: 20px 20px 4px;
  }

  .ticket-corps {
    padding: 18px 20px 22px;
    gap: 16px;
  }
}

@media (min-width: 900px) {
  body {
    padding: 56px 16px;
  }

  .ticket {
    max-width: 480px;
  }
}

.ticket {
  width: 100%;
  max-width: 440px;
  background: var(--carte-degrade);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
  align-self: flex-start;
  margin-top: 4vh;
}

.perforation {
  height: 12px;
  background-image: radial-gradient(circle, var(--papier) 3px, transparent 3.2px);
  background-size: 18px 12px;
  background-repeat: repeat-x;
  background-position: center;
}

.ticket-header {
  padding: 32px 28px 4px;
  text-align: center;
}

.logo {
  max-height: 64px;
  max-width: 160px;
  margin: 0 auto 14px;
  display: block;
}

.eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--sourdine);
  margin: 0 0 6px;
}

.ticket-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.dechirure {
  border: none;
  border-top: 1px dashed var(--ligne);
  margin: 22px 28px 0;
}

.ticket-corps {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  margin: 0;
  padding: 0;
}

.champ label,
.champ legend,
.champ-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sourdine-claire);
  padding: 0;
}

.champ input[type="date"],
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
  font: inherit;
  font-size: 16px;
  padding: 14px;
  min-height: 48px;
  border: 1px solid var(--champ-bordure);
  border-radius: 8px;
  background: var(--champ-fond);
  color: var(--champ-texte);
  width: 100%;
}

.champ textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-body);
}

.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--champ-texte) 50%), linear-gradient(135deg, var(--champ-texte) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: 1px solid var(--encre);
  outline-offset: 1px;
}

.champ input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
  padding: 6px;
}

.champ-optionnel {
  font-weight: 400;
  color: var(--sourdine);
  text-transform: none;
  letter-spacing: normal;
}

.champ-note {
  font-size: 12px;
  color: var(--sourdine);
  margin: 0;
}

.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

.carte-service {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 76px;
  padding: 14px 46px 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--ligne);
  background: var(--carte);
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.carte-service:hover {
  border-color: var(--encre);
}

.carte-service.est-choisie {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.carte-service-nom {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.carte-service-prix {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
}

.carte-service.est-choisie .carte-service-prix {
  background: var(--accent-ink);
  color: var(--accent);
}

.creneaux {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creneau {
  padding: 12px 16px;
  min-height: 44px;
  min-width: 68px;
  border-radius: 999px;
  border: 1px solid var(--ligne);
  background: transparent;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  color: var(--encre);
}

.creneau:hover:not(:disabled) {
  border-color: var(--encre);
}

.creneau.est-choisi {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.creneau:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.creneaux-message {
  font-size: 14px;
  color: var(--sourdine);
  margin: 0;
}

.bouton-principal {
  margin-top: 4px;
  padding: 16px;
  min-height: 52px;
  border: 1px solid var(--encre);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bouton-principal:disabled {
  opacity: 0.6;
  cursor: wait;
}

.bouton-secondaire {
  margin-top: 4px;
  padding: 14px;
  min-height: 48px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.bouton-secondaire:hover:not(:disabled) {
  border-color: var(--encre);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-principal:hover:not(:disabled) {
    background: transparent;
    color: var(--encre);
    border-color: var(--encre);
  }
}

.erreur-champ {
  color: var(--erreur);
  font-size: 13px;
  margin: 0;
}

.alerte {
  background: rgba(224, 86, 74, 0.1);
  border: 1px solid rgba(224, 86, 74, 0.35);
  color: var(--erreur);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
}

#vue-confirmation,
#vue-erreur {
  text-align: center;
  align-items: center;
}

.tampon {
  display: inline-block;
  border: 1px solid var(--succes);
  color: var(--succes);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 4px;
  transform: rotate(-4deg);
  position: relative;
}

.tampon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--succes);
  border-radius: 2px;
}

.confirmation-titre {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 14px 0 0;
}

.confirmation-texte {
  color: var(--sourdine);
  font-size: 14px;
  margin: 6px 0 0;
}

.recap {
  width: 100%;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed var(--ligne);
  padding-bottom: 8px;
}

.recap-ligne dt {
  color: var(--sourdine);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.recap-ligne dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  max-width: 60%;
}

#vue-recap .bouton-secondaire,
#vue-recap .bouton-principal {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .tampon {
    animation: tampon-pose 0.28s ease-out;
  }

  .creneau,
  .bouton-principal {
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }

  .creneau:active:not(:disabled),
  .bouton-principal:active:not(:disabled) {
    transform: scale(0.97);
  }
}

@keyframes tampon-pose {
  from {
    transform: rotate(-4deg) scale(1.5);
    opacity: 0;
  }
  to {
    transform: rotate(-4deg) scale(1);
    opacity: 1;
  }
}

/* Consentement Loi 25 (case a cocher avant confirmation) : separee
   visuellement du reste du formulaire par une bordure et un fond legerement
   distinct, plutot qu'un simple champ parmi les autres. */
.consentement {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: rgba(247, 247, 245, 0.03);
}

.consentement-etiquette {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sourdine-claire);
  cursor: pointer;
}

.consentement-etiquette input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.consentement-etiquette a {
  color: var(--encre);
}

/* Pied de page client : lien discret vers la politique de confidentialite,
   hors de la carte-ticket pour rester visible peu importe l'etape en cours. */
.pied-page-client {
  /* Sur le body en display:flex + flex-wrap (voir plus haut), width:100%
     force ce pied de page sur sa propre ligne, sous le ticket, plutot que
     cote a cote avec lui. */
  width: 100%;
  text-align: center;
  padding: 20px 16px 32px;
}

.pied-page-client a {
  color: var(--sourdine);
  font-size: 13px;
  text-decoration: underline;
}