/*
    Template:       airi
    Theme Name:     Airi Child
    Theme URI:      http://themeforest.net/user/LA-Studio/portfolio?ref=LA-Studio
    Author:         LA Studio
    Author URI:     http://themeforest.net/user/LA-Studio?ref=LA-Studio
    Description:    Clean, Minimal WooCommerce Theme
    Version:        1.0
    Tags:           one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, translation-ready
    License: 		GNU General Public License
	License URI: 	licence/GPL.txt
    Text Domain:    airi-child
    Domain Path:    /languages/
*/




/* ---- DEBUT Animaux Adoption (front) ---- */

.ap-filters { margin: 20px 0; display: grid; gap: 12px; }
.ap-filters__row { display:flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.ap-filter { display:flex; flex-direction:column; gap:6px; }
.ap-filter--check { flex-direction: row; align-items:center; gap:8px; }
.ap-btn { padding: 10px 14px; cursor:pointer; }

.ap-grid { display:grid; gap: 16px; }
.ap-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-grid--cols-1 { grid-template-columns: 1fr; }

@media (max-width: 1024px){
  .ap-grid--cols-4, .ap-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .ap-grid--cols-4, .ap-grid--cols-3, .ap-grid--cols-2 { grid-template-columns: 1fr; }
}

.ap-card {
	border-radius: Opx;
	overflow:hidden;
	background:#fff;
	box-shadow: 2px 3px 5px #cecece;
	}
.ap-card__link { color: inherit; text-decoration:none; display:block; height:100%; }
/*
.ap-card__media { height:350px; position: relative; aspect-ratio: 4/3; background: rgba(0,0,0,.04); } 
.ap-card__img { height:350px; object-fit: cover; display:block; }
*/

/* Hauteur fixe des images dans la grille */
.ap-card__media {
  height: 350px;
  aspect-ratio: auto; /* on annule le ratio automatique */
}
.ap-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadrage propre sans déformation */
}
@media (max-width: 768px){
  .ap-card__media {
    height: 260px;
  }
}

@media (max-width: 480px){
  .ap-card__media {
    height: 220px;
  }
}
/* Fin Hauteur fixe des images dans la grille */

/* FORCE hauteur fixe des images sur la grille */
.ap-grid .ap-card__media img{
  height: 350px !important;
  width: 100% !important;
  object-fit: cover !important;
}
.ap-grid .ap-card__media{
  height: 350px !important;
  overflow: hidden !important;
}
/* Fin FORCE hauteur fixe des images sur la grille */

/* Supprime le ratio automatique */
.ap-card__media {
  aspect-ratio: unset !important;
  height: 350px !important;
  overflow: hidden !important;
}

/* Force l’image à remplir le bloc */
.ap-card__media .ap-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Supprime tout effet hover sur sexe / âge / maturité */
.ap-card__meta .ap-meta,
.ap-card__meta .ap-meta:hover,
.ap-card__meta .ap-meta:focus {
  background: rgba(0,0,0,.06) !important;
  color: #000000 !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  cursor: default !important;
}

.ap-card__img--placeholder { width:100%; height:100%; }
.ap-card__badges { position:absolute; top:10px; left:10px; display:flex; gap:8px; }
.ap-badge { display:inline-flex; align-items:center; justify-content:center; padding: 4px 20px; border-radius: 999px; font-size: 18px; line-height: 1; background: #f76421; color:#fff; }
.ap-badge--sos { font-weight: 700; }
.ap-badge--fav { font-weight: 700; }
.ap-badge--count { display: none; background: rgba(0,0,0,.55); }

.ap-card__body { padding: 12px 12px 14px; }
.ap-card__title {
    margin: 0 0 8px;
    font-size: 20px;
    color: #000000;
    font-weight: 500;
}
.ap-card__meta { display:flex; gap:8px; flex-wrap:wrap; }
.ap-meta { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); }
.ap-card__excerpt { margin: 10px 0 0; opacity: .9; }

.ap-pagination ul { display:flex; gap:8px; list-style:none; padding:0; margin: 18px 0 0; flex-wrap:wrap; }
.ap-pagination a, .ap-pagination span { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); text-decoration:none; }
.ap-pagination .current { background: rgba(0,0,0,.06); }

