/*
Theme Name: PetsCare
Theme URI: https://example.com
Author: PetsCare
Description: Thème WordPress pour PetsCare — plateforme communautaire de garde d'animaux, petites annonces, annuaire de professionnels et vétérinaires.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petscare
*/

:root{
  --white:#FFFFFF;
  --gray-bg:#F4F6F5;
  --gray-line:#E3E8E5;
  --mint:#2FAE76;
  --mint-dark:#1F7E56;
  --mint-soft:#E6F5EE;
  --ink:#20262B;
  --ink-soft:#67726C;
  --coral:#E8604C;
  --coral-soft:#FCE7E3;
  --gold:#F2A93B;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--white);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  line-height:1.6;
}

h1,h2,h3,h4{ font-family:'Poppins', sans-serif; font-weight:600; }
a{ text-decoration:none; }

/* ---------- NAVBAR ---------- */
.navbar-petscare{
  background:var(--white);
  border-bottom:1px solid var(--gray-line);
  padding-top:.9rem;
  padding-bottom:.9rem;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-weight:700;
  font-size:1.35rem;
  color:var(--ink);
}
.brand-mark .paw{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--mint);
  color:var(--white);
  border-radius:10px;
  font-size:1rem;
}
.navbar-nav .nav-link,
.navbar-nav .menu-item > a{
  color:var(--ink-soft) !important;
  font-weight:500;
  margin:0 .55rem;
  font-size:.95rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .menu-item > a:hover{ color:var(--mint-dark) !important; }

.btn-mint{
  background:var(--mint);
  color:var(--white) !important;
  border:none;
  border-radius:10px;
  padding:.6rem 1.3rem;
  font-weight:600;
  transition:background .15s ease, transform .15s ease;
  display:inline-block;
}
.btn-mint:hover{ background:var(--mint-dark); color:var(--white) !important; transform:translateY(-1px); }

.btn-outline-mint{
  border:1.5px solid var(--mint);
  color:var(--mint-dark) !important;
  border-radius:10px;
  padding:.55rem 1.25rem;
  font-weight:600;
  background:transparent;
}
.btn-outline-mint:hover{ background:var(--mint-soft); }

.btn-white-line{
  background:var(--white);
  color:var(--mint-dark) !important;
  border:none;
  border-radius:10px;
  padding:.55rem 1.2rem;
  font-weight:600;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:0;
  overflow:hidden;
  border-radius:0 0 28px 28px;
}
.hero-bg{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
}
.hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 38%, rgba(32,38,43,.15) 100%);
  z-index:1;
}
.hero-bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-content{ position:relative; z-index:2; padding:4.5rem 0 3rem; }
.hero-content h1{
  font-size:clamp(2.1rem, 3.6vw, 2.9rem);
  color:var(--ink);
  line-height:1.15;
  max-width:26rem;
}
.hero-content p.lead{
  color:var(--ink-soft);
  max-width:26rem;
  font-size:1.02rem;
}

.search-panel{
  position:relative;
  z-index:2;
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:18px;
  padding:1.6rem;
  box-shadow:0 20px 45px -20px rgba(32,38,43,.18);
  margin-top:-2.6rem;
}
.search-panel h2{
  font-size:1.1rem;
  margin-bottom:1rem;
}
.search-panel select, .search-panel input{
  border:1px solid var(--gray-line);
  border-radius:10px;
  padding:.6rem .8rem;
  background:var(--gray-bg);
  color:var(--ink);
  font-size:.92rem;
}
.search-panel select:focus, .search-panel input:focus{
  outline:2px solid var(--mint);
  outline-offset:1px;
}

/* ---------- SECTION HEADS ---------- */
.section-pad{ padding:4rem 0; }
.section-head{ margin-bottom:2.2rem; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); }
.section-head h2 .accent{ color:var(--mint-dark); }
.section-head .eyebrow{
  color:var(--mint-dark);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.section-head p{ color:var(--ink-soft); max-width:34rem; }
.section-head .see-all{
  color:var(--mint-dark) !important;
  font-weight:600;
  font-size:.9rem;
}

.bg-soft{ background:var(--gray-bg); }

/* ---------- SITTER CARDS ---------- */
.sitter-card{
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:18px;
  overflow:hidden;
  height:100%;
  transition:transform .16s ease, box-shadow .16s ease;
}
.sitter-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(32,38,43,.25); }
.sitter-card .sitter-img{ aspect-ratio:4/3; overflow:hidden; }
.sitter-card .sitter-img img{ width:100%; height:100%; object-fit:cover; }
.sitter-body{ padding:1.1rem 1.2rem 1.3rem; }
.sitter-name-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.2rem; }
.sitter-name-row h3{ font-size:1.05rem; margin:0; }
.sitter-rating{ color:var(--gold); font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.25rem; }
.sitter-meta{ color:var(--ink-soft); font-size:.85rem; margin-bottom:.3rem; }
.sitter-tag{ color:var(--ink-soft); font-size:.85rem; margin-bottom:.9rem; }

