/*--------------------------------------------------------------
# BASE & POLICE
--------------------------------------------------------------*/

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
h4 {
    font-weight: 700;
    margin-bottom: 15px;
    color: #1D8B94;
}
p {
    margin-bottom: 1rem;
}
strong {
    color: #E67E22;
}

p, em {margin:0 0 20px 0; font-size:14px; text-transform: none;}
h1{margin:0 0 20px 0; font-size:20px; line-height:normal; font-weight:bold; text-transform:uppercase;}
h2{margin:0 0 20px 0; font-size:19px; line-height:normal; font-weight:bold; text-transform:uppercase;}
h3{margin:0 0 20px 0; font-size:18px; line-height:normal; font-weight:bold; text-transform:uppercase;}
h4{margin:0 0 20px 0; font-size:16px; line-height:normal; font-weight:bold; text-transform:uppercase;}
h5{margin:0 0 20px 0; font-size:16px; line-height:normal; font-weight:bold; text-transform:uppercase; color:"#AF0000";}
h6{margin:0 0 20px 0; font-size:16px; line-height:normal; font-weight:bold; text-transform:uppercase; color:"#AF0000";}

/*--------------------------------------------------------------
# INDEX STYLE DES CATEGORIES D'ADOPTION (Boutons du haut)
--------------------------------------------------------------*/
.btn-categorie, .btn-pensionnaire {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    background: #f5f9ff;
    border: 2px solid #1D8B94;
    border-radius: 10px;
    color: #1D8B94 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.btn-categorie:hover {
    background-color: #1D8B94;
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(29, 139, 148, 0.2);
}

.btn-pensionnaire { border-color: #E67E22; color: #E67E22 !important; }
.btn-pensionnaire:hover {
    background-color: #E67E22;
    color: white !important;
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.2);
}

.icon-furet-btn {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.btn-categorie:hover .icon-furet-btn, 
.btn-pensionnaire:hover .icon-furet-btn {
    filter: brightness(0) invert(1);
}

/*--------------------------------------------------------------
# INDEX DESIGN DES CARTES AVEC PHOTOS (Pension, Boutique, Soutien)
--------------------------------------------------------------*/
.photo-card {
    background: #ffffff;
    border-radius: 20px;
    height: 100%; 
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    overflow: hidden;
}

.photo-card:hover {
    transform: translateY(-8px);
    border-color: #1D8B94;
    box-shadow: 0 15px 35px rgba(29, 139, 148, 0.12);
}

.photo-wrapper {
    height: 220px; /* Espace réservé pour la photo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfdfd; /* Fond neutre si la photo est étroite */
    overflow: hidden;
    padding: 10px;
}

.img-service-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* <--- ICI : GARDE LA PHOTO ENTIÈRE SANS COUPER */
    transition: transform 0.5s ease;
}

.photo-card:hover .img-service-photo {
    transform: scale(1.05);
}

