/* ============================================
   TEMPLATE — CHARTE GRAPHIQUE
   Modifier uniquement ces variables pour
   changer toute la palette du site client
   ============================================ */
:root {
  --color-primary: #5BB8C8;
  --color-primary-dark: #3A90A0;
  --color-primary-light: #A8DCE5;
  --color-bg-main: #F7FAFB;
  --color-bg-section: #EEF4F6;
  --color-bg-card: #E4EFF2;
  --color-bg-white: #FFFFFF;
  --color-text-dark: #3A4A50;
  --color-text-muted: rgba(58,74,80,0.65);
  --color-text-light: rgba(58,74,80,0.40);
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Inter', sans-serif;
  --color-border: rgba(58,74,80,0.15);
  --color-separator: #C8D8DC;
  --hero-overlay: rgba(0,0,0,0.38);
  --color-scrollbar-track: #F7FAFB;
  --color-scrollbar-thumb: #A8DCE5;
}

/* Custom CSS for Osteopath Website */

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Section Spacing */
section {
    scroll-margin-top: 100px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    section {
        scroll-margin-top: 80px;
    }

    #hero h2 {
        font-size: 2.5rem;
    }
}

/* Print Styles */
@media print {
    #navbar,
    #floatingCta,
    #drawer,
    footer {
        display: none;
    }
}

.animate-fade-in { opacity: 0; }
.animate-fade-in.visible { opacity: 1; animation: fadeIn 0.8s ease-out forwards; }

/* Base — fade up (défaut) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s ease, transform 1s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade simple — pour les textes, titres, paragraphes */
.animate-fade {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.animate-fade.visible {
  opacity: 1;
}

/* Slide depuis la gauche — pour images, blocs gauche */
.animate-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animate-from-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide depuis la droite — pour blocs droite, badges */
.animate-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animate-from-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom léger — pour les cards "Pour qui ?" */
.animate-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.animate-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hero — image de fond */
#hero img[src*="hero-bg"] {
    object-position: center top;
}

/* Accès & Contact — iframe Google Maps */
.maps-iframe {
    height: 220px;
}
@media (min-width: 1024px) {
    .maps-iframe {
        height: 420px;
    }
}

/* Expertises — hover cards */
.expertise-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.expertise-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* Photo praticienne — recadrage portrait centré sur le visage */
#about img[src*="praticien"] {
    object-fit: cover;
    object-position: center 15%;
}

@media (max-width: 1024px) {
    #about img[src*="praticien"] {
        object-position: center 10%;
        height: 320px;
    }
}

/* ============================================
   NAVBAR — pilule flottante
   Transparente sur le hero, se détache en
   pilule blanche floutée au scroll
   ============================================ */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

.pillnav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 0 10px;
  transition: padding .45s var(--ease-out);
}
.pillnav__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 18px 14px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  transition: background-color .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .45s var(--ease-out), padding .45s var(--ease-out);
}
.pillnav.is-scrolled { padding-top: 10px; }
.pillnav.is-scrolled .pillnav__inner {
  padding: 9px 9px 9px 20px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--color-border);
  box-shadow: 0 14px 34px -18px rgba(58, 74, 80, .45);
}

/* Marque */
.pillnav__brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.pillnav__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  color: #fff;
  transition: color .3s ease;
}
.pillnav__role {
  font-size: .78rem;
  letter-spacing: .02em;
  margin-top: 3px;
  color: rgba(255, 255, 255, .78);
  transition: color .3s ease;
}
.pillnav.is-scrolled .pillnav__name,
.drawer .pillnav__name { color: var(--color-primary); }
.pillnav.is-scrolled .pillnav__role,
.drawer .pillnav__role { color: var(--color-primary-dark); }

/* Liens desktop */
.pillnav__links { display: none; align-items: center; gap: 2rem; }
.pillnav__links a {
  position: relative;
  font-weight: 500;
  font-size: .98rem;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  padding: .25em 0;
  transition: color .3s ease;
}
.pillnav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: width .3s var(--ease-out);
}
.pillnav__links a:hover::after,
.pillnav__links a.active::after { width: 100%; }
.pillnav.is-scrolled .pillnav__links a { color: var(--color-text-dark); }
.pillnav.is-scrolled .pillnav__links a:hover,
.pillnav.is-scrolled .pillnav__links a.active { color: var(--color-primary-dark); }

/* CTA desktop */
.pillnav__cta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  background: #fff;
  color: var(--color-primary-dark);
  transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.pillnav__cta:hover { transform: translateY(-1px); }
