/* ============================================================
   DOMAINE DU BAYO — Modern Premium Stylesheet
   ============================================================ */

/* 1. GOOGLE FONTS — chargement via <link> dans le HTML, pas ici */

/* 2. CSS CUSTOM PROPERTIES */
:root {
  --forest:        #1a3a0f;
  --forest-mid:    #2d5c1a;
  --forest-light:  #4a8c2a;
  --sage:          #7ba05b;
  --cream:         #f8f4ed;
  --parchment:     #ede5d4;
  --sand:          #c9b99a;
  --gold:          #b8952a;
  --gold-light:    #d4af5a;
  --bark:          #2c1f0e;
  --bark-light:    #7a6040;
  --white:         #ffffff;
  --black:         #0d0d0d;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Montserrat', sans-serif;
  --font-body:     'Lato', sans-serif;
  --nav-h:         80px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     24px;
  --radius-pill:   50px;
  --shadow-sm:     0 2px 12px rgba(0,0,0,.07);
  --shadow-md:     0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.18);
  --shadow-xl:     0 32px 80px rgba(0,0,0,.24);
  --transition:    .35s cubic-bezier(.4,0,.2,1);
}

/* 3. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--bark); background: var(--cream); line-height: 1.7; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* 4. TYPOGRAPHY */
h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; color: var(--forest); }
h1 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p  { font-size: 1rem; color: var(--bark-light); }
.label {
  font-family: var(--font-sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
}
.lead { font-size: 1.2rem; line-height: 1.8; color: var(--bark); }
blockquote { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1.5; color: var(--forest); }

/* 5. LAYOUT */
.container       { width: 90%; max-width: 1200px; margin: 0 auto; }
.container--wide { width: 92%; max-width: 1400px; margin: 0 auto; }
.section        { padding: 100px 0; }
.section--sm    { padding: 60px 0; }
.section--dark  { background: var(--forest); color: var(--cream); }
.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--cream); }
.section--dark p { color: rgba(248,244,237,.75); }
.section--parchment { background: var(--parchment); }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.section-header .label { display: block; margin-bottom: 16px; }
.section-header h2 { margin-bottom: 20px; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.flex    { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.mt-8   { margin-top: 8px; }  .mt-16 { margin-top: 16px; }
.mt-24  { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.gap-16 { gap: 16px; }        .gap-24 { gap: 24px; }

/* 6. NAVIGATION */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); display: flex; align-items: center;
  transition: background var(--transition), box-shadow var(--transition);
}
.nav.scrolled {
  background: rgba(248,244,237,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.nav__inner {
  width: 92%; max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500;
  color: var(--white); transition: color var(--transition);
}
.nav.scrolled .nav__logo { color: var(--forest); }
.nav__logo svg { width: 32px; height: 32px; fill: var(--gold); flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__link {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85); padding: 8px 12px;
  border-radius: var(--radius-sm); transition: color var(--transition); position: relative;
}
.nav__link::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition);
}
.nav__link:hover::after,.nav__link.active::after { transform: scaleX(1); }
.nav__link:hover,.nav__link.active { color: var(--white); }
.nav.scrolled .nav__link { color: var(--bark-light); }
.nav.scrolled .nav__link:hover,.nav.scrolled .nav__link.active { color: var(--forest); }
.nav__cta {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  padding: 10px 24px; border-radius: var(--radius-pill);
  transition: background var(--transition), transform var(--transition);
}
.nav__cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.nav.scrolled .nav__cta { background: var(--forest); color: var(--white); }
.nav.scrolled .nav__cta:hover { background: var(--forest-mid); }

.nav__burger { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; z-index: 10; }
.nav__burger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition), background var(--transition); }
.nav.scrolled .nav__burger span { background: var(--forest); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none; position: fixed; inset: 0; background: var(--forest);
  z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.nav__mobile.open { opacity: 1; pointer-events: all; display: flex; }
.nav__mobile .nav__link { font-size: 1.1rem; color: rgba(255,255,255,.8); padding: 14px 32px; letter-spacing: .1em; }
.nav__mobile .nav__link:hover { color: var(--gold); }
.nav__mobile .nav__link::after { left: 32px; right: 32px; }
.nav__mobile .nav__cta { margin-top: 24px; font-size: .9rem; padding: 14px 40px; background: var(--gold); }

/* 7. HERO */
.hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(160deg, #0a1f05 0%, #1a3a0f 40%, #2d5c1a 75%, #1a3a0f 100%);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(74,140,42,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(26,58,15,.6) 0%, transparent 50%);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 120px, rgba(255,255,255,.012) 120px, rgba(255,255,255,.012) 121px);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid rgba(212,175,90,.35); padding: 8px 20px;
  border-radius: var(--radius-pill); margin-bottom: 32px; backdrop-filter: blur(8px);
}
.hero__content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 0 24px; }
.hero__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 8rem); color: var(--white);
  letter-spacing: -.03em; line-height: 1.05;
}
.hero__title em { font-style: italic; color: var(--gold-light); }
.hero__divider {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 28px auto;
}
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.75);
  max-width: 580px; margin: 0 auto 44px; line-height: 1.8;
}
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.45); animation: floatAnim 2.5s ease-in-out infinite;
}
.hero__scroll svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
@keyframes floatAnim { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* Page hero */
.page-hero {
  position: relative; height: 50vh; min-height: 360px;
  display: flex; align-items: flex-end; overflow: hidden; padding-bottom: 60px;
  background: linear-gradient(160deg, #0a1f05 0%, #2d5c1a 60%, #4a8c2a 100%);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(74,140,42,.3) 0%, transparent 60%);
}
.page-hero__inner { position: relative; z-index: 1; width: 90%; max-width: 1200px; margin: 0 auto; }
.page-hero .label { color: var(--gold-light); margin-bottom: 12px; display: block; }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--white); font-weight: 300; }