/* Container déjà en position relative */
.ap-card__media {
  position: relative;
}

/* Conteneur flags */
.ap-card__badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

/* Style général icônes */
.ap-flag {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  /*box-shadow: 0 4px 10px rgba(0,0,0,.25);*/
}


/* SOS Version texte pour la fiche */
.ap-flag--text {
  padding: 0 16px;
  width: auto;
  height: 42px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: #f76421;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Coup de coeur */
.ap-flag--fav {
  background: #f76421;
  padding: 14px 14px; 
}

/* Empêche les icônes de passer au-dessus du menu sticky */
.ap-card__media { 
  position: relative;
  z-index: 0 !important;   /* crée un contexte “bas” */
}

.ap-card__badges {
  z-index: 1 !important;   /* au-dessus de la photo, mais pas au-dessus du header */
}

/* Sexe: femelle = rose, male = bleu */
.ap-card__meta .ap-meta--sex-sex-femelle,
.ap-card__meta .ap-meta--sex-femelle{
  background: rgba(233, 30, 99, .14) !important;
  color: #e91e63 !important;
  font-weight: 600;
}

.ap-card__meta .ap-meta--sex-sex-male,
.ap-card__meta .ap-meta--sex-male{
  background: rgba(33, 150, 243, .14) !important;
  color: #2196f3 !important;
  font-weight: 600;
}


/* Single */
.ap-single__wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.ap-single__header { display:grid; gap: 10px; margin-bottom: 18px; }

.ap-single__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px){ .ap-single__gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .ap-single__gallery { grid-template-columns: 1fr; } }

.ap-single__img { width:100%; height: 100%; object-fit:cover; border-radius: 0px; }
.ap-single__section { 
	margin: 18px 0;
	font-size: 16px;
	}
.ap-single__section_title { 
	margin: 18px 0;
	font-size: 22px;
	color: #f76421;
	font-weight: 500
	}

.ap-single__title {
  color: #f76421;
}
/* Frais d’adoption */
.ap-single__fees { margin-top: 10px; }
.ap-single__fees-line { font-size: 16px; }
.ap-single__fees-sub { font-size: 13px; opacity: .75; margin-top: 2px; }

.ap-fees__label {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .5px;
  color: #f76421; /* couleur personnalisable */
}

/* Incompatibilité (fiche animal) */
.ap-single__incompat{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

.ap-single__incompat-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
}

.ap-single__incompat-ico{
  width: 18px;
  height: 18px;
  color: #f76421; /* orange personnalisable */
}

.ap-single__incompat-text{
  font-weight: 600;
}


