/* ============================================
   Mise en page — sections spécifiques
   ============================================ */

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 4.5rem;
}
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-terracotta);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}
.hero-eyebrow .rule { width: 28px; height: 1px; background: var(--color-terracotta); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 1.5rem; max-width: 44ch; }
.hero .location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}
.hero .btn-row { margin-top: 2.25rem; }
.hero-visual { position: relative; }
.hero-visual .video-player { aspect-ratio: 4/3; }
.hero-visual .video-player video { aspect-ratio: 4/3; }

@media (max-width: 940px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .hero-visual { order: -1; }
  .hero-visual .video-player,
  .hero-visual .video-player video { aspect-ratio: 16/10; }
  .hero h1 { max-width: none; }
}

/* ---------- Présentation rapide ---------- */
.intro-block { max-width: 760px; }
.intro-block h2 { margin-bottom: 1.25rem; }

/* ---------- Praticiens (accueil) ---------- */
.practitioners-grid {
  display: grid;
  gap: 1.75rem;
}

/* ---------- Soins (accueil) ---------- */
.care-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
}
@media (max-width: 820px) { .care-columns { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
.care-column-head { margin-bottom: 1.5rem; }
.care-column-head .kicker { color: var(--color-terracotta); font-size: 0.85rem; margin-bottom: 0.4rem; }
.care-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.96rem;
}
.care-list li:last-child { border-bottom: 1px solid var(--color-border); }
.care-list li .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; }

/* ---------- Technologie ---------- */
.tech-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.tech-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
@media (max-width: 860px) { .tech-block { grid-template-columns: minmax(0, 1fr); } }
.tech-block ul { margin-top: 1.5rem; display: grid; gap: 0.9rem; }
.tech-block ul li { display: flex; gap: 0.75rem; font-size: 0.95rem; color: var(--color-text-secondary); }

/* ---------- Vidéo cabinet (section dédiée) ---------- */
.video-section .video-player { aspect-ratio: 16/9; }
.video-section .video-player video { aspect-ratio: 16/9; }
.video-section-head { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }

/* ---------- Galerie « Le cabinet » ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.gallery-grid figure { margin: 0; min-width: 0; }
.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-beige-light);
}
.gallery-img.wide { aspect-ratio: 16 / 10; }
.gallery-img.square { aspect-ratio: 1 / 1; }
.gallery-grid figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.gallery-grid .span-2 { grid-column: span 2; }
@media (max-width: 780px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid .span-2 { grid-column: span 2; }
}
@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid .span-2 { grid-column: span 1; }
}

.trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Équipe (assistantes/secrétaire) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  text-align: center;
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); max-width: 280px; margin: 0 auto; gap: 2.5rem; }
}
.team-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto 1rem;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-soft);
}
.team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}
.team-role {
  font-size: 0.85rem;
  color: var(--color-terracotta);
  margin-top: 0.2rem;
}
.trait-list li {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ---------- Page praticiens ---------- */
.practitioners-list {
  display: grid;
  gap: 2.5rem;
}
.diplomas-list { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.diplomas-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.93rem;
  color: var(--color-text-secondary);
}
.diplomas-list li .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); margin-top: 0.55rem; flex-shrink: 0; }

/* ---------- Page soins ---------- */
.soins-category { padding: 3.5rem 0; }
.soins-category-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.soins-category-head .kicker { color: var(--color-terracotta); font-size: 0.85rem; margin-bottom: 0.5rem; }
.soins-category-head .practitioner-credit { font-size: 0.88rem; color: var(--color-text-muted); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
}
.contact-line { display: flex; gap: 0.9rem; margin-bottom: 1.4rem; }
.contact-line svg { flex-shrink: 0; color: var(--color-terracotta); margin-top: 3px; }
.contact-line .label { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.map-embed {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.hours-table { margin-top: 1rem; width: 100%; border-collapse: collapse; }
.hours-table td { padding: 0.55rem 0; border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.hours-table td:last-child { text-align: right; color: var(--color-text-secondary); }
.hours-table tr:first-child td { border-top: none; }

/* ---------- Rendez-vous ---------- */
.rdv-panel {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.rdv-panel .btn-primary {
  padding: 1.15rem 2.5rem;
  font-size: 1.02rem;
  margin-top: 2rem;
  white-space: normal;
  max-width: 100%;
}
.rdv-reminders {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 2.25rem;
}
.rdv-reminders div { text-align: left; }
.rdv-reminders .label { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.3rem; }

/* ---------- Pages légales ---------- */
.legal-content h2 { font-size: 1.2rem; margin: 2.25rem 0 0.85rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--color-text-secondary); margin-bottom: 0.75rem; }
.legal-content .placeholder-text {
  background: var(--color-beige-light);
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  color: var(--color-text);
  font-style: italic;
}

/* ---------- Bande brève au-dessus du footer ---------- */
.page-header {
  padding: calc(var(--header-h) + 3rem) 0 3.5rem;
  text-align: left;
}
.page-header .lead { margin-top: 1rem; max-width: 56ch; }