/* 8. BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 32px; border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary  { background: var(--gold); color: var(--forest); }
.btn-primary:hover  { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(184,149,42,.4); }
.btn-forest   { background: var(--forest); color: var(--white); }
.btn-forest:hover   { background: var(--forest-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,58,15,.35); }
.btn-outline  { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.6); }
.btn-outline:hover  { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-outline-dark { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }
.btn-outline-dark:hover { background: var(--forest); color: var(--white); }
.btn-text     { background: transparent; color: rgba(255,255,255,.8); padding-left: 0; padding-right: 0; }
.btn-text:hover     { color: var(--gold-light); }

/* 9. IMAGE PLACEHOLDERS */
.img-ph {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 50%, var(--forest-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.img-ph--warm   { background: linear-gradient(135deg, #4a3320 0%, #7a6040 50%, #c9b99a 100%); }
.img-ph--sage   { background: linear-gradient(135deg, #2d5c1a 0%, #7ba05b 60%, #c9b99a 100%); }
.img-ph--gold   { background: linear-gradient(135deg, #6b4f12 0%, #b8952a 60%, #d4af5a 100%); }
.img-ph--nature { background: linear-gradient(135deg, #0a1f05 0%, #2d5c1a 35%, #7ba05b 70%, #c9b99a 100%); }
.img-ph--dark   { background: linear-gradient(135deg, #0a1f05 0%, #1a3a0f 60%, #2d5c1a 100%); }
.img-ph--puppy  { background: linear-gradient(135deg, #4a3320 0%, #2d5c1a 40%, #7ba05b 100%); }
.img-ph svg { width: 20%; height: auto; opacity: .18; fill: var(--white); }
.img-ph__label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); background: linear-gradient(transparent, rgba(0,0,0,.4)); text-align: center;
}
.ratio-1x1  { aspect-ratio: 1/1; }
.ratio-4x3  { aspect-ratio: 4/3; }
.ratio-3x4  { aspect-ratio: 3/4; }
.ratio-16x9 { aspect-ratio: 16/9; }
.ratio-2x3  { aspect-ratio: 2/3; }
.ratio-3x2  { aspect-ratio: 3/2; }

/* 10. CARDS */
.card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__body { padding: 28px; }
.card__label { display: block; margin-bottom: 10px; }
.card__title { margin-bottom: 10px; font-size: 1.4rem; }
.card__text  { font-size: .95rem; line-height: 1.7; }
.card__footer { padding: 20px 28px; border-top: 1px solid var(--parchment); display: flex; align-items: center; justify-content: space-between; }

/* Dog card */
.dog-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.dog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dog-card__img-wrap { position: relative; }
.dog-card__img-wrap .img-ph { border-radius: 0; }
.dog-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 24px 20px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.dog-card__name   { font-family: var(--font-serif); font-size: 1.6rem; color: var(--white); margin-bottom: 4px; }
.dog-card__subtitle { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.dog-card__body   { padding: 24px; }
.dog-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Badges */
.badge { font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid currentColor; }
.badge--green     { color: var(--forest-light); background: rgba(74,140,42,.1); }
.badge--gold      { color: var(--gold); background: rgba(184,149,42,.1); }
.badge--available { color: #2e7d32; background: #e8f5e9; }
.badge--reserved  { color: #e65100; background: #fff3e0; }
.badge--sold      { color: #c62828; background: #fff0f0; }
.badge--male      { color: #1565c0; background: #e3f2fd; }
.badge--female    { color: #880e4f; background: #fce4ec; }

/* Puppy card */
.puppy-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.puppy-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.puppy-card__img  { position: relative; }
.puppy-card__status { position: absolute; top: 16px; right: 16px; z-index: 2; }
.puppy-card__body { padding: 22px; }
.puppy-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.puppy-card__name { font-size: 1.3rem; margin-bottom: 6px; }
.puppy-card__desc { font-size: .9rem; line-height: 1.6; margin-bottom: 16px; }

/* 11. STATS */
.stats         { background: var(--forest); padding: 80px 0; }
.stats__grid   { display: grid; grid-template-columns: repeat(4,1fr); }
.stats__item   { text-align: center; padding: 32px; border-right: 1px solid rgba(255,255,255,.1); }
.stats__item:last-child { border-right: none; }
.stats__num    { font-family: var(--font-serif); font-size: clamp(3rem,5vw,5rem); font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 12px; }
.stats__label  { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,244,237,.6); }

/* 12. TIMELINE */
.timeline { position: relative; padding: 40px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--sand), transparent); transform: translateX(-50%); }
.timeline__item { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; margin-bottom: 64px; align-items: center; }
.timeline__content { padding: 0; }
.timeline__item:nth-child(odd)  .timeline__content { grid-column: 1; text-align: right; padding-right: 48px; }
.timeline__item:nth-child(odd)  .timeline__dot     { grid-column: 2; }
.timeline__item:nth-child(odd)  .timeline__empty   { grid-column: 3; }
.timeline__item:nth-child(even) .timeline__empty   { grid-column: 1; }
.timeline__item:nth-child(even) .timeline__dot     { grid-column: 2; }
.timeline__item:nth-child(even) .timeline__content { grid-column: 3; text-align: left; padding-left: 48px; }
.timeline__dot { width: 48px; height: 48px; background: var(--forest); border: 3px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; color: var(--gold); z-index: 1; position: relative; }
.timeline__year  { font-family: var(--font-serif); font-size: 2.5rem; color: var(--forest); margin-bottom: 8px; }
.timeline__title { font-size: 1.2rem; margin-bottom: 8px; }
.timeline__text  { font-size: .95rem; }

/* 13. GALLERY */
.gallery-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.filter-btn { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 10px 24px; border-radius: var(--radius-pill); border: 1.5px solid var(--sand); color: var(--bark-light); background: transparent; transition: all var(--transition); cursor: pointer; }
.filter-btn:hover,.filter-btn.active { background: var(--forest); border-color: var(--forest); color: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 220px; gap: 12px; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-sm); cursor: pointer; }
.gallery-item:nth-child(3n+1) { grid-row: span 2; }
.gallery-item:nth-child(5n+2) { grid-column: span 2; }
.gallery-item .img-ph { width: 100%; height: 100%; border-radius: 0; transition: transform var(--transition); }
.gallery-item:hover .img-ph { transform: scale(1.05); }
.gallery-item__overlay { position: absolute; inset: 0; background: rgba(26,58,15,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity var(--transition); }
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__overlay svg { width: 32px; height: 32px; stroke: var(--white); fill: none; }
.gallery-item__overlay span { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox__box { max-width: 80vw; max-height: 80vh; border-radius: var(--radius-sm); overflow: hidden; }
.lightbox__close { position: absolute; top: 24px; right: 32px; font-size: 2rem; color: var(--white); cursor: pointer; opacity: .7; transition: opacity var(--transition); }
.lightbox__close:hover { opacity: 1; }
.lightbox__prev,.lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--white); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition); }
.lightbox__prev:hover,.lightbox__next:hover { background: rgba(255,255,255,.25); }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__prev svg,.lightbox__next svg { width: 20px; stroke: var(--white); fill: none; }

/* 14. FORMS */
.form-group { margin-bottom: 28px; position: relative; }
.form-label { display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bark-light); margin-bottom: 8px; }
.form-input,.form-textarea,.form-select { width: 100%; padding: 14px 0; border: none; border-bottom: 1.5px solid var(--sand); background: transparent; font-size: 1rem; color: var(--bark); outline: none; transition: border-color var(--transition); border-radius: 0; }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color: var(--forest); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-error { font-size: .8rem; color: #c62828; margin-top: 6px; display: none; }
.form-group.has-error .form-error { display: block; }
.form-group.has-error .form-input,.form-group.has-error .form-textarea { border-color: #c62828; }
.form-checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-checkbox input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--forest); }
.form-checkbox span { font-size: .9rem; color: var(--bark-light); line-height: 1.5; }
.form-success { display: none; text-align: center; padding: 48px 32px; }
.form-success.show { display: block; }
.form-success__icon { width: 64px; height: 64px; background: var(--forest); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.form-success__icon svg { width: 28px; stroke: var(--white); fill: none; }

/* 15. TESTIMONIALS */
.testimonial-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 36px; position: relative; }
.testimonial-card::before { content: '\201C'; font-family: var(--font-serif); font-size: 5rem; color: var(--gold); opacity: .4; position: absolute; top: 16px; left: 28px; line-height: 1; }
.testimonial-card__text { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: rgba(248,244,237,.9); line-height: 1.7; margin-bottom: 24px; padding-top: 32px; }
.testimonial-card__author { display: flex; align-items: center; gap: 14px; }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--forest-light), var(--sage)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.1rem; color: var(--white); }
.testimonial-card__name { font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--white); }
.testimonial-card__loc  { font-size: .8rem; color: rgba(248,244,237,.5); }
.stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: 6px; }

/* 16. PILLARS */
.pillar { text-align: center; padding: 40px 24px; }
.pillar__icon { width: 72px; height: 72px; background: linear-gradient(135deg, var(--forest), var(--forest-mid)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: 0 8px 24px rgba(26,58,15,.25); }
.pillar__icon svg { width: 32px; height: 32px; stroke: var(--gold-light); fill: none; }
.pillar h3 { font-size: 1.4rem; margin-bottom: 12px; }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 36px; left: 10%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--sand), transparent); }
.step { text-align: center; padding: 24px 16px; position: relative; }
.step__num { width: 72px; height: 72px; background: var(--forest); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-serif); font-size: 1.8rem; color: var(--gold-light); position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(26,58,15,.3); }
.step h4 { font-size: 1.1rem; margin-bottom: 8px; }

/* 17. FAQ */
.accordion { border-top: 1px solid var(--parchment); }
.accordion-item { border-bottom: 1px solid var(--parchment); }
.accordion-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; text-align: left; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; color: var(--bark); cursor: pointer; background: none; border: none; transition: color var(--transition); }
.accordion-btn:hover { color: var(--forest); }
.accordion-btn .icon { width: 28px; height: 28px; border: 1.5px solid var(--sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition), border-color var(--transition), transform var(--transition); font-size: 1.2rem; color: var(--bark-light); }
.accordion-btn.open .icon { background: var(--forest); border-color: var(--forest); color: var(--white); transform: rotate(45deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.accordion-content p { padding: 0 0 24px; font-size: .95rem; line-height: 1.8; }

/* 18. NEWSLETTER */
.newsletter { background: var(--parchment); padding: 80px 0; }
.newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter h2 { margin-bottom: 12px; }
.newsletter p  { margin-bottom: 32px; }
.newsletter__form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.newsletter__form input { flex: 1; padding: 14px 20px; border: 1.5px solid var(--sand); border-radius: var(--radius-pill); font-size: .95rem; background: var(--white); outline: none; transition: border-color var(--transition); }
.newsletter__form input:focus { border-color: var(--forest); }

/* 19. BLOG */
.blog-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card__cat  { display: inline-block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-light); margin-bottom: 10px; }
.blog-card__title   { font-size: 1.2rem; margin-bottom: 10px; }
.blog-card__excerpt { font-size: .9rem; line-height: 1.7; flex: 1; }
.blog-card__footer  { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.blog-card__meta    { font-size: .8rem; color: var(--sand); }
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 40px; }
.blog-featured .blog-card__body { padding: 48px; justify-content: center; }
.blog-featured .blog-card__title { font-size: 1.8rem; }

/* Sidebar */
.sidebar { padding-left: 40px; }
.sidebar-widget { margin-bottom: 48px; }
.sidebar-widget h4 { font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--parchment); }

/* 20. FOOTER */
.footer { background: var(--bark); color: rgba(248,244,237,.75); padding: 80px 0 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 1.3rem; color: var(--white); margin-bottom: 16px; }
.footer__logo svg { width: 28px; fill: var(--gold); }
.footer__tagline { font-size: .9rem; line-height: 1.8; max-width: 280px; }
.footer__title { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__link  { font-size: .9rem; color: rgba(248,244,237,.6); transition: color var(--transition); }
.footer__link:hover { color: var(--gold-light); }
.footer__contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: .9rem; }
.footer__contact-item svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; flex-shrink: 0; margin-top: 3px; }
.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social-link { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition); }
.footer__social-link:hover { background: var(--gold); border-color: var(--gold); }
.footer__social-link svg { width: 16px; height: 16px; stroke: var(--white); fill: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: rgba(248,244,237,.4); }
.footer__bottom a { color: rgba(248,244,237,.4); transition: color var(--transition); }
.footer__bottom a:hover { color: var(--gold-light); }

/* 21. FLOATING + SCROLL TOP */
.floating-cta { position: fixed; bottom: 32px; right: 32px; z-index: 900; width: 60px; height: 60px; background: var(--forest); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(26,58,15,.45); transition: background var(--transition), transform var(--transition); }
.floating-cta:hover { background: var(--forest-light); transform: scale(1.1); }
.floating-cta svg { width: 26px; height: 26px; stroke: var(--white); fill: none; }
.scroll-top { position: fixed; bottom: 104px; right: 32px; z-index: 900; width: 44px; height: 44px; background: var(--white); border: 1.5px solid var(--sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); box-shadow: var(--shadow-sm); }
.scroll-top.visible { opacity: 1; pointer-events: all; }
.scroll-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.scroll-top svg { width: 18px; stroke: var(--forest); fill: none; }

/* 22. COOKIE */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; background: var(--bark); color: rgba(255,255,255,.85); padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transform: translateY(100%); transition: transform var(--transition); }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: .88rem; flex: 1; }
.cookie-banner p a { color: var(--gold-light); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }

/* 23. ANIMATIONS */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity: 1; transform: none; }
.fade-in:nth-child(2) { transition-delay: .1s; }
.fade-in:nth-child(3) { transition-delay: .2s; }
.fade-in:nth-child(4) { transition-delay: .3s; }
.fade-in:nth-child(5) { transition-delay: .4s; }
.fade-in:nth-child(6) { transition-delay: .5s; }

/* 24. EXTRAS */
.tip-box { background: rgba(74,140,42,.08); border-left: 3px solid var(--forest-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; margin: 24px 0; }
.tip-box__label { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-light); margin-bottom: 6px; }
.tip-box p { color: var(--bark); font-size: .95rem; }
.info-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.info-table th,.info-table td { padding: 12px 16px; text-align: left; font-size: .95rem; }
.info-table th { background: var(--forest); color: var(--cream); font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.info-table tr:nth-child(even) td { background: var(--parchment); }
.info-table td:first-child { font-weight: 600; color: var(--bark); }
.energy-dots { display: flex; gap: 5px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); }
.dot.filled { background: var(--forest-light); }
.map-ph { width: 100%; height: 320px; background: var(--forest); border-radius: var(--radius-md); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.map-ph::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 40px); }
.map-ph svg { width: 40px; stroke: var(--gold-light); fill: none; position: relative; z-index: 1; }
.map-ph p { color: rgba(255,255,255,.7); font-family: var(--font-sans); font-size: .85rem; text-align: center; position: relative; z-index: 1; }
.contact-info-card { background: var(--forest); border-radius: var(--radius-md); padding: 40px; }
.contact-info-card h3 { color: var(--white); margin-bottom: 32px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-item svg { width: 20px; height: 20px; stroke: var(--gold-light); fill: none; flex-shrink: 0; margin-top: 3px; }
.contact-info-item strong { display: block; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.contact-info-item span { color: rgba(255,255,255,.85); font-size: .95rem; }
.two-col-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 60px; align-items: start; }
.article-content h2 { margin: 40px 0 16px; }
.article-content h3 { margin: 32px 0 12px; font-size: 1.4rem; }
.article-content p  { margin-bottom: 20px; }
.article-content ul { margin: 16px 0 24px 20px; list-style: disc; }
.article-content ul li { margin-bottom: 8px; color: var(--bark-light); }
.article-content ul li::marker { color: var(--forest-light); }
.profile-card { background: var(--white); border-radius: var(--radius-md); padding: 32px; box-shadow: var(--shadow-sm); }

/* 25. RESPONSIVE */
@media (max-width: 1100px) {
  .stats__grid { grid-template-columns: repeat(2,1fr); }
  .stats__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gallery-grid { grid-template-columns: repeat(3,1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .two-col-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .timeline::before { left: 24px; }
  .timeline__item { grid-template-columns: 60px 1fr; }
  .timeline__item:nth-child(odd) .timeline__content,
  .timeline__item:nth-child(even) .timeline__content { grid-column: 2; text-align: left; padding-left: 32px; padding-right: 0; }
  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot { grid-column: 1; }
  .timeline__empty { display: none; }
  .nav__links,.nav__cta { display: none; }
  .nav__burger { display: flex; }
  .sidebar { padding-left: 0; margin-top: 48px; }
  .blog-featured .blog-card__body { padding: 28px; }
  .grid-2.reverse { direction: ltr; }
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; }
  .gallery-item:nth-child(3n+1) { grid-row: span 1; }
  .gallery-item:nth-child(5n+2) { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  .hero__actions { flex-direction: column; align-items: center; }
  .newsletter__form { flex-direction: column; }
  .floating-cta { bottom: 20px; right: 20px; }
  .scroll-top { bottom: 88px; right: 20px; }
  .cookie-banner { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════
   26. PREMIUM ENHANCEMENTS
══════════════════════════════════════════ */

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 7px; background: var(--parchment); }
::-webkit-scrollbar-thumb { background: var(--forest-mid); border-radius: 4px; border: 2px solid var(--parchment); }
::-webkit-scrollbar-thumb:hover { background: var(--forest); }

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 2001;
  height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--forest), var(--gold), var(--gold-light));
  transition: width .08s linear;
}

/* ── Page preloader ── */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--forest);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px;
  transition: opacity .7s ease, visibility .7s ease;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: preloaderBreath 1.8s ease-in-out infinite; }
