/* ===================================================================
   COMPONENTS — buttons, cards, nav, footer, forms, etc.
   =================================================================== */

/* ===== SKIP LINK (a11y — WCAG 2.4.1) ===== */

/* Premier élément focusable de la page : caché au-dessus du viewport,
   révélé uniquement au focus clavier pour sauter la navigation. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200; /* au-dessus de la navbar (100), sous la modale (9000) */
  padding: 0.625rem 1.25rem;
  background-color: var(--primary-dark);
  color: var(--primary-foreground);
  border-radius: 6px;
  font-size: 0.875rem;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

/* ===== BUTTONS ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

/* ===== CTA : deux dimensions independantes =====
   Un CTA de reservation = .btn  +  classe ACTION  +  classe POIDS VISUEL.

   1. ACTION (.cta-seance / .cta-appel) : marqueur semantique du type de reservation
      (lien, libelle, comportement, future icone). Ne porte AUCUN style visuel, donc
      un meme type peut etre primary sur une page et secondary sur une autre sans
      changer de classe action.
   2. POIDS VISUEL (.cta-primary / .cta-secondary) : deux fonds PLEINS (aucun outline,
      aucune bordure). primary = sauge foncee ; secondary = sauge claire.

   .btn-primary / .btn-secondary restent pour les boutons non-CTA (navigation, etc.). */

/* Action — marqueurs sans rendu visuel (volontaire) */
.cta-seance,
.cta-appel {
  /* aucune couleur / fond / bordure ici : le rendu vient du poids visuel */
}

/* Poids visuel PRIMARY : fond plein sauge foncee (#5a7050). Texte blanc, 5.4:1 (AA ok). */
.btn-primary,
.cta-primary {
  background-color: var(--primary-dark, #5a7050);
  color: var(--primary-foreground, #ffffff);
  border-color: var(--primary-dark, #5a7050);
}

.btn-primary:hover,
.cta-primary:hover {
  background-color: var(--primary-darker, #4a6040);
  border-color: var(--primary-darker, #4a6040);
  color: var(--primary-foreground, #ffffff);
}

/* Poids visuel SECONDARY : fond sauge claire (#8b9d83), texte blanc.
   Hover : #6b7d63 (primary-hover), même logique que primary → primary-darker. */
.cta-secondary {
  background-color: var(--cta-secondary);
  color: var(--primary-foreground);
  border-color: var(--cta-secondary);
}

.cta-secondary:hover {
  background-color: var(--cta-secondary-hover);
  border-color: var(--cta-secondary-hover);
  color: var(--primary-foreground);
}

/* Lien secondaire de NAVIGATION (non-CTA) : transparent, bordure neutre. */
.btn-secondary {
  background-color: transparent;
  color: var(--foreground);
  border-color: var(--border-visible);
}

.btn-secondary:hover {
  border-color: var(--primary);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* ===== BADGE ===== */

.badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1.75rem;
}

/* ===== CARDS ===== */

.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2rem;
  overflow: hidden;
}

.card-image {
  margin: -2rem -2rem 1.75rem -2rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0 0 8px 8px; /* rounded.media — coins de média encadré */
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.875rem;
}

/* Prominent card title (accompagnements axes — the page's main sections) */
.card h2 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.card p {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
}

.card-link {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-link:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.card-link:hover .card-arrow {
  color: var(--primary-dark);
  transform: translateX(4px);
}

.card-arrow {
  display: inline-block;
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  transition: color var(--transition), transform var(--transition);
}

/* ===== LINK ARROW ===== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 400;
  /* Sauge soutenue (#5a7050, 5.4:1) et non la sauge claire : la sauge claire
     ne passe pas l'AA en texte. The Earned-Contrast Rule s'applique aussi au texte. */
  color: var(--primary-dark);
  transition: color 0.5s ease;
}

.link-arrow:hover {
  color: var(--foreground);
}

/* Back link — smaller, with breathing room below (accompagnement detail header) */
.link-back {
  font-size: 0.8125rem;
  margin-bottom: 2rem;
}

/* ===== TESTIMONIAL ===== */

.temoignage {
  position: relative;
  padding: 2.75rem 3rem 2.5rem;
  background-color: var(--secondary);
  border-radius: 6px;
}

.temoignage::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  z-index: 0;
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}

.temoignage p {
  position: relative;
  z-index: 1;
  font-family: 'Lora', serif;
  font-size: 1.25rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}

.temoignage cite {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--muted-foreground);
  font-weight: 400;
}

@media (max-width: 768px) {
  .temoignage {
    padding: 2rem 1.75rem;
  }

  .temoignage p {
    font-size: 1.1rem;
  }
}

.temoignage-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.temoignage-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border-visible);
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
  transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}

.temoignage-btn:hover {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background-color: var(--primary);
}

.temoignage-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.temoignage-carousel {
  position: relative;
  flex: 1;
}

.temoignage-carousel .temoignage {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.temoignage-carousel .temoignage.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.temoignage-google {
  text-align: center;
  margin-top: 2rem;
}

/* ===== NAVIGATION ===== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--background) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s ease, background 0.3s ease;
}

.navbar.scrolled {
  border-bottom-color: var(--rule);
  transition: border-color 0.8s ease;
}

.nav-container {
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.5rem;
}

@media (min-width: 1024px) {
  .nav-container {
    padding-inline: 4rem;
  }
}

.nav-logo {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--foreground);
  flex-shrink: 0;
  transition: transform 0.5s ease;
  transform-origin: left center;
}

.nav-logo:hover {
  color: var(--foreground);
  transform: scale(1.03);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--muted-foreground);
  transition: color var(--transition);
  white-space: nowrap;
  padding-bottom: 3px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background-color: var(--primary);
  transition: right 0.35s cubic-bezier(.2, .7, .2, 1);
}

.nav-link:hover,
.nav-link.active {
  color: var(--foreground);
}

.nav-link:hover::after,
.nav-link.active::after {
  right: 0;
}

.nav-logo-dot {
  color: var(--primary);
  margin: 0 0.12em;
}

.nav-logo-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--muted-foreground);
  margin-left: 0.35rem;
  letter-spacing: 0.01em;
}

.nav-cta {
  margin-left: 1rem;
  padding: 0.625rem 1.25rem;
}

.nav-link-home {
  display: block;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;   /* cible tactile >= 44px */
  height: 2.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;  /* garde le glyphe hamburger compact dans la zone agrandie */
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--foreground);
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

/* Mobile nav open state */
.nav-open .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-open .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .navbar.nav-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--background);
  }

  .nav-links {
    display: none;
    position: fixed;
    inset: 5.5rem 0 0 0;
    background-color: var(--background);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--border);
    overflow-y: auto;
  }

  .nav-open .nav-links {
    display: flex;
  }

  .nav-link-home {
    display: block;
  }

  .nav-link {
    font-size: 1.1rem;
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: 1.5rem;
    width: 100%;
    justify-content: center;
  }
}

