/* Dr Michael Solé — habillage "spa haut de gamme" du site.
   Chargé après styles.css sur les 14 pages du site (nom de fichier conservé pour
   éviter de retoucher index.html déjà validé, mais s'applique partout désormais). */

:root {
  --home-ivory: #faf7f2;
  --home-ivory-deep: #f1ece2;
  --home-sage: #8ea58c;
  --home-sage-soft: #eef2ea;
  --home-sage-deep: #5f7a5d;
  --home-gold: var(--color-accent);
  --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(180deg, var(--home-ivory) 0%, var(--home-ivory) 55%, var(--home-ivory-deep) 100%);
}

/* Reveal au scroll (contenu SOUS la ligne de flottaison uniquement — jamais le hero,
   voir plus bas pourquoi) — pur enrichissement progressif : sans JS (html.no-js), tout
   reste visible immédiatement ; l'état "caché avant animation" n'existe que sous html.js. */
html.js .home-reveal {
  opacity: 0;
  transition: opacity 1.05s var(--home-ease), transform 1.05s var(--home-ease);
  will-change: opacity, transform;
}
html.js .home-reveal.home-reveal-up { transform: translateY(34px); }
html.js .home-reveal.home-reveal-scale { transform: scale(0.92); transition-delay: 0.15s; }
html.js .home-reveal.is-visible { opacity: 1; transform: none; }

.home-stagger > .home-reveal:nth-child(1) { transition-delay: 0.05s; }
.home-stagger > .home-reveal:nth-child(2) { transition-delay: 0.16s; }
.home-stagger > .home-reveal:nth-child(3) { transition-delay: 0.27s; }
.home-stagger > .home-reveal:nth-child(4) { transition-delay: 0.38s; }

/* Le hero (titre + photo) est visible dès le premier rendu (opacity toujours à 1) :
   c'est très probablement l'élément "Largest Contentful Paint" de la page, la mesure
   que Google utilise pour juger la vitesse perçue. Le cacher en attendant le scroll
   ou le JS retarderait cette mesure et pénaliserait le SEO. On neutralise donc ici le
   comportement générique ci-dessus pour tout ce qui est dans .home-hero, et on lui
   applique plus bas une entrée cinématique qui n'anime que transform/filter (jamais
   l'opacité). Règle volontairement placée après les règles génériques pour gagner la
   cascade (même spécificité, priorité au dernier déclaré). */
html.js .home-hero .home-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Pages de contenu (médecin, informations pratiques, fiches pathologies) — même
   logique que le hero : titre et chapeau de page toujours visibles (transform/filter
   uniquement, jamais d'opacité à 0) pour ne jamais retarder le LCP de ces pages ;
   le reste (sections, encarts) profite du même reveal au scroll que sur l'accueil,
   sans qu'aucune classe n'ait été ajoutée dans le HTML de ces 13 pages. */
.pathology-article > h1,
.pathology-article > .pathology-lead {
  animation: home-hero-rise 1s var(--home-ease) both;
}
.pathology-article > h1 { animation-delay: 0.05s; }
.pathology-article > .pathology-lead { animation-delay: 0.22s; }

html.js .pathology-article > section,
html.js .pathology-article > .info-block,
html.js .pathology-article > nav.cross-links {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.05s var(--home-ease), transform 1.05s var(--home-ease);
  will-change: opacity, transform;
}
html.js .pathology-article > section.is-visible,
html.js .pathology-article > .info-block.is-visible,
html.js .pathology-article > nav.cross-links.is-visible {
  opacity: 1;
  transform: none;
}

.pathology-article h2 {
  position: relative;
  padding-bottom: 14px;
}
.pathology-article h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0; width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--home-gold), var(--home-sage));
  border-radius: 2px;
}

.callout { border-radius: 14px; box-shadow: 0 10px 28px rgba(194, 141, 65, 0.14); }
.consignes-postop { border-radius: 18px; box-shadow: 0 16px 40px rgba(90, 70, 30, 0.12); }
.photo-framed, .pathology-media-img { box-shadow: 0 20px 45px rgba(90, 70, 30, 0.14); }
.pathology-schema img { border-radius: 10px; }

.doctor-list { padding-left: 0; list-style: none; }
.doctor-list li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.doctor-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--home-gold), var(--home-sage));
}

.schedule-table td { transition: background-color 0.2s var(--home-ease); }
.schedule-table tr:hover td { background: var(--home-sage-soft); }

.cross-links { border-top: none; position: relative; }
.cross-links::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(182, 130, 53, 0), var(--home-gold), var(--home-sage), rgba(142, 165, 140, 0));
}

/* Header */
.site-header {
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow 0.4s var(--home-ease), background-color 0.4s var(--home-ease);
}
.site-header.home-scrolled { box-shadow: 0 12px 32px rgba(90, 70, 30, 0.1); }

.brand { transition: opacity 0.3s var(--home-ease); }
.brand:hover { opacity: 0.78; }

.nav-main > a, .nav-dropdown-trigger { position: relative; }
.nav-main > a::after, .nav-dropdown-trigger::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, var(--home-gold), var(--home-sage-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--home-ease);
}
.nav-main > a:hover::after, .nav-dropdown-trigger:hover::after { transform: scaleX(1); }

.nav-dropdown-panel {
  border-radius: 12px;
  border: 1px solid rgba(182, 130, 53, 0.18);
  box-shadow: 0 20px 45px rgba(90, 70, 30, 0.16);
  overflow: hidden;
}
.nav-dropdown-panel a { transition: background 0.25s var(--home-ease), color 0.25s var(--home-ease); }

