/*
  site.css — Clinique Vétérinaire Les Rives de Dordogne
  ─────────────────────────────────────────────────────────────────────────────
  DIRECTION ARTISTIQUE : « Soft Organic / Warm Clay » — clinique chaleureuse,
  rassurante, tactile. Inspirée du style claymorphism (ui-ux-pro-max) : surfaces
  douces, gros rayons, ombres en double couche, formes organiques, profondeur.

  RÈGLE ANTI-FOOTPRINT respectée : AUCUNE classe CSS custom dans le HTML.
  Tout le design passe par : variables Bootstrap, classes Bootstrap EXISTANTES,
  ids de section et pseudo-éléments. Le balisage reste 100 % Bootstrap natif.
  Versionné via ?v= dans le <link>.
*/

/* ══════════════════════════ 1. TOKENS ══════════════════════════ */
:root {
  /* Palette (teal soignant + orange chaleureux) */
  --vet-teal: #0d9488;
  --vet-teal-600: #0f766e;
  --vet-deep: #134e4a;
  --vet-mint: #5eead4;
  --vet-orange: #ea580c;
  --vet-amber: #f59e0b;
  --vet-cream: #f4faf8;
  --vet-cream-2: #eaf5f2;
  --vet-surface: #ffffff;
  --ink: #173a37;

  /* Variables Bootstrap pilotées par la charte */
  --bs-primary: #0d9488;
  --bs-primary-rgb: 13, 148, 136;
  --bs-secondary: #0f766e;
  --bs-secondary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #0d9488;
  --bs-body-color: #173a37;
  --bs-body-bg: #f4faf8;
  --bs-body-font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-border-radius: 1rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-xl: 2rem;

  /* Profondeur « clay » : double ombre (sombre teintée + lumière) */
  --clay: 16px 16px 36px rgba(15, 118, 110, .16), -12px -12px 30px rgba(255, 255, 255, .92);
  --clay-sm: 8px 8px 20px rgba(15, 118, 110, .14), -8px -8px 18px rgba(255, 255, 255, .9);
  --clay-hover: 22px 26px 50px rgba(15, 118, 110, .22), -12px -12px 28px rgba(255, 255, 255, .95);
  --clay-press: inset 4px 4px 10px rgba(15, 118, 110, .14), inset -4px -4px 10px rgba(255, 255, 255, .85);
  --ring: 0 0 0 .25rem rgba(13, 148, 136, .25);

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ══════════════════════════ 2. BASE ══════════════════════════ */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  color: var(--ink);
  background-color: var(--vet-cream);
  /* Fond atmosphérique : halos diffus teal/orange sur fond crème */
  background-image:
    radial-gradient(40% 50% at 88% -5%, rgba(94, 234, 212, .35), transparent 60%),
    radial-gradient(36% 42% at -8% 12%, rgba(245, 158, 11, .12), transparent 60%),
    radial-gradient(50% 50% at 50% 120%, rgba(13, 148, 136, .10), transparent 60%);
  background-attachment: fixed;
}

/* Typographie : Lora display à fort caractère + Raleway lisible */
h1, h2, h3, h4, h5, .navbar-brand strong, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  letter-spacing: -.01em;
  color: var(--vet-deep);
}
h1, .display-4, .display-5 { font-weight: 700; line-height: 1.04; }
.lead { font-family: "Lora", Georgia, serif; font-weight: 400; font-style: italic; color: var(--vet-teal-600); }
.text-uppercase { letter-spacing: .14em; }
.ls-1 { letter-spacing: .16em; }

a { text-underline-offset: .2em; }

/* Sélection */
::selection { background: var(--vet-mint); color: var(--vet-deep); }

/* Couleurs de marque (overrides utilitaires) */
.text-primary { color: var(--vet-teal-600) !important; }
.text-secondary { color: var(--vet-teal-600) !important; }
.text-warning { color: var(--vet-orange) !important; }

/* Surfaces colorées : teal dégradé + deep teal texturé */
.bg-primary {
  background-color: var(--vet-teal) !important;
  background-image: linear-gradient(135deg, var(--vet-teal) 0%, var(--vet-teal-600) 55%, var(--vet-deep) 120%) !important;
}
.bg-dark {
  background-color: var(--vet-deep) !important;
  background-image:
    radial-gradient(60% 80% at 90% 0%, rgba(13, 148, 136, .35), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(245, 158, 11, .12), transparent 60%) !important;
}
.bg-light {
  background-color: var(--vet-cream-2) !important;
}

