:root{
  --brand: #0ea5e9;
  --brand-ink:#075985;
  --ring:#9be7ef;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --soft:#E6F6F8;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,8,23,.12);
  --maxw:1200px;
  --header-h:64px;
}
/* Reset + a11y */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; border-radius:10px; }
html{ scroll-behavior:smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background:var(--bg); line-height:1.5;
}
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid transparent; font-weight:600; }
.btn.primary{ background:var(--brand); color:#fff; }
.btn.ghost{ border-color:#e2e8f0; color:var(--brand-ink); background:#fff; }

h1 {
  color: var(--brand-ink);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
}

/* ==== Section carte (styles compatibles existants) ==== */
.map-section .map-panel{
  background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:0; box-shadow:var(--shadow);
}
.map-section .map-frame{
  width:100%; height: clamp(320px, 48vh, 520px);
  border:0; display:block; border-radius:16px;
}

/* === HERO BANNER === */
/* .hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
} */

/* CSS */
 
 .hero-banner {
  position: relative;
  overflow: hidden;
} 
 
.hero-slider {
  position: relative;
  height: 60vh;
  min-height: 360px;
}
 
.hero-track {
  height: 100%;
  display: flex;
  transform: translateX(0%);
  transition: transform 700ms ease;
  will-change: transform;
}
 
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}
 
.hero-media,
.hero-media img {
  width: 100%;
  height: 100%;
}
 
.hero-media img {
  object-fit: cover;
}

.hero-media--bottom img {
  object-position: bottom;
}
 
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.hero-content {
  text-align: center;
  color: #fff;
  padding: 0 16px;
  max-width: 900px;
}
 
.hero-content h1 {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  margin: 0 0 1rem 0;
  color: var(--brand);
}
 
.hero-content {
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  padding: 24px 32px;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
 
.btn {
  display: inline-block;
  padding: 12px 28px;
  background: #ffffff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}
 
/* Flèches */
.hero-nav {
  position: absolute;
  top: 50%;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #000;
  font-size: 28px;
  display: grid;
  place-items: center;
  z-index: 2;
}
 
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
 
/* Dots */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}
 
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
}
 
.hero-dot[aria-selected="true"] {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.15);
}
 
/* Accessibilité focus */
.hero-nav:focus-visible,
.hero-dot:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}
 
/* Slide 2 : logo "Ma Vitrine Vétérinaire" fixe en bas à gauche, par-dessus l'image de fond */
.hero-corner-img {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: clamp(90px, 12vw, 170px);
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-corner-img {
    left: 14px;
    bottom: 14px;
    width: clamp(64px, 22vw, 100px);
  }
}

/* ─── Variantes desktop / mobile slide 1 ─── */
 
/* Par défaut (desktop) : afficher desktop, masquer mobile */
.hero-content--desktop { display: block; }
.hero-content--mobile  { display: none; }
 
 
/* ─── Mobile ─── */
@media (max-width: 768px) {
 
  /* Hauteur max 500px */
  .hero-slider {
    height: 60vh;
    max-height: 310px;
    min-height: 260px;
  }
 
  /* Flèches repositionnées */
  .hero-nav {
    width: 40px;
    height: 40px;
    font-size: 26px;
    top: 80%;
  }
 
  /* Slide 1 : basculer vers l'overlay allégé */
  .hero-content--desktop { display: none; }
  .hero-content--mobile  { display: flex; flex-direction: column; align-items: center; gap: 12px; }
 
  /* Overlay slide 1 mobile : plus léger, dégradé bas → transparent */
  .hero-slide:first-child .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 50%,
      transparent 100%
    );
    align-items: flex-end;
    padding-bottom: 52px; /* espace au-dessus des dots */
  }
 
  /* Contenu mobile slide 1 : pas de carte blanche */
  .hero-content--mobile {
    box-shadow: none;
    color: #fff;
    max-width: 100%;
  }
 
  /* .hero-content--mobile h1 {
    color: #fff;
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  } */
 
  /* Badge pill mobile */
  .hero-content--mobile .np-badge-pill {
    font-size: 0.8rem;
  }
 
  /* Bouton mobile slide 1 */
  .hero-content--mobile .btn {
    padding: 10px 20px;
  }
}





/* === CARRIÈRES === */
.carrieres-page.container {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}


.carrieres-page h1 {
  text-align: center;
  margin: 2.5rem 0 1rem;
}

.intro {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2rem;
}

