/*
  site.css — Clinique Vet-Saint-Nom · direction "Naturel & rassurant".
  Design distinctif (skill frontend-design) appliqué UNIQUEMENT ici :
  variables de thème Bootstrap, styles sur classes/ids Bootstrap existants,
  fonts, fonds atmosphériques et motion CSS. AUCUNE classe custom dans le balisage.
  Versionné via ?v= dans le <link> (cache-busting + empreinte par site).
*/

:root {
  --bs-primary: #1E6E72;
  --bs-primary-rgb: 30, 110, 114;
  --bs-secondary: #2B3A42;
  --bs-secondary-rgb: 43, 58, 66;
  --bs-link-color: #1E6E72;
  --bs-link-color-rgb: 30, 110, 114;
  --bs-link-hover-color: #16585b;
  --bs-border-radius: 1rem;
  --bs-border-radius-lg: 1.4rem;
  --bs-body-bg: #FBF6EE;
  --bs-body-color: #1F2A2E;
  --bs-body-font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --vsn-petrol: #1E6E72;
  --vsn-ink: #2B3A42;
  --vsn-amber: #E0A458;
  --vsn-cream: #FBF6EE;
  --vsn-deep: #1F2A2E;
}

/* Fond crème + grain subtil pour l'atmosphère (pas de solid color plat). */
body {
  color: #1F2A2E;
  background-color: #FBF6EE;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(30, 110, 114, .06), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(224, 164, 88, .08), transparent 45%);
  background-attachment: fixed;
}

/* Typographie distinctive : display serif chaleureux + body humaniste. */
h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-5, .display-6, .breadcrumb {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.navbar-brand { font-weight: 700; }
.lead { font-family: "Mulish", sans-serif; }

/* Boutons sur la charte (les btn lisent des vars dédiées). */
.btn-primary {
  --bs-btn-bg: var(--vsn-petrol);
  --bs-btn-border-color: var(--vsn-petrol);
  --bs-btn-hover-bg: #185b5e;
  --bs-btn-hover-border-color: #185b5e;
  --bs-btn-active-bg: #185b5e;
  --bs-btn-active-border-color: #185b5e;
}
.btn-warning {
  --bs-btn-bg: var(--vsn-amber);
  --bs-btn-border-color: var(--vsn-amber);
  --bs-btn-hover-bg: #d0923f;
  --bs-btn-hover-border-color: #d0923f;
  --bs-btn-color: #1F2A2E;
  --bs-btn-hover-color: #1F2A2E;
  --bs-btn-active-color: #1F2A2E;
}
.btn-outline-primary {
  --bs-btn-color: var(--vsn-petrol);
  --bs-btn-border-color: var(--vsn-petrol);
  --bs-btn-hover-bg: var(--vsn-petrol);
  --bs-btn-hover-border-color: var(--vsn-petrol);
}
.text-primary { color: var(--vsn-petrol) !important; }
.bg-primary { background-color: var(--vsn-petrol) !important; }
.badge.text-bg-primary { background-color: var(--vsn-petrol) !important; }
.bg-light { background-color: #F3ECE0 !important; }
.bg-dark { background-color: var(--vsn-deep) !important; }
.navbar-brand strong { color: var(--vsn-petrol); }

/* Hero : dégradé pétrole → encre + halo lumineux. */
#hero {
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(224, 164, 88, .28), transparent 55%),
    linear-gradient(135deg, #1E6E72 0%, #2B3A42 100%);
}

/* Cartes douces et réactives. */
.card {
  border-radius: var(--bs-border-radius-lg);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover {
  box-shadow: 0 .9rem 2.2rem rgba(30, 110, 114, .18);
  transform: translateY(-3px);
}

/* Onglets "La clinique" (nav-pills) sur la charte. */
.nav-pills .nav-link { color: var(--vsn-ink); border: 1px solid rgba(30, 110, 114, .25); }
.nav-pills .nav-link.active { background-color: var(--vsn-petrol); border-color: var(--vsn-petrol); }

/* Accordéon "Nos services" sur la charte. */
.accordion-button { border-radius: var(--bs-border-radius) !important; }
.accordion-button:not(.collapsed) {
  color: var(--vsn-petrol);
  background-color: rgba(30, 110, 114, .08);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: rgba(30, 110, 114, .35); }

/* Carte Google Maps : laisser la pleine hauteur. */
.card iframe { display: block; }

/* Bloc texte SEO placé haut dans le DOM, rendu visuellement en bas (order-last). */
main.d-flex > section { order: 0; }

/* Motion : apparition en cascade des sections au chargement (CSS only). */
@media (prefers-reduced-motion: no-preference) {
  main > section,
  main > article {
    animation: vsnRise .6s ease both;
  }
  main > section:nth-of-type(2) { animation-delay: .06s; }
  main > section:nth-of-type(3) { animation-delay: .12s; }
  main > section:nth-of-type(4) { animation-delay: .18s; }
  main > section:nth-of-type(5) { animation-delay: .24s; }
  main > section:nth-of-type(6) { animation-delay: .30s; }
}
@keyframes vsnRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}