/* =========================================================
   MaderoShape — feuille de styles principale
   Mobile-first : les media queries élargissent la mise en page.
   ========================================================= */

/* ---------- 1. Variables de thème ---------- */
:root {
  /* Palette — tons chauds et naturels */
  --couleur-primaire: #4A3226;        /* marron chocolat */
  --couleur-primaire-clair: #6B4A38;
  --couleur-accent: #C08A3E;          /* doré chaud */
  --couleur-accent-fonce: #9C6B2A;
  --couleur-accent-pale: #F0DDBE;
  --couleur-fond: #FDF8F2;            /* beige très clair */
  --couleur-fond-alt: #F5E9DA;        /* beige sable */
  --couleur-surface: #FFFFFF;
  --couleur-texte: #33231A;
  --couleur-texte-doux: #6E5949;
  --couleur-bordure: #E7D6C0;

  /* Typographie */
  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-corps: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Rythme et formes */
  --rayon-petit: 8px;
  --rayon: 14px;
  --rayon-grand: 22px;
  --ombre-douce: 0 2px 10px rgba(74, 50, 38, .06);
  --ombre-carte: 0 6px 24px rgba(74, 50, 38, .09);
  --ombre-carte-survol: 0 12px 32px rgba(74, 50, 38, .16);
  --largeur-max: 1240px;
  --hauteur-entete: 140px;   /* logo 50 px + baseline sur 4 lignes ; cf. media query 768 px */
  --transition: .22s ease;
}

/* ---------- 2. Réinitialisation légère ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--couleur-primaire);
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--couleur-accent-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilitaires ---------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 20px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--couleur-primaire);
  color: #fff;
  border-radius: 0 0 var(--rayon-petit) 0;
}

.lien-evitement:focus {
  left: 0;
}

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-align: center;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.btn--accent {
  background: linear-gradient(135deg, var(--couleur-accent) 0%, var(--couleur-accent-fonce) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(156, 107, 42, .28);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background: linear-gradient(135deg, var(--couleur-accent-fonce) 0%, var(--couleur-accent-fonce) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(156, 107, 42, .38);
}

.btn--fantome {
  background: transparent;
  color: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
}

.btn--fantome:hover,
.btn--fantome:focus-visible {
  background: var(--couleur-primaire);
  color: #fff;
  transform: translateY(-2px);
}

.btn--grand {
  padding: 15px 30px;
  font-size: 1rem;
}

/* ---------- 5. En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 242, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--couleur-bordure);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--hauteur-entete);
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  display: flex;
  flex-direction: column;
  /* Sans align-items, l'image s'étirerait sur toute la largeur du
     conteneur flex et le logo apparaîtrait déformé. */
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

/* Le logo est une photo : un liseré et des angles arrondis l'ancrent
   proprement sur le fond crème du site. */
.logo__image {
  display: block;
  height: 50px;
  width: auto;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--couleur-bordure);
  box-shadow: var(--ombre-douce);
}

.logo__baseline {
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

.entete__nav .btn {
  white-space: nowrap;
  padding: 10px 18px;
  font-size: .88rem;
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(240, 221, 190, .85) 0%, rgba(240, 221, 190, 0) 60%),
    linear-gradient(160deg, var(--couleur-fond-alt) 0%, var(--couleur-fond) 70%);
  border-bottom: 1px solid var(--couleur-bordure);
}

.hero__interieur {
  padding-top: 60px;
  padding-bottom: 64px;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.hero__logo {
  display: block;
  height: 180px;
  width: auto;
  margin: 0 auto 24px;
  border-radius: var(--rayon-grand);
  border: 1px solid var(--couleur-bordure);
  box-shadow: var(--ombre-carte);
}

.hero__surtitre {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--couleur-accent-fonce);
  margin-bottom: 16px;
}

.hero__titre {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.hero__texte {
  margin: 20px auto 0;
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--couleur-texte-doux);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

/* ---------- 7. En-têtes de section ---------- */
.section-entete {
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
}

.section-surtitre {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--couleur-accent-fonce);
  margin-bottom: 10px;
}

.section-titre {
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
}

.section-texte {
  margin-top: 14px;
  color: var(--couleur-texte-doux);
}

/* ---------- 8. Grille tarifaire ---------- */
.tarifs {
  padding: 60px 0 68px;
}

.grille-tarifs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte-survol);
}

.carte__entete {
  padding: 24px 22px 18px;
  background: linear-gradient(140deg, var(--couleur-fond-alt) 0%, var(--couleur-fond) 100%);
  border-bottom: 1px solid var(--couleur-bordure);
}

.carte__titre {
  font-size: 1.3rem;
}