.emplois-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.emploi-card {
  background: var(--soft);
  border: 1px solid var(--ring);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.emploi-card h3 {
  color: var(--brand-ink);
  margin-top: 0;
}

.emploi-card p {
  color: var(--ink);
  flex: 1;
}

.emploi-card a.btn {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Candidature */
.candidature-section {
  background: var(--soft);
  padding: 2rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
}

.candidature-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.candidature-form input,
.candidature-form textarea {
  padding: 0.6rem;
  border: 1px solid var(--ring);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}

.candidature-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Stages */
.stages-section {
  background: #f9fafb;
  border-radius: 1rem;
  padding: 2rem;
}


/* === PAGE À PROPOS === */
.apropos-page h1 {
  text-align: center;
  margin: 2.5rem 0 1rem;
}

.apropos-page .intro {
  text-align: center;
  color: var(--muted);
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-section {
  padding: 0rem 1rem;
  max-width: 1100px;
  margin: auto;
}

.timeline {
  position: relative;
  margin-top: 3rem;
  padding-left: 2rem;
  border-left: 3px solid var(--brand);
}

.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.timeline-year {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: 1.1rem;
  text-align: right;
}

.timeline-content {
  background: #f8f9f8;
  padding: 1.5rem;
  border-radius: 10px;
  position: relative;
}

.timeline-content::before {
  content: "";
  position: absolute;
  left: -192px;
  top: 1.5rem;
  width: 14px;
  height: 14px;
  background: var(--brand);
  border-radius: 50%;
}

.timeline-content h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.timeline-content ul {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.timeline-content li {
  margin-bottom: 0.4rem;
}

.timeline-item.highlight .timeline-content {
  background: #e9f3f0;
  border: 2px solid var(--brand);
}

/* Mobile */
@media (max-width: 768px) {
  .timeline {
    padding-left: 1rem;
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .timeline-year {
    text-align: left;
    font-size: 1rem;
  }

  .timeline-content::before {
    left: -24px;
  }
}


/* =========================
   PREMIUM HOME ADD-ONS
   (Intro, Trust, Innovation, Tags, Hero subtitle)
   ========================= */

/* --- HERO subtitle --- */
.hero-content .hero-subtitle {
  margin-top: 10px;
  margin-bottom: 18px;
  max-width: 720px;
  line-height: 1.35;
  font-size: 1.05rem;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .hero-content .hero-subtitle {
    font-size: 0.98rem;
    max-width: 92%;
  }
}

/* Optional: primary CTA variant (keeps your .btn base) */
.btn.btn-primary {
  font-weight: 700;
  letter-spacing: 0.2px;
  transform: translateZ(0);
}

/* Improve slider nav buttons (less "default") */
.hero-nav {
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.92;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-nav:hover {
  transform: scale(1.06);
  opacity: 1;
}

/* Dots (if your JS generates buttons inside .hero-dots) */
.hero-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 0 0;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-dots button[aria-selected="true"],
.hero-dots button.is-active {
  opacity: 1;
  transform: scale(1.15);
}

/* --- INTRO block --- */
.intro.container {
  margin: 28px auto 10px;
  padding: 18px 16px;
}

.intro h2 {
  margin: 0 0 10px;
  line-height: 1.15;  
  color: var(--brand-ink);

}

.intro p {
  margin: 0 0 14px;
  line-height: 1.55;
  opacity: 0.95;
  max-width: 980px;
  justify-self: center;
}

/* Highlights list */
.intro-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intro-highlights li {
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.35;
  opacity: 0.98;
  color: var(--brand-ink);

}

/* Mobile stack */
@media (max-width: 900px) {
  .intro-highlights {
    grid-template-columns: 1fr;
  }
}

/* --- Service tags (chips) --- */
.service-tags {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-tags li {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.95;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Better spacing inside your existing rectangles if needed */
.rectangle.description p {
  margin: 0;
  line-height: 1.55;
}

/* --- TRUST block --- */
.trust.container {
  margin: 5px auto 18px;
  padding: 18px 16px;
  width: 90%;
}

.trust h2 {
  color: var(--brand-ink);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  justify-self: center;
}

.trust-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.trust-grid > div {
  border-radius: 16px;
  padding: 14px 14px;
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  background-color: var(--bg);
  border-radius: 1rem;
  padding: 18px;
  box-shadow: var(--shadow);
  transform: translateY(20px);
  overflow: hidden;
}

.trust-grid > div strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--brand);
}

.trust-grid > div p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.95;
}

.trust-grid > div:hover {
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1100px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* --- INNOVATION block --- */
.innovation.container {
  margin: 36px auto 18px;
  padding: 18px 16px;
}

.innovation h2 {
  color: var(--brand-ink);
  font-size: 1.8rem;
  justify-self: center;
}

.innovation p {
  margin: 0 0 14px;
  line-height: 1.55;
  max-width: 980px;
  opacity: 0.95;
  justify-self: center;
}

/* --- Optional: subtle section separators to feel premium --- */
.intro.container,
.trust.container,
.innovation.container {
  border-radius: 18px;
}

/* If your site uses a dark background for sections, uncomment and tune:
.intro.container,
.trust.container,
.innovation.container {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
*/

/* --- Small universal polish for cards/buttons (won't break existing) --- */
/* .btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  opacity: 0.98;
} */

.address a{
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  transition: color 0.2s;
}

.address a:hover {
  color: var(--brand);
}

/* ============================================================
   NOUVEAUX PATIENTS — Bandeau sticky + Section highlight
   À ajouter à la fin de style.css
   ============================================================ */

/* ---- Bandeau top — styles dans assets/css/banner.css ---- */


/* ---- Section highlight ---- */
.np-highlight-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 55%, #bae6fd 100%);
  border-top: 3px solid #0ea5e9;
  border-bottom: 3px solid #0ea5e9;
  padding: 52px 20px;
  text-align: center;
}

.np-highlight-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Pill badge */
.np-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #7dd3fc;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0369a1;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(14,165,233,0.12);
}

.np-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
}

.np-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(34,197,94,0.45);
  animation: np-ping 1.6s ease-out infinite;
}

/* Titre */
.np-headline {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--brand-ink);
  margin: 0 0 16px;
  line-height: 1.2;
  font-weight: 800;
}

.np-headline em {
  font-style: normal;
  color: var(--brand);
}

/* Paragraphe */
.np-desc {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 28px;
}

/* Boutons */
.np-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.np-btn-main {
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(14,165,233,0.4);
  transition: transform 0.18s, box-shadow 0.18s;
  border: none !important;
}

.np-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14,165,233,0.45);
}

