/*
Theme Name: Zoolito Shop
Theme URI: https://example.com/zoolito
Author: Zoolito
Description: Thème boutique animalerie conforme à l'aperçu démo : en-tête, hero avec photo, catégories, meilleures ventes, bandeau promo et pied de page. Les 9 produits démo sont créés automatiquement à l'activation si WooCommerce est actif.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: zoolito-shop
Tags: e-commerce, woocommerce, featured-images, full-site-editing
*/
body { background: #fffdfa; color: #23201c; font-family: "Nunito", system-ui, sans-serif; line-height: 1.55; margin: 0; }
a { color: #0e7c6b; }
.wp-block-button__link, .button, button[type="submit"], input[type="submit"] { background: #e85d1f; color: #fff; border: 0; border-radius: 12px; padding: 13px 22px; font-weight: 900; cursor: pointer; text-decoration: none; }
.wp-block-button__link:hover, .button:hover { background: #c74c12; }
.zoolito-topbar { background: #0e7c6b; color: #fff; font-size: 14px; font-weight: 700; }
.zoolito-topbar p { text-align: center; margin: 0; padding: 7px 16px; }
.zoolito-header { background: #fff; border-bottom: 1px solid #e9e0d4; padding: 12px 0; }
.zoolito-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.zoolito-logo .paw { width: 42px; height: 42px; background: #e85d1f; border-radius: 12px; display: grid; place-items: center; flex: none; }
.zoolito-logo .paw svg { width: 26px; height: 26px; fill: #fff; }
.zoolito-logo .word { font-size: 28px; font-weight: 900; line-height: 1; color: #23201c; }
.zoolito-logo .word em { font-style: normal; color: #e85d1f; }
.zoolito-logo .tag { display: block; font-size: 11px; font-weight: 700; color: #5c554c; }
.zoolito-header .wp-block-search__input { border: 2px solid #e9e0d4; border-right: none; border-radius: 12px 0 0 12px; padding: 11px 14px; }
.zoolito-header .wp-block-search__button { border: 2px solid #e85d1f; background: #e85d1f; color: #fff; font-weight: 800; padding: 0 20px; border-radius: 0 12px 12px 0; }
.zoolito-account, .zoolito-cart { border: 1px solid #e9e0d4; background: #fff; color: #23201c; border-radius: 12px; padding: 10px 14px; font-weight: 800; font-size: 14px; text-decoration: none; display: inline-block; }
.zoolito-catnav { background: #27313b; color: #f4f1ec; }
.zoolito-catnav a { color: #f4f1ec !important; text-decoration: none; font-weight: 700; padding: 12px 2px; border-bottom: 3px solid transparent; display: inline-block; }
.zoolito-catnav a:hover { border-bottom-color: #e85d1f; }
.zoolito-catnav a.promo { color: #f5a623 !important; }
.zoolito-catnav .nav-inner { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.zoolito-catnav .nav-spacer { flex: 1; }
.zoolito-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; padding: 36px 0 8px; }
.zoolito-hero h1 { font-size: 40px; line-height: 1.12; font-weight: 900; margin: 0 0 14px; }
.zoolito-hero h1 .hl { color: #e85d1f; }
.zoolito-hero p { color: #5c554c; font-size: 17px; margin: 0 0 22px; }
.zoolito-hero-photo { border-radius: 22px; box-shadow: 0 10px 30px rgba(60,35,10,.10); background-image: url('assets/images/hero.jpg'); background-size: cover; background-position: center; min-height: 340px; aspect-ratio: 4/3; }
.zoolito-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.zoolito-btn-brand { background: #e85d1f; color: #fff !important; border-radius: 12px; padding: 13px 22px; font-weight: 900; text-decoration: none; display: inline-block; }
.zoolito-btn-ghost { background: #fff; border: 2px solid #e9e0d4; color: #23201c !important; border-radius: 12px; padding: 11px 20px; font-weight: 900; text-decoration: none; display: inline-block; }
.zoolito-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.zoolito-chip { background: #e2f2ee; color: #0e7c6b; font-weight: 800; font-size: 14px; border-radius: 999px; padding: 7px 13px; }
.zoolito-block-head h2 { font-size: 25px; font-weight: 900; margin: 0; }
.zoolito-block-head p { margin: 0; color: #5c554c; }
.zoolito-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.zoolito-tile { border: 1px solid #e9e0d4; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; color: #23201c; display: block; }
.zoolito-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(60,35,10,.10); }
.zoolito-tile-photo { height: 130px; background-size: cover; background-position: center; }
.zoolito-tile-chiens { background-image: url('assets/images/ball.jpg'); }
.zoolito-tile-chats { background-image: url('assets/images/cat.jpg'); }
.zoolito-tile-oiseaux { background-image: url('assets/images/parrot.jpg'); }
.zoolito-tile-poissons { background-image: url('assets/images/fish.jpg'); }
.zoolito-tile-rongeurs { background-image: url('assets/images/rabbit.jpg'); }
.zoolito-tile span { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; font-weight: 900; }
.zoolito-tile small { display: block; font-weight: 700; color: #5c554c; padding: 0 13px 12px; margin-top: -8px; }
.zoolito-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zoolito-card { border: 1px solid #e9e0d4; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.zoolito-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(60,35,10,.10); }
.zoolito-card .ph { position: relative; background: #faf4ec; }
.zoolito-card .ph img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.zoolito-badge { position: absolute; top: 10px; left: 10px; background: #e85d1f; color: #fff; font-weight: 900; font-size: 13px; border-radius: 8px; padding: 4px 9px; }
.zoolito-badge.new { background: #0e7c6b; }
.zoolito-card .body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zoolito-card .cat { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #0e7c6b; }
.zoolito-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.zoolito-card h3 a { color: #23201c; text-decoration: none; }
.zoolito-card h3 a:hover { color: #e85d1f; }
.zoolito-stars { color: #f5a623; font-size: 14px; }
.zoolito-rating-line { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #5c554c; font-weight: 700; }
.zoolito-price-row { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 6px; }
.zoolito-price { font-size: 20px; font-weight: 900; }
.zoolito-old-price { color: #5c554c; text-decoration: line-through; font-weight: 700; font-size: 15px; }
.zoolito-add-btn { margin-top: 10px; background: #e85d1f; color: #fff !important; border: none; border-radius: 11px; padding: 11px; font-weight: 900; display: flex; justify-content: center; text-decoration: none; }
.zoolito-add-btn:hover { background: #c74c12; }
.zoolito-promo-band { margin: 38px 0 6px; background: #27313b; color: #fff; border-radius: 22px; padding: 30px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; overflow: hidden; }
.zoolito-promo-band h2 { margin: 0 0 8px; font-size: 27px; font-weight: 900; }
.zoolito-promo-band p { margin: 0 0 18px; color: #d8d2c8; }
.zoolito-promo-photo { border-radius: 16px; aspect-ratio: 16/10; background-image: url('assets/images/fountain.webp'); background-size: cover; background-position: center; min-height: 180px; }
.zoolito-code { display: inline-flex; gap: 10px; align-items: center; background: rgba(255,255,255,.1); border: 1.5px dashed rgba(255,255,255,.5); border-radius: 12px; padding: 9px 14px; font-weight: 900; letter-spacing: 0.08em; }
.zoolito-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 30px 0 10px; }
.zoolito-perk { border: 1px solid #e9e0d4; background: #fff; border-radius: 16px; padding: 18px; }
.zoolito-perk h3 { margin: 0 0 4px; font-size: 16px; }
.zoolito-perk p { margin: 0; color: #5c554c; font-size: 14px; }
.zoolito-page-hero h1 { font-size: 32px; font-weight: 900; margin: 0 0 10px; }
.zoolito-page-hero p { color: #5c554c; }
.zoolito-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.zoolito-stat { border: 1px solid #e9e0d4; border-radius: 16px; padding: 18px; text-align: center; background: #fff; }
.zoolito-stat b { display: block; font-size: 28px; font-weight: 900; }
.zoolito-stat span { color: #5c554c; font-size: 14px; }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: #e85d1f; font-weight: 800; font-size: 18px; }
.woocommerce span.onsale { background: #e85d1f !important; border-radius: 6px; min-height: 0; line-height: 1.6; padding: 4px 10px; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: #e85d1f; color: #fff; border-radius: 12px; }
.zoolito-accordion { border: 1px solid #e9e0d4; border-radius: 10px; margin: 24px 0; overflow: hidden; }
.zoolito-accordion-toggle { width: 100%; text-align: left; background: #faf4ec; color: #23201c; border: 0; padding: 16px 20px; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.zoolito-accordion-toggle:hover { background: #fdeee4; }
.zoolito-accordion-toggle .chev { transition: transform .2s; font-size: 20px; }
.zoolito-accordion.open .chev { transform: rotate(180deg); }
.zoolito-accordion-panel { display: none; padding: 20px; }
.zoolito-accordion.open .zoolito-accordion-panel { display: block; }
.zoolito-form label { display: block; font-weight: 600; margin: 12px 0 4px; }
.zoolito-form input[type="text"], .zoolito-form input[type="email"], .zoolito-form textarea { width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 10px; box-sizing: border-box; }
.zoolito-footer { background: #27313b; color: #d8d2c8; margin-top: 40px; }
.zoolito-footer a { color: #fff; text-decoration: none; }
.zoolito-footer h3 { color: #fff; }
.zoolito-footer ul { list-style: none; padding: 0; margin: 0; }
.zoolito-footer li { margin: 6px 0; }
#zoolito-preloader { position: fixed; inset: 0; z-index: 99999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: opacity .45s ease, visibility .45s; }
body.zoolito-loaded #zoolito-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.zoolito-paw-track { display: flex; gap: 14px; align-items: flex-end; }
.zoolito-paw { width: 64px; height: 64px; fill: #0e7c6b; opacity: 0; animation: zoolito-pawstep 1.2s infinite; }
.zoolito-paw.p2 { animation-delay: .25s; width: 78px; height: 78px; }
.zoolito-paw.p3 { animation-delay: .5s; }
.zoolito-paw.p1 { transform: rotate(-12deg); }
.zoolito-paw.p3 { transform: rotate(12deg); }
@keyframes zoolito-pawstep { 0% { opacity: 0; transform: translateY(10px) rotate(-12deg); } 30% { opacity: 1; transform: translateY(0) rotate(-12deg); } 70% { opacity: 1; } 100% { opacity: 0; } }
.zoolito-paw.p3 { animation-name: zoolito-pawstep-r; }
@keyframes zoolito-pawstep-r { 0% { opacity: 0; transform: translateY(10px) rotate(12deg); } 30% { opacity: 1; transform: translateY(0) rotate(12deg); } 70% { opacity: 1; } 100% { opacity: 0; } }
.zoolito-preloader-name { font-size: 30px; font-weight: 800; color: #0e7c6b; margin: 10px 0 0; }
.zoolito-preloader-tag { color: #666; margin: 0; font-size: 15px; }
@media (max-width: 900px) {
  .zoolito-hero, .zoolito-promo-band { grid-template-columns: 1fr; }
  .zoolito-hero h1 { font-size: 30px; }
  .zoolito-tiles { grid-template-columns: repeat(2, 1fr); }
  .zoolito-grid, .zoolito-perks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .zoolito-grid, .zoolito-perks, .zoolito-stats { grid-template-columns: 1fr; }
  .zoolito-hero-photo { min-height: 220px; }
}

/* ---------- Page Contact (version démo) ---------- */
.zoolito-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; margin: 20px 0; }
.zoolito-contact-cards { display: grid; gap: 14px; }
.zoolito-contact-card { border: 1px solid #e9e0d4; background: #fff; border-radius: 16px; padding: 18px; }
.zoolito-contact-card h3 { margin: 0 0 6px; font-size: 16px; }
.zoolito-contact-card p { margin: 0; color: #5c554c; font-size: 14px; }
.zoolito-form select { width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 10px; box-sizing: border-box; background: #fff; }
/* ---------- Version téléphone ---------- */
img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .zoolito-topbar p { font-size: 12px; padding: 7px 10px; }
  .zoolito-header { padding: 10px 0; }
  .zoolito-logo { justify-content: center; }
  .zoolito-logo .word { font-size: 24px; }
  .zoolito-catnav .nav-inner { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .zoolito-catnav a { white-space: nowrap; font-size: 14px; }
  .zoolito-hero { padding: 20px 0 8px; gap: 20px; }
  .zoolito-hero h1 { font-size: 28px; }
  .zoolito-hero p { font-size: 16px; }
  .zoolito-hero-photo { min-height: 220px; }
  .zoolito-tiles { grid-template-columns: repeat(2, 1fr); }
  .zoolito-grid { grid-template-columns: repeat(2, 1fr); }
  .zoolito-perks { grid-template-columns: repeat(2, 1fr); }
  .zoolito-contact-grid { grid-template-columns: 1fr; }
  .zoolito-stats { grid-template-columns: 1fr; }
  .zoolito-promo-band { padding: 20px; }
}
@media (max-width: 480px) {
  .zoolito-tiles, .zoolito-grid, .zoolito-perks { grid-template-columns: 1fr; }
  .zoolito-hero h1 { font-size: 26px; }
  .zoolito-hero-ctas .zoolito-btn-brand, .zoolito-hero-ctas .zoolito-btn-ghost { width: 100%; text-align: center; box-sizing: border-box; }
  .zoolito-tile-photo { height: 170px; }
}