/* Bloc SEO : placé haut dans le DOM, rendu en bas via order-last (Bootstrap). */
main.d-flex > section { order: 0; }
section.order-last { background-color: var(--vet-cream-2) !important; }

/* ══════════════════════════ 3. NAVBAR ══════════════════════════ */
.navbar.sticky-top {
  background-color: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 8px 30px rgba(15, 118, 110, .08);
  border-bottom-color: rgba(13, 148, 136, .12) !important;
}
.navbar-brand .rounded-circle {
  box-shadow: var(--clay-sm);
  background-image: linear-gradient(140deg, var(--vet-teal), var(--vet-deep)) !important;
}
.navbar .nav-link {
  font-weight: 600;
  position: relative;
  color: var(--vet-deep);
}
.navbar .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem;
  height: 2px; border-radius: 2px; background: var(--vet-orange);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-spring);
}
.navbar .nav-link:hover { color: var(--vet-teal); }
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* ══════════════════════════ 4. BOUTONS ══════════════════════════ */
.btn { border-radius: 999px; font-weight: 600; transition: transform .25s var(--ease-spring), box-shadow .25s ease, background-color .2s ease; }
.btn-lg { padding-inline: 1.6rem; }

.btn-primary {
  --bs-btn-bg: var(--vet-teal);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--vet-teal-600);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--vet-deep);
  --bs-btn-active-border-color: transparent;
  background-image: linear-gradient(135deg, var(--vet-teal), var(--vet-teal-600));
  box-shadow: 0 10px 22px rgba(13, 148, 136, .32);
}
.btn-warning {
  --bs-btn-bg: var(--vet-orange);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c2410c;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  background-image: linear-gradient(135deg, var(--vet-amber), var(--vet-orange));
  box-shadow: 0 10px 22px rgba(234, 88, 12, .32);
}
.btn-primary:hover, .btn-warning:hover { transform: translateY(-3px) scale(1.02); }
.btn-primary:active, .btn-warning:active { transform: translateY(0) scale(.99); }

.btn-outline-primary {
  --bs-btn-color: var(--vet-teal-600);
  --bs-btn-border-color: var(--vet-teal);
  --bs-btn-hover-bg: var(--vet-teal);
  --bs-btn-hover-border-color: var(--vet-teal);
  border-width: 2px;
}
.btn-outline-primary:hover { transform: translateY(-2px); }

.btn-light { border-radius: 999px; box-shadow: var(--clay-sm); border: 0 !important; background: #fff; }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--clay); }

/* ══════════════════════════ 5. BADGES / PILLS ══════════════════════════ */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; }
.badge.text-bg-warning { background-image: linear-gradient(135deg, var(--vet-amber), var(--vet-orange)) !important; color: #fff !important; }
.badge.text-bg-light { background: #fff !important; color: var(--vet-teal-600) !important; box-shadow: var(--clay-sm); border: 0 !important; }
.badge.text-bg-secondary { background: rgba(255, 255, 255, .14) !important; }

/* ══════════════════════════ 6. CARTES « CLAY » ══════════════════════════ */
.card {
  border: 0 !important;
  border-radius: var(--bs-border-radius-xl);
  background: linear-gradient(150deg, #ffffff, #eef7f4);
  box-shadow: var(--clay);
  transition: transform .35s var(--ease-spring), box-shadow .35s ease;
  overflow: hidden;
}
.card.shadow-sm { box-shadow: var(--clay); }
.card.shadow-sm:hover { transform: translateY(-8px); box-shadow: var(--clay-hover); }
.card-img-top { border-radius: 0; }

/* Cartes sur fond sombre / coloré : on neutralise le dégradé clair */
.bg-dark .card, .card.bg-primary { background-image: none; }
.card.bg-primary { box-shadow: 0 24px 50px rgba(13, 148, 136, .4); }

/* list-group épuré dans les cartes */
.list-group-item { background: transparent; border-color: rgba(15, 118, 110, .12); }

/* ══════════════════════════ 7. HERO (#accueil) ══════════════════════════ */
#accueil { position: relative; overflow: hidden; }
/* Blobs organiques en arrière-plan (pseudo-éléments, zéro markup) */
#accueil::before {
  content: ""; position: absolute; z-index: 0;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  right: -8vw; top: -12vw;
  background: radial-gradient(circle at 30% 30%, var(--vet-mint), var(--vet-teal) 70%);
  border-radius: 42% 58% 63% 37% / 43% 38% 62% 57%;
  filter: blur(6px); opacity: .35;
  animation: blobDrift 16s ease-in-out infinite;
}
#accueil::after {
  content: ""; position: absolute; z-index: 0;
  width: 18vw; height: 18vw; max-width: 240px; max-height: 240px;
  left: -4vw; bottom: -6vw;
  background: radial-gradient(circle at 40% 40%, var(--vet-amber), var(--vet-orange) 75%);
  border-radius: 60% 40% 47% 53% / 38% 53% 47% 62%;
  opacity: .22;
  animation: blobDrift 20s ease-in-out infinite reverse;
}
#accueil .container { position: relative; z-index: 1; }
#accueil .display-4 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
#accueil .badge.text-bg-warning { box-shadow: 0 10px 22px rgba(234, 88, 12, .28); }

/* Image hero : masque organique + cadre clay */
#accueil img.rounded-4 {
  border-radius: 56% 44% 52% 48% / 52% 48% 52% 48% !important;
  box-shadow: var(--clay-hover);
  border: 8px solid #fff;
}
#accueil .card.position-absolute { border-radius: 1.25rem; box-shadow: var(--clay); background: #fff; }