.carte__soustitre {
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--couleur-accent-fonce);
}

.prestations {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 22px 24px;
}

.prestation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--couleur-bordure);
}

.prestation:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.prestation__infos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prestation__nom {
  font-weight: 700;
  font-size: 1rem;
  color: var(--couleur-texte);
}

.prestation__mention {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent-fonce);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.prestation__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prestation__prix {
  font-family: var(--police-titre);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--couleur-primaire);
  white-space: nowrap;
}

.prestation--vedette .prestation__prix {
  color: var(--couleur-accent-fonce);
}

.btn-choisir {
  padding: 9px 20px;
  border: 2px solid var(--couleur-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--couleur-accent-fonce);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.btn-choisir:hover,
.btn-choisir:focus-visible {
  background: var(--couleur-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(156, 107, 42, .3);
}

/* ---------- 9. Légende des zones ---------- */
.legende {
  margin-top: 34px;
  padding: 26px 22px;
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
}

.legende__titre {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.legende__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.legende__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--couleur-surface);
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-bordure);
}

.legende__cle {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--couleur-accent-fonce);
}

.legende__valeur {
  color: var(--couleur-texte-doux);
  font-size: .95rem;
}

.legende__note {
  margin-top: 16px;
  font-size: .88rem;
  color: var(--couleur-texte-doux);
}

/* ---------- 10. Comment ça marche ---------- */
.etapes {
  padding: 60px 0 70px;
  background: linear-gradient(180deg, var(--couleur-fond) 0%, var(--couleur-fond-alt) 100%);
  border-top: 1px solid var(--couleur-bordure);
}

.grille-etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  counter-reset: etape;
}

.etape {
  position: relative;
  padding: 28px 22px 24px;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-douce);
  text-align: center;
}

.etape__numero {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--couleur-primaire);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.etape__icone {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 12px;
}

.etape__titre {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.etape__texte {
  font-size: .93rem;
  color: var(--couleur-texte-doux);
}

/* ---------- 11. Pied de page ---------- */
.pied {
  background: var(--couleur-primaire);
  color: #F3E7D9;
  padding: 46px 0 22px;
}

.pied__interieur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.pied__marque {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.pied__adresse {
  font-size: .95rem;
}

.pied__titre {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--couleur-accent-pale);
  margin-bottom: 10px;
}

.pied__lien {
  border-bottom: 1px solid var(--couleur-accent);
  padding-bottom: 2px;
  font-weight: 700;
  transition: color var(--transition), border-color var(--transition);
}

.pied__lien:hover,
.pied__lien:focus-visible {
  color: var(--couleur-accent-pale);
  border-color: var(--couleur-accent-pale);
}

.pied__mentions {
  font-size: .85rem;
  line-height: 1.6;
  color: #DCC9B4;
  max-width: 46ch;
}

.pied__copyright {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 231, 217, .18);
  text-align: center;
  font-size: .82rem;
  color: #D3BFA9;
}

/* =========================================================
   12. Media queries — tablette
   ========================================================= */