.preloader__logo svg { width: 58px; height: 58px; fill: var(--gold); }
.preloader__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color: var(--white); letter-spacing: .1em; }
.preloader__bar { width: 130px; height: 2px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.preloader__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; animation: preloaderFill 1.3s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes preloaderBreath { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .8; } }
@keyframes preloaderFill { 0% { width: 0; } 100% { width: 100%; } }

/* ── Cursor glow ── */
#cursor-glow {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,149,42,.07) 0%, transparent 70%);
  transform: translate(-50%, -50%); will-change: left, top;
  transition: opacity .4s ease;
}

/* ── Hero canvas particles ── */
#hero-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }

/* ── Hero entry animations ── */
.hero__content { will-change: transform, opacity; }
.hero__badge    { animation: heroSlideUp 1s cubic-bezier(.2,.8,.3,1) .3s  both; }
.hero__title    { animation: heroSlideUp 1.1s cubic-bezier(.2,.8,.3,1) .55s both; }
.hero__divider  { animation: heroDivider 1s ease .85s both; }
.hero__subtitle { animation: heroSlideUp 1s cubic-bezier(.2,.8,.3,1) .95s both; }
.hero__actions  { animation: heroFade 1s ease 1.15s both; }
.hero__scroll   { animation: heroFade 1s ease 1.45s both; }
@keyframes heroSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes heroDivider { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes heroFade    { from { opacity: 0; } to { opacity: 1; } }

/* ── Enhanced animated hero badge border ── */
.hero__badge {
  background: linear-gradient(var(--forest), var(--forest)) padding-box,
              linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)) border-box;
  border: 1px solid transparent;
}

/* ── Directional fade-in variants ── */
.fade-in-left  { opacity: 0; transform: translateX(-48px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1); }
.fade-in-right { opacity: 0; transform: translateX( 48px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1); }
.fade-in-up    { opacity: 0; transform: translateY( 40px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1); }
.fade-in-scale { opacity: 0; transform: scale(.93);        transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1); }
.fade-in-left.visible, .fade-in-right.visible,
.fade-in-up.visible,   .fade-in-scale.visible { opacity: 1; transform: none; }

/* Stagger helpers */
.stagger-1 { transition-delay: .1s !important; }
.stagger-2 { transition-delay: .2s !important; }
.stagger-3 { transition-delay: .3s !important; }
.stagger-4 { transition-delay: .4s !important; }
.stagger-5 { transition-delay: .5s !important; }

/* ── Card shine (shimmer sweep on hover) ── */
.puppy-card, .dog-card, .blog-card, .card { position: relative; overflow: hidden; }
.puppy-card::after, .dog-card::after, .blog-card::after, .card::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; z-index: 4;
}
.puppy-card:hover::after, .dog-card:hover::after,
.blog-card:hover::after, .card:hover::after { left: 160%; }

/* ── Button shimmer ── */
.btn-primary, .btn-forest { position: relative; overflow: hidden; }
.btn-primary::before, .btn-forest::before {
  content: ''; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); transition: left .5s ease; pointer-events: none;
}
.btn-primary:hover::before, .btn-forest:hover::before { left: 160%; }

/* ── Gradient text utility ── */
.text-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 55%, #f0d070 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  color: var(--gold-light); /* fallback */
}

/* ── Pillar icon hover glow ── */
.pillar__icon { transition: transform var(--transition), box-shadow var(--transition); }
.pillar:hover .pillar__icon { transform: translateY(-5px) scale(1.06); box-shadow: 0 18px 44px rgba(26,58,15,.4); }

/* ── Testimonial hover lift ── */
.testimonial-card { transition: transform var(--transition), border-color var(--transition); }
.testimonial-card:hover { transform: translateY(-6px); border-color: rgba(184,149,42,.4); }

/* ── Stats item hover ── */
.stats__item { transition: background var(--transition); cursor: default; }
.stats__item:hover { background: rgba(255,255,255,.05); }
.stats__num { transition: color var(--transition); }
.stats__item:hover .stats__num { color: var(--gold); }

/* ── Floating CTA pulse ── */
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(26,58,15,.45), 0 0 0 0 rgba(26,58,15,.4); }
  60%      { box-shadow: 0 8px 32px rgba(26,58,15,.45), 0 0 0 14px rgba(26,58,15,0); }
}
.floating-cta { animation: ctaPulse 2.8s ease-in-out infinite; }

/* ── Nav logo micro-animation ── */
.nav__logo svg { transition: transform var(--transition); }
.nav__logo:hover svg { transform: rotate(12deg) scale(1.1); }