@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 18px) rotate(8deg); }
}

/* ══════════════════════════ 8. BANDEAU PRESTATIONS ══════════════════════════ */
section.bg-primary.text-white.py-4 .col i { transition: transform .3s var(--ease-spring); display: inline-block; }
section.bg-primary.text-white.py-4 .col:hover i { transform: translateY(-4px) scale(1.15); }

/* ══════════════════════════ 9. BIENVENUE (#bienvenue) ══════════════════════════ */
#bienvenue { position: relative; }
#bienvenue h2 { font-size: clamp(2rem, 4vw, 3rem); position: relative; display: inline-block; }
#bienvenue h2::after {
  content: ""; display: block; width: 64px; height: 5px; margin: 1rem auto 0;
  border-radius: 5px; background: linear-gradient(90deg, var(--vet-teal), var(--vet-orange));
}
#bienvenue .fs-5 { font-family: "Lora", serif; font-style: italic; color: var(--vet-teal-600); }

/* ══════════════════════════ 10. SERVICES (#services) ══════════════════════════ */
#services .card { position: relative; }
/* Barre d'accent décorative en haut de chaque carte service (pseudo, sans markup) */
#services .card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--vet-teal), var(--vet-mint));
  opacity: .9; transition: height .3s ease; z-index: 2;
}
#services .card:nth-child(even)::before { background: linear-gradient(90deg, var(--vet-amber), var(--vet-orange)); }
#services .card:hover::before { height: 10px; }
/* Tuile d'icône en pastille clay */
#services .card .rounded-3 {
  border-radius: 20px !important;
  background-image: linear-gradient(140deg, var(--vet-teal), var(--vet-deep)) !important;
  box-shadow: var(--clay-sm);
  transition: transform .35s var(--ease-spring);
}
#services .card:hover .rounded-3 { transform: rotate(-6deg) scale(1.06); }
#services .badge.text-bg-light { padding: .55rem .95rem; }

/* ══════════════════════════ 11. ÉQUIPE (#equipe) ══════════════════════════ */
#equipe .card { background: linear-gradient(150deg, #ffffff, #eaf5f2); }
#equipe .card img {
  filter: saturate(1.05) contrast(1.02);
  transition: transform .5s var(--ease-spring), filter .4s ease;
}
#equipe .card:hover img { transform: scale(1.06); }
#equipe .card h3 { color: var(--vet-deep); }
#equipe .badge.text-bg-light { padding: .55rem 1rem; }