@media (min-width: 600px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  .prestation {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .prestation__infos {
    flex: 1 1 auto;
    min-width: 0;
  }

  .prestation__action {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  :root {
    --hauteur-entete: 128px;   /* logo 70 px + baseline sur 1 ligne */
  }

  .conteneur {
    padding: 0 32px;
  }

  .logo__image {
    height: 70px;
  }

  .hero__logo {
    height: 250px;
    margin-bottom: 30px;
  }

  .hero__interieur {
    padding-top: 84px;
    padding-bottom: 92px;
  }

  .logo__baseline {
    font-size: .72rem;
  }

  /* 2 colonnes sur tablette */
  .grille-tarifs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .legende__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legende__item--large {
    grid-column: 1 / -1;
  }

  .grille-etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .pied__interieur {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
  }

  .tarifs,
  .etapes {
    padding: 78px 0 84px;
  }
}

/* =========================================================
   13. Media queries — desktop
   ========================================================= */
@media (min-width: 1024px) {
  .grille-etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .legende__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .legende__item--large {
    grid-column: auto;
  }

  .pied__interieur {
    grid-template-columns: 1.1fr .8fr 1.3fr;
  }
}

@media (min-width: 1200px) {
  /* 4 colonnes sur grand écran */
  .grille-tarifs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  /* Les cartes deviennent étroites : on réempile nom / prix + bouton. */
  .prestation {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .prestation__action {
    justify-content: space-between;
  }

  .prestation__nom {
    font-size: .97rem;
  }

  .prestation__prix {
    font-size: 1.4rem;
  }

  .btn-choisir {
    padding: 8px 16px;
    font-size: .82rem;
  }

  .legende__liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .legende__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* =========================================================
   14. Préférences d'accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 15. Impression ---------- */
@media print {
  .entete,
  .hero__actions,
  .btn-choisir {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .carte {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* =========================================================
   16. Modale de réservation
   ========================================================= */
.corps--fige {
  overflow: hidden;
}

.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modale[hidden] {
  display: none;
}

.modale__fond {
  position: absolute;
  inset: 0;
  background: rgba(51, 35, 26, .55);
  backdrop-filter: blur(3px);
}

.modale__boite {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--couleur-fond);
  border-radius: var(--rayon-grand) var(--rayon-grand) 0 0;
  box-shadow: 0 -8px 40px rgba(51, 35, 26, .3);
  animation: modale-entree .28s ease;
}

@keyframes modale-entree {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modale__entete {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  background: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-bordure);
}

.modale__titre {
  font-size: 1.35rem;
}

.modale__fermer {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 50%;
  background: var(--couleur-surface);
  color: var(--couleur-primaire);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--transition), color var(--transition);
}

.modale__fermer:hover,
.modale__fermer:focus-visible {
  background: var(--couleur-primaire);
  color: #fff;
}

.modale__corps {
  padding: 20px;
}

/* ---------- Fil des étapes ---------- */
.fil-etapes {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
}

.fil-etapes__item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
  opacity: .55;
}

.fil-etapes__puce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--couleur-bordure);
  color: var(--couleur-primaire);
  font-size: .72rem;
}

.fil-etapes__item--actif {
  opacity: 1;
  color: var(--couleur-accent-fonce);
}

.fil-etapes__item--actif .fil-etapes__puce {
  background: var(--couleur-accent);
  color: #fff;
}

.fil-etapes__item--fait {
  opacity: 1;
}

.fil-etapes__item--fait .fil-etapes__puce {
  background: var(--couleur-primaire);
  color: #fff;
}

/* ---------- Étapes ---------- */
.etape-resa__intro {
  font-size: .9rem;
  color: var(--couleur-texte-doux);
  margin-bottom: 10px;
}

.etape-resa__note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--rayon);
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent-fonce);
  font-size: .86rem;
}

.etape-resa__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.btn--bloc {
  width: 100%;
}

/* ---------- Récapitulatif prestation ---------- */
.recap-prestation {
  padding: 20px;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-douce);
}

.recap-prestation__nom {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--couleur-primaire);
  line-height: 1.3;
}

.recap-prestation__prix {
  margin-top: 8px;
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 700;
  color: var(--couleur-accent-fonce);
}

.recap-prestation__duree {
  margin-top: 6px;
  font-size: .88rem;
  color: var(--couleur-texte-doux);
}

/* ---------- Calendrier ---------- */
.calendrier {
  padding: 16px;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
}

.calendrier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.calendrier__mois {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--couleur-primaire);
}

.calendrier__nav {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--couleur-bordure);
  border-radius: 50%;
  background: var(--couleur-fond);
  color: var(--couleur-primaire);
  font-size: 1.3rem;
  line-height: 1;
  transition: background-color var(--transition), color var(--transition);
}

.calendrier__nav:hover:not(:disabled),
.calendrier__nav:focus-visible:not(:disabled) {
  background: var(--couleur-primaire);
  color: #fff;
}

.calendrier__nav:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.calendrier__jours-semaine,
.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendrier__jours-semaine {
  margin-bottom: 6px;
}

.calendrier__jours-semaine span {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--couleur-texte-doux);
}

.jour {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  background: transparent;
  font-family: var(--police-corps);
  font-size: .9rem;
  font-weight: 700;
  color: var(--couleur-texte);
}

.jour--vide {
  visibility: hidden;
}

.jour--indisponible {
  color: #C4B4A4;
  background: var(--couleur-fond-alt);
  cursor: not-allowed;
  font-weight: 400;
}

.jour--disponible {
  background: var(--couleur-accent-pale);
  border-color: var(--couleur-accent-pale);
  color: var(--couleur-accent-fonce);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition);
}

.jour--disponible:hover,
.jour--disponible:focus-visible {
  background: var(--couleur-accent);
  color: #fff;
  transform: translateY(-1px);
}

.jour--choisi,
.jour--choisi:hover {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: #fff;
}

.calendrier__legende {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: .76rem;
  color: var(--couleur-texte-doux);
}

