*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :root {
    --ink:     #1c1c1a;
    --mist:    #f5f2ee;
    --stone:   #e8e3dc;
    --moss:    #5a6e52;
    --moss-lt: #7a9070;
    --warm:    #c8a97a;
    --white:   #ffffff;
  }

  html {
    scroll-behavior: smooth;
    overflow-x: clip;
  }

  body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    background-color: var(--mist);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.75;
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* ── CTA BAR ── */
  .cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    background: var(--white);
    border-top: 1px solid var(--stone);
    box-shadow: 0 -4px 16px rgba(28,28,26,0.07);
    padding: 0.7rem 1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    width: 100%;
  }

  body {
    padding-bottom: 4.5rem;
  }

  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid var(--moss);
    color: var(--moss);
    white-space: nowrap;
    background: var(--white);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
  }

  .cta-btn:hover { background: var(--moss); color: var(--white); }
  .cta-btn:active { transform: scale(0.96); }

  .cta-btn-primary {
    background: var(--moss);
    color: var(--white);
  }

  .cta-btn-primary:hover {
    background: var(--moss-lt);
    border-color: var(--moss-lt);
  }

  /* Sur desktop : bandeau discret en haut */
  @media (min-width: 700px) {
    .cta-bar {
      position: sticky;
      top: 0;
      bottom: auto;
      border-top: none;
      border-bottom: 1px solid var(--stone);
      box-shadow: 0 4px 16px rgba(28,28,26,0.05);
      padding-bottom: 0.7rem;
    }
    body { padding-bottom: 0; }
  }

  /* ── NAVIGATION ── */
  .site-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 45;
    width: 100%;
    background: var(--mist);
    border-bottom: 1px solid var(--stone);
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .site-nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.3rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding: 0.6rem 1rem;
  }

  @media (min-width: 700px) {
    .site-nav {
      top: 3.5rem; /* hauteur du bandeau CTA, sticky juste au-dessus sur desktop */
    }
  }

  .site-nav-link {
    color: var(--moss);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
  }

  .site-nav-link:hover {
    border-color: var(--warm);
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown summary {
    color: var(--moss);
    cursor: pointer;
    list-style: none;
  }

  .nav-dropdown summary::-webkit-details-marker {
    display: none;
  }

  .nav-dropdown summary::after {
    content: ' ▾';
    font-size: 0.7em;
  }

  .nav-dropdown[open] summary {
    color: var(--moss-lt);
  }

  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.7rem;
    background: var(--white);
    border: 1px solid var(--stone);
    border-radius: 10px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    box-shadow: 0 6px 20px rgba(28,28,26,0.1);
    z-index: 46;
    text-align: left;
  }

  .nav-dropdown-menu a {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
  }

  .nav-dropdown-menu a:hover {
    background: var(--mist);
    color: var(--moss);
  }

  /* ── HEADER ── */
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--mist);
    border-bottom: 1px solid var(--stone);
    width: 100%;
  }

  .logo-wrap img {
    height: auto;
    width: clamp(260px, 55vw, 420px);
    margin: 0 auto;
  }

  .site-title {
    margin-top: 1rem;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--ink);
  }

  .site-subtitle {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--moss);
    padding-bottom: 0.5rem;
  }

  /* ── HERO ── */
  .hero {
    background: var(--moss);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .hero-text {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--white);
    padding: 2rem 1.5rem;
    width: 100%;
  }

  .hero-text blockquote {
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.92;
  }

  .hero-text blockquote::before { content: '\201C'; }
  .hero-text blockquote::after  { content: '\201D'; }

  /* ── MAIN ── */
  main {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* ── INTRO ── */
  .intro {
    text-align: center;
    width: 100%;
  }

  .intro h1 {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 0.6rem;
  }

  .subtitle-location {
    font-size: 0.82rem;
    color: var(--moss);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  .divider {
    width: 40px;
    height: 1px;
    background: var(--warm);
    margin: 1rem auto;
  }

  .intro p {
    color: #3a3a38;
    max-width: 540px;
    margin: 0 auto;
  }

  /* ── BENEFITS ── */
  .benefits {
    background: var(--white);
    border-radius: 2px;
    padding: 1.5rem 1rem;
    width: 100%;
    text-align: center;
  }

  .benefits h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 1rem;
  }

  .benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Sur tablette et desktop : 3 colonnes */
  @media (min-width: 500px) {
    .benefits-grid {
      flex-direction: row;
    }
    .benefit-item {
      flex: 1;
    }
  }

  .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.8rem 0.5rem;
    border-top: 1px solid var(--stone);
  }

  .benefit-icon {
    font-size: 1.3rem;
  }

  .benefit-item span {
    font-size: 0.88rem;
    color: #4a4a48;
  }

  /* ── PHOTOS ── */
  .photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    width: 100%;
  }

  @media (min-width: 480px) {
    .photos {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .photos figure {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
  }

  .photos figure img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    filter: grayscale(15%);
    transition: transform 0.4s ease;
  }

  @media (min-width: 500px) {
    .photos figure img {
      height: 220px;
    }
  }

  .photos figcaption {
    padding: 0.5rem 0.3rem;
    font-size: 0.73rem;
    color: var(--moss);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }

  /* ── PRACTICAL ── */
  .practical {
    background: var(--moss);
    color: var(--white);
    border-radius: 2px;
    padding: 1.5rem 1rem;
    text-align: center;
    width: 100%;
  }

  .practical h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 1rem;
  }

  .practical p {
    font-size: 0.92rem;
    opacity: 0.9;
    line-height: 1.85;
  }

  .practical strong {
    font-weight: 400;
    color: #d4e8c8;
  }

  .footer-rights {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: #bbb;
  }

  /* ── CONTACT grid : 2 colonnes sur mobile, 4 sur desktop ── */
  .contact {
    text-align: center;
    width: 100%;
    scroll-margin-top: 130px;
  }

  .contact h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    width: 100%;
    margin: 0 auto;
  }

  .contact-card.contact-card-wide {
    grid-column: 1 / -1;
  }

  @media (min-width: 640px) {
    .contact-grid {
      grid-template-columns: repeat(5, 1fr);
    }
    .contact-card.contact-card-wide {
      grid-column: auto;
    }
  }

  .contact-card {
    background: var(--white);
    border: 1px solid var(--stone);
    border-radius: 2px;
    padding: 1.1rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Empêche le texte de déborder */
    overflow: hidden;
    word-break: break-word;
  }

  .contact-card:hover {
    border-color: var(--moss-lt);
    box-shadow: 0 2px 10px rgba(90,110,82,0.12);
  }

  .contact-card .icon {
    font-size: 1.3rem;
  }

  .contact-card .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--moss);
  }

  .contact-card .value {
    font-size: 0.87rem;
    color: var(--ink);
    text-align: center;
    /* Permet le retour à la ligne sur les longues adresses email */
    word-break: break-all;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* ── PATHOLOGIES ── */
  .pathologies {
    background: var(--white);
    border-radius: 2px;
    padding: 1.5rem 1rem;
    width: 100%;
    text-align: center;
  }

  .pathologies h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
  }

  .pathologies > p {
    font-size: 0.95rem;
    color: #3a3a38;
    margin-bottom: 1rem;
  }

  .pathologies ul {
    display: inline-block;
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 auto 1rem;
  }

  .pathologies ul li {
    padding: 0.3rem 0 0.3rem 1.4rem;
    position: relative;
    font-size: 0.95rem;
    color: #3a3a38;
    border-bottom: 1px solid var(--stone);
  }

  .pathologies ul li:last-child {
    border-bottom: none;
  }

  .pathologies ul li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--moss);
  }

  .pathologies-note {
    font-size: 0.78rem;
    color: #999;
    font-style: italic;
    margin-top: 0.5rem;
  }

  /* ── FOOTER ── */
  footer {
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--stone);
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.04em;
  }

  .footer-stamp {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.25;
    margin: 0 auto 0.6rem;
    display: block;
    filter: sepia(60%) saturate(200%) hue-rotate(320deg);
  }

  /* ── DESKTOP ── */
  @media (min-width: 700px) {
    .logo-wrap img { width: clamp(320px, 45vw, 480px); }
    .site-title    { font-size: 2.2rem; }
    .hero-text blockquote { font-size: 1.35rem; }
    .intro h1      { font-size: 2rem; }
    main           { padding: 3rem 2rem; gap: 3rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .photos figure img { transition: none; }
  }

/* ── ARTICLE PATHOLOGIE ── */
.breadcrumb {
  font-size: 0.78rem;
  color: var(--moss);
  text-align: center;
  letter-spacing: 0.04em;
}

.breadcrumb a {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
}

.breadcrumb a:hover {
  color: var(--moss-lt);
}

.article {
  background: var(--white);
  border-radius: 2px;
  padding: 1.8rem 1.2rem;
  width: 100%;
}

.article h1 {
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.4rem;
}

.article .article-kicker {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.2rem;
}

.article h2 {
  font-size: 1.15rem;
  font-weight: 400;
  margin: 1.6rem 0 0.6rem;
  color: var(--ink);
}

.article p {
  color: #3a3a38;
  margin-bottom: 0.9rem;
}

.article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article ul li {
  padding: 0.3rem 0 0.3rem 1.4rem;
  position: relative;
  color: #3a3a38;
  border-bottom: 1px solid var(--stone);
}

.article ul li:last-child { border-bottom: none; }

.article ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--moss);
}