.np-btn-ghost {
  background: #fff !important;
  color: var(--brand-ink) !important;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  border: 1.5px solid #7dd3fc !important;
  transition: transform 0.18s, border-color 0.18s;
}

.np-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--brand) !important;
}

/* Liste de rassurance */
.np-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  font-size: 0.93rem;
  color: #0369a1;
  font-weight: 600;
}

@media (max-width: 600px) {
  .np-highlight-section { padding: 36px 16px; }
  .np-headline { font-size: 1.5rem; }
  .np-desc { font-size: 0.97rem; }
  .np-actions { flex-direction: column; align-items: center; }
  .np-btn-main, .np-btn-ghost { width: 100%; text-align: center; }
}


/* Variante du hero-content pour cette slide */
.hero-content--nouveaux {
  max-width: 680px;
  text-align: center;
}

/* Badge pill (point vert + texte) */
.np-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid #7dd3fc;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0369a1;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(14,165,233,0.15);
}

.np-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  position: relative;
}

.np-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.5);
  animation: np-ping 1.6s ease-out infinite;
}

@keyframes np-ping {
  0%        { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Liste de rassurance */
.np-checks {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 0.9rem;
  color: #0c4a6e;
  font-weight: 600;
}

/* Boutons dans la slide */
.np-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.np-btn-main {
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(14,165,233,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
  border: none !important;
  text-decoration: none;
}

.np-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14,165,233,0.5);
}

.np-btn-ghost {
  background: rgba(255,255,255,0.85) !important;
  color: var(--brand-ink) !important;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  border: 1.5px solid rgba(125, 211, 252, 0.7) !important;
  transition: transform 0.18s, background 0.18s;
  text-decoration: none;
}

.np-btn-ghost:hover {
  transform: translateY(-2px);
  background: #fff !important;
}

@media (max-width: 600px) {
  .np-actions { flex-direction: column; align-items: center; }
  .np-btn-main, .np-btn-ghost { width: 100%; text-align: center; }
  .np-checks { font-size: 0.82rem; }
}

/* ----------------------------------------------------------------
   1. CORRIGER LE BUG main flex (tri-gallery.css)
      Surcharge les règles qui centrent verticalement tout le <main>
   ---------------------------------------------------------------- */
main {
  display: block;      /* annule le flex qui cassait la mise en page */
  min-height: unset;
  align-items: unset;
  justify-content: unset;
}

/* On remet feature-gallery en flex (son propre contexte) */
.feature-gallery {
  display: flex;       /* déjà dans tri-gallery.css, on s'assure que ça tient */
}


/* ----------------------------------------------------------------
   2. TRUST GRID — responsive fluide + cartes aérées
   ---------------------------------------------------------------- */
.trust-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 1.5rem;
}