/* ── Footer social lift ── */
.footer__social-link { transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.footer__social-link:hover { transform: translateY(-4px) scale(1.1); }

/* ── Wave section dividers ── */
.wave-divider { position: relative; line-height: 0; overflow: hidden; pointer-events: none; }
.wave-divider svg { display: block; width: 100%; min-width: 800px; }

/* ── Timeline dot glow on hover ── */
.timeline__item:hover .timeline__dot {
  box-shadow: 0 0 0 6px rgba(184,149,42,.2);
  transition: box-shadow .3s ease;
}

/* ── Page transition overlay ── */
#page-transition {
  position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  background: var(--forest);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
#page-transition.leaving { transform: translateY(0); }
#page-transition.entering { transform: translateY(-100%); }

/* ══════════════════════════════════════════
   §27 — DARK MODE (public site)
══════════════════════════════════════════ */
body.dark {
  --cream: #0f1117; --parchment: #1a1d27; --white: #22263a;
  --text: #d4d4d8; --text-light: #7a8ba4;
}
body.dark .section                  { background: var(--cream); }
body.dark .section--parchment       { background: var(--parchment); }
body.dark .section--dark            { background: #070a0f; }
body.dark .nav                      { background: rgba(10,13,18,.95); }
body.dark .nav.scrolled             { background: rgba(10,13,18,.98); box-shadow: 0 2px 20px rgba(0,0,0,.5); }
body.dark .nav__logo, body.dark .nav__link { color: #e4e4e7; }
body.dark .nav__link:hover          { color: var(--gold-light); }
body.dark .nav__mobile              { background: #0a0d12; }
body.dark .footer                   { background: #050709; }
body.dark .puppy-card, body.dark .dog-card,
body.dark .blog-card, body.dark .card { background: var(--parchment); border-color: rgba(255,255,255,.07); }
body.dark .contact-info-card        { background: #0d2208; }
body.dark .accordion-item          { border-color: rgba(255,255,255,.1); }
body.dark .accordion-btn            { color: #d4d4d8; background: var(--parchment); }
body.dark .accordion-btn:hover      { background: rgba(255,255,255,.05); }
body.dark .form-input, body.dark .form-select, body.dark .form-textarea {
  background: var(--parchment); color: #d4d4d8; border-color: rgba(255,255,255,.14);
}
body.dark .page-hero                { background: linear-gradient(to bottom, #06130a, #0f1117); }
body.dark .contact-info-item strong { color: var(--gold-light); }
body.dark .img-ph                   { filter: brightness(.75); }

/* ── Dark mode toggle (public nav) ── */
.dark-mode-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: inherit; font-size: .78rem; font-family: var(--font-sans); font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.dark-mode-btn:hover { background: rgba(255,255,255,.2); }
.dark-mode-btn svg   { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav.scrolled .dark-mode-btn {
  background: rgba(26,58,15,.12); border-color: rgba(26,58,15,.22); color: var(--forest);
}
body.dark .nav.scrolled .dark-mode-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #e4e4e7; }

/* ══════════════════════════════════════════
   §28 — BREADCRUMBS
══════════════════════════════════════════ */
.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: .72rem; color: rgba(255,255,255,.55);
  margin-top: 10px; padding-top: 10px;
}
.breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb__sep { opacity: .35; font-size: .65rem; }
.breadcrumb__current { color: var(--gold-light); }

/* ══════════════════════════════════════════
   §29 — WHATSAPP BUTTON
══════════════════════════════════════════ */
.whatsapp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 50px;
  background: #25d366; color: white;
  font-family: var(--font-sans); font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.whatsapp-btn:hover { background: #1ebe5d; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.45); }
.whatsapp-btn svg   { width: 20px; height: 20px; fill: white; flex-shrink: 0; }

/* ══════════════════════════════════════════
   §30 — COST CALCULATOR
══════════════════════════════════════════ */
.calc-wrap {
  background: var(--white); border-radius: 18px; padding: 40px;
  box-shadow: 0 6px 40px rgba(0,0,0,.09);
}
.calc-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.calc-label { font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text); flex: 0 0 170px; }
.calc-slider {
  flex: 1; min-width: 140px; -webkit-appearance: none; height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--forest) 0%, var(--forest) var(--pct,50%), #ddd var(--pct,50%));
  outline: none; cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--forest); box-shadow: 0 2px 8px rgba(26,58,15,.4); cursor: pointer;
}
.calc-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--forest);
  box-shadow: 0 2px 8px rgba(26,58,15,.4); cursor: pointer; border: none;
}
.calc-val { font-family: var(--font-sans); font-size: .88rem; font-weight: 700;
  color: var(--forest); min-width: 72px; text-align: right; }
.calc-result {
  margin-top: 32px; padding: 28px; border-radius: 14px;
  background: var(--forest); color: white; text-align: center;
}
.calc-result__label { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.calc-result__num { font-family: var(--font-serif); font-size: 3rem; font-weight: 600;
  color: var(--gold-light); line-height: 1; margin-bottom: 6px; }
.calc-result__note { font-size: .78rem; opacity: .6; }
.calc-items { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .calc-items { grid-template-columns: 1fr; } }
.calc-item {
  background: rgba(255,255,255,.1); border-radius: 8px; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center; font-size: .8rem;
}
.calc-item__name { opacity: .72; }
.calc-item__price { font-weight: 700; color: var(--gold-light); }

/* ══════════════════════════════════════════
   §31 — SHARE BUTTONS
══════════════════════════════════════════ */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 6px; font-size: .73rem;
  font-family: var(--font-sans); font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .2s; text-decoration: none;
  user-select: none;
}
.share-btn--fb   { background: #1877f2; color: white; }
.share-btn--fb:hover { background: #1566d6; transform: translateY(-1px); }
.share-btn--wa   { background: #25d366; color: white; }
.share-btn--wa:hover { background: #1ebe5d; transform: translateY(-1px); }
.share-btn--copy { background: var(--parchment); color: var(--text); border-color: rgba(0,0,0,.1); }
.share-btn--copy:hover { background: #e0d9cf; transform: translateY(-1px); }
.share-btn svg   { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

/* ══════════════════════════════════════════
   §32 — FAQ LIVE SEARCH
══════════════════════════════════════════ */
.faq-search-wrap { position: relative; margin-bottom: 28px; }
.faq-search {
  width: 100%; padding: 12px 20px 12px 48px; border-radius: 50px;
  border: 1.5px solid rgba(0,0,0,.1); font-size: .9rem;
  font-family: var(--font-sans); background: var(--white);
  color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.faq-search:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,58,15,.1); }
.faq-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  pointer-events: none; width: 18px; height: 18px; opacity: .42;
  stroke: var(--text); fill: none; stroke-width: 2;
}
.faq-no-results {
  text-align: center; padding: 32px; color: var(--text-light);
  font-style: italic; display: none;
}
body.dark .faq-search { background: var(--parchment); color: #d4d4d8; border-color: rgba(255,255,255,.12); }

/* ══════════════════════════════════════════
   §33 — MAP EMBED
══════════════════════════════════════════ */
.map-embed { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: none; }

/* ══════════════════════════════════════════
   §34 — CHAR COUNTER
══════════════════════════════════════════ */
.char-counter { font-size: .72rem; color: var(--text-light); text-align: right; margin-top: 4px; }
.char-counter.warn { color: #e65100; }

/* ══════════════════════════════════════════
   §35 — HERO BACKGROUND IMAGE (remplace vidéo)
══════════════════════════════════════════ */
.hero__bg-img {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,28,8,.55) 0%, rgba(10,28,8,.35) 50%, rgba(10,28,8,.7) 100%),
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/BrittanySpaniels.jpg/1200px-BrittanySpaniels.jpg')
    center / cover no-repeat;
  will-change: transform;
}
/* Parallax léger sur desktop */
@media (min-width: 900px) {
  .hero__bg-img { background-attachment: fixed; }
}
/* Canvas particules au-dessus du fond */
#hero-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; }
/* Désactiver le canvas sur mobile pour les performances */
@media (max-width: 768px) { #hero-canvas { display: none; } }
/* Real photos inside ratio containers */
.photo-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: inherit;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.photo-cover-wrap {
  position: relative; overflow: hidden; border-radius: 12px;
}
.photo-cover-wrap:hover .photo-cover { transform: scale(1.04); }

/* ══════════════════════════════════════════
   §37 — PRINT CSS
══════════════════════════════════════════ */
@media print {
  .nav, .nav__mobile, .floating-cta, .scroll-top, .cookie-banner,
  #scroll-progress, #preloader, #cursor-glow, #page-transition,
  .wave-divider, footer, .dark-mode-btn, .share-row, .whatsapp-btn,
  .calc-wrap, .breadcrumb, .hero__bg-img, #hero-canvas { display: none !important; }
  body   { font-size: 11pt; color: #000; background: white; }
  h1,h2,h3 { color: #1a3a0f; page-break-after: avoid; }
  .page-hero { background: #1a3a0f !important; color: white !important; padding: 20pt !important; }
  .puppy-card { break-inside: avoid; page-break-inside: avoid;
    border: 1pt solid #ccc !important; box-shadow: none !important; margin-bottom: 16pt; }
  .puppy-card .btn-forest, .puppy-card .btn-outline-dark { display: none !important; }
  .section { padding: 12pt 0; }
  a[href]:not([href^="#"]):not([href^="javascript"])::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}

/* ══════════════════════════════════════════
   §38 — GRAIN TEXTURE OVERLAY
══════════════════════════════════════════ */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .04; mix-blend-mode: overlay;
}
/* Grain on parchment sections */
.section--parchment::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .025; mix-blend-mode: multiply;
}
.section--parchment { position: relative; }
.section--parchment > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   §39 — CERTIFICATION MARQUEE STRIP
══════════════════════════════════════════ */
.marquee-strip {
  background: var(--forest);
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.marquee-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee-roll 35s linear infinite;
  width: max-content;
}
.marquee-strip:hover .marquee-inner { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 40px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.marquee-item svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--gold-light); stroke-width: 2;
  flex-shrink: 0;
}
.marquee-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(184,149,42,.4);
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes marquee-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-inner { animation: none; }
  #hero-canvas { display: none; }
}

/* ── Mobile performance — désactiver effets lourds ── */
@media (max-width: 768px) {
  .hero__bg-img { background-attachment: scroll; } /* fixed crée jank sur iOS */
  .tilt-card    { transform: none !important; }
  .paw-trail    { display: none !important; }
  #cursor-paw-outer, #cursor-glow { display: none !important; }
  .hero__floats { display: none; }
  .confetti-piece { display: none !important; }
}

/* ══════════════════════════════════════════
   §40 — CARD SHINE ON HOVER
══════════════════════════════════════════ */
.puppy-card,
.pillar,
.testimonial-card {
  position: relative; overflow: hidden;
}
.puppy-card::before,
.pillar::before,
.testimonial-card::before {
  content: '';
  position: absolute;
  top: -80%; left: -60%;
  width: 40%; height: 260%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform: skewX(-15deg) translateX(-100%);
  transition: none;
  pointer-events: none;
  z-index: 2;
}
.puppy-card:hover::before,
.pillar:hover::before,
.testimonial-card:hover::before {
  transform: skewX(-15deg) translateX(600%);
  transition: transform .85s cubic-bezier(.2,.8,.3,1);
}

/* ══════════════════════════════════════════
   §41 — TESTIMONIALS CAROUSEL
══════════════════════════════════════════ */
.testimonials-carousel {
  position: relative;
  min-height: 260px;
}
.testimonials-carousel .testimonial-card {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.testimonials-carousel .testimonial-card.tc-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}
.tc-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 28px;
}
.tc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer; transition: background .3s, transform .3s;
  border: none; padding: 0;
}
.tc-dot.tc-dot--active {
  background: var(--gold-light);
  transform: scale(1.3);
}
.tc-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px;
}
.tc-prev, .tc-next {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: var(--gold-light); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .25s;
}
.tc-prev:hover, .tc-next:hover {
  background: rgba(255,255,255,.2); transform: scale(1.1);
}

/* ══════════════════════════════════════════
   §42 — GLASSMORPHISM PANELS (dark mode)
══════════════════════════════════════════ */
body.dark .testimonial-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
}
body.dark .pillar {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════
   §43 — PARALLAX DATA ATTRIBUTE IMAGES
══════════════════════════════════════════ */
[data-parallax] {
  will-change: transform;
  transition: transform .05s linear;
}
/* Ensure parent containers clip the parallax shift */
.photo-cover-wrap [data-parallax] {
  height: 108%; top: -4%; position: absolute;
}

/* ══════════════════════════════════════════
   §44 — PROGRESS BARS (race characteristics)
══════════════════════════════════════════ */
.progress-wrap {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.progress-label {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--bark-light); min-width: 130px;
}
.progress-bar {
  flex: 1; height: 6px; background: var(--parchment); border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--forest-mid), var(--gold));
  transition: width 1.2s cubic-bezier(.2,.8,.3,1);
}
body.dark .progress-bar { background: rgba(255,255,255,.1); }

/* ══════════════════════════════════════════
   §45 — ANIMATED AVAILABILITY RIBBON
══════════════════════════════════════════ */
.puppy-card[data-status="available"] .puppy-card__img::after {
  content: 'Disponible';
  position: absolute; top: 14px; right: -28px;
  background: linear-gradient(90deg, var(--forest-mid), var(--forest));
  color: #fff;
  font-family: var(--font-sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 36px;
  transform: rotate(45deg);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  z-index: 4;
  animation: ribbonPulse 3s ease-in-out infinite;
}
.puppy-card[data-status="reserved"] .puppy-card__img::after {
  content: 'Réservé';
  position: absolute; top: 14px; right: -28px;
  background: linear-gradient(90deg, #b85c2a, #d4884a);
  color: #fff;
  font-family: var(--font-sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 36px;
  transform: rotate(45deg);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  z-index: 4;
}
.puppy-card__img { position: relative; overflow: hidden; }
@keyframes ribbonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .78; }
}

/* ══════════════════════════════════════════
   §46 — TILT CARD 3D DEPTH (CSS variables)
══════════════════════════════════════════ */
.puppy-card,
.pillar,
.testimonial-card {
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}
/* Depth shadow that matches tilt */
.puppy-card:hover,
.pillar:hover {
  box-shadow: var(--shadow-xl);
}

/* ══════════════════════════════════════════
   §46b — VALEURS SECTION BG PARALLAX
══════════════════════════════════════════ */
.valeurs-section {
  position: relative;
  overflow: hidden;
  background: none !important;
}
.valeurs-section::before {
  content: '';
  position: absolute; inset: -20%; z-index: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Timba_arret.jpg/1200px-Timba_arret.jpg');
  background-size: cover; background-position: center;
  background-attachment: fixed;
  opacity: .14;
  filter: saturate(.6) brightness(.5);
}
.valeurs-section::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(26,58,15,.88) 0%, rgba(26,58,15,.82) 100%);
}
.valeurs-section > * { position: relative; z-index: 2; }

/* ══════════════════════════════════════════
   §47 — IMAGE REVEAL ANIMATION
══════════════════════════════════════════ */
@keyframes imgReveal {
  from { opacity: 0; filter: blur(4px) scale(1.02); }
  to   { opacity: 1; filter: blur(0) scale(1); }
}

/* ══════════════════════════════════════════
   §48 — TYPED TEXT CURSOR
══════════════════════════════════════════ */
.typed-cursor {
  display: inline-block; width: 2px; height: .85em;
  background: var(--gold-light); margin-left: 3px;
  vertical-align: middle;
  animation: cursorBlink .75s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ══════════════════════════════════════════
   §49 — BUTTON RIPPLE ON CLICK
══════════════════════════════════════════ */
.btn { overflow: hidden; }
.btn-ripple {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 9;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: rippleOut .6s ease-out forwards;
}
@keyframes rippleOut { to { transform: scale(8); opacity: 0; } }

/* ══════════════════════════════════════════
   §50 — NAV LINK ANIMATED UNDERLINE
══════════════════════════════════════════ */
.nav__links .nav__link {
  position: relative; padding-bottom: 2px;
}
.nav__links .nav__link::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--forest-light));
  transform: scaleX(0); transform-origin: right;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.nav__links .nav__link:hover::after,
.nav__links .nav__link.active::after {
  transform: scaleX(1); transform-origin: left;
}

/* ══════════════════════════════════════════
   §51 — GRADIENT TEXT CLASS
══════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, var(--forest) 0%, var(--gold) 55%, var(--sage) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gold-glow {
  color: var(--gold-light);
  text-shadow: 0 0 40px rgba(184,149,42,.35);
}

/* ══════════════════════════════════════════
   §52 — HERO FLOATING ELEMENTS
══════════════════════════════════════════ */
.hero-float {
  position: absolute; pointer-events: none; z-index: 1;
  opacity: 0; user-select: none; font-size: 1.2rem;
  animation: heroFloatUp linear infinite;
}
@keyframes heroFloatUp {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
  8%   { opacity: .5; }
  88%  { opacity: .15; }
  100% { opacity: 0; transform: translateY(-105vh) translateX(var(--drift,50px)) rotate(720deg); }
}

/* ══════════════════════════════════════════
   §53 — GALLERY MASONRY + ENHANCED CAPTIONS
══════════════════════════════════════════ */
.gallery-grid {
  display: block !important;
  columns: 4; column-gap: 14px;
}
.gallery-item {
  break-inside: avoid; margin-bottom: 14px;
  display: block !important;
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-item img {
  width: 100% !important; height: auto !important;
  object-fit: unset !important;
  display: block; border-radius: 8px;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item__overlay {
  flex-direction: column !important;
  justify-content: flex-end !important; align-items: flex-start !important;
  padding: 16px 18px 16px !important;
  background: linear-gradient(to top, rgba(10,20,5,.88) 0%, rgba(26,58,15,.2) 60%, transparent 100%) !important;
}
.gallery-item__cat {
  font-family: var(--font-sans); color: var(--gold-light);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; display: block; margin-bottom: 4px;
}
.gallery-item__caption {
  font-family: var(--font-sans); color: rgba(255,255,255,.88);
  font-size: .78rem; line-height: 1.45;
  transform: translateY(6px); transition: transform .35s ease;
}
.gallery-item:hover .gallery-item__caption { transform: translateY(0); }
.gallery-item.is-hiding { opacity: 0; transform: scale(.92); pointer-events: none; }
.gallery-item.is-showing { animation: galleryReveal .4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes galleryReveal {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 1024px) { .gallery-grid { columns: 3; } }
@media (max-width: 768px)  { .gallery-grid { columns: 2; } }
@media (max-width: 480px)  { .gallery-grid { columns: 1; } }

/* ══════════════════════════════════════════
   §54 — COUNTDOWN TIMER STRIP
══════════════════════════════════════════ */
.countdown-strip {
  background: linear-gradient(160deg, #050f02 0%, #0e2308 40%, #1a3a0f 70%, #0e2308 100%);
  padding: 52px 0; text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid rgba(184,149,42,.18);
  border-bottom: 1px solid rgba(184,149,42,.18);
}
.countdown-strip::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(184,149,42,.07) 0%, transparent 65%);
}
.countdown-eyebrow {
  display: block; font-family: var(--font-sans); font-size: .72rem;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.countdown-headline {
  font-family: var(--font-serif); color: var(--cream);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 300;
  margin-bottom: 32px; letter-spacing: -.01em;
}
.countdown-grid {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 32px; position: relative; z-index: 1;
}
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 20px 24px; min-width: 90px;
  backdrop-filter: blur(10px); transition: transform .25s, box-shadow .25s;
}
.countdown-unit:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.countdown-num {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 300; color: var(--gold-light); line-height: 1;
  min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-family: var(--font-sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-top: 8px;
}

/* ══════════════════════════════════════════
   §55 — ADOPTION PROCESS STEPS
══════════════════════════════════════════ */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0; position: relative; counter-reset: step-counter;
}
.steps-grid::before {
  content: '';
  position: absolute; top: 38px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 20%, var(--forest-light) 80%, transparent);
  z-index: 0; opacity: .5;
}
.step-item {
  text-align: center; padding: 0 20px 40px;
  position: relative; z-index: 1; counter-increment: step-counter;
}
.step-num {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid));
  border: 2px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-serif); font-size: 1.9rem; font-weight: 300;
  color: var(--gold-light); box-shadow: 0 0 0 6px rgba(184,149,42,.1), 0 4px 20px rgba(0,0,0,.15);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.step-item:hover .step-num {
  transform: scale(1.1);
  box-shadow: 0 0 0 12px rgba(184,149,42,.15), 0 8px 28px rgba(0,0,0,.2);
}
.step-icon { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.step-title {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--forest);
  margin-bottom: 10px;
}
.step-desc { font-size: .88rem; color: var(--bark-light); line-height: 1.65; }
body.dark .step-title { color: var(--cream); }
body.dark .step-desc  { color: rgba(255,255,255,.5); }
body.dark .step-num   { background: linear-gradient(135deg, #112508, #1a3a0f); }
@media (max-width: 768px) { .steps-grid::before { display: none; } .steps-grid { gap: 32px; } }

/* ══════════════════════════════════════════
   §56 — TESTIMONIAL LARGE QUOTE MARK
══════════════════════════════════════════ */
.testimonial-card__text {
  position: relative; padding-top: 8px;
}
.testimonial-card__text::before {
  content: '\201C';
  position: absolute; top: -28px; left: -8px;
  font-family: var(--font-serif); font-size: 5.5rem; font-weight: 300;
  color: var(--gold); opacity: .18; line-height: 1; pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════
   §57 — LIGHTBOX CAPTION + COUNTER
══════════════════════════════════════════ */
.lightbox__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
  padding: 24px 48px 28px; text-align: center; pointer-events: none;
}
.lightbox__cat-label {
  display: block; font-family: var(--font-sans); font-size: .62rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 5px;
}
.lightbox__caption-text {
  font-family: var(--font-sans); font-size: .8rem; font-weight: 400;
  color: rgba(255,255,255,.78); line-height: 1.5;
}
.lightbox__counter {
  position: absolute; top: 18px; right: 56px;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.45); letter-spacing: .06em;
}

/* ══════════════════════════════════════════
   §58 — HERO BADGE ANIMATED GLOW
══════════════════════════════════════════ */
.hero__badge {
  animation: badgePulse 4.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.2); }
  50%       { box-shadow: 0 4px 32px rgba(184,149,42,.35), 0 0 60px rgba(184,149,42,.12); }
}

/* ══════════════════════════════════════════
   §59 — FOOTER GLOW TOP BORDER
══════════════════════════════════════════ */
footer.footer { position: relative; }
footer.footer::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 30%, var(--forest-light) 70%, transparent);
  opacity: .35;
}

