/* ===== Couleurs du site ===== */
:root {
  --ivoire: #F5F1E8;     /* Fond principal */
  --lin: #E7DFD2;        /* Fond de l'en-tête */
  --olive: #536647;      /* Titres et boutons */
  --sauge: #DCE3D6;      /* Fonds des rubriques */
  --champagne: #C6AA8C;  /* Touches décoratives */
  --anthracite: #30362F; /* Texte courant */

  --police-titre: "Cormorant Garamond", Georgia, serif;
  --police-texte: "Jost", "Segoe UI", sans-serif;
  --hauteur-menu: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background: var(--ivoire);
  color: var(--anthracite);
  font-family: var(--police-texte);
  font-weight: 300;
  line-height: 1.7;
  padding-top: var(--hauteur-menu);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===== Menu ===== */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: var(--hauteur-menu);
  display: flex;
  align-items: center;
  padding: 0 40px;
  border-bottom: 1px solid rgba(198, 170, 140, .45);
}
/* Fond de la barre : ivoire doux, opaque (sur un pseudo-élément pour ne pas gêner le menu téléphone) */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #F3EEE4;
}

.entete-logo img {
  height: 60px;
  width: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 58%, transparent 72%);
}
/* Sur l'accueil, le logo est déjà dans l'image */
.page-accueil .entete-logo { display: none; }

.menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.menu a {
  position: relative;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color .3s ease;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--champagne);
  opacity: 0;
  transition: left .3s ease, right .3s ease, opacity .3s ease;
}
.menu a:hover { color: var(--olive); }
.menu a:hover::after,
.menu a[aria-current="page"]::after { left: 0; right: 0; opacity: 1; }
.menu a[aria-current="page"] { color: var(--olive); }

/* Menu déroulant « Prestations » */
.sous-menu { position: relative; }
.fleche { font-size: .7em; margin-left: 2px; }
.sous-menu-liste {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 230px;
  padding: 12px 0;
  background: var(--ivoire);
  border: 1px solid rgba(198, 170, 140, .6);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(48, 54, 47, .12);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
/* Zone invisible pour ne pas perdre le survol entre le lien et la liste */
.sous-menu-liste::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.sous-menu:hover .sous-menu-liste,
.sous-menu:focus-within .sous-menu-liste {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 12px);
}
.sous-menu-liste a {
  padding: 10px 24px;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}
.sous-menu-liste a::after { display: none; }
.sous-menu-liste a:hover { background: var(--sauge); }

/* Bouton « Réserver » */
.menu .bouton-reserver {
  background: var(--olive);
  color: var(--ivoire);
  padding: 10px 22px;
  border-radius: 3px;
  transition: background .3s ease;
}
.menu .bouton-reserver::after { display: none; }
.menu .bouton-reserver:hover,
.menu .bouton-reserver[aria-current="page"] { background: var(--anthracite); color: var(--ivoire); }

/* Bouton hamburger (caché sur ordinateur) */
.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--olive);
  transition: transform .3s ease, opacity .3s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.menu-ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== Accueil : image plein écran ===== */
/* L'image commence sous le menu pour que le logo ne soit pas caché */
.accueil {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--hauteur-menu));
  height: calc(100svh - var(--hauteur-menu));
  background: var(--lin);
}
/* L'image remplit l'écran, un peu élargie vers la gauche : le logo se retrouve plus près du bord.
   Le texte est placé à l'intérieur de l'image, donc il reste toujours sous le logo. */
.accueil-image {
  position: absolute;
  right: 0;
  top: 10%;
  transform: translateY(-10%);
  width: max(110%, calc((100svh - var(--hauteur-menu)) * 1.7768)); /* 110 % : plus ce chiffre est grand, plus le logo part à gauche */
  aspect-ratio: 1672 / 941;
  background: url("images/accueil.webp") center / 100% 100% no-repeat;
  container-type: inline-size;
}
.accueil-texte {
  position: absolute;
  left: 26.9%;  /* centre du logo dans l'image */
  top: 51%;     /* juste sous le logo */
  transform: translateX(-50%);
  width: 32%;
  text-align: center;
}
.accueil-texte .pied-signature { font-size: clamp(1.1rem, 1.55cqw, 2.2rem); }
.accueil-texte .pied-auteur {
  font-size: clamp(.75rem, .85cqw, 1.1rem);
  color: rgba(48, 54, 47, .85);
  margin: .6em 0 1.8em;
}
.accueil-texte .bouton { padding: clamp(12px, 1cqw, 18px) clamp(32px, 3cqw, 56px); }

/* Texte lu par Google et les lecteurs d'écran, mais invisible */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Pages intérieures ===== */
.bandeau {
  text-align: center;
  padding: 88px 24px 64px;
  background: var(--lin);
}
.surtitre {
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 400;
  margin-bottom: 12px;
}
h1, h2 {
  font-family: var(--police-titre);
  font-weight: 500;
  color: var(--olive);
  line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 20px; }

.ornement {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--champagne);
  margin: 24px auto 0;
}

.section {
  padding: 96px 40px;
  scroll-margin-top: var(--hauteur-menu); /* pour que le menu ne cache pas le titre */
}
html { scroll-behavior: smooth; }
.section-sauge { background: var(--sauge); }