/* ══════════════════════════ 12. URGENCES (.bg-dark) ══════════════════════════ */
section.bg-dark.text-white { border-radius: 2.5rem; margin-inline: clamp(0px, 3vw, 2rem); position: relative; overflow: hidden; }
section.bg-dark.text-white .badge.text-bg-warning { box-shadow: 0 0 30px rgba(234, 88, 12, .45); }
section.bg-dark.text-white h2 { color: #fff; }
section.bg-dark.text-white .card .list-group-item { border-color: rgba(15, 118, 110, .14); }

/* ══════════════════════════ 13. CONSEILS / ARTICLES (#conseils) ══════════════════════════ */
#conseils article.card .card-body { z-index: 1; }
#conseils article.card:hover { transform: translateY(-8px) rotate(-.4deg); }
.card .badge[style] { box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }

/* ══════════════════════════ 14. BOUTIQUE (#boutique) ══════════════════════════ */
#boutique .card.bg-primary { position: relative; border-radius: var(--bs-border-radius-xl); }
#boutique .card.bg-primary::before {
  content: ""; position: absolute; z-index: 0;
  width: 260px; height: 260px; right: -40px; bottom: -80px;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .25), transparent 70%);
  border-radius: 50%;
}
#boutique .card.bg-primary > * { position: relative; z-index: 1; }
#boutique .bi-bag-heart-fill { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .2)); }

/* ══════════════════════════ 15. CONTACT (#contact) ══════════════════════════ */
#contact .form-control {
  border: 0; border-radius: 14px; background: #fff;
  box-shadow: var(--clay-press);
  padding: .7rem .9rem;
}
#contact .form-control:focus { box-shadow: var(--clay-press), var(--ring); background: #fff; }
#contact .form-label { font-weight: 600; color: var(--vet-deep); }
#contact iframe { border-radius: var(--bs-border-radius-xl); }
#contact .list-group-item { padding-block: .6rem; }

/* ══════════════════════════ 16. FOOTER ══════════════════════════ */
footer.bg-dark { border-radius: 2.5rem 2.5rem 0 0; margin-top: 4rem !important; }
footer .link-light:hover { color: var(--vet-mint) !important; }

/* ══════════════════════════ 17. PAGES BLOG / SHOP / PRODUIT ══════════════════════════ */
.bg-primary h1, .bg-primary h2, .bg-primary .breadcrumb a { color: #fff; }
.breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .55); }

/* Contenu d'article / d'avis produit : rythme éditorial */
.lh-lg h2 { margin-top: 2.2rem; font-size: 1.6rem; }
.lh-lg h3 { margin-top: 1.6rem; font-size: 1.25rem; color: var(--vet-teal-600); }
.lh-lg blockquote {
  border-left: 4px solid var(--vet-orange);
  background: var(--vet-cream-2);
  padding: 1rem 1.25rem; border-radius: 0 1rem 1rem 0; font-style: italic;
}
.lh-lg table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 1rem; overflow: hidden; box-shadow: var(--clay-sm); margin: 1.25rem 0; }
.lh-lg th { background: linear-gradient(135deg, var(--vet-teal), var(--vet-teal-600)); color: #fff; padding: .75rem 1rem; text-align: left; }
.lh-lg td { padding: .7rem 1rem; border-top: 1px solid rgba(15, 118, 110, .1); }
.lh-lg tr:nth-child(even) td { background: rgba(15, 118, 110, .04); }
.lh-lg img { border-radius: 1.25rem; box-shadow: var(--clay); }

.text-decoration-line-through { opacity: .65; }

/* Pagination clay */
.pagination { gap: .4rem; }
.page-link { border: 0; border-radius: 12px !important; color: var(--vet-teal-600); box-shadow: var(--clay-sm); background: #fff; }
.page-item.active .page-link { background: linear-gradient(135deg, var(--vet-teal), var(--vet-teal-600)); color: #fff; }

/* ══════════════════════════ 18. IMAGES ══════════════════════════ */
.object-fit-cover { object-fit: cover; }

/* ══════════════════════════ 19. MOTION / A11Y ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════════════════ 20. RESPONSIVE ══════════════════════════ */
@media (max-width: 991.98px) {
  section.bg-dark.text-white { border-radius: 1.75rem; margin-inline: 0; }
  #accueil img.rounded-4 { border-radius: 2rem !important; }
  footer.bg-dark { border-radius: 1.75rem 1.75rem 0 0; }
}