/* ===== FOOTER COMPONENTS ===== */

.footer-logo {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--foreground);
}

.footer-hours {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}

/* ===== FORMS ===== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--foreground);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--input-background);
  border: 1px solid var(--border-visible);
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 300;
  font-family: 'Inter', sans-serif;
  color: var(--foreground);
  transition: border-color var(--transition);
  appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Focus clavier : anneau visible (la bordure seule, 1px sauge claire, ne suffit pas) */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.form-group textarea {
  resize: vertical;
  min-height: 9rem;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ ===== */

/* Blocs FAQ — espacés au gap (pas de marge résiduelle sur le dernier) */
.faq-blocs {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.faq-bloc h2 {
  margin-bottom: 2.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-visible);
}

.faq-item {
  border-bottom: 1px solid var(--border-visible);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0;
  cursor: pointer;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--foreground);
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--primary-hover);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid !important;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer p {
  padding-bottom: 1.75rem;
  padding-right: 3rem;
  color: var(--muted-foreground);
}

/* ===== BLOG CARD ===== */

.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.article-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.article-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}

.article-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.875rem;
}

.article-card p {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  flex: 1;
  margin-bottom: 1.5rem;
}

.article-card .link-arrow {
  margin-top: auto;
}

/* Survol de la carte entière : la flèche réagit comme sur .card-link */
.article-card:hover .link-arrow {
  color: var(--foreground);
}

/* ===== TARIFS (infos-pratiques) ===== */

.tarifs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.tarif-card {
  border: 1px solid var(--border-visible);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tarif-card .btn {
  margin-top: auto;
}

.tarif-card .btn .btn-slide {
  display: inline-block;
  transition: transform 0.4s ease;
}

.tarif-card .btn:hover .btn-slide {
  transform: translateX(6px);
}

.tarif-card.featured {
  border-color: var(--primary);
  background-color: var(--secondary);
}

.tarif-label {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.tarif-price {
  font-family: 'Lora', serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--foreground);
}

.tarif-price span {
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: var(--muted-foreground);
}

.tarif-duration {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.tarif-desc {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* Note de bas de grille tarifs (s'étend sur toutes les colonnes) */
.tarifs-note {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
  .tarifs-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .tarifs-grid { grid-template-columns: 1fr; }
}

.tarifs-grid.tarifs-grid-duo {
  grid-template-columns: 1fr 1fr;
  max-width: 52rem;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .tarifs-grid.tarifs-grid-duo {
    grid-template-columns: 1fr;
  }
}

/* ===== ENGAGEMENTS ===== */

.engagements-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.engagement-item {
  display: flex;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.engagement-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.engagement-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
  margin-top: 0.1rem;
}

.engagement-item h3 {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.engagement-item p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* Colonne de cartes "modalités" (Cabinet / En ligne / Horaires) — taille au contenu */
.modalites-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ===== BOOKING MODAL ===== */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.booking-modal[hidden] {
  display: none;
}

.booking-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.booking-modal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  height: min(85vh, 700px);
  background: var(--background);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

.booking-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.75rem;   /* cible tactile >= 44px */
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border: 1px solid var(--border-visible);
  border-radius: 50%;
  cursor: pointer;
  color: var(--foreground);
  transition: background-color 0.2s;
}

.booking-modal-close:hover {
  background: var(--card);
}

.booking-modal-close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

#booking-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Loading state — covers the blank iframe until the booking widget paints */
.booking-modal-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.booking-modal-inner.is-loading .booking-modal-loader {
  display: flex;
}

.booking-spinner {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--border-visible);
  border-top-color: var(--primary);
  animation: booking-spin 0.8s linear infinite;
}

@keyframes booking-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .booking-modal {
    padding: 0;
    align-items: flex-end;
  }
  .booking-modal-inner {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    height: 90svh;
  }
}

/* ===== CARD CTA (sidebar) ===== */

.card-cta {
  padding: 2rem;
  border: 1px solid var(--primary);
  background-color: var(--secondary);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.card-cta .btn {
  margin-top: auto;
}

.card-cta h2,
.card-cta h3 {
  margin-bottom: 0.875rem;
}

.card-cta p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin-bottom: 1.75rem;
}

.sidebar-cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .sidebar-cta-pair {
    grid-template-columns: 1fr;
  }
}

/* ===== UTILITIES ===== */

.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }

.button-group-center {
  justify-content: center;
}