/* ══════════════════════════════════════════
   §60 — SCROLL-TOP PROGRESS RING
══════════════════════════════════════════ */
.scroll-top {
  display: flex; align-items: center; justify-content: center;
  overflow: visible !important; position: relative;
}
.scroll-top svg.scroll-ring {
  position: absolute; inset: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  border-radius: 50%; pointer-events: none; z-index: -1;
  transform: rotate(-90deg);
}
.scroll-ring__track {
  fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2;
}
.scroll-ring__fill {
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-dasharray: 0 100; stroke-linecap: round;
  transition: stroke-dasharray .15s linear;
}

/* ══════════════════════════════════════════
   §61 — NAV SCROLLED PREMIUM GLOW
══════════════════════════════════════════ */
.nav.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(184,149,42,.07) !important;
}

/* ══════════════════════════════════════════
   §62 — STATS SECTION ICONS
══════════════════════════════════════════ */
.stats__item svg {
  width: 28px; height: 28px; fill: none;
  stroke: var(--gold-light); stroke-width: 1.5;
  margin-bottom: 8px; opacity: .7;
}

/* ══════════════════════════════════════════
   §63 — HERO SUBTITLE TYPING WRAP
══════════════════════════════════════════ */
.hero__subtitle[data-typed] { min-height: 2.4em; }

