/* Réservation & lien personnel — s'appuie sur site.css (tokens, composants). */

.reserv { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.reserv .conteneur { max-width: 54rem; }

/* Fil des étapes */
.etapes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.85rem;
  color: var(--prune-clair);
}
.etapes li { display: flex; align-items: center; gap: 0.5rem; }
.etapes li::before {
  content: counter(x);
  counter-increment: x;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--prune) 25%, transparent);
  font-weight: 700; font-size: 0.8rem;
}
.etapes { counter-reset: x; }
.etapes li[aria-current="step"] { color: var(--prune); font-weight: 700; }
.etapes li[aria-current="step"]::before { background: var(--prune); color: var(--ivoire); border-color: var(--prune); }
.etapes li[data-done]::before { background: var(--sauge-fonce); border-color: var(--sauge-fonce); color: var(--prune); content: "\2713"; }

.reserv h1 { font-size: var(--pas-6); margin-bottom: var(--esp-2); }
.reserv__sous { color: var(--texte-doux); margin-bottom: var(--esp-5); }

/* Choix de type */
.choix { display: grid; gap: var(--esp-3); }
.choix__opt {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1.5px solid color-mix(in srgb, var(--prune) 16%, transparent);
  border-radius: var(--rayon);
  padding: var(--esp-4);
  cursor: pointer;
  transition: border-color var(--duree), background var(--duree), transform var(--duree) var(--easing);
  background: #fffdfa;
}
.choix__opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--or) 45%, transparent); }
.choix__opt input { margin-top: 0.25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--prune); }
.choix__opt:has(input:checked) { border-color: var(--prune); background: color-mix(in srgb, var(--or-doux) 40%, #fff); }
.choix__opt h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }
.choix__opt p { color: var(--texte-doux); font-size: 0.95rem; }

.q { border: 0; padding: 0; margin: 0 0 2rem; }
.q legend { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 0.6rem; padding: 0; }

/* Calendrier mensuel */
.cal { display: grid; gap: var(--esp-4); }
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.cal__nav strong { font-family: var(--serif); font-size: 1.2rem; text-transform: capitalize; }
.cal__nav button, .cal__nav .bouton {
  font: inherit; border: 1px solid color-mix(in srgb, var(--prune) 25%, transparent);
  background: #fff; color: var(--prune); border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; min-height: 40px;
  white-space: nowrap;
}
.cal__nav button[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 480px) {
  .cal__nav strong { order: -1; flex: 1 0 100%; text-align: center; margin-bottom: 0.4rem; }
  .cal__nav button, .cal__nav .bouton { flex: 0 0 auto; padding: 0.5rem 0.9rem; }
  .cal__nav-texte { display: none; }
}
.cal__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__jour-nom { text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--prune-clair); padding-bottom: 0.3rem; }
.cal__cell { aspect-ratio: 1; }
.cal__cell button, .cal__cell span {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: var(--rayon-s);
  font: inherit; font-size: 0.95rem;
  border: 1px solid transparent;
}
.cal__cell button {
  background: color-mix(in srgb, var(--sauge) 55%, #fff);
  border-color: color-mix(in srgb, var(--prune) 12%, transparent);
  color: var(--prune);
  font-weight: 700;
  cursor: pointer;
}
.cal__cell button:hover { background: var(--sauge); }
.cal__cell button[aria-pressed="true"] { background: var(--prune); color: var(--ivoire); border-color: var(--prune); }
.cal__cell span { color: color-mix(in srgb, var(--prune) 45%, transparent); font-weight: 600; }
.cal__cell span::after { content: ""; }

/* Liste de créneaux (complément clavier) */
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.6rem; }
.creneaux button {
  font: inherit; font-weight: 600;
  padding: 0.75rem 0.5rem; min-height: 46px;
  border-radius: var(--rayon-s);
  border: 1.5px solid color-mix(in srgb, var(--prune) 20%, transparent);
  background: #fffdfa; color: var(--prune); cursor: pointer;
  transition: transform var(--duree) var(--easing), border-color var(--duree), background var(--duree);
}
.creneaux button:hover { transform: translateY(-2px); border-color: var(--or); }
.creneaux button[aria-pressed="true"] { background: var(--prune); color: var(--ivoire); border-color: var(--prune); }
.aucun-creneau {
  background: var(--rose); border-radius: var(--rayon); padding: var(--esp-4);
}

/* Formulaire */
.champ { display: block; margin-bottom: var(--esp-4); }
.champ > span { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
.champ input, .champ textarea, .champ select {
  width: 100%; font: inherit; padding: 0.7rem 0.85rem;
  border: 1.5px solid color-mix(in srgb, var(--prune) 22%, transparent);
  border-radius: var(--rayon-s); background: #fff;
}
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--prune); outline-offset: 1px; }
.champ--err input, .champ--err textarea { border-color: #b3261e; }
.champ__err { color: #b3261e; font-size: 0.88rem; margin-top: 0.3rem; }
.champ--case { display: flex; gap: 0.6rem; align-items: flex-start; }
.champ--case input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--prune); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-4); }
@media (max-width: 560px) { .grille-2 { grid-template-columns: 1fr; } }

fieldset.mineur {
  border: 1px dashed var(--prune-clair); border-radius: var(--rayon);
  padding: var(--esp-4); margin-bottom: var(--esp-4);
}
fieldset.mineur legend { font-weight: 700; padding-inline: 0.4rem; }

/* Récapitulatif */
.recap { background: var(--sauge); border-radius: var(--rayon); padding: var(--esp-5); margin-bottom: var(--esp-4); }
.recap dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.2rem; margin: 0; }
.recap dt { color: var(--prune-clair); font-size: 0.9rem; }
.recap dd { margin: 0; font-weight: 600; }

.actions-nav { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-top: var(--esp-5); }
.actions-nav .lien-retour { font-weight: 600; text-decoration: none; color: var(--prune-clair); }
.actions-nav .lien-retour:hover { text-decoration: underline; }

.alerte {
  border-left: 3px solid #b3261e; background: color-mix(in srgb, #b3261e 8%, #fff);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon-s); margin-bottom: var(--esp-4);
}
.info-mode-journal {
  background: var(--mauve-clair); border-radius: var(--rayon-s);
  padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-top: var(--esp-4);
}

/* Page de confirmation / lien perso */
.confirme__ok {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: 999px; background: var(--sauge-fonce); color: var(--prune);
  font-size: 1.6rem; margin-bottom: var(--esp-4);
}
.rdv-carte { background: #fffdfa; border: 1px solid color-mix(in srgb, var(--prune) 12%, transparent);
  border-left: 3px solid var(--or); border-radius: var(--rayon); padding: var(--esp-5); }
.rdv-carte h2 { font-size: 1.2rem; }
.badge-statut { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-statut--confirmed { background: var(--sauge-fonce); color: var(--prune); }
.badge-statut--cancelled { background: #f1d5d2; color: #7a2018; }