.card-body-photo {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.photo-card h4 {
    color: #1D8B94;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.card-soutien:hover { border-color: #E67E22; }
.card-soutien:hover h4 { color: #E67E22; }

/*--------------------------------------------------------------
# INDEX BLOCS MODERNES (Mission, ASBL, TVA)
--------------------------------------------------------------*/
.bloc-modern {
    position: relative;
    background: #ffffff;
    border-radius: 25px;
    padding: 40px;
    border-left: 8px solid #1D8B94;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    overflow: hidden;
}

.border-orange { border-left-color: #E67E22 !important; }

.bg-emoji {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    opacity: 0.1;
}

/* --- LA PATTE DECORATIVE (Transparente) --- */
.bg-patte-furet {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 100px;
    opacity: 0.05; /* <--- C'EST ICI : 0.05 pour qu'elle soit tres discrete*/
    pointer-events: none; /* Pour ne pas gener le clic sur le texte */
    z-index: 0;
}

.bloc-modern {
    position: relative;
    background: #ffffff;
    border-radius: 25px;
    padding: 40px;
    border-left: 8px solid #1D8B94;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    overflow: hidden; /* Important pour que la patte ne depasse pas du bloc */
    z-index: 1;
}

/* On s'assure que le texte reste au-dessus de la patte */
.bloc-modern h4, .bloc-modern p {
    position: relative;
    z-index: 2;
}

/*--------------------------------------------------------------
# INDEX KIT BOUTONS UNIVERSELS - CODY'S FERRET
--------------------------------------------------------------*/

/* Structure de base commune A  tous les boutons */
.btn-cody, .btn-orange, .btn-outline {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 10px; /* Bords bien arrondis pour le cote doux */
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase; /* Donne un aspect plus pro */
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* BOUTON PRINCIPAL (Bleu Canard / Teal) */
.btn-cody {
    background-color: #1D8B94;
    color: #ffffff !important;
}

.btn-cody:hover {
    background-color: #166d74;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(29, 139, 148, 0.25);
    color: #ffffff !important;
}

/* BOUTON ACTION (Orange - Ideal pour Dons/Urgence) */
.btn-orange {
    background-color: #E67E22;
    color: #ffffff !important;
}

.btn-orange:hover {
    background-color: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 126, 34, 0.25);
    color: #ffffff !important;
}

/* BOUTON CONTOUR (Discret - Ideal pour "En savoir plus") */
.btn-outline {
    background-color: transparent;
    border-color: #1D8B94;
    color: #1D8B94 !important;
    box-shadow: none;
}

.btn-outline:hover {
    background-color: #1D8B94;
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* Version petite pour les textes courts */
.btn-sm {
    padding: 8px 20px;
    font-size: 0.8rem;
}
/* --- SECTION ALERTES (RDV & VETO) --- */
.display-4 {
    font-size: 3rem; /* Taille de l'emoji */
}

/* Petit effet de pulse sur l'alerte pour attirer l'oeil sans agresser */
h2[style*="1D8B94"] {
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

/* Arrondis plus doux pour les blocs d'alerte */
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    transition: transform 0.3s ease;
}

/* Si l'utilisateur survole l'alerte, elle reagit legerement */
.shadow-sm:hover {
    transform: scale(1.01);
}
/*--------------------------------------------------------------
# INDEX SECURITE AFFICHAGE
--------------------------------------------------------------*/
.animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .bloc-modern { 
        padding: 25px; 
        border-left-width: 5px; 
    }
    .bg-emoji { 
        display: none; 
    }
}

/*--------------------------------------------------------------
# FIN INDEX
--------------------------------------------------------------*/










/*--------------------------------------------------------------
# TOPBAR 
--------------------------------------------------------------*/
.topbar {
    background-color: #1D8B94;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 5px 0;
}

.topbar-left,
.topbar-right {
    display: inline-block;
    margin: 0 10px;
}

.topbar-right {
    background: rgba(0,0,0,0.2);
    padding: 3px 12px;
    border-radius: 10px;
    font-weight: 600;
}

.separator {
    display: inline-block;
}

@media (max-width: 768px) {
    .topbar-left, .topbar-right {
        display: block;
        margin: 5px 0;
    }
    .separator { display: none; }
}

/*--------------------------------------------------------------
# BARRE DE NAVIGATION (NAVBAR) - VERSION FINALE
--------------------------------------------------------------*/
.navbar {
    background-color: #1a1a1a !important; /* Noir moderne */
    padding: 10px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

.navbar-brand img {
    height: 55px;
    width: auto;
}

/* Liens principaux (Accueil, Adoptions, etc.) */
.nav-link {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.8rem; /* Taille réduite pour faire tenir les 10 onglets */
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #1D8B94 !important; /* Bleu canard au survol */
}

/* Bouton Menu Mobile */
.navbar-toggler {
    border-color: rgba(255,255,255,0.3);
}

.navbar-toggler-icon {
    filter: invert(1) brightness(200%);
}

/*--------------------------------------------------------------
# LES SOUS-MENUS (DROPDOWN) - STYLE CLAIR (ORDINATEUR)
--------------------------------------------------------------*/
.dropdown-menu {
    background-color: #fdfdfd !important; /* Blanc cassé doux */
    border: none !important;
    border-top: 4px solid #1D8B94 !important; /* Barre de couleur en haut */
    border-radius: 0 0 12px 12px;
    padding: 10px 0;
    margin-top: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    min-width: 240px;
}

/* Liens dans le sous-menu */
.dropdown-item {
    color: #333 !important;
    font-weight: 500;
    padding: 10px 20px;
    font-size: 0.9rem;
    text-transform: none;
    transition: all 0.2s ease;
}

/* Effet au survol d'un lien */
.dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #28A745 !important; /* Vert au survol */
    padding-left: 28px !important; /* Effet de décalage */
}

/* Titres de sections internes (ex: "Disponible") */
.dropdown-header, .dropdown-menu .small {
    background-color: #f1f3f5 !important;
    color: #666 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 1px;
    margin: 5px 0;
    padding: 6px 20px !important;
    display: block;
    border-bottom: 1px solid #e9ecef;
}

/* Ligne de séparation fine */
.dropdown-divider {
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/*--------------------------------------------------------------
# OPTIMISATION MOBILE (ÉCRANS < 992px)
--------------------------------------------------------------*/
@media (max-width: 991px) {
    /* Menu mobile devient clair et aéré */
    .dropdown-menu {
        background-color: #ffffff !important; 
        border: 1px solid #eee !important;
        border-left: 4px solid #1D8B94 !important; /* Barre à gauche sur mobile */
        border-top: none !important;
        margin: 5px 15px !important;
        padding: 10px 0 !important;
        box-shadow: none !important;
        border-radius: 8px !important;
    }

    /* Liens plus grands pour le clic au doigt */
    .dropdown-item {
        color: #222 !important; 
        padding: 12px 20px !important;
        border-bottom: 1px solid #f8f9fa;
        font-size: 0.95rem !important;
    }

    .dropdown-item:active, .dropdown-item:hover {
        background-color: #f1f1f1 !important;
        color: #28A745 !important;
    }

    /* Titres de sections sur mobile */
    .dropdown-header, .dropdown-menu .small {
        background-color: #f8f9fa !important;
        color: #888 !important;
        padding: 8px 20px !important;
    }
    
    .nav-item {
        margin-bottom: 2px;
    }
}

/*--------------------------------------------------------------
# PRESENTATION DES FURETS
--------------------------------------------------------------*/
.ferret-block {
  background-color: #f9f9f9;           /* fond doux */
  padding: 25px 20px;                  /* padding confortable */
  border-radius: 15px;                 /* coins arrondis */
  margin: 25px auto;                   /* centré horizontalement */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* légère ombre */
  max-width: 1290px;                   /* largeur maximale pour grand écran */
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Images dans le bloc */
.ferret-block .ferret-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ferret-block .ferret-images img {
  width: 200px;                         /* largeur par défaut pour PC */
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ferret-block .ferret-images img:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Tablettes et écrans moyens */
@media (max-width: 1024px) {
  .ferret-block {
    max-width: 90%;     /* bloc plus étroit que 1290px */
    padding: 20px;
  }

  .ferret-block .ferret-images img {
    width: 160px;       /* images adaptées */
  }
}

/* Mobile petits écrans */
@media (max-width: 480px) {
  .ferret-block {
    max-width: 95%;     /* presque tout l’écran */
    padding: 15px;      /* padding réduit pour mobile */
  }

  .ferret-block .ferret-images img {
    width: 120px;       /* images plus petites */
  }
}

.non-adoptable {
  background-color: #fff4f6;
  border-left: 6px solid #d46a7e;
  padding: 20px;
  margin: 25px auto;       /* centré horizontalement */
  border-radius: 10px;
  text-align: center;
  max-width: 1290px;       /* largeur max sur grand écran */
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  transition: all 0.2s;
}

/* Tablettes et écrans moyens */
@media (max-width: 1024px) {
  .non-adoptable {
    max-width: 90%;
    padding: 15px;
  }
}

/* Mobiles petits écrans */
@media (max-width: 480px) {
  .non-adoptable {
    max-width: 95%;
    padding: 10px;
  }

  .non-adoptable h3 {
    font-size: 1.2rem;
  }

  .non-adoptable p {
    font-size: 0.9rem;
  }
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/
.footer-custom {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    padding: 60px 0 30px 0;
    position: relative;
    z-index: 10;
}

.footer-custom h5 {
    color: #ffffff; /* Mets #E67E22 si tu préfères l'orange */
    font-weight: 700;
	font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px; /* Un petit espace entre les lettres pour la lisibilité */
    border-bottom: 2px solid #1D8B94; /* Petite ligne bleue en dessous pour le style */
    display: inline-block;
    padding-bottom: 5px;
}

.footer-custom p, 
.footer-custom li {
    color: #bdc3c7 !important;
    font-size: 14px;
    line-height: 1.6;
}

.footer-link {
    color: #bdc3c7 !important;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    margin-bottom: 8px;
}

.footer-link:hover {
    color: #1D8B94 !important;
    transform: translateX(5px);
}

.social-links a {
    color: #ffffff;
    font-size: 20px;
    margin-right: 15px;
    transition: 0.3s;
}

.social-links a:hover {
    color: #E67E22;
}

/* --- EFFET ICONES SOCIALES --- */
.social-icon {
    transition: all 0.3s ease;
    display: inline-block;
}

.social-icon:hover {
    transform: translateY(-5px); /* L'icône monte légèrement */
    filter: brightness(1.3);      /* Elle devient plus lumineuse */
}

/* On s'assure que les images ne débordent pas */
.social-icon img {
    object-fit: contain;
}
/* Style pour l'image du partenaire dans le footer */
.img-partenaire-footer {
    width: 190px;          /* Largeur réduite */
    height: auto;          /* Garde les proportions */
    border-radius: 8px;    /* Bords arrondis */
    border: 1px solid #333; /* Petite bordure discrète */
    transition: 0.3s;      /* Effet fluide au survol */
}

.img-partenaire-footer:hover {
    transform: scale(1.05); /* Petit zoom quand on passe la souris */
    border-color: #1D8B94;  /* La bordure devient bleue au survol */
}

/* Style général du footer (pour être sûr qu'il soit bien noir) */
.footer-custom {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    padding: 60px 0;
}