/* ══════════════════════════════════════════
   §64 — SECTION DIVIDER GOLD LINE
══════════════════════════════════════════ */
.gold-divider {
  width: 80px; height: 1px; margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-header .gold-divider { margin: -12px auto 24px; }

/* ══════════════════════════════════════════
   §65 — HERO MORPHING WORD ANIMATION
══════════════════════════════════════════ */
.morph-word {
  display: inline-block;
  color: var(--gold-light);
  transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.3,1);
}
.morph-word.out {
  opacity: 0; transform: translateY(-12px);
}
.morph-word.in {
  opacity: 0; transform: translateY(12px);
  animation: morphIn .4s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes morphIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   §66 — ENHANCED NEWSLETTER SECTION
══════════════════════════════════════════ */
.newsletter {
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%, rgba(184,149,42,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(74,140,42,.06) 0%, transparent 60%);
}
.newsletter__form input {
  transition: box-shadow .3s, border-color .3s;
}
.newsletter__form input:focus {
  box-shadow: 0 0 0 3px rgba(184,149,42,.2); outline: none;
  border-color: var(--gold);
}

/* ══════════════════════════════════════════
   §67 — ENHANCED FLOATING CTA PULSE
══════════════════════════════════════════ */
.floating-cta::after {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0;
  animation: ctaPulse 2.5s ease-out infinite;
}
@keyframes ctaPulse {
  0%   { transform: scale(.9); opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ══════════════════════════════════════════
   §68 — CARD DEPTH LAYER (extra shadow on tilt)
══════════════════════════════════════════ */
.puppy-card,
.dog-card,
.blog-card {
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    transform .1s ease;
}
.puppy-card:hover,
.dog-card:hover,
.blog-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 8px 20px rgba(26,58,15,.12);
}

/* ══════════════════════════════════════════
   §69 — DARK MODE EXTRA REFINEMENTS
══════════════════════════════════════════ */
body.dark .countdown-strip {
  background: linear-gradient(160deg, #020602 0%, #061104 50%, #0a1f05 100%);
}
body.dark .step-num {
  border-color: var(--gold); color: var(--gold-light);
}
body.dark .gallery-item img { filter: brightness(.92) saturate(.95); }
body.dark .gallery-item:hover img { filter: brightness(1) saturate(1); }
body.dark footer.footer::before { opacity: .25; }

/* ══════════════════════════════════════════
   §70 — PRINT ADDITIONS
══════════════════════════════════════════ */
@media print {
  .countdown-strip, .marquee-strip,
  .steps-section .btn { display: none !important; }
  .step-num { border: 2pt solid #1a3a0f !important; color: #1a3a0f !important; }
}

/* ══════════════════════════════════════════
   §71 — CUSTOM PAW CURSOR
══════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  body, a, button, input, select, textarea, label,
  [role="button"], [tabindex] { cursor: none !important; }
}
#cursor-paw-outer {
  position: fixed; pointer-events: none; z-index: 99999;
  top: -100px; left: -100px; width: 28px; height: 28px;
  transform: translate(-50%,-50%) rotate(-20deg);
  will-change: transform; transition: opacity .3s;
}
#cursor-paw-outer svg {
  width: 100%; height: 100%; fill: var(--forest);
  filter: drop-shadow(0 2px 8px rgba(26,58,15,.22));
  transition: fill .2s, transform .15s cubic-bezier(.2,.8,.3,1);
}
#cursor-paw-outer.hovering svg { fill: var(--gold); transform: scale(1.35) rotate(12deg); }
#cursor-paw-outer.clicking svg { transform: scale(.68) rotate(-8deg); }
#cursor-dot {
  position: fixed; pointer-events: none; z-index: 99998;
  top: -100px; left: -100px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); opacity: .55;
  transform: translate(-50%,-50%); will-change: transform;
}

/* ══════════════════════════════════════════
   §72 — CUSTOM SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--parchment); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--forest-light), var(--gold));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--forest); }
* { scrollbar-width: thin; scrollbar-color: var(--forest-light) var(--parchment); }

/* ══════════════════════════════════════════
   §73 — FLIP DOG CARDS
══════════════════════════════════════════ */
.dog-card {
  perspective: 1200px;
  min-height: 540px;
  background: none !important;
  box-shadow: none !important;
}
.dog-card__inner {
  position: relative; width: 100%; height: 100%; min-height: 540px;
  transition: transform .75s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}
.dog-card:hover .dog-card__inner,
.dog-card.flipped .dog-card__inner { transform: rotateY(180deg); }
.dog-card__front, .dog-card__back {
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.dog-card__front {
  background: var(--white); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.dog-card__front img {
  width: 100%; height: 60%; object-fit: cover; display: block;
  flex-shrink: 0;
}
.dog-card__front-body { padding: 22px 26px; flex: 1; }
.dog-card__front-name {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300;
  color: var(--forest); margin-bottom: 4px;
}
.dog-card__front-sub {
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bark-light);
  margin-bottom: 14px;
}
.dog-card__flip-hint {
  display: flex; align-items: center; gap: 7px; margin-top: 16px;
  font-family: var(--font-sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  opacity: .8;
}
.dog-card__flip-hint svg {
  width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2;
  animation: hintSpin 2.8s ease-in-out infinite;
}
@keyframes hintSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}
.dog-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-mid) 55%, #071204 100%);
  color: var(--cream); padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-xl);
}
.dog-card__back-name {
  font-family: var(--font-serif); font-size: 1.75rem; font-weight: 300;
  color: var(--cream); margin-bottom: 3px; line-height: 1.15;
}
.dog-card__back-sub {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 18px;
}
.dog-card__traits {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px;
}
.dog-card__trait {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 4px 12px;
  font-family: var(--font-sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light);
  transition: background .25s;
}
.dog-card__trait:hover { background: rgba(255,255,255,.18); }
.dog-card__stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.dog-card__stat-label {
  font-family: var(--font-sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4);
  margin-bottom: 2px;
}
.dog-card__stat-val {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--cream);
}
.dog-card__pedigree {
  background: rgba(255,255,255,.07); border-radius: 8px; padding: 12px 14px;
  font-size: .78rem; line-height: 1.7; color: rgba(255,255,255,.68);
  margin-bottom: 18px;
}
.dog-card__pedigree strong {
  color: var(--gold-light); font-family: var(--font-sans);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
@media (max-width: 768px) {
  .dog-card { min-height: 0; perspective: none; }
  .dog-card__inner { min-height: 0; transform: none !important; transform-style: flat; transition: none; }
  .dog-card__front { position: relative; inset: auto; }
  .dog-card__back  { display: none; }
  .dog-card.flipped .dog-card__front { display: none; }
  .dog-card.flipped .dog-card__back  { display: flex; position: relative; inset: auto; transform: none; }
}

/* ══════════════════════════════════════════
   §74 — GRADIENT BORDER ON AVAILABLE CARDS
══════════════════════════════════════════ */
.puppy-card[data-status="available"] {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, #2e7d32 0%, var(--gold-light) 40%, var(--forest-light) 70%, var(--gold) 100%) border-box;
  border: 2px solid transparent;
}
.section--parchment .puppy-card[data-status="available"] {
  background:
    linear-gradient(var(--parchment), var(--parchment)) padding-box,
    linear-gradient(135deg, #2e7d32 0%, var(--gold-light) 40%, var(--forest-light) 70%, var(--gold) 100%) border-box;
}

/* ══════════════════════════════════════════
   §75 — PUPPY TRAIT PILLS
══════════════════════════════════════════ */
.trait-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px;
}
.trait-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--parchment); border-radius: 20px;
  padding: 4px 10px;
  font-family: var(--font-sans); font-size: .63rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--forest-mid);
  border: 1px solid rgba(26,58,15,.1);
  transition: background .22s, color .22s, transform .2s;
}
.trait-pill:hover { background: var(--forest); color: var(--gold-light); transform: scale(1.06); }
.trait-pill span { font-size: .78rem; }
body.dark .trait-pill { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--gold-light); }

/* ══════════════════════════════════════════
   §76 — "POURQUOI NOUS" CARDS
══════════════════════════════════════════ */
.why-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 48px;
}
.why-card {
  background: var(--white); border-radius: var(--radius-md);
  padding: 36px 24px; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.05);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
  position: relative; overflow: hidden;
}
.why-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.8,.3,1);
}
.why-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.why-card:hover::after { transform: scaleX(1); }
.why-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,58,15,.07), rgba(184,149,42,.1));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; font-size: 2.2rem;
  border: 1px solid rgba(26,58,15,.09);
  transition: transform .35s, background .35s;
}
.why-card:hover .why-icon { transform: scale(1.12) rotate(6deg); background: linear-gradient(135deg, rgba(26,58,15,.15), rgba(184,149,42,.2)); }
.why-title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--forest); margin-bottom: 12px; }
.why-desc  { font-size: .88rem; color: var(--bark-light); line-height: 1.72; }
body.dark .why-card  { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark .why-title { color: var(--cream); }
body.dark .why-icon  { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════
   §77 — SKELETON SHIMMER LOADER
══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--parchment) 25%, rgba(237,229,212,.5) 50%, var(--parchment) 75%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: 4px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.img-wrap-skeleton { position: relative; }
.img-wrap-skeleton .sk-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; transition: opacity .5s;
  background: var(--parchment);
}
.img-wrap-skeleton img { opacity: 0; transition: opacity .5s; }
.img-wrap-skeleton.loaded .sk-overlay { opacity: 0; }
.img-wrap-skeleton.loaded img { opacity: 1; }

/* ══════════════════════════════════════════
   §78 — LITTER AVAILABILITY SPOTS
══════════════════════════════════════════ */
.litter-availability {
  background: var(--white); border-radius: 14px; padding: 28px 32px;
  margin-bottom: 48px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.05);
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px;
}
@media (max-width: 700px) { .litter-availability { grid-template-columns: 1fr; gap: 20px; } }
.litter-title { font-family: var(--font-serif); font-size: 1.35rem; color: var(--forest); margin-bottom: 4px; }
.litter-sub   { font-size: .84rem; color: var(--bark-light); }
.litter-spots { display: flex; gap: 8px; flex-wrap: wrap; }
.spot {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; border: 2px solid transparent;
  transition: transform .28s, box-shadow .28s;
}
.spot:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.spot--available { background: rgba(46,125,50,.1); border-color: #2e7d32; color: #2e7d32; }
.spot--reserved  { background: rgba(230,81,0,.1);  border-color: #e65100; color: #e65100; }
.litter-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bark-light);
}
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-dot--available { background: #2e7d32; }
.legend-dot--reserved  { background: #e65100; }
body.dark .litter-availability { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* ══════════════════════════════════════════
   §79 — SOCIAL PROOF STRIP
══════════════════════════════════════════ */
.social-proof {
  padding: 26px 0; background: var(--white);
  border-top: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05);
}
.social-proof__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
}
.social-proof__item { display: flex; align-items: center; gap: 14px; }
.social-proof__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,58,15,.07), rgba(184,149,42,.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; border: 1px solid rgba(26,58,15,.08);
  transition: transform .28s;
}
.social-proof__item:hover .social-proof__icon { transform: scale(1.1) rotate(8deg); }
.social-proof__num {
  font-family: var(--font-serif); font-size: 1.55rem; font-weight: 300;
  color: var(--forest); line-height: 1;
}
.social-proof__label {
  font-family: var(--font-sans); font-size: .63rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bark-light);
}
body.dark .social-proof { background: rgba(255,255,255,.03); }
body.dark .social-proof__num { color: var(--gold-light); }
@media (max-width: 600px) { .social-proof__inner { gap: 22px; } }

/* ══════════════════════════════════════════
   §80 — LARGE CERTIFICATE BADGES
══════════════════════════════════════════ */
.cert-strip {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px;
}
.cert-badge-lg {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border-radius: 12px; padding: 14px 22px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.cert-badge-lg:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.cert-badge-lg__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid));
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;
}
.cert-badge-lg__name {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  color: var(--forest); text-transform: uppercase; letter-spacing: .07em;
}
.cert-badge-lg__desc { font-size: .7rem; color: var(--bark-light); margin-top: 2px; }
body.dark .cert-badge-lg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
body.dark .cert-badge-lg__name { color: var(--gold-light); }

/* ══════════════════════════════════════════
   §81 — PUPPY PRICE DISPLAY
══════════════════════════════════════════ */
.puppy-card__price {
  margin: 8px 0 14px;
}
.puppy-card__price-row {
  display: flex; align-items: baseline; gap: 5px;
}
.puppy-card__price-num {
  font-family: var(--font-serif); font-size: 2.1rem; font-weight: 300; color: var(--forest); line-height: 1;
}
.puppy-card__price-currency {
  font-family: var(--font-sans); font-size: .75rem; font-weight: 700; color: var(--forest-mid);
  text-transform: uppercase; letter-spacing: .06em;
}
.puppy-card__price-note {
  font-family: var(--font-sans); font-size: .62rem; color: var(--bark-light);
  display: block; margin-top: 3px; letter-spacing: .04em;
}
body.dark .puppy-card__price-num { color: var(--gold-light); }
body.dark .puppy-card__price-currency { color: var(--gold); }

/* ══════════════════════════════════════════
   §82 — HORIZONTAL PHOTO STRIP
══════════════════════════════════════════ */
.photo-strip-section { padding: 40px 0; overflow: hidden; }
.photo-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 5vw 16px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.photo-strip__item {
  flex-shrink: 0; width: 280px; height: 200px; border-radius: 12px;
  overflow: hidden; scroll-snap-align: start; position: relative;
}
.photo-strip__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.photo-strip__item:hover img { transform: scale(1.08); }
.photo-strip__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color: white; font-family: var(--font-sans); font-size: .75rem;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.photo-strip__item:hover .photo-strip__caption { opacity: 1; transform: translateY(0); }
.photo-strip-header {
  text-align: center; padding: 0 20px 32px;
}
.photo-strip-header h2 { font-family: var(--font-serif); font-size: clamp(1.6rem,3vw,2.4rem); color: var(--forest); margin: 8px 0 0; }
body.dark .photo-strip-header h2 { color: var(--cream); }
.photo-strip__hint {
  text-align: center; padding: 16px 0 4px;
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sand); display: flex;
  align-items: center; justify-content: center; gap: 8px;
}
.photo-strip__hint svg { width: 14px; height: 14px; opacity: .5; }

/* ══════════════════════════════════════════
   §83 — TOAST NOTIFICATION
══════════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 92px; right: 20px; z-index: 9990;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  background: var(--forest); color: var(--cream); border-radius: 12px;
  padding: 14px 18px; font-family: var(--font-sans); font-size: .82rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  display: flex; align-items: center; gap: 10px; max-width: 290px;
  pointer-events: auto; border-left: 3px solid var(--gold-light);
  transform: translateX(120%); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.8,.3,1), opacity .42s;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }
.toast__icon { font-size: 1.1rem; flex-shrink: 0; }
.toast__close {
  margin-left: auto; background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 1.1rem; padding: 0 0 0 8px; cursor: pointer; transition: color .2s;
}
.toast__close:hover { color: var(--cream); }

/* ══════════════════════════════════════════
   §84 — SECTION WITH DOT PATTERN
══════════════════════════════════════════ */
.section--with-dots { position: relative; }
.section--with-dots::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 45%; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,58,15,.055) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 80%);
  mask-image: linear-gradient(to left, black 0%, transparent 80%);
}
.section--with-dots > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   §85 — NAV ACTIVE DOT INDICATOR
══════════════════════════════════════════ */
.nav__links .nav__link { position: relative; }
.nav__links .nav__link.active::after {
  transform: scaleX(1); transform-origin: left;
}