.related-pathologies {
  background: var(--white);
  border-radius: 2px;
  padding: 1.5rem 1rem;
  width: 100%;
  text-align: center;
}

.related-pathologies h2 {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.related-grid a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--stone);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--moss);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.related-grid a:hover {
  border-color: var(--moss);
  background: var(--mist);
}

@media (min-width: 700px) {
  .article h1 { font-size: 2rem; }
}

.pathologies ul li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--moss);
  transition: color 0.2s, border-color 0.2s;
}

.pathologies ul li a:hover {
  color: var(--moss);
  border-color: var(--moss-lt);
}

.contact-card-highlight {
  border-color: var(--warm);
}

.contact-card-highlight:hover {
  border-color: var(--warm);
  box-shadow: 0 2px 10px rgba(200,169,122,0.25);
}

.article p a {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px dotted var(--moss);
}

.article p a:hover {
  color: var(--moss-lt);
  border-color: var(--moss-lt);
}

/* ── RÉSERVATION ── */
.reservation {
  text-align: center;
  width: 100%;
  padding: 0.5rem 0;
}

.reservation h2 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.8rem;
}

.reservation-intro {
  font-size: 0.95rem;
  color: #3a3a38;
  margin-bottom: 1.5rem;
}

.reservation-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: var(--moss);
  color: var(--white);
  text-decoration: none;
  border-radius: 999px;
  font-size: 1rem;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.15s;
}

.reservation-btn:hover {
  background: var(--moss-lt);
  transform: translateY(-1px);
}

.reservation-btn:active {
  transform: translateY(0);
}

/* Variante photo unique (page massage du visage) */
.photos-single {
  display: block;
  width: 100%;
}

.photos-single figure {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  max-width: 480px;
  margin: 0 auto;
}

.photos-single figure img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  filter: grayscale(15%);
}

.photos-single figcaption {
  padding: 0.6rem 0.3rem;
  font-size: 0.78rem;
  color: var(--moss);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* Sélecteur de langue */
.lang-switch {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--stone);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  color: var(--moss);
}

.lang-switch:hover {
  border-color: var(--moss);
  background: var(--white);
}