@keyframes home-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.site-header.is-mobile-open .mobile-panel { animation: home-fade-in 0.35s var(--home-ease); }

/* Sections — plus de respiration */
.section { margin-bottom: 96px; }
.section h2 {
  position: relative;
  padding-bottom: 18px;
}
.section h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0; width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--home-gold), var(--home-sage));
  border-radius: 2px;
}
/* Quand le titre porte lui-même .home-reveal (médecin / expertise / pratique), le
   trait se dessine au moment de l'apparition plutôt que d'être déjà là. */
html.js h2.home-reveal::after { width: 0; transition: width 0.7s var(--home-ease) 0.25s; }
html.js h2.home-reveal.is-visible::after { width: 56px; }

/* Hero */
.home-hero {
  position: relative;
  padding-top: 96px;
  padding-bottom: 80px;
}
.home-hero > * { position: relative; z-index: 1; }
.home-hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 640px; height: 640px; right: -140px; top: 50%;
  background: radial-gradient(circle, rgba(142, 165, 140, 0.35) 0%, rgba(182, 130, 53, 0.16) 45%, rgba(250, 247, 242, 0) 72%);
  filter: blur(4px);
  transform: translateY(-50%) scale(1);
  animation: home-glow-breathe 8s ease-in-out infinite;
}
@keyframes home-glow-breathe {
  0%, 100% { opacity: 0.75; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.08); }
}
@media (max-width: 1179px) {
  .home-hero-glow { right: 50%; width: 480px; height: 480px; transform: translate(50%, -50%) scale(1); }
  @keyframes home-glow-breathe {
    0%, 100% { opacity: 0.75; transform: translate(50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(50%, -50%) scale(1.08); }
  }
}

.hero h1 { letter-spacing: -0.01em; }

.img-frame--portrait {
  box-shadow: 0 30px 60px rgba(90, 70, 30, 0.16);
}

/* Entrée cinématique du hero — jamais d'opacité à 0, seulement transform/filter,
   pour ne jamais retarder le Largest Contentful Paint (voir note plus haut). */
.home-hero .eyebrow,
.home-hero h1,
.home-hero .hero-lead,
.home-hero .hero-actions {
  animation: home-hero-rise 1.1s var(--home-ease) both;
}
.home-hero .eyebrow { animation-delay: 0.05s; }
.home-hero h1 { animation-delay: 0.18s; }
.home-hero .hero-lead { animation-delay: 0.42s; }
.home-hero .hero-actions { animation-delay: 0.62s; }

@keyframes home-hero-rise {
  from { opacity: 1; transform: translateY(26px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* L'animation d'entrée cible l'image, pas le cadre : le cadre reçoit son propre
   transform (translateY) pour le parallax au scroll (voir home.js) — deux éléments
   distincts pour que les deux transforms ne s'écrasent pas l'un l'autre. */
.home-hero .img-frame--portrait img {
  animation: home-hero-image-in 1.5s var(--home-ease) both;
  animation-delay: 0.12s;
}
@keyframes home-hero-image-in {
  from { opacity: 1; transform: scale(1.08); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Boutons */
.btn {
  transition: transform 0.3s var(--home-ease), box-shadow 0.3s var(--home-ease), background-color 0.3s var(--home-ease), border-color 0.3s var(--home-ease), color 0.3s var(--home-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--home-sage-deep); outline-offset: 3px; }

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--home-ease);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* Urgence — reste immédiatement lisible, traitement visuel adouci seulement */
.urgence-card {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(194, 141, 65, 0.14);
}

/* Cards — expertise / pratique */
.expertise-grid .card, .pratique-grid .card {
  transition: transform 0.35s var(--home-ease), box-shadow 0.35s var(--home-ease);
  border-radius: 14px;
}
.expertise-grid .card:hover, .pratique-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(90, 70, 30, 0.14);
}

.chip {
  transition: transform 0.3s var(--home-ease), box-shadow 0.3s var(--home-ease), background-color 0.3s var(--home-ease), color 0.3s var(--home-ease);
}
.chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(182, 130, 53, 0.22); }

/* Cartes Google Maps (accueil + informations pratiques) */
.img-frame--wide {
  border-radius: 20px;
  box-shadow: 0 24px 55px rgba(90, 70, 30, 0.16);
}

/* Footer */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--home-sage-soft), var(--home-ivory-deep));
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(182, 130, 53, 0), var(--home-gold), var(--home-sage), rgba(142, 165, 140, 0));
}
.footer-grid a { transition: color 0.25s var(--home-ease); }

/* Léger parallax sur la photo du hero au scroll, piloté en JS (transform uniquement,
   pas de reflow, aucune transition CSS ici pour rester parfaitement synchrone au scroll). */
.home-hero .img-frame--portrait { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-hero-glow { display: none; }
  html.js .home-reveal,
  html.js .pathology-article > section,
  html.js .pathology-article > .info-block,
  html.js .pathology-article > nav.cross-links {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .pathology-article > h1,
  .pathology-article > .pathology-lead {
    animation: none;
    filter: none;
  }
  .home-hero .eyebrow,
  .home-hero h1,
  .home-hero .hero-lead,
  .home-hero .hero-actions,
  .home-hero .img-frame--portrait img {
    animation: none;
    filter: none;
  }
  .home-hero .img-frame--portrait { transform: none !important; }
  html.js h2.home-reveal::after { width: 56px; transition: none; }
  .btn-primary::after { display: none; }
  .site-header.is-mobile-open .mobile-panel { animation: none; }
}