/* ══════════════════════════════════════════
   §86 — ENHANCED PAGE HERO
══════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 105% 50%, rgba(184,149,42,.1) 0%, transparent 55%),
              radial-gradient(ellipse 35% 55% at -5% 50%,  rgba(74,140,42,.07) 0%, transparent 55%);
}
.page-hero__inner { position: relative; z-index: 2; }

.page-hero__sub { font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.72; margin: 16px 0 0; max-width: 420px; }

/* Page hero with side photo */
.page-hero--photo {
  display: grid; grid-template-columns: 1fr 380px; min-height: 280px; padding: 0;
}
.page-hero--photo .page-hero__inner { padding: 70px 0 70px 8%; display: flex; flex-direction: column; justify-content: center; }
.page-hero--photo .hero-photo-col { position: relative; overflow: hidden; }
.page-hero--photo .hero-photo-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; mix-blend-mode: luminosity; filter: brightness(.65) saturate(.7); }
.page-hero--photo .hero-photo-col::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, var(--forest) 0%, transparent 50%);
}
@media (max-width: 768px) { .page-hero--photo { grid-template-columns: 1fr; } .page-hero--photo .hero-photo-col { display: none; } .page-hero--photo .page-hero__inner { padding: 60px 5%; } }

/* ══════════════════════════════════════════
   §87 — SWIPE CAROUSEL INDICATOR (mobile)
══════════════════════════════════════════ */
.swipe-hint {
  display: none; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-top: 20px;
  animation: swipeHint 2.5s ease-in-out infinite;
}
@media (max-width: 768px) { .swipe-hint { display: flex; } }
@keyframes swipeHint {
  0%, 100% { transform: translateX(0); opacity: .35; }
  50%       { transform: translateX(6px); opacity: .65; }
}

/* ══════════════════════════════════════════
   §88 — SECTION ACCENT LINE
══════════════════════════════════════════ */
.section-accent {
  display: block; width: 0; height: 2px; margin-bottom: 28px; border-radius: 1px;
  background: linear-gradient(90deg, var(--gold), var(--forest-light));
  transition: width 1.1s cubic-bezier(.2,.8,.3,1);
}
.section-accent.visible { width: 72px; }

/* ══════════════════════════════════════════
   §89 — DOG-CARD SECTION SECTION DIVIDER
══════════════════════════════════════════ */
.dogs-section-title {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
}
.dogs-section-title h3 {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bark-light);
  white-space: nowrap;
}
.dogs-section-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--sand), transparent);
}

/* ══════════════════════════════════════════
   §90 — HEALTH PROTOCOL CARD ENHANCED
══════════════════════════════════════════ */
.health-card {
  text-align: center; padding: 32px 24px;
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.05);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
  position: relative; overflow: hidden;
}
.health-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--forest-mid), var(--gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.8,.3,1);
}
.health-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.health-card:hover::before { transform: scaleX(1); }
.health-card__icon { font-size: 2.6rem; margin-bottom: 14px; display: block; }
body.dark .health-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* ══════════════════════════════════════════
   §91 — DARK MODE FINAL PASS
══════════════════════════════════════════ */
body.dark ::-webkit-scrollbar-track { background: #070d04; }
body.dark ::-webkit-scrollbar-thumb { background: var(--forest-mid); }
body.dark * { scrollbar-color: var(--forest-mid) #070d04; }
body.dark .dog-card__front { background: #0f1e09; }
body.dark .dog-card__front-name { color: var(--cream); }
body.dark #cursor-paw-outer svg { fill: var(--gold-light); }

/* ══════════════════════════════════════════
   §92 — HERO LETTER SPACING ANIMATION
══════════════════════════════════════════ */
@keyframes letterReveal {
  from { opacity: 0; letter-spacing: .3em; filter: blur(3px); }
  to   { opacity: 1; letter-spacing: -.02em; filter: blur(0); }
}
.hero__title { animation: letterReveal 1.2s cubic-bezier(.2,.8,.3,1) .2s both; }

/* ══════════════════════════════════════════
   §93 — CONFETTI ON RESERVATION (JS-injected)
══════════════════════════════════════════ */
.confetti-piece {
  position: fixed; width: 8px; height: 8px; z-index: 99990;
  pointer-events: none; border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════════
   §94 — HERO FLOATING BADGES
══════════════════════════════════════════ */
.hero__floats {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
}
.hero__float {
  position: absolute;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 40px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-family: var(--font-sans); font-size: .72rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  animation: floatBadge 6s ease-in-out infinite;
  opacity: 0; animation-fill-mode: forwards;
}
.hero__float--1 { top: 22%; right: 8%;  animation-delay: .6s; }
.hero__float--2 { top: 42%; right: 5%;  animation-delay: 1.1s; animation-duration: 7s; }
.hero__float--3 { top: 62%; right: 9%;  animation-delay: 1.5s; animation-duration: 8s; }
.hero__float--4 { top: 30%; right: 22%; animation-delay: .9s;  animation-duration: 6.5s; }
.hero__float-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
@keyframes floatBadge {
  0%   { opacity: 0; transform: translateY(12px) scale(.9); }
  10%  { opacity: 1; transform: translateY(0)    scale(1); }
  50%  { transform: translateY(-8px); }
  90%  { opacity: 1; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) { .hero__floats { display: none; } }

/* ══════════════════════════════════════════
   §95 — SPOTLIGHT FEATURED PUPPY
══════════════════════════════════════════ */
.spotlight {
  background: var(--white); border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0,0,0,.1);
  display: grid; grid-template-columns: 1.1fr 1fr;
  overflow: hidden; margin-bottom: 56px;
  border: 1px solid rgba(0,0,0,.04);
  position: relative;
}
.spotlight::before {
  content: '★ CHIOT EN VEDETTE';
  position: absolute; top: 20px; left: 20px; z-index: 3;
  background: var(--gold);
  color: var(--forest); font-family: var(--font-sans); font-size: .62rem;
  font-weight: 800; letter-spacing: .14em; padding: 6px 14px;
  border-radius: 20px;
}
.spotlight__photo {
  position: relative; overflow: hidden; min-height: 440px;
}
.spotlight__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.3,1);
}
.spotlight:hover .spotlight__photo img { transform: scale(1.05); }
.spotlight__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--white));
}
.spotlight__body {
  padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.spotlight__eyebrow { font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
.spotlight__name { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 300; color: var(--forest); line-height: 1.1; margin: 0; }
.spotlight__name em { color: var(--gold); font-style: normal; }
.spotlight__desc { font-size: .92rem; color: var(--bark); line-height: 1.72; }
.spotlight__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.spotlight__pill {
  padding: 5px 13px; border-radius: 20px;
  background: rgba(26,58,15,.07); border: 1px solid rgba(26,58,15,.12);
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; color: var(--forest);
}
.spotlight__price-row { display: flex; align-items: baseline; gap: 6px; }
.spotlight__price-num { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 300; color: var(--forest); line-height: 1; }
.spotlight__price-eur { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; color: var(--bark-light); letter-spacing: .06em; }
.spotlight__price-note { font-family: var(--font-sans); font-size: .6rem; color: var(--sand); margin-top: 3px; letter-spacing: .04em; }
.spotlight__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__photo { min-height: 280px; }
  .spotlight__photo-overlay { background: linear-gradient(to bottom, transparent 60%, var(--white)); }
  .spotlight__body { padding: 32px 24px; }
  .spotlight__name { font-size: 1.8rem; }
}
body.dark .spotlight { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
body.dark .spotlight__name { color: var(--cream); }
body.dark .spotlight__photo-overlay { background: linear-gradient(to right, transparent 60%, #111); }

/* ══════════════════════════════════════════
   §96 — VIDEO TESTIMONIAL SECTION
══════════════════════════════════════════ */
.video-section {
  position: relative; overflow: hidden;
  background: var(--forest);
  padding: 80px 0;
}
.video-section::before {
  content: ''; position: absolute; inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Breton_i_blomstereng.jpg/1200px-Breton_i_blomstereng.jpg') center/cover no-repeat;
  opacity: .18; z-index: 0;
}
.video-section > * { position: relative; z-index: 1; }
.video-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
}
.video-text { color: white; }
.video-text .label { color: var(--gold-light); }
.video-text h2 { color: white; font-family: var(--font-serif); font-size: clamp(1.8rem,3vw,2.8rem); margin: 16px 0 24px; }
.video-text p { color: rgba(255,255,255,.75); line-height: 1.75; font-size: .95rem; }
.video-quotes { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.video-quote {
  display: flex; gap: 16px; align-items: flex-start;
}
.video-quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--forest-light));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.1rem; color: white; font-weight: 600;
}
.video-quote__body { flex: 1; }
.video-quote__text { font-size: .83rem; color: rgba(255,255,255,.8); line-height: 1.65; font-style: italic; }
.video-quote__name { font-family: var(--font-sans); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); margin-top: 6px; }
.video-thumb {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/9; cursor: pointer;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.video-thumb:hover img { transform: scale(1.04); }
.video-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(0,0,0,.35); transition: background .35s;
}
.video-thumb:hover .video-play { background: rgba(0,0,0,.2); }
.video-play__btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.video-thumb:hover .video-play__btn { transform: scale(1.12); box-shadow: 0 12px 48px rgba(0,0,0,.4); }
.video-play__btn svg { width: 28px; height: 28px; fill: var(--forest); margin-left: 4px; }
.video-play__label { color: white; font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════
   §97 — REGIONS MAP SECTION
══════════════════════════════════════════ */
.regions-section { background: var(--parchment); padding: 80px 0; }
.regions-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.regions-map {
  position: relative; max-width: 380px; margin: 0 auto;
}
.regions-map svg { width: 100%; height: auto; }
.map-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 0 0 4px rgba(184,149,42,.2);
  cursor: default;
  transition: transform .25s;
}
.map-dot:hover { transform: scale(1.6); }
.map-dot::after {
  content: attr(data-city);
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  background: var(--forest); color: white; font-family: var(--font-sans);
  font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.map-dot:hover::after { opacity: 1; }
.map-dot--home { background: var(--forest); box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 4px rgba(26,58,15,.2); width: 16px; height: 16px; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 0 0 4px rgba(184,149,42,.2); }
  50% { box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 0 0 10px rgba(184,149,42,.0); }
}
.map-dot { animation: dotPulse 2.5s ease-in-out infinite; }
.regions-text {}
.regions-text h2 { font-family: var(--font-serif); font-size: clamp(1.6rem,3vw,2.4rem); color: var(--forest); margin: 16px 0 20px; }
.regions-text p { color: var(--bark); line-height: 1.72; font-size: .92rem; }
.regions-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.region-stat {
  background: var(--white); border-radius: 12px; padding: 20px;
  border: 1px solid rgba(0,0,0,.04); text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.region-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.region-stat__num { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; color: var(--forest); line-height: 1; }
.region-stat__label { font-family: var(--font-sans); font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); margin-top: 4px; }
@media (max-width: 860px) { .regions-inner { grid-template-columns: 1fr; } }
body.dark .regions-section { background: rgba(0,0,0,.2); }
body.dark .region-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark .region-stat__num, body.dark .regions-text h2 { color: var(--gold-light); }

