/* ============================================================
   SPA Animaux — carousel front-end [spa-accueil]
   ============================================================ */

.spa-accueil-wrapper { margin: 24px 0; }
.spa-carousel-btn:focus,
.spa-carousel-btn:focus-visible,
.spa-carousel-btn:active {
    outline: none;
    box-shadow: none;
    background: #fff;
    color: #52bfdc;
}

.spa-carousel { display: flex; align-items: center; gap: 8px; }
.spa-carousel-viewport { overflow: hidden; flex: 1; min-width: 0; }
.spa-carousel-track {
    display: flex;
    will-change: transform;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.spa-carousel-item { flex: 0 0 auto; box-sizing: border-box; padding: 0 8px; }

.spa-carousel-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid #52bfdc;
    background: #fff; color: #52bfdc;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
    padding: 0; line-height: 1;
}
.spa-carousel-btn:hover:not(:disabled) { background: #52bfdc; color: #fff; }
.spa-carousel-btn:disabled { opacity: .3; cursor: not-allowed; background: #fff; color: #52bfdc; }

/* Carte */
.spa-animal-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.09);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.spa-animal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

/* Photo */
.spa-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f3f3;
}
.spa-card-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s;
}
.spa-animal-card:hover .spa-card-photo img { transform: scale(1.04); }
.spa-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 52px; color: #ccc;
}

/* Triangle isocèle rectangle — côtés égaux pour ratio 4:3 */
.spa-card-triangle {
    position: absolute;
    inset: 0;
    clip-path: polygon(100% 40%, 100% 100%, 55% 100%);
    pointer-events: none;
}
.spa-triangle-chien { background: rgba(139, 110,  70, 0.62); }
.spa-triangle-chat  { background: rgba(180, 150, 175, 0.62); }
.spa-triangle-lapin { background: rgba(110, 160, 120, 0.62); }
.spa-triangle-nac   { background: rgba( 80, 145, 175, 0.62); }

/* Icône + Nom sur le triangle */
.spa-card-caption {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
    /* Largeur calée sur la base du triangle (~43% de la photo) */
    max-width: 43%;
}
.spa-card-caption i {
    font-size: 24px;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.spa-caption-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0,0,0,.30);
    text-align: right;
    line-height: 1.25;
    /* Jamais de coupure au milieu d'un mot */
    word-break:     keep-all;
    overflow-wrap:  break-word;
    hyphens:        none;
}

/* Corps — race + âge + statut uniquement (nom et espèce sur la photo) */
.spa-card-body { padding: 10px 14px 12px; }
.spa-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.spa-card-meta span {
    font-size: 12px; padding: 2px 8px;
    border-radius: 4px; background: #f0f0f0; color: #555;
}
.spa-card-meta .spa-card-statut {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.spa-empty { text-align: center; color: #888; padding: 24px; }


/* ============================================================
   SPA Hero Stats — shortcode [spa-hero-stats]
   ============================================================ */
.spa-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: #45A5C900 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 16px 28px;
    margin: 0 auto;
    max-width: 340px;
}
.spa-hero-stat {
    text-align: center;
    min-width: 90px;
}
.spa-hero-stat-icon {
    font-size: 1rem;
    color: #52bfdc;
    margin-bottom: 4px;
    opacity: 0.9;
}
.spa-hero-stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
}
.spa-hero-stat-label {
    font-size: .7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    margin-top: 3px;
    font-family: 'Open Sans', sans-serif;
}
@media (max-width: 575px) {
    .spa-hero-stats {
        gap: 22px;
        padding: 12px 16px;
        max-width: 100%;
    }
    .spa-hero-stat-number { font-size: 1.5rem; }
}

/* ── SPA Fiche animal ─────────────────────────────────── */

/* Section principale */
.spa-fiche-main{padding:56px 0 48px;}

/* Galerie */
.photo-main{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#f3f3f3;
  position:relative;margin-bottom:10px;box-shadow:0 8px 32px rgba(0,0,0,.12);}