/* Image + texte côte à côte */
.duo {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.duo-inverse .emplacement { order: 2; }

.texte { max-width: 480px; }
.texte p + p { margin-top: 16px; }
.texte-centre { margin: 0 auto; text-align: center; max-width: 680px; }
.titre-centre { text-align: center; margin-bottom: 48px; }

.a-venir { font-style: italic; color: rgba(48, 54, 47, .55); }

.citation {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-style: italic;
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  padding: 40px 16px;
}

/* Emplacements photo / vidéo en attente */
.emplacement {
  aspect-ratio: 4 / 3;
  background: var(--sauge);
  border: 1px solid var(--champagne);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-sauge .emplacement { background: var(--ivoire); }
.emplacement span {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
}
.emplacement-portrait { aspect-ratio: 4 / 5; }

/* Photos des sections */
.photo-section {
  width: 100%;
  max-width: 420px;
  justify-self: center;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(48, 54, 47, .15);
}
.emplacement-carre { aspect-ratio: 1 / 1; }
.galerie-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.emplacement-video { aspect-ratio: 9 / 16; }
.video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--anthracite);
  border-radius: 4px;
}
/* En plein écran : vidéo entière, avec des bandes noires sur les côtés */
.video:fullscreen { object-fit: contain; background: #000; border-radius: 0; }
.video:-webkit-full-screen { object-fit: contain; background: #000; border-radius: 0; }

.galerie {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Vidéos verticales (format téléphone) */
.videos {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ===== Pied de page ===== */
/* Rappel de la signature et du bouton Réserver en bas de chaque page */
.pied {
  text-align: center;
  padding: 64px 16px 72px;
  background: var(--lin);
  border-top: 1px solid rgba(198, 170, 140, .45);
}
.pied .ornement { margin: 0 auto 28px; }
.pied-signature {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--olive);
}
.pied-auteur {
  font-style: italic;
  font-size: .9rem;
  color: rgba(48, 54, 47, .75);
  margin: 12px 0 32px;
}
.pied-auteur:last-child { margin-bottom: 0; }
/* Réseaux sociaux */
.reseaux { display: flex; justify-content: center; gap: 14px; margin-top: 28px; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--olive);
  transition: background .3s ease, color .3s ease;
}
.reseaux a:hover { background: var(--olive); color: var(--ivoire); border-color: var(--olive); }
.reseaux svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reseaux svg .plein { fill: currentColor; stroke: none; }
.accueil-texte .reseaux { margin-top: 1.4em; }
.accueil-texte .reseaux a { background: rgba(245, 241, 232, .75); }
.coordonnees-reseaux a { text-decoration: underline; text-underline-offset: 3px; }
.pied-liens { margin-top: 28px; font-size: .8rem; letter-spacing: .05em; }
.pied-liens a { color: rgba(48, 54, 47, .7); text-decoration: underline; text-underline-offset: 3px; }
.pied-liens a:hover { color: var(--olive); }

/* ===== L'esprit C&Bio : philosophie ===== */
.duo-philosophie { align-items: start; }
/* La photo reste visible pendant la lecture */
.duo-philosophie .photo-section {
  position: sticky;
  top: calc(var(--hauteur-menu) + 48px);
}
.texte-philosophie { max-width: 540px; }
.texte-philosophie h2 { margin-bottom: 8px; }
.accroche {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--champagne);
  margin-bottom: 40px;
}
.texte-philosophie p { text-align: justify; hyphens: auto; }
.texte-philosophie .accroche { text-align: left; }
.texte-philosophie strong { font-weight: 500; color: var(--olive); }
.texte p.phrase-forte {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--olive);
  text-align: left;
  border-left: 1px solid var(--champagne);
  padding-left: 20px;
  margin: 40px 0 24px;
}
.texte p.phrase-forte:first-of-type { margin-top: 0; }
.signature { margin-top: 56px; }
.signature .ornement { margin: 0 0 24px; }
.texte .signature p {
  margin-top: 0;
  text-align: left;
  font-style: italic;
  font-size: .9rem;
  color: rgba(48, 54, 47, .75);
}
.texte .signature .signature-nom {
  font-family: var(--police-titre);
  font-style: normal;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--olive);
  margin-bottom: 4px;
}

/* ===== Savoir-faire : texte long centré ===== */
.texte-long {
  max-width: 680px;
  margin: 0 auto;
}
.texte-long .intro-long {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--anthracite);
  border-left: 1px solid var(--champagne);
  padding-left: 20px;
  margin-bottom: 20px;
}
.phrase-finale {
  margin-top: 72px;
  color: var(--olive);
}

/* ===== Prestations ===== */
.accroche-bandeau { margin: 12px 0 0; color: rgba(48, 54, 47, .7); }
.section-intro { padding-bottom: 0; }
.intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
}
.cartes {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}
.carte { scroll-margin-top: calc(var(--hauteur-menu) + 24px); }
.carte .emplacement { margin-bottom: 24px; }

/* Une seule photo dans une carte */
.carte-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 24px;
}

/* Deux photos côte à côte dans une carte (même hauteur que les autres cartes) */
.carte-photos {
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.carte-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}.carte h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.carte h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--champagne);
  margin-top: 14px;
}

.carte-exclusive {
  max-width: 1140px;
  margin: 80px auto 0;
  padding: 64px 32px;
  text-align: center;
  background: var(--olive);
  color: var(--ivoire);
  border-radius: 4px;
  scroll-margin-top: calc(var(--hauteur-menu) + 24px);
}
.carte-exclusive h2 { color: var(--ivoire); margin-bottom: 0; }
.carte-exclusive .ornement { margin: 20px auto 24px; }
.carte-exclusive p:not(.surtitre) { max-width: 560px; margin: 0 auto; }
.carte-exclusive p.mention-tarif {
  margin-top: 28px;
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--champagne);
}

.conclusion { text-align: center; padding-top: 0; }
/* En italique, la police dessine le « & » comme un « Et » : on le garde droit */
.esperluette { font-style: normal; }
.bouton {
  display: inline-block;
  background: var(--olive);
  color: var(--ivoire);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 48px;
  border-radius: 3px;
  transition: background .3s ease;
}
.bouton:hover { background: var(--anthracite); }

/* ===== Tarifs ===== */
.tarifs {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.tarifs-groupe h2 { text-align: center; margin-bottom: 28px; }

/* Une ligne = nom de la prestation + 3 colonnes de prix */
.tarifs-entete,
.tarif {
  display: grid;
  grid-template-columns: 1fr repeat(3, 92px);
  align-items: baseline;
  column-gap: 8px;
}
.tarifs-entete span {
  text-align: right;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 400;
  padding-bottom: 8px;
}
.tarif {
  padding: 18px 0;
  border-top: 1px solid rgba(198, 170, 140, .45);
}
.tarif:last-child { border-bottom: 1px solid rgba(198, 170, 140, .45); }
.tarif-nom strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--anthracite);
  line-height: 1.3;
}
.tarif-nom span { font-size: .9rem; color: rgba(48, 54, 47, .7); }
.tarif .prix {
  text-align: right;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--olive);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; /* chiffres alignés */
}
.tarif .prix-unique { grid-column: 2 / -1; }
.prix small {
  font-family: var(--police-texte);
  font-size: .75rem;
  font-weight: 300;
  color: rgba(48, 54, 47, .7);
}