/* ══════════════════════════════════════════
   §98 — CURSOR PAW TRAIL
══════════════════════════════════════════ */
.paw-trail {
  position: fixed; pointer-events: none; z-index: 88888;
  width: 16px; height: 16px;
  opacity: 0; transform: scale(.4) rotate(var(--r, -20deg));
  animation: trailFade .8s ease forwards;
}
.paw-trail svg { width: 100%; height: 100%; fill: var(--gold); }
@keyframes trailFade {
  0%   { opacity: .7; transform: scale(.9) rotate(var(--r,-20deg)); }
  100% { opacity: 0;  transform: scale(.4) rotate(var(--r,-20deg)) translateY(-8px); }
}

/* ══════════════════════════════════════════
   §99 — MAGNETIC BUTTON EFFECT
══════════════════════════════════════════ */
.btn-magnetic { transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .15s; }
.btn-magnetic:hover { box-shadow: 0 14px 48px rgba(0,0,0,.22); }

/* ══════════════════════════════════════════
   §100 — PROGRESS RIBBON (top of page)
══════════════════════════════════════════ */
#page-read-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 99999;
  background: linear-gradient(90deg, var(--forest), var(--gold), var(--gold-light));
  width: 0%; transition: width .1s linear;
  box-shadow: 0 0 8px var(--gold);
}

/* ══════════════════════════════════════════
   §101 — RIBBON "DISPONIBLE" ON NAV
══════════════════════════════════════════ */
.nav__link--available {
  position: relative;
}
.nav__link--available::before {
  content: ''; position: absolute; top: -4px; right: -6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #2e7d32;
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(46,125,50,.3);
  animation: navDotPulse 2s ease-in-out infinite;
}
@keyframes navDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(46,125,50,.3); }
  50% { box-shadow: 0 0 0 2px white, 0 0 0 7px rgba(46,125,50,.0); }
}

/* ══════════════════════════════════════════
   §102 — ENHANCED PUPPY CARD HOVER SHINE
══════════════════════════════════════════ */
.puppy-card {
  position: relative; overflow: hidden;
}
.puppy-card::after {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 40%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: rotate(15deg) translateX(-200%);
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
  pointer-events: none; z-index: 5;
}
.puppy-card:hover::after { transform: rotate(15deg) translateX(500%); }

/* ══════════════════════════════════════════
   §103 — PREMIUM PRELOADER
══════════════════════════════════════════ */
#preloader {
  position: fixed; inset: 0; z-index: 999999;
  background: var(--forest);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.preloader__logo svg {
  width: 56px; height: 56px; fill: var(--gold);
  animation: preloaderPulse 1.4s ease-in-out infinite;
}
.preloader__brand {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 300;
  color: var(--cream); letter-spacing: .12em;
}
.preloader__tagline {
  font-family: var(--font-sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light);
}
.preloader__bar-wrap {
  width: 180px; height: 2px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden;
}
.preloader__bar {
  height: 100%; background: var(--gold);
  width: 0%; transition: width .05s linear;
  border-radius: 2px;
}
.preloader__pct {
  font-family: var(--font-sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; color: rgba(255,255,255,.45);
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.1); opacity: .75; }
}

/* ══════════════════════════════════════════
   §104 — 3D TILT CARD
══════════════════════════════════════════ */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0) rotateY(0);
  transition: transform .05s linear, box-shadow .35s;
  will-change: transform;
}
.tilt-card:hover { box-shadow: var(--shadow-lg); }
.tilt-card .tilt-shine {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none; z-index: 10; opacity: 0;
  transition: opacity .3s;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ══════════════════════════════════════════
   §105 — GALLERY HERO (galerie.html)
══════════════════════════════════════════ */
.gallery-hero {
  position: relative; height: 55vh; min-height: 380px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.gallery-hero__bg {
  position: absolute; inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/BrittanySpaniels.jpg/1200px-BrittanySpaniels.jpg') center/cover no-repeat;
}
.gallery-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,20,8,.85) 0%, rgba(26,20,8,.3) 50%, rgba(26,20,8,.1) 100%);
}
.gallery-hero__content {
  position: relative; z-index: 2; padding: 48px 8%;
  width: 100%;
}
.gallery-hero__content h1 {
  font-family: var(--font-serif); font-size: clamp(2.4rem,6vw,4.5rem);
  font-weight: 300; color: white; line-height: 1; margin-bottom: 12px;
  animation: letterReveal 1.1s cubic-bezier(.2,.8,.3,1) .2s both;
}
.gallery-hero__content h1 em { color: var(--gold); font-style: normal; }
.gallery-hero__sub {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.gallery-hero__stats {
  display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap;
}
.gallery-hero__stat {
  display: flex; align-items: center; gap: 10px;
}
.gallery-hero__stat-num {
  font-family: var(--font-serif); font-size: 1.8rem; font-weight: 300; color: var(--gold); line-height: 1;
}
.gallery-hero__stat-label {
  font-family: var(--font-sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* ══════════════════════════════════════════
   §106 — GALLERY FEATURED STRIP
══════════════════════════════════════════ */
.gallery-featured {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 260px; gap: 8px; margin-bottom: 8px;
}
.gallery-featured__item {
  position: relative; overflow: hidden; cursor: zoom-in;
}
.gallery-featured__item:first-child { grid-row: span 1; }
.gallery-featured__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .65s cubic-bezier(.2,.8,.3,1);
}
.gallery-featured__item:hover img { transform: scale(1.07); }
.gallery-featured__item .gallery-item__overlay {
  opacity: 0; transition: opacity .35s;
}
.gallery-featured__item:hover .gallery-item__overlay { opacity: 1; }
@media (max-width: 768px) {
  .gallery-featured { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-featured__item { height: 200px; }
}

/* ══════════════════════════════════════════
   §107 — GALLERY STATS BAR
══════════════════════════════════════════ */
.gallery-stats-bar {
  background: var(--forest); color: white; padding: 18px 0;
  display: flex; align-items: center; justify-content: center; gap: 48px;
  flex-wrap: wrap;
}
.gallery-stats-bar__item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.gallery-stats-bar__item strong {
  font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300;
  color: var(--gold); margin-right: 2px;
}

/* ══════════════════════════════════════════
   §108 — TIMELINE SECTION
══════════════════════════════════════════ */
.timeline-section { background: var(--cream); padding: 80px 0 100px; overflow: hidden; }
.timeline-track {
  position: relative; margin-top: 64px;
}
.timeline-track::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--forest) 90%, transparent);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid; grid-template-columns: 1fr 60px 1fr;
  align-items: start; margin-bottom: 60px; gap: 0;
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.timeline-item.visible { opacity: 1; transform: none; }
.timeline-item:nth-child(odd)  .timeline-card { grid-column: 1; text-align: right; padding-right: 40px; }
.timeline-item:nth-child(odd)  .timeline-dot  { grid-column: 2; }
.timeline-item:nth-child(odd)  .timeline-blank { grid-column: 3; }
.timeline-item:nth-child(even) .timeline-blank { grid-column: 1; }
.timeline-item:nth-child(even) .timeline-dot  { grid-column: 2; }
.timeline-item:nth-child(even) .timeline-card { grid-column: 3; text-align: left; padding-left: 40px; }
.timeline-dot {
  display: flex; align-items: flex-start; justify-content: center; padding-top: 4px;
}
.timeline-dot__inner {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--cream);
  box-shadow: 0 0 0 3px var(--gold);
  flex-shrink: 0;
}
.timeline-card { }
.timeline-year {
  font-family: var(--font-serif); font-size: 2.8rem; font-weight: 300;
  color: var(--forest); line-height: 1; display: block; margin-bottom: 6px;
}
.timeline-title {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--forest);
  margin-bottom: 10px; font-weight: 500;
}
.timeline-desc {
  font-size: .85rem; color: var(--bark); line-height: 1.72;
}
.timeline-card img {
  width: 100%; max-width: 280px; height: 160px; object-fit: cover;
  border-radius: 10px; margin-top: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.timeline-item:nth-child(odd) .timeline-card img { margin-left: auto; }
@media (max-width: 768px) {
  .timeline-track::before { left: 20px; }
  .timeline-item { grid-template-columns: 40px 1fr; }
  .timeline-item:nth-child(odd)  .timeline-card,
  .timeline-item:nth-child(even) .timeline-card { grid-column: 2; text-align: left; padding: 0 0 0 20px; }
  .timeline-item:nth-child(odd)  .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot { grid-column: 1; }
  .timeline-item:nth-child(odd)  .timeline-blank,
  .timeline-item:nth-child(even) .timeline-blank { display: none; }
  .timeline-card img { max-width: 100%; }
}
body.dark .timeline-section { background: rgba(0,0,0,.15); }
body.dark .timeline-year, body.dark .timeline-title { color: var(--gold-light); }
body.dark .timeline-track::before { background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--gold-light) 90%, transparent); }

/* ══════════════════════════════════════════
   §109 — SPLIT TEXT HEADLINE
══════════════════════════════════════════ */
.split-reveal .char {
  display: inline-block;
  opacity: 0; transform: translateY(30px) rotate(3deg);
  transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
}
.split-reveal.visible .char { opacity: 1; transform: none; }

/* ══════════════════════════════════════════
   §110 — GALERIE SOCIAL CTA UPGRADE
══════════════════════════════════════════ */
.gallery-cta-section {
  background: var(--forest); padding: 72px 0; position: relative; overflow: hidden;
}
.gallery-cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Breton_i_blomstereng.jpg/1200px-Breton_i_blomstereng.jpg') center/cover;
  opacity: .1; z-index: 0;
}
.gallery-cta-section > * { position: relative; z-index: 1; }
.gallery-cta-section h2 { color: white; font-family: var(--font-serif); font-size: clamp(1.8rem,4vw,3rem); margin-bottom: 16px; }
.gallery-cta-section p { color: rgba(255,255,255,.72); max-width: 520px; margin: 0 auto 40px; }
.social-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.social-link {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 50px;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; transition: transform .3s, box-shadow .3s;
}
.social-link:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.social-link svg { width: 18px; height: 18px; }
.social-link--ig  { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
.social-link--fb  { background: #1877f2; color: white; }
.social-link--yt  { background: #ff0000; color: white; }

/* ══════════════════════════════════════════
   §111 — GALLERY MASONRY UPGRADE
══════════════════════════════════════════ */
.gallery-grid {
  columns: 4; gap: 8px; column-gap: 8px;
}
.gallery-item {
  break-inside: avoid; margin-bottom: 8px;
  position: relative; overflow: hidden;
  border-radius: 8px; cursor: zoom-in;
  display: block;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .65s cubic-bezier(.2,.8,.3,1); }
.gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 1024px) { .gallery-grid { columns: 3; } }
@media (max-width: 640px)  { .gallery-grid { columns: 2; } }
@media (max-width: 400px)  { .gallery-grid { columns: 1; } }