.pastille {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.pastille--dispo {
  background: var(--couleur-accent-pale);
  border: 1px solid var(--couleur-accent);
}

.pastille--indispo {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  margin-left: 8px;
}

/* ---------- Créneaux ---------- */
.creneaux {
  margin-top: 18px;
}

.creneaux__invite,
.creneaux__chargement,
.creneaux__vide,
.creneaux__aide {
  font-size: .88rem;
  color: var(--couleur-texte-doux);
}

.creneaux__titre {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--couleur-primaire);
  margin-bottom: 8px;
}

.creneaux__vide {
  padding: 12px 14px;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
}

.creneaux__alerte {
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--rayon);
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent-fonce);
  font-size: .84rem;
}

.creneaux__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.creneau {
  padding: 12px 6px;
  border: 2px solid var(--couleur-accent);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-accent-fonce);
  font-weight: 700;
  font-size: .95rem;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition);
}

.creneau:hover,
.creneau:focus-visible {
  background: var(--couleur-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Récapitulatif final ---------- */
.recap-final {
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
}

.recap-final__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: .9rem;
}

.recap-final__ligne + .recap-final__ligne {
  border-top: 1px dashed var(--couleur-bordure);
}

.recap-final__ligne span {
  flex: 0 0 auto;
  color: var(--couleur-texte-doux);
}

.recap-final__ligne strong {
  text-align: right;
  color: var(--couleur-primaire);
}

/* ---------- Formulaire ---------- */
.champ {
  margin-bottom: 16px;
}

.champ__label {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

.champ__saisie {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--couleur-texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ__saisie:focus {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, .18);
}

.champ__saisie--erreur {
  border-color: #B3452F;
  background: #FDF1EE;
}

.champ__aide {
  margin-top: 6px;
  font-size: .78rem;
  color: var(--couleur-texte-doux);
}

.champ__erreur,
.formulaire__erreur {
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #B3452F;
}

.formulaire__erreur {
  padding: 11px 14px;
  border-radius: var(--rayon);
  background: #FDF1EE;
  border: 1px solid #EBC7BC;
}

.champ__erreur[hidden],
.formulaire__erreur[hidden] {
  display: none;
}

#btn-confirmer:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* ---------- Modale : tablette et desktop ---------- */
@media (min-width: 600px) {
  .modale {
    align-items: center;
    padding: 24px;
  }

  .modale__boite {
    border-radius: var(--rayon-grand);
    max-height: 88vh;
  }

  .modale__corps {
    padding: 24px 26px 26px;
  }

  .modale__entete {
    padding: 20px 26px 16px;
  }

  .fil-etapes {
    padding: 16px 26px 0;
    gap: 10px;
  }

  .etape-resa__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .btn--bloc {
    width: auto;
    min-width: 150px;
  }

  .jour {
    min-height: 44px;
  }
}

/* =========================================================
   17. Étape 4 — confirmation et règlement de l'acompte
   ========================================================= */

/* Le fil des étapes passe à 4 jalons : sur mobile, on ne garde
   que les pastilles numérotées, faute de largeur. */
.fil-etapes__texte {
  display: none;
}

/* ---------- Bandeau « rendez-vous enregistré » ---------- */
.enregistre {
  margin-bottom: 20px;
  text-align: center;
}

.enregistre__icone {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 8px;
}

.enregistre__titre {
  font-size: 1.4rem;
}

/* ---------- Bandeau du montant ---------- */
.acompte {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 18px 20px;
  text-align: center;
  background: linear-gradient(140deg, var(--couleur-accent-pale) 0%, var(--couleur-fond-alt) 100%);
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-grand);
}

.acompte__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--couleur-accent-fonce);
}

.acompte__montant {
  margin: 4px 0 6px;
  font-family: var(--police-titre);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--couleur-primaire);
}

.acompte__note {
  font-size: .82rem;
  color: var(--couleur-texte-doux);
}

/* ---------- Les deux moyens de règlement ---------- */
.paiements {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Les deux blocs sont volontairement identiques : aucun des deux
   moyens de paiement n'est privilégié. */
.bloc-paiement {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  text-align: center;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-douce);
}

.bloc-paiement[hidden] {
  display: none;
}

.bloc-paiement__titre {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
}

.bloc-paiement__instruction {
  margin-top: 12px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--couleur-texte-doux);
}

.bloc-paiement__instruction strong {
  color: var(--couleur-primaire);
  white-space: nowrap;
}

/* ---------- Logos typographiques (aucune image externe) ---------- */
.marque {
  margin-bottom: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-family: var(--police-corps);
}

.marque--paypal .marque__pay {
  color: #253B80;
}

.marque--paypal .marque__pal {
  color: #179BD7;
}

.marque--wero {
  color: var(--couleur-accent-fonce);
  letter-spacing: .04em;
}