.trust-grid > div {
  border-radius: 16px;
  padding: 20px 18px;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Entrée au scroll (réutilise le système .rectangle) */
  opacity: 0;
  transform: translateY(20px);
}

.trust-grid > div.visible {
  opacity: 1;
  transform: translateY(0);
}

.trust-grid > div:hover {
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.14);
}

.trust-grid > div strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--brand-ink);
}

.trust-grid > div p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
}


/* ----------------------------------------------------------------
   3. ANIMATIONS CASCADE AU SCROLL
      Les .rectangle et .trust-grid > div s'animent en décalé
   ---------------------------------------------------------------- */

/* Groupes de rectangles — délai selon position dans le groupe */
.col .rectangle:nth-child(1) { transition-delay: 0ms; }
.col .rectangle:nth-child(2) { transition-delay: 120ms; }
.col .rectangle:nth-child(3) { transition-delay: 240ms; }

/* Trust cards — délai en cascade */
.trust-grid > div:nth-child(1) { transition: opacity 0.6s 0ms ease, transform 0.6s 0ms ease, box-shadow 0.25s ease; }
.trust-grid > div:nth-child(2) { transition: opacity 0.6s 100ms ease, transform 0.6s 100ms ease, box-shadow 0.25s ease; }
.trust-grid > div:nth-child(3) { transition: opacity 0.6s 200ms ease, transform 0.6s 200ms ease, box-shadow 0.25s ease; }
.trust-grid > div:nth-child(4) { transition: opacity 0.6s 300ms ease, transform 0.6s 300ms ease, box-shadow 0.25s ease; }
.trust-grid > div:nth-child(5) { transition: opacity 0.6s 400ms ease, transform 0.6s 400ms ease, box-shadow 0.25s ease; }


/* ----------------------------------------------------------------
   4. SECTION CONTACT — redesign avec icônes et grille 3 colonnes
   ---------------------------------------------------------------- */
.contact-section .panel-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: none;
  padding: 0;
  box-shadow: none;
  text-align: left;
}

.contact-section .panel-box p {
  border: 1px solid #cfcfcf;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-section .panel-box p:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.14);
}

.contact-section .panel-box strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
}

.contact-section .panel-box a,
.contact-section .panel-box .contact-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
  transition: color 0.15s;
}

.contact-section .panel-box a:hover {
  color: var(--brand);
}

/* Icône décorative en haut de chaque carte */
.contact-section .panel-box p::before {
  font-size: 1.5rem;
  line-height: 1;
}

.contact-section .panel-box p:nth-child(1)::before { content: "📞"; }
.contact-section .panel-box p:nth-child(2)::before { content: "✉️"; }
.contact-section .panel-box p:nth-child(3)::before { content: "🕐"; }

@media (max-width: 768px) {
  .contact-section .panel-box {
    grid-template-columns: 1fr;
  }

  #contact-disposable{
    display: none;
  }
}


/* ----------------------------------------------------------------
   5. SCROLL-MARGIN-TOP — évite que le header fixe cache les ancres
   ---------------------------------------------------------------- */
#contact,
#carte,
#animaux-compagnie,
#animaux-ferme,
#equins,
#sections-animaux {
  scroll-margin-top: calc(var(--header-h) + 16px);
}


/* ----------------------------------------------------------------
   6. BOUTONS UNIFIÉS
      Une seule source de vérité pour .btn, partout sur la page
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}

/* Variant principal (bleu plein) — utilisé dans .rectangle a et .btn.primary */
.rectangle a.btn,
.btn.primary,
.btn.btn-primary,
.np-btn-main {
  background: var(--brand);
  color: #fff !important;
  border-color: var(--brand);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}

.rectangle a.btn:hover,
.btn.primary:hover,
.btn.btn-primary:hover,
.np-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4);
  background: var(--brand-ink);
  border-color: var(--brand-ink);
}

/* Variant fantôme (contour) */
.btn.ghost,
.np-btn-ghost {
  background: #fff;
  color: var(--brand-ink) !important;
  border-color: #7dd3fc;
}

.btn.ghost:hover,
.np-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

/* Overlay gallery — blanc sur fond sombre */
.overlay .btn {
  background: var(--brand);
  color: #fff !important;
  border-color: transparent;
}

.overlay .btn:hover {
  background: #fff;
  color: var(--brand-ink) !important;
  transform: translateY(-2px);
}