/* ---------- LISTING (ANNONCES) CARDS ---------- */
.listing-card{
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:16px;
  overflow:hidden;
  height:100%;
  transition:transform .16s ease, box-shadow .16s ease;
}
.listing-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(32,38,43,.22); }
.listing-card .listing-img{ aspect-ratio:1/1; overflow:hidden; background:var(--gray-bg); }
.listing-card .listing-img img{ width:100%; height:100%; object-fit:cover; }
.listing-body{ padding:1rem 1.1rem 1.2rem; }
.listing-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:.4rem; }
.listing-title-row h3{ font-size:.98rem; margin:0; }
.listing-price{ color:var(--mint-dark); font-weight:700; font-size:.95rem; white-space:nowrap; }
.listing-meta{ color:var(--ink-soft); font-size:.8rem; margin:.2rem 0 .8rem; }

/* ---------- PROFESSIONALS ---------- */
.map-placeholder{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--gray-line);
  min-height:340px;
  position:relative;
  background:
    linear-gradient(var(--gray-bg), var(--gray-bg)) padding-box,
    repeating-linear-gradient(0deg, transparent, transparent 38px, var(--gray-line) 38px, var(--gray-line) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, var(--gray-line) 38px, var(--gray-line) 40px);
}
.map-placeholder .map-pin{
  position:absolute;
  width:30px; height:30px;
  background:var(--mint);
  border:3px solid var(--white);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.map-placeholder .map-note{
  position:absolute; bottom:.9rem; left:.9rem;
  background:rgba(255,255,255,.92);
  border-radius:10px;
  padding:.5rem .8rem;
  font-size:.78rem;
  color:var(--ink-soft);
  max-width:15rem;
}
.pro-card{
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:16px;
  padding:1.1rem 1.2rem;
  height:100%;
}
.pro-card h3{ font-size:1rem; margin-bottom:.3rem; }
.pro-distance{ color:var(--gold); font-weight:600; font-size:.85rem; margin-bottom:.8rem; display:flex; align-items:center; gap:.3rem; }

/* ---------- VETERINAIRES ---------- */
.vet-search{
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:14px;
  padding:.5rem;
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.vet-search input, .vet-search select{
  border:none;
  background:transparent;
  padding:.55rem .7rem;
  font-size:.92rem;
  flex:1;
  min-width:10rem;
}
.badge-urgence{
  background:var(--coral-soft);
  color:var(--coral);
  font-weight:700;
  font-size:.78rem;
  padding:.4rem .8rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.vet-card{
  background:var(--white);
  border:1px solid var(--gray-line);
  border-radius:16px;
  padding:1.2rem 1.3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:100%;
}
.vet-card h3{ font-size:1rem; margin-bottom:.2rem; }
.vet-card .vet-meta{ color:var(--ink-soft); font-size:.85rem; }
.vet-card .sitter-rating{ margin-bottom:.3rem; }

/* ---------- CTA ---------- */
.cta-band{
  background:var(--mint);
  padding:3.6rem 0;
  text-align:center;
  border-radius:28px;
}
.cta-band h2{ color:var(--white); font-size:clamp(1.5rem,2.8vw,2rem); margin-bottom:1.4rem; }
.cta-band h2 .accent{ color:var(--gold); }

/* ---------- FOOTER ---------- */
footer.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.72);
  padding:3.2rem 0 1.6rem;
  font-size:.9rem;
  margin-top:3rem;
}
footer.site-footer h4{
  color:var(--white);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.9rem;
}
footer.site-footer a{ color:rgba(255,255,255,.72); }
footer.site-footer a:hover{ color:var(--mint); }
footer.site-footer .brand-mark{ color:var(--white); }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2.2rem;
  padding-top:1.2rem;
  font-size:.8rem;
  color:rgba(255,255,255,.5);
}
.social-dot{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--white);
  margin-right:.5rem;
}
.social-dot:hover{ background:var(--mint); border-color:var(--mint); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  .sitter-card, .listing-card, .btn-mint{ transition:none; }
}

@media (max-width: 767px){
  .hero-bg{ min-height:auto; padding-bottom:2rem; }
  .search-panel{ margin-top:1.5rem; }
}