/* Galerie fiche : 1 grande + 3 petites */
.ap-single__gallery--hero{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.ap-single__photo--main{
  grid-row: 1 / span 3;
  height: 350px;              /* max visuel */
  max-height: 350px;
  overflow: hidden;
}

.ap-single__photo--thumb{
  height: 350px;              /* 3 thumbs = ~350px avec gaps */
  max-height: 350px;
  overflow: hidden;
}

/* Respect du ratio (pas de recadrage) : utilise contain */
.ap-single__gallery--hero .ap-single__img{
  width: 100%;
  height: 100%;

  display: block;
}

/* Fond neutre pour les zones vides (quand contain) */
.ap-single__photo--main,
.ap-single__photo--thumb{
  background: rgba(0,0,0,.04);
}

/* Mobile : repasse en grille simple */
@media (max-width: 900px){
  .ap-single__gallery--hero{
    grid-template-columns: 1fr;
  }
  .ap-single__photo--main{
    grid-row: auto;
    height: 320px;
    max-height: 320px;
  }
  .ap-single__photo--thumb{
    height: 220px;
    max-height: 220px;
  }
}

.ap-single__gallery--hero .ap-single__img{
  object-fit: cover;
}

.ap-single__photo { position: relative; }
.ap-card__media { position: relative; } /* pour la liste */


.ap-banner{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f76421a8;
  color: #fff;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 2;
}


/* FIX: activer la grille (sinon grid-template-columns ne sert à rien) */
.ap-single__gallery{
  display: grid !important;
  gap: 12px !important;
}

/* Fiche animal : badges SOS + coup de coeur côte à côte (override thème) */
.ap-single__badges{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.ap-single__badges .ap-flag{
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.ap-single__badges .ap-flag--text{
  white-space: nowrap !important;
}

/* Ligne uniquement titre + badges */
.ap-single__title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ap-single__title {
  margin: 0;
}

.ap-single__badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icône extérieur premium */
.ap-single__incompat-ico--exterieur{
  width: 18px;
  height: 18px;
  color: #f76421; /* orange personnalisable */
  fill: currentColor;
}

/* ===== Filtres liste : version plus premium ===== */
.ap-filters{
  margin: 18px 0 22px;
  padding: 14px 16px;
  /*border-radius: 14px;
  box-shadow: 2px 3px 10px rgba(0,0,0,.08);*/
    background: #fff;
  gap: 12px;
}

/* Ligne des filtres */
.ap-filters__row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}

/* Chaque filtre */
.ap-filter{
  min-width: 180px;
  gap: 6px;
}

.ap-filter > span{
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
}

/* Select & inputs */
.ap-filter select{
  height: 42px;
  /*border-radius: 12px;*/
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  background: #fff;
}

/* Chevron normal */
.ap-filter select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f76421' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Quand on clique (active), on inverse le chevron */
.ap-filter select:active{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f76421' d='M7 14l5-5 5 5z'/%3E%3C/svg%3E");
}


/* Checkboxes (SOS / Coup de coeur / etc.) */
.ap-filter--check{
  min-width: auto;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

.ap-filter--check input{
  width: 18px;
  height: 18px;
}

/* Boutons */
.ap-filters__actions{
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.ap-btn{
  height: 42px;
  padding: 0 16px;
  /*border-radius: 12px;*/
  border: 0;
  background: #f76421;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.ap-btn:hover{
  filter: brightness(.95);
}

/* Responsive */
@media (max-width: 640px){
  .ap-filter{ min-width: 100%; }
  .ap-filters__actions{ width: 100%; }
  .ap-btn{ width: 100%; }
}

.ap-btn--ghost{
  background: transparent !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ===== Filtres : 1 ligne desktop ===== */
@media (min-width: 1025px){
  .ap-filters__row{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .ap-filter{
    min-width: auto !important;
  }
  .ap-filter select{
    min-width: 180px;
  }
}

/* ===== Chips (SOS / Coup de cœur) ===== */
/* On garde ton HTML actuel: <label class="ap-filter ap-filter--check"><input ...><span>...</span></label> */

.ap-filter--check{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-width: auto !important;
}

/* Cache la checkbox et transforme le span en chip */
.ap-filter--check input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ap-filter--check span{
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);*/
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

/* Etat checked */
.ap-filter--check input:checked + span{
  background: rgba(247, 100, 33, .12);
  border-color: rgba(247, 100, 33, .55);
  color: #f76421;
}

/* Petit feedback au hover */
.ap-filter--check span:hover{
  transform: translateY(-1px);
}

/* Focus accessibilité */
.ap-filter--check input:focus + span{
  outline: 2px solid rgba(247,100,33,.35);
  outline-offset: 2px;
}

/* Mobile: retour en colonnes si besoin */
@media (max-width: 640px){
  .ap-filters__row{ flex-wrap: wrap !important; }
}

.ap-results-count{
  margin: 10px 0 14px;
  font-size: 13px;
  font-weight: 600;
  opacity: .75;
}

/* ===== Filtres : UNE SEULE LIGNE en desktop (override grid) ===== */
@media (min-width: 1025px){

  /* Le formulaire devient une barre horizontale */
  .ap-filters{
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;          /* si ça ne tient pas, on scroll horizontal */
    -webkit-overflow-scrolling: touch;
  }

  /* Chaque row devient inline (et ne wrap pas) */
  .ap-filters__row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  /* Le bouton part à droite */
  .ap-filters__actions{
    margin-left: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Réduire un peu la largeur mini pour éviter les retours
  .ap-filter{ min-width: 150px !important; }*/
  .ap-filter select{ min-width: 150px !important; }
}

/* ---- FIN Animaux Adoption (front) ----