.photo-main img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-placeholder{display:flex;align-items:center;justify-content:center;color:#ccc;font-size:4rem;}
.photo-thumbs{display:flex;gap:8px;}
.photo-thumb{flex:1;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;
  opacity:.75;transition:opacity .2s,transform .2s;border:2px solid transparent;}
.photo-thumb:hover{opacity:1;transform:translateY(-2px);}
.photo-thumb.active{opacity:1;border-color:#52bfdc;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* Identité */
.animal-header{margin-bottom:20px;}
.animal-name{font-size:2.4rem;font-weight:800;color:#111;line-height:1;margin-bottom:10px;}
.badge-espece{display:inline-block;background:#eaf5fa;color:#2a9dc0;border-radius:20px;
  padding:4px 14px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-right:6px;}
.badge-statut{display:inline-block;border-radius:20px;padding:4px 14px;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.statut-disponible{background:#e8f5e9;color:#2e7d32;}
.statut-en-cours{background:#fff3e0;color:#e65100;}
.statut-adopte{background:#f3e5f5;color:#6a1b9a;}

/* Pills */
.identity-pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;}
.pill{display:inline-flex;align-items:center;gap:6px;background:#f5f5f5;
  border-radius:8px;padding:7px 14px;font-size:.82rem;color:#444;}
.pill i{color:#52bfdc;font-size:.85rem;}
.pill strong{color:#111;}

/* Compatibilités */
.compat-row{display:flex;gap:10px;margin:20px 0;padding:16px 18px;
  background:#f9f9f9;border-radius:10px;}
.compat-item{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.compat-icon{width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.95rem;}
.compat-ok{background:#e8f5e9;color:#2e7d32;}
.compat-non{background:#fce4ec;color:#c62828;}
.compat-eval{background:#fff8e1;color:#f57f17;}
.compat-label{font-size:.72rem;color:#666;line-height:1.3;}
.compat-sub{display:block;font-size:.65rem;}
.compat-sub-non{color:#c62828;}
.compat-sub-eval{color:#f57f17;}

/* Tags caractère */
.tag-caractere{display:inline-block;background:#fff;border:2px solid #e0e0e0;color:#333;
  border-radius:20px;padding:6px 16px;font-size:.82rem;font-weight:600;margin:4px;
  transition:border-color .15s,color .15s;}
.tag-caractere:hover{border-color:#52bfdc;color:#52bfdc;}

/* Urgence */
.urgence-banner{background:#fff8e1;border-left:4px solid #f57f17;border-radius:0 8px 8px 0;
  padding:12px 18px;margin-bottom:20px;display:flex;align-items:center;gap:10px;
  font-size:.85rem;color:#555;}
.urgence-banner i{color:#f57f17;font-size:1rem;}
.urgence-banner strong{color:#333;}

/* CTA */
.btn-adopt{display:block;width:100%;padding:14px;background:#c9844a;color:#fff;border:none;
  border-radius:50px;font-size:1rem;font-weight:700;text-align:center;cursor:pointer;
  text-decoration:none;transition:background .2s,transform .15s;margin-top:24px;}
.btn-adopt:hover{background:#b06a32;color:#fff;transform:translateY(-1px);text-decoration:none;}
.btn-adopt i{margin-right:8px;}
.btn-contact-outline{display:block;width:100%;padding:11px;background:transparent;
  color:#52bfdc;border:2px solid #52bfdc;border-radius:50px;font-size:.88rem;font-weight:700;
  text-align:center;text-decoration:none;margin-top:10px;transition:.2s;}
.btn-contact-outline:hover{background:#52bfdc;color:#fff;text-decoration:none;}
.arrival-note{display:flex;align-items:center;gap:8px;color:#868e96;font-size:.78rem;margin-top:12px;}

/* Section description */
.spa-fiche-description{background:#f3f3f3;padding:52px 0;}
.spa-fiche-description h2{font-size:1.35rem;font-weight:800;color:#111;margin-bottom:20px;}
.spa-fiche-description p{line-height:1.9;color:#444;font-size:.95rem;}
.section-divider{width:48px;height:4px;background:#52bfdc;border-radius:2px;margin-bottom:16px;}

/* Carte santé */
.sante-card{background:#fff;border-radius:12px;padding:22px 20px;border:2px solid #e8e8e8;}
.sante-card h3{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:#52bfdc;margin-bottom:16px;}

/* Profil */
.spa-fiche-profil{padding:52px 0;background:#fff;}
.spa-fiche-profil-title{font-size:1.35rem;font-weight:800;color:#111;margin-bottom:28px;}
.profil-card{background:#fff;border:2px solid #f0f0f0;border-radius:12px;padding:24px 22px;height:100%;}
.profil-card h3{font-size:.88rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:#52bfdc;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.profil-row{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid #f5f5f5;font-size:.85rem;}
.profil-row:last-child{border-bottom:none;}
.profil-label{color:#888;}
.profil-value{font-weight:700;color:#222;text-align:right;}
.profil-check{color:#2e7d32;font-size:.9rem;font-weight:600;}
.profil-cross{color:#c62828;font-size:.9rem;font-weight:600;}
.profil-eval{color:#f57f17;font-size:.9rem;font-weight:600;}

/* Énergie par espèce */
.energie-actif,.energie-tres_actif{color:#c9844a;}
.energie-calme,.energie-tres_calme{color:#2a9dc0;}
.energie-modere{color:#555;}

/* Barre d'énergie */
.energie-section{margin-top:20px;padding-top:14px;border-top:1px solid #f5f5f5;}
.energie-bar-wrap{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;margin-top:8px;}
.energie-bar{height:100%;background:linear-gradient(90deg,#52bfdc,#c9844a);border-radius:4px;transition:width .6s;}
.energie-bar-labels{display:flex;justify-content:space-between;font-size:.68rem;color:#aaa;margin-top:4px;}

/* Responsive */
@media(max-width:991px){
  .compat-row{flex-wrap:wrap;}
  .compat-item{flex:0 0 48%;}
}
@media(max-width:575px){
  .animal-name{font-size:1.8rem;}
  .photo-thumbs{gap:5px;}
}
/* ── / SPA Fiche animal ─────────────────────────────────── */

/* Lien cliquable card accueil */
.spa-animal-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.spa-animal-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ── / SPA avis google ─────────────────────────────────── */


.spa-review-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spa-review-text.expanded .spa-review-content {
    display: block;
    -webkit-line-clamp: unset;
}
.spa-review-text .spa-read-more {
    background: transparent;
    border: none;
    color: #52bfdc;
    box-shadow: none;
    outline: none;
}
.spa-read-more:focus {
    outline: 2px solid #52bfdc;
    outline-offset: 2px;
}

.spa-review-text .spa-read-more:hover {
    color: #D9934A;
    text-decoration: underline;
}