.pillnav.is-scrolled .pillnav__cta { background: var(--color-primary); color: #fff; }
.pillnav.is-scrolled .pillnav__cta:hover { background: var(--color-primary-dark); }

/* Burger */
.pillnav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pillnav__burger svg { width: 22px; height: 22px; }
.pillnav.is-scrolled .pillnav__burger {
  background: var(--color-bg-section);
  border-color: transparent;
  color: var(--color-primary-dark);
}

@media (min-width: 1024px) {
  .pillnav { padding: 0 24px; }
  .pillnav__inner { padding: 22px 8px; }
  .pillnav.is-scrolled { padding-top: 14px; }
  .pillnav.is-scrolled .pillnav__inner { padding: 8px 8px 8px 28px; border-radius: 999px; }
  .pillnav__links,
  .pillnav__cta { display: flex; }
  .pillnav__burger { display: none; }
}

/* ============================================
   DRAWER MOBILE — latéral + voile + cascade
   ============================================ */
body.no-scroll { overflow: hidden; }

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(30, 42, 46, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
body.menu-open .drawer-scrim { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: min(86vw, 370px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 28px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--color-bg-main);
  transform: translateX(103%);
  visibility: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), visibility 0s linear .5s;
}
body.menu-open .drawer {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -30px 0 70px -24px rgba(30, 42, 46, .45);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.25rem;
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--color-bg-section);
  color: var(--color-primary-dark);
  cursor: pointer;
}
.drawer__close svg { width: 22px; height: 22px; }

.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
  display: flex;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text-dark);
  text-decoration: none;
  opacity: 0;
  transform: translateX(18px);
}
.drawer__links a.active { color: var(--color-primary-dark); }

body.menu-open .drawer__links a { animation: drawerIn .5s var(--ease-out) forwards; }
body.menu-open .drawer__links a:nth-child(1) { animation-delay: .10s; }
body.menu-open .drawer__links a:nth-child(2) { animation-delay: .15s; }
body.menu-open .drawer__links a:nth-child(3) { animation-delay: .20s; }
body.menu-open .drawer__links a:nth-child(4) { animation-delay: .25s; }
body.menu-open .drawer__links a:nth-child(5) { animation-delay: .30s; }
body.menu-open .drawer__links a:nth-child(6) { animation-delay: .35s; }
@keyframes drawerIn { to { opacity: 1; transform: translateX(0); } }

.drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.drawer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.drawer__btn--primary { background: var(--color-primary); color: #fff; }
.drawer__btn--ghost { border: 1.5px solid var(--color-primary); color: var(--color-primary-dark); }
.drawer__addr {
  margin-top: .5rem;
  text-align: center;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.pillnav a:focus-visible,
.pillnav button:focus-visible,
.drawer a:focus-visible,
.drawer button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .pillnav, .pillnav__inner, .pillnav *, .drawer, .drawer-scrim { transition: none !important; }
  .drawer__links a { animation: none !important; opacity: 1; transform: none; }
}

/* ============================================
   FRISE — Comment se déroule une séance
   Le geste animé du site : la ligne se trace
   et les étapes s'allument l'une après l'autre
   ============================================ */
.steps {
  --num: 52px;
  --gap: 2.5rem;
  --step-delay: .45s;
  position: relative;
  display: grid;
  gap: var(--gap);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--num) 1fr;
  column-gap: 1.25rem;
  align-items: start;
}
.step__num {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  width: var(--num);
  height: var(--num);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-separator);
  background: var(--color-bg-white);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
  transition-delay: calc(var(--i) * var(--step-delay));
}
.step__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-dark);
  margin-top: .65rem;
}
.step__text {
  margin-top: .4rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 30ch;
}

/* Liaisons entre étapes : piste (::before) + tracé animé (::after) */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--num) / 2 - 1px);
  top: var(--num);
  bottom: calc(var(--gap) * -1);
  width: 2px;
}
.step:not(:last-child)::before { background: var(--color-separator); opacity: .6; }
.step:not(:last-child)::after {
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--step-delay) ease-in-out;
  transition-delay: calc(var(--i) * var(--step-delay) + .15s);
}

.steps.is-visible .step__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.steps.is-visible .step:not(:last-child)::after { transform: scaleY(1); }

@media (min-width: 1024px) {
  .steps { --gap: 2rem; grid-template-columns: repeat(4, 1fr); }
  .step { display: block; }
  .step__title { margin-top: 1.5rem; }
  .step:not(:last-child)::before,
  .step:not(:last-child)::after {
    left: var(--num);
    right: auto;
    top: calc(var(--num) / 2 - 1px);
    bottom: auto;
    width: calc(100% + var(--gap) - var(--num));
    height: 2px;
  }
  .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
  .steps.is-visible .step:not(:last-child)::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step__num, .step::after { transition: none !important; }
}