/* ---------- Bouton / numéro de règlement ---------- */
.lien-paiement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 13px 20px;
  border: 2px solid var(--couleur-accent);
  border-radius: 999px;
  background: var(--couleur-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.lien-paiement:hover,
.lien-paiement:focus-visible {
  background: var(--couleur-accent-fonce);
  border-color: var(--couleur-accent-fonce);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156, 107, 42, .3);
}

/* Le numéro Wero se lit avant de se cliquer : on le laisse en clair. */
.lien-paiement--wero {
  background: var(--couleur-fond-alt);
  color: var(--couleur-primaire);
  font-family: var(--police-titre);
  font-size: 1.25rem;
  letter-spacing: .01em;
  white-space: nowrap;
}

.lien-paiement--wero:hover,
.lien-paiement--wero:focus-visible {
  background: var(--couleur-accent);
  color: #fff;
}

/* ---------- Message de clôture ---------- */
.cloture {
  margin-top: 20px;
  padding: 14px 16px;
  text-align: center;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--couleur-texte-doux);
  background: var(--couleur-fond-alt);
  border-radius: var(--rayon);
}

/* ---------- Étape 4 : tablette et desktop ---------- */
@media (min-width: 600px) {
  .fil-etapes__texte {
    display: inline;
  }

  .paiements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* =========================================================
   18. Mentions légales et confidentialité
   ========================================================= */

/* ---------- Liens dans le pied de page ---------- */
.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
}

.pied__lien--bouton {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--couleur-accent);
  background: none;
  /* Un <button> n'hérite ni de la couleur ni de la police du parent :
     sans cette ligne, le texte s'affiche en noir sur le fond brun. */
  color: inherit;
  font-family: inherit;
  font-size: .88rem;
  text-align: left;
}

/* ---------- Modale de texte ---------- */
.modale__boite--texte {
  max-width: 680px;
}

.modale__pied {
  position: sticky;
  bottom: 0;
  padding: 14px 20px 18px;
  background: var(--couleur-fond);
  border-top: 1px solid var(--couleur-bordure);
}

.legal__titre {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: var(--couleur-accent-fonce);
}

.legal__titre:first-child {
  margin-top: 0;
}

.legal__texte {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--couleur-texte-doux);
}

.legal__lien {
  color: var(--couleur-accent-fonce);
  border-bottom: 1px solid var(--couleur-accent);
  overflow-wrap: anywhere;
}

.legal__liste {
  margin: 0;
  padding: 14px 16px;
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.legal__ligne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.legal__ligne + .legal__ligne {
  border-top: 1px dashed var(--couleur-bordure);
}

.legal__liste dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

.legal__liste dd {
  margin: 0;
  font-size: .92rem;
  color: var(--couleur-primaire);
  overflow-wrap: anywhere;
}

/* Signale visuellement ce qui reste à renseigner. */
.legal__acompleter {
  color: var(--couleur-accent-fonce);
  font-style: italic;
}

@media (min-width: 600px) {
  .legal__ligne {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
  }

  .legal__liste dd {
    text-align: right;
  }

  .modale__pied {
    padding: 16px 26px 20px;
    text-align: right;
  }
}

/* =========================================================
   19. Page confirmer.html
   ========================================================= */
.page-simple {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(240, 221, 190, .6) 0%, rgba(240, 221, 190, 0) 60%),
    var(--couleur-fond);
}

.page-simple__corps {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 56px;
}

.fiche-etat {
  width: 100%;
  max-width: 520px;
  padding: 32px 24px 28px;
  text-align: center;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-top: 4px solid var(--couleur-accent);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
}

/* Une couleur de liseré par issue, pour identifier le résultat
   d'un coup d'œil sans avoir à lire. */
.fiche-etat--succes {
  border-top-color: #4C8A5A;
}

.fiche-etat--annule {
  border-top-color: #B3452F;
}

.fiche-etat--neutre {
  border-top-color: var(--couleur-bordure);
}

.fiche-etat--erreur {
  border-top-color: #B3452F;
}

.fiche-etat__icone {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 14px;
}

.fiche-etat__titre {
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  margin-bottom: 10px;
}

.fiche-etat__texte {
  font-size: 1rem;
  color: var(--couleur-texte-doux);
}

.fiche-etat__detail {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
  font-size: .85rem;
  color: var(--couleur-texte-doux);
}

.fiche-etat__detail[hidden] {
  display: none;
}

.fiche-etat__retour {
  margin-top: 26px;
}

.pied--simple {
  padding: 22px 0 18px;
}

.pied--simple .pied__copyright {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (min-width: 600px) {
  .fiche-etat {
    padding: 40px 36px 34px;
  }
}