/* L'Instant Nocturne sur la page Tarifs */
.carte-exclusive p.exclusive-accroche {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.carte-exclusive p.forfait {
  margin-top: 32px;
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.forfait strong {
  font-family: var(--police-titre);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--champagne);
  margin-left: 6px;
  font-variant-numeric: lining-nums;
}
.carte-exclusive p.forfait-note { margin-top: 8px; font-size: .9rem; opacity: .85; }

/* Informations tarifaires */
.infos-tarifs {
  max-width: 620px;
  margin: 0 auto;
}
.infos-tarifs p + p { margin-top: 4px; }

/* ===== Contact ===== */
.coordonnees dt {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 400;
  margin-top: 24px;
}
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd {
  font-family: var(--police-titre);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--anthracite);
  font-variant-numeric: lining-nums;
}
.coordonnees dd a { transition: color .3s ease; }
.coordonnees dd a:hover { color: var(--olive); }
.devis {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(198, 170, 140, .45);
}
.devis .bouton { margin-top: 28px; }

/* ===== Réserver ===== */
.section-horaires { padding-top: 64px; padding-bottom: 64px; }
.horaires {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.horaire {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid rgba(198, 170, 140, .6);
  border-radius: 4px;
  background: var(--ivoire);
}
.horaire-nuit { background: var(--olive); color: var(--ivoire); border-color: var(--olive); }
.horaire-jours { font-size: .95rem; margin-top: 4px; }
.horaire-heures {
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 500;
  color: var(--olive);
  font-variant-numeric: lining-nums;
}
.horaire-nuit .horaire-heures { color: var(--ivoire); }
.horaires-note { text-align: center; max-width: 620px; margin: 28px auto 0; font-size: .95rem; }
.horaires-note a, .resa a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }

.resa { max-width: 820px; margin: 0 auto; }
.etape {
  background: var(--ivoire);
  border-radius: 4px;
  padding: 40px;
  margin-bottom: 24px;
}
.etape h2 { font-size: 1.8rem; display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.etape-num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  font-size: 1.1rem;
  color: var(--champagne);
  font-variant-numeric: lining-nums;
}
.etape-recap { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(198, 170, 140, .45); }
.etiquette {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 400;
  margin-bottom: 12px;
}

.resa-message { padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; }
.resa-message-erreur { background: #F3E1DC; color: #7A2E1F; }
.resa-message-info { background: var(--ivoire); border-left: 3px solid var(--olive); }

.choix-formule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.formule, .pastille { position: relative; }
.formule input, .pastille input, .prestation input { position: absolute; opacity: 0; pointer-events: none; }
.formule > span {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(198, 170, 140, .6);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.formule strong { display: block; font-family: var(--police-titre); font-size: 1.25rem; font-weight: 500; color: var(--olive); }
.formule small { font-size: .85rem; }
.formule input:checked + span { border-color: var(--olive); background: var(--sauge); box-shadow: inset 0 0 0 1px var(--olive); }
.formule input:focus-visible + span, .pastille input:focus-visible + span, .prestation input:focus-visible ~ .prestation-nom { outline: 2px solid var(--olive); outline-offset: 2px; }

.choix-longueur { margin-bottom: 28px; }
.pastilles { display: flex; gap: 10px; flex-wrap: wrap; }
.pastille span {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid rgba(198, 170, 140, .8);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pastille input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--ivoire); }

.groupe-prestations { border: none; margin-bottom: 24px; }
.groupe-prestations legend {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--olive);
  margin-bottom: 8px;
}
.prestation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 48px;
  border-bottom: 1px solid rgba(198, 170, 140, .35);
  cursor: pointer;
  transition: background .2s ease;
}
.prestation:hover { background: rgba(220, 227, 214, .5); }
.prestation::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  border: 1px solid var(--champagne);
  border-radius: 3px;
  background: #fff;
}
.prestation:has(input:checked) { background: var(--sauge); }
.prestation:has(input:checked)::before { background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F5F1E8' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--olive); }
.prestation-nom { flex: 1; }
.prestation-nom strong { display: block; font-weight: 500; }
.prestation-nom small { font-size: .85rem; color: rgba(48, 54, 47, .7); }
.prestation-prix {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--olive);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.calendrier { max-width: 420px; margin: 0 auto 32px; }
.calendrier-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendrier-tete p { font-family: var(--police-titre); font-size: 1.4rem; color: var(--olive); text-transform: capitalize; }
.calendrier-nav {
  width: 40px; height: 40px;
  border: 1px solid rgba(198, 170, 140, .6);
  border-radius: 50%;
  background: none;
  font-size: 1.4rem;
  color: var(--olive);
  cursor: pointer;
}
.calendrier-nav:disabled { opacity: .3; cursor: default; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.calendrier-jour-nom { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); padding-bottom: 4px; }
.calendrier-jour {
  aspect-ratio: 1;
  border: 1px solid rgba(83, 102, 71, .35);
  border-radius: 50%;
  background: #fff;
  font: inherit;
  font-variant-numeric: lining-nums;
  color: var(--anthracite);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.calendrier-jour:hover:not(:disabled) { background: var(--sauge); }
.calendrier-jour:disabled { background: none; border-color: transparent; color: rgba(48, 54, 47, .25); cursor: default; }
.calendrier-jour.choisi { background: var(--olive); border-color: var(--olive); color: var(--ivoire); }
.calendrier-chargement { grid-column: 1 / -1; font-style: italic; color: rgba(48, 54, 47, .6); }

.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.creneau {
  padding: 10px 0;
  border: 1px solid rgba(83, 102, 71, .45);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-variant-numeric: lining-nums;
  color: var(--olive);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.creneau:hover { background: var(--sauge); }
.creneau.choisi { background: var(--olive); color: var(--ivoire); }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.champs label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 400; }
.champs small { font-weight: 300; color: rgba(48, 54, 47, .6); }
.champs input, .champs textarea {
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(198, 170, 140, .8);
  border-radius: 3px;
  background: #fff;
  color: var(--anthracite);
}
.champs input:focus, .champs textarea:focus { outline: 2px solid var(--olive); outline-offset: 0; border-color: var(--olive); }
.champ-large { grid-column: 1 / -1; }
.champ-adresse { position: relative; }
.suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 5;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(198, 170, 140, .8);
  border-top: none;
  box-shadow: 0 12px 24px rgba(48, 54, 47, .12);
}
.suggestions button {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.suggestions button:hover { background: var(--sauge); }
.adresse-info { font-size: .9rem; margin-top: -8px; }
.adresse-ok { color: var(--olive); }
.adresse-hors { color: #7A2E1F; }

.recap-date {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  color: var(--olive);
  margin-bottom: 16px;
}
.recap-date::first-letter { text-transform: uppercase; }
.recap-date small { display: block; font-family: var(--police-texte); font-size: .85rem; color: rgba(48, 54, 47, .7); text-transform: none; }
.recap-lignes { list-style: none; font-variant-numeric: lining-nums; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); }
.recap-total { font-weight: 500; }
.recap-acompte { color: var(--olive); font-weight: 500; font-size: 1.05rem; }
.case-conditions { display: flex; gap: 12px; align-items: flex-start; margin: 28px 0; font-size: .9rem; cursor: pointer; }
.case-actualites { margin-bottom: -12px; }
.case-conditions input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--olive); flex-shrink: 0; }
.bouton-payer { width: 100%; border: none; cursor: pointer; font-family: var(--police-texte); }
.bouton-payer:disabled { opacity: .6; cursor: wait; }
.paiement-securise { text-align: center; font-size: .8rem; color: rgba(48, 54, 47, .65); margin-top: 12px; }

/* Pages confirmation / mon rendez-vous */
.resa-fiche {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(198, 170, 140, .5);
  border-radius: 4px;
  padding: 40px;
}
.fiche-intro { font-size: 1.1rem; margin-bottom: 24px; }
.fiche-adresse { margin: -8px 0 16px; color: rgba(48, 54, 47, .75); }
.fiche-note { font-size: .9rem; margin: 24px 0; color: rgba(48, 54, 47, .8); }
.resa-fiche a:not(.bouton) { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.fiche-annuler { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(198, 170, 140, .45); }
.resa-fiche .bouton { border: none; cursor: pointer; font-family: var(--police-texte); }
.bouton-secondaire { background: transparent !important; color: #7A2E1F !important; box-shadow: inset 0 0 0 1px #7A2E1F; }
.bouton-secondaire:hover { background: #F3E1DC !important; }
.bouton:disabled { opacity: .5; cursor: wait; }

/* Espace privé */
.page-admin .entete { gap: 16px; }
.admin-titre { font-family: var(--police-titre); font-size: 1.3rem; color: var(--olive); }
.admin-deconnexion { margin-left: auto; background: none; border: 1px solid rgba(198, 170, 140, .8); border-radius: 3px; padding: 8px 14px; font: inherit; font-size: .85rem; cursor: pointer; }
.admin { max-width: 900px; margin: 0 auto; padding: 40px 16px 80px; }
.admin-carte { background: #fff; border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; padding: 32px; margin-bottom: 24px; }
.admin-carte h2 { font-size: 1.7rem; margin-bottom: 16px; }
.admin-connexion { max-width: 400px; margin: 40px auto; display: flex; flex-direction: column; gap: 16px; }
.admin-connexion h1 { font-size: 2rem; }
.admin-connexion label, .admin-bloquer label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.admin input { font: inherit; padding: 10px 12px; border: 1px solid rgba(198, 170, 140, .8); border-radius: 3px; }
.admin .bouton { border: none; cursor: pointer; font-family: var(--police-texte); }
.admin-aide { font-size: .9rem; color: rgba(48, 54, 47, .7); margin-bottom: 16px; }
.admin-vide { font-style: italic; color: rgba(48, 54, 47, .6); }
.admin-jour { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 500; color: var(--olive); margin: 24px 0 8px; }
.admin-jour::first-letter { text-transform: uppercase; }
.admin-rdv { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(198, 170, 140, .35); font-size: .92rem; }
.admin-rdv-annule { opacity: .6; }
.admin-rdv-heure { font-family: var(--police-titre); font-size: 1.4rem; color: var(--olive); font-variant-numeric: lining-nums; line-height: 1.2; }
.admin-rdv-heure small { display: block; font-size: .9rem; color: rgba(48, 54, 47, .6); }
.admin-nuit { display: inline-block; margin-top: 4px; padding: 2px 8px; background: var(--olive); color: var(--ivoire); font-family: var(--police-texte); font-size: .7rem; border-radius: 2px; }
.admin-rdv-nom { font-weight: 500; font-size: 1.05rem; }
.admin-rdv a { color: var(--olive); }
.admin-rdv-message { font-style: italic; color: rgba(48, 54, 47, .75); }
.admin-rdv-prix { margin-top: 4px; font-variant-numeric: lining-nums; }
.admin-etat { font-weight: 400; font-size: .8rem; color: #7A2E1F; margin-left: 8px; }
.admin-annuler { background: none; border: 1px solid #7A2E1F; color: #7A2E1F; border-radius: 3px; padding: 8px 12px; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.admin-annuler:hover { background: #F3E1DC; }
.admin-bloquer { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.admin-periode { border: none; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.admin-periode legend { font-size: .85rem; margin-bottom: 6px; }
.admin-choix { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: .9rem !important; cursor: pointer; }
.admin-choix input { accent-color: var(--olive); }
.admin-heures { display: flex; gap: 12px; width: 100%; }
.admin-ajouter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.admin-ajouter > label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.admin-large, .admin-prestations { grid-column: 1 / -1; }
.admin-prestations { border: none; }
.admin-prestations legend { font-size: .85rem; margin-bottom: 8px; }
#ajout-prestations { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.admin-manuel { background: var(--champagne); }
@media (max-width: 640px) { .admin-ajouter { grid-template-columns: 1fr; } }
.admin-blocages { list-style: none; }
.admin-blocages li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid rgba(198, 170, 140, .35); }
.admin-blocages li span::first-letter { text-transform: uppercase; }
.admin-blocages button { background: none; border: none; color: var(--olive); text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .admin-rdv { grid-template-columns: 1fr; gap: 6px; }
  .admin-carte { padding: 22px 16px; }
}

/* Conditions de réservation */
.conditions h2 { font-size: 1.6rem; margin: 40px 0 12px; }
.conditions h2:first-child { margin-top: 0; }
.conditions ul { padding-left: 20px; margin: 12px 0; }
.conditions li + li { margin-top: 8px; }
.conditions strong { font-weight: 500; color: var(--olive); }
.conditions a { color: var(--olive); text-decoration: underline; }

@media (max-width: 640px) {
  .resa-fiche { padding: 28px 18px; }
  .horaires, .choix-formule, .champs { grid-template-columns: 1fr; }
  .etape { padding: 28px 18px; }
  .etape h2 { font-size: 1.5rem; }
  .prestation { flex-wrap: wrap; gap: 4px 12px; }
  .prestation-prix { margin-left: auto; }
}

/* ===== Menu hamburger (tablette et téléphone) ===== */
@media (max-width: 1100px) {
  :root { --hauteur-menu: 64px; }
  .entete { padding: 0 16px; }
  .entete-logo img { height: 50px; }

  .burger { display: block; }
  .cartes { grid-template-columns: repeat(2, 1fr); }

  /* Menu plein écran */
  .menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 80px 16px 32px;
    overflow-y: auto;
    background: var(--ivoire);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  /* Centré verticalement s'il y a la place, sinon on peut faire défiler */
  .menu > :first-child { margin-top: auto; }
  .menu > :last-child { margin-bottom: auto; }
  .menu-ouvert .menu { opacity: 1; visibility: visible; }
  .menu-ouvert { overflow: hidden; }
  .menu a {
    font-family: var(--police-titre);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    padding: 2px 0;
  }

  /* Les prestations s'affichent directement sous « Prestations » */
  .sous-menu { text-align: center; }
  .fleche { display: none; }
  .sous-menu-liste {
    position: static;
    transform: none;
    opacity: 1;
    visibility: inherit; /* suit le menu : invisible et non cliquable quand il est fermé */
    min-width: 0;
    padding: 4px 0 0;
    background: none;
    border: none;
    box-shadow: none;
    align-items: center;
  }
  .sous-menu:hover .sous-menu-liste,
  .sous-menu:focus-within .sous-menu-liste { transform: none; visibility: inherit; }
  .sous-menu-liste::before { display: none; }
  .menu .sous-menu-liste a {
    font-family: var(--police-texte);
    font-size: .95rem;
    font-weight: 300;
    padding: 4px 0;
    color: var(--olive);
  }
  .sous-menu-liste a:hover { background: none; }

  .menu .bouton-reserver {
    margin-top: 12px;
    font-family: var(--police-texte);
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 40px;
  }
}

/* ===== Tablette et téléphone ===== */
@media (max-width: 860px) {
  .section { padding: 64px 16px; }
  .bandeau { padding: 56px 16px 40px; }
  .duo { grid-template-columns: 1fr; gap: 32px; }
  .duo-inverse .emplacement { order: 0; }
  .texte { max-width: none; }

  /* Tarifs : les prix passent sous le nom, avec leur longueur de cheveux */
  .tarifs-entete { display: none; }
  .tarif { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .tarif-nom { grid-column: 1 / -1; }
  .tarif .prix { text-align: left; font-size: 1.2rem; }
  .tarif .prix[data-taille]::before {
    content: attr(data-taille);
    display: block;
    font-family: var(--police-texte);
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--champagne);
  }
  .tarif .prix-unique { grid-column: 1 / -1; }
  .cartes { grid-template-columns: 1fr; gap: 48px; }
  .carte-exclusive { margin-top: 56px; padding: 48px 20px; }
  .duo-philosophie .photo-section { position: static; }
  .texte-philosophie p { text-align: left; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .videos { grid-template-columns: 1fr; gap: 24px; max-width: 360px; }
}

/* Téléphone en hauteur : on garde le logo de l'accueil dans l'écran */
@media (max-aspect-ratio: 1/1) {
  .accueil-image {
    right: auto;
    left: 20%;
    top: 0;
    transform: translateX(-20%);
    width: max(100%, calc((100svh - var(--hauteur-menu)) * 1.7768));
  }
}

/* Promotions */
.prix-barre { font-weight: 400; font-size: .8em; color: rgba(48, 54, 47, .5); margin-right: 4px; }
.promos { max-width: 900px; margin: 0 auto; display: grid; gap: 32px; }
.promo {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: #fff;
  border: 1px solid rgba(198, 170, 140, .5);
  border-radius: 4px;
  overflow: hidden;
}
.promo { align-items: center; }
.promo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.promo-texte { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.promo-badge {
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--olive);
  color: var(--ivoire);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 2px;
}
.promo h2 { margin-bottom: 0; }
.promo-prix { font-family: var(--police-titre); font-size: 2rem; font-weight: 600; color: var(--olive); font-variant-numeric: lining-nums; }
.promo-prix s { font-size: 1.2rem; font-weight: 400; color: rgba(48, 54, 47, .5); margin-right: 8px; }
.promo .bouton { align-self: flex-start; margin-top: 8px; }
@media (max-width: 700px) {
  .promo { grid-template-columns: 1fr; }
  .promo-texte { padding: 28px 20px; }
}

/* Agenda de l'espace privé */
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-tete p { font-family: var(--police-titre); font-size: 1.5rem; color: var(--olive); text-transform: capitalize; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-jour {
  position: relative;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(198, 170, 140, .4);
  border-radius: 3px;
  background: var(--ivoire);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.cal-jour:hover { border-color: var(--olive); }
.cal-jour.passe { opacity: .55; }
.cal-jour.aujourdhui .cal-num { background: var(--champagne); color: #fff; border-radius: 50%; }
.cal-jour.choisi { border-color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive); background: #fff; }
.cal-num { width: 24px; height: 24px; display: grid; place-items: center; font-size: .85rem; font-variant-numeric: lining-nums; }
.cal-compte { display: none; }
.cal-pastilles { display: flex; flex-direction: column; gap: 2px; }
.cal-pastille {
  display: block;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--olive);
  color: var(--ivoire);
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: lining-nums;
}
.cal-manuel { background: var(--champagne); }
.cal-nuit { background: var(--anthracite); }
.cal-bloque { background: repeating-linear-gradient(45deg, #ddd, #ddd 4px, #eee 4px, #eee 8px); color: var(--anthracite); }
.cal-legende { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.cal-legende .cal-pastille { display: inline-block; font-size: .7rem; padding: 2px 8px; }
@media (max-width: 640px) {
  .cal-jour { min-height: 52px; padding: 4px; align-items: center; }
  .cal-pastilles { display: none; }
  .cal-compte {
    display: grid; place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--olive); color: var(--ivoire);
    font-size: .65rem;
  }
}

/* Réservation : à la carte + forfaits */
.resa { max-width: 1080px; }
.liste-prestations { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 40px; align-items: start; }
.colonne-titre {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--olive);
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--champagne);
}
.colonne-titre small { display: block; font-family: var(--police-texte); font-size: .8rem; font-weight: 300; color: rgba(48, 54, 47, .7); }
.colonne-forfaits { background: rgba(220, 227, 214, .45); border-radius: 4px; padding: 20px; }
.prestation-option { background: #fff; border: 1px dashed var(--champagne); border-radius: 3px; margin-top: 4px; }
@media (max-width: 860px) {
  .liste-prestations { grid-template-columns: 1fr; gap: 24px; }
  .colonne-forfaits { padding: 16px 12px; }
}
.tarifs-intro-forfaits { text-align: center; padding-top: 24px; border-top: 1px solid var(--champagne); }
.tarifs-intro-forfaits .surtitre { font-size: .85rem; }
.tarifs-option { text-align: center; font-size: 1rem; }
.tarifs-option strong { font-weight: 500; color: var(--olive); }

/* Espace privé : onglets, actions, panneaux prix, fiches, comptabilité */
.admin select, .admin textarea { font: inherit; padding: 10px 12px; border: 1px solid rgba(198, 170, 140, .8); border-radius: 3px; background: #fff; }
.admin-ajouter > label > select { width: 100%; }
.admin-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-onglets button { font: inherit; font-size: .9rem; padding: 10px 18px; border: 1px solid rgba(198, 170, 140, .8); border-radius: 999px; background: #fff; cursor: pointer; color: var(--anthracite); }
.admin-onglets button.actif { background: var(--olive); color: var(--ivoire); border-color: var(--olive); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-btn { display: inline-block; font: inherit; font-size: .8rem; padding: 7px 12px; border: 1px solid var(--olive); border-radius: 3px; background: #fff; color: var(--olive); cursor: pointer; text-decoration: none; }
.admin-btn:hover { background: var(--sauge); }
.admin-btn-plein { background: var(--olive); color: var(--ivoire); }
.admin-btn-plein:hover { background: var(--anthracite); border-color: var(--anthracite); }
.admin-rdv .admin-annuler { align-self: center; }
.admin-etat-ok { color: var(--olive); }
.admin-parrain { font-size: .85rem; color: #8a5a2b; }
.admin-panneau { margin-top: 14px; padding: 16px; background: var(--ivoire); border: 1px solid rgba(198, 170, 140, .6); border-radius: 4px; }
.admin-panneau-titre { font-family: var(--police-titre); font-size: 1.2rem; color: var(--olive); margin-bottom: 8px; }
.admin-lignes { list-style: none; margin-bottom: 10px; }
.admin-lignes li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); font-variant-numeric: lining-nums; }
.admin-ligne-ajout input, .admin-ligne-ajout select { padding: 6px 8px !important; font-size: .85rem; }
.admin-ligne-ajout input[data-champ="nom"] { flex: 1; min-width: 0; }
.admin-ligne-ajout input[data-champ="prix"] { width: 90px; }
.admin-ligne-ajout button { border: none; background: none; font-size: 1.2rem; cursor: pointer; color: #7A2E1F; }
.admin-ajout-ligne { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-ajout-ligne select { flex: 1; min-width: 200px; font-size: .85rem; }
.admin-remise { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.admin-remise label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.admin-remise input { width: 110px; padding: 8px !important; }
.admin-remise input[data-remise="motif"] { width: 170px; }
.admin-panneau-total { font-variant-numeric: lining-nums; margin: 6px 0; }
.admin-alerte { color: #7A2E1F; font-size: .85rem; }
.cal-total { margin-top: auto; font-size: .7rem; color: var(--olive); font-weight: 500; text-align: right; font-variant-numeric: lining-nums; }
.cal-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.cal-totaux div { background: var(--ivoire); border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; padding: 12px 14px; }
.cal-totaux span { display: block; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--champagne); }
.cal-totaux strong { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 500; color: var(--olive); font-variant-numeric: lining-nums; }
.cal-jour-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-recherche { width: 100%; margin-bottom: 12px; }
.admin-liste-clientes { list-style: none; max-height: 420px; overflow-y: auto; }
.admin-liste-clientes button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; padding: 10px 8px; border: none; border-bottom: 1px solid rgba(198, 170, 140, .35); background: none; font: inherit; cursor: pointer; }
.admin-liste-clientes button:hover { background: var(--ivoire); }
.admin-liste-clientes small { grid-column: 1 / -1; color: rgba(48, 54, 47, .6); font-size: .75rem; }
.admin-fiche-tech { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.admin-fiche-tech textarea { width: 100%; }
.admin-fiches, .admin-historique { list-style: none; margin-top: 10px; }
.admin-fiches li { padding: 10px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: start; }
.admin-fiche-date { font-size: .8rem; color: var(--champagne); font-variant-numeric: lining-nums; }
.admin-fiches button, .admin-lien { border: none; background: none; color: #7A2E1F; text-decoration: underline; font: inherit; font-size: .75rem; cursor: pointer; }
.admin-historique li { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); font-size: .9rem; font-variant-numeric: lining-nums; }
.compta-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.compta-tete label { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.compta-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 12px 0; font-variant-numeric: lining-nums; }
.compta-table th, .compta-table td { padding: 8px 6px; border-bottom: 1px solid rgba(198, 170, 140, .35); text-align: left; vertical-align: top; }
.compta-table th { font-weight: 400; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); }
.compta-table .n { text-align: right; white-space: nowrap; }
.compta-table tbody tr[data-mois-compta] { cursor: pointer; }
.compta-table tbody tr[data-mois-compta]:hover, .compta-table tr.choisi { background: var(--ivoire); }
.compta-table tr.vide td { color: rgba(48, 54, 47, .4); }
.compta-table tfoot td { font-weight: 500; border-top: 2px solid var(--olive); }
@media (max-width: 640px) {
  .cal-total { display: none; }
  .compta-table { font-size: .78rem; }
  .compta-table th:nth-child(6), .compta-table td:nth-child(6) { display: none; }
  .admin-fiches li, .admin-historique li { grid-template-columns: 1fr; }
}
.promo-parrainage { grid-template-columns: 1fr; }
.promo-parrainage img { aspect-ratio: 2 / 1; object-fit: contain; background: #f3e0bf; }
.promo-parrainage .promo-texte { padding-top: 28px; }
.promo-conditions { font-size: .85rem; color: rgba(48, 54, 47, .75); }
.promo strong { font-weight: 500; color: var(--olive); }

/* Choix du paiement (acompte ou totalité) */
.choix-paiement { border: none; margin-top: 24px; }
.mode-paiement { position: relative; display: block; margin-bottom: 8px; cursor: pointer; }
.mode-paiement input { position: absolute; opacity: 0; }
.mode-paiement span { display: block; padding: 14px 16px 14px 46px; border: 1px solid rgba(198, 170, 140, .7); border-radius: 4px; background: #fff; position: relative; }
.mode-paiement span::before { content: ""; position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; border: 1px solid var(--champagne); border-radius: 50%; background: #fff; }
.mode-paiement input:checked + span { border-color: var(--olive); background: var(--sauge); box-shadow: inset 0 0 0 1px var(--olive); }
.mode-paiement input:checked + span::before { border: 5px solid var(--olive); }
.mode-paiement input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.mode-paiement strong { display: block; font-weight: 500; font-variant-numeric: lining-nums; }
.mode-paiement small { font-size: .85rem; color: rgba(48, 54, 47, .75); }

/* ===== Boutique ===== */
.boutique { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.boutique-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.produit { background: #fff; border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.produit-visuel { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--sauge), var(--lin)); display: grid; place-items: center; }
.produit-visuel span { font-family: var(--police-titre); font-size: 3.4rem; font-style: italic; color: rgba(83, 102, 71, .45); }
.produit-texte { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.produit-marque { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.produit h2 { font-size: 1.35rem; margin: 0; }
.produit-contenance { font-size: .85rem; color: rgba(48, 54, 47, .65); }
.produit-description { font-size: .9rem; }
.produit-pied { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.produit-prix { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; color: var(--olive); font-variant-numeric: lining-nums; }
.produit-ajouter { padding: 10px 20px; border: none; cursor: pointer; font-family: var(--police-texte); font-size: .75rem; }
.produit-epuise { font-size: .8rem; color: #7A2E1F; }
.boutique-vide { grid-column: 1 / -1; text-align: center; padding: 48px 16px; background: #fff; border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; }
.boutique-vide p:first-child { font-family: var(--police-titre); font-size: 1.6rem; color: var(--olive); }
.panier { position: sticky; top: calc(var(--hauteur-menu) + 20px); background: #fff; border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; padding: 24px; }
.panier h2 { font-size: 1.6rem; margin-bottom: 12px; }
.panier-lignes { list-style: none; margin-bottom: 8px; }
.panier-lignes li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); font-size: .9rem; }
.panier-qte { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: lining-nums; }
.panier-qte button { width: 26px; height: 26px; border: 1px solid rgba(198, 170, 140, .8); border-radius: 50%; background: #fff; cursor: pointer; }
.panier-prix { font-variant-numeric: lining-nums; white-space: nowrap; }
.panier-total { display: flex; justify-content: space-between; margin: 10px 0 18px; font-variant-numeric: lining-nums; }
.panier-total strong { font-family: var(--police-titre); font-size: 1.5rem; color: var(--olive); font-weight: 600; }
.panier .champs { grid-template-columns: 1fr 1fr; gap: 12px; }
.panier .champ-large { grid-column: 1 / -1; }
.panier-message { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; margin-top: 12px; }
.panier-message textarea { font: inherit; padding: 10px; border: 1px solid rgba(198, 170, 140, .8); border-radius: 3px; }
@media (max-width: 900px) {
  .boutique { grid-template-columns: 1fr; }
  .panier { position: static; }
}
.promo-prix-condition { display: block; font-family: var(--police-texte); font-size: .8rem; font-weight: 300; color: rgba(48, 54, 47, .7); }

/* Espace privé : produits de la boutique et tarifs */
.admin-produits { list-style: none; margin-bottom: 16px; }
.admin-produits li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(198, 170, 140, .35); }
.admin-produits li.masque { opacity: .55; }
.admin-produits small { display: block; font-size: .75rem; color: rgba(48, 54, 47, .6); }
.admin-produit-prix { font-variant-numeric: lining-nums; white-space: nowrap; }
.admin-produits .admin-actions { margin-top: 0; }
.admin-tarifs { display: grid; gap: 10px; }
.admin-tarif { display: grid; grid-template-columns: 1.3fr 1.3fr auto; gap: 10px; align-items: end; padding: 10px; background: var(--ivoire); border-radius: 4px; }
.admin-tarif label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; }
.admin-tarif input { padding: 8px !important; font-size: .9rem; }
.admin-tarif-prix { display: flex; gap: 8px; }
.admin-tarif-prix input { width: 82px; }
@media (max-width: 760px) {
  .admin-tarif { grid-template-columns: 1fr; }
  .admin-produits li { grid-template-columns: 1fr auto; }
  .admin-produits .admin-actions { grid-column: 1 / -1; }
}
.panier .champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panier .champs input { width: 100%; min-width: 0; }
.panier .mode-paiement strong { font-size: .9rem; }

/* Agenda : vue d'une journée (grille horaire) */
.jour-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.jour-nav { display: flex; align-items: center; gap: 12px; }
.jour-nav h3 { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 500; color: var(--olive); text-align: center; min-width: 260px; }
.grille-jour { position: relative; margin: 8px 0 28px 58px; border-top: 1px solid rgba(198, 170, 140, .5); }
.grille-heure, .grille-demi { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(198, 170, 140, .5); }
.grille-demi { border-top: 1px dashed rgba(198, 170, 140, .3); }
.grille-heure span, .grille-demi span { position: absolute; left: -58px; top: -9px; width: 50px; text-align: right; font-variant-numeric: lining-nums; }
.grille-heure span { font-size: .85rem; color: var(--anthracite); }
.grille-demi span { font-size: .65rem; color: rgba(48, 54, 47, .45); top: -7px; }
.grille-colonne { position: absolute; inset: 0; }
.grille-rdv {
  position: absolute; z-index: 2; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 10px; border: none; border-left: 4px solid var(--olive); border-radius: 3px;
  background: var(--sauge); color: var(--anthracite); font: inherit; font-size: .8rem; text-align: left; cursor: pointer;
  box-shadow: 0 2px 6px rgba(48, 54, 47, .12);
}
.grille-rdv:hover { filter: brightness(.97); }
.grille-rdv strong { font-weight: 500; font-variant-numeric: lining-nums; }
.grille-rdv span { color: rgba(48, 54, 47, .8); }
.grille-rdv.manuel { background: #F1E6D8; border-left-color: var(--champagne); }
.grille-rdv.nuit { background: #DCDDD9; border-left-color: var(--anthracite); }
.grille-rdv.facture { opacity: .7; }
.grille-rdv-prix { font-variant-numeric: lining-nums; }
.grille-trajet { position: absolute; z-index: 1; background: repeating-linear-gradient(45deg, rgba(198, 170, 140, .12), rgba(198, 170, 140, .12) 5px, transparent 5px, transparent 10px); border-radius: 3px; }
.grille-trajet span { font-size: .6rem; color: rgba(48, 54, 47, .45); padding-left: 8px; }
.grille-bloque { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(45deg, #e4e4e4, #e4e4e4 6px, #f0f0f0 6px, #f0f0f0 12px); }
.grille-bloque span { font-size: .75rem; padding: 4px 10px; display: inline-block; }
.grille-maintenant { position: absolute; left: -6px; right: 0; z-index: 3; border-top: 2px solid #b3542f; }
.grille-maintenant::before { content: ""; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #b3542f; }
.admin-rdv.surligne { background: var(--sauge); transition: background .3s; }

/* Prochains rendez-vous et facture commune */
.prochains { list-style: none; margin-bottom: 8px; }
.prochains-jour { padding: 14px 0 4px; }
.admin-lien-jour { border: none; background: none; font-family: var(--police-titre); font-size: 1.1rem; color: var(--olive); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.prochain { display: grid; grid-template-columns: 24px 70px minmax(120px, 1fr) 2fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(198, 170, 140, .3); font-size: .88rem; font-variant-numeric: lining-nums; }
.prochain.a-facturer { background: rgba(198, 170, 140, .12); }
.prochain-case { width: 18px; height: 18px; accent-color: var(--olive); color: var(--olive); text-align: center; }
.prochain-nom small { color: #8a5a2b; }
.prochain-presta { color: rgba(48, 54, 47, .7); }
.prochain-prix { white-space: nowrap; }
.admin-selection { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 10px; border: 1px dashed var(--champagne); border-radius: 3px; cursor: pointer; }
.admin-selection input { accent-color: var(--olive); }
.barre-fusion { position: sticky; bottom: 12px; z-index: 5; margin-top: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--olive); border-radius: 4px; box-shadow: 0 8px 24px rgba(48, 54, 47, .18); font-variant-numeric: lining-nums; }
@media (max-width: 640px) {
  .jour-nav h3 { min-width: 0; font-size: 1.15rem; }
  .prochain { grid-template-columns: 24px 60px 1fr auto; }
  .prochain-presta { grid-column: 3 / -1; font-size: .78rem; }
}

/* Ajout manuel : prestations avec quantités (+ / −) */
#ajout-prestations { display: block; }
.qte-groupe { margin-bottom: 14px; }
.qte-categorie { font-family: var(--police-titre); font-style: italic; font-size: 1.05rem; color: var(--olive); margin-bottom: 4px; }
.qte-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 4px 6px; border-bottom: 1px solid rgba(198, 170, 140, .3); border-radius: 3px; }
.qte-ligne.actif { background: var(--sauge); }
.qte-nom { border: none; background: none; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; padding: 4px 0; color: var(--anthracite); }
.qte-nom small { color: rgba(48, 54, 47, .55); font-size: .75rem; }
.qte-prix { font-variant-numeric: lining-nums; font-size: .9rem; color: var(--olive); white-space: nowrap; }
.qte-prix small { color: rgba(48, 54, 47, .6); }
.qte-boutons { display: inline-flex; align-items: center; gap: 6px; }
.qte-boutons button { width: 28px; height: 28px; border: 1px solid var(--olive); border-radius: 50%; background: #fff; color: var(--olive); font-size: 1rem; line-height: 1; cursor: pointer; }
.qte-boutons button:hover { background: var(--olive); color: var(--ivoire); }
.qte-nombre { min-width: 18px; text-align: center; font-variant-numeric: lining-nums; font-weight: 500; }
@media (max-width: 640px) { .qte-ligne { grid-template-columns: 1fr auto; } .qte-prix { grid-column: 1; } .qte-boutons { grid-row: 1 / 3; grid-column: 2; } }

/* Modifier un rendez-vous */
.admin-modif { margin-bottom: 14px; }
.admin-modif label { font-size: .8rem; }
.admin-modif-prestations { max-height: 420px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid rgba(198, 170, 140, .5); border-radius: 4px; margin-bottom: 12px; }
.admin-modif-duree { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; max-width: 260px; margin-bottom: 8px; }
.admin-modif-duree input { padding: 8px !important; }

/* Devis avec lien de paiement */
.admin-devis-etat { font-size: .85rem; color: #8a5a2b; }
.admin-devis-etat.paye { color: var(--olive); font-weight: 500; }
.admin-lien-devis { width: 100%; font-size: .85rem; padding: 8px 10px !important; margin: 6px 0 4px; background: #fff; }

/* Moyen de paiement, désistement, facture rectificative */
.admin-sous-titre { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--olive); margin: 14px 0 6px; }
.admin-moyens { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-moyen { position: relative; cursor: pointer; }
.admin-moyen input { position: absolute; opacity: 0; pointer-events: none; }
.admin-moyen span { display: inline-block; padding: 8px 16px; border: 1px solid rgba(83, 102, 71, .35); border-radius: 3px; background: #fff; font-size: .9rem; transition: background .15s, color .15s; }
.admin-moyen input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--ivoire); }
.admin-moyen input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.admin-retrait { margin-left: 24px; }
.admin-panneau .admin-choix { display: flex; margin: 6px 0; line-height: 1.4; }
.admin-panneau .admin-choix input { flex: none; }
.admin-remise input[type="checkbox"], .admin-remise input[type="radio"] { width: auto; padding: 0 !important; }

/* Référencement local : mention discrète dans les titres, liens internes */
h1 .surtitre { display: block; font-family: var(--police-texte); font-style: normal; line-height: 1.6; }
.accueil-titre {
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: clamp(.66rem, .7cqw, .95rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--olive);
  margin: 1.2em auto 0;
}
/* Sur écran large, le titre tient sur une ligne ; on resserre un peu pour garder la même hauteur qu’avant */
.accueil-texte .accueil-titre + .pied-auteur { margin: .4em 0 1.15em; }
.accueil-texte .accueil-titre ~ .reseaux { margin-top: .9em; }
@media (min-aspect-ratio: 1/1) { .accueil-titre br { display: none; } }
.conclusion-liens, .promo-liens { font-size: .9rem; }
.conclusion-liens { margin-top: 14px; letter-spacing: .04em; }
.conclusion-liens a, .promo-liens a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.promo-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.promo-date { font-size: .8rem; color: rgba(48, 54, 47, .6); letter-spacing: .03em; }
.promo-sous-titre { display: block; margin-top: 6px; font-family: var(--police-texte); font-size: .9rem; font-weight: 400; letter-spacing: .04em; color: rgba(48, 54, 47, .7); }
.contact-intro { margin-bottom: 18px; }

.admin-commune { margin-top: 8px; }
.admin-etape { margin: 0; font-weight: 500; color: var(--olive); }

.admin-solde { margin: 6px 0; }