html {
  font-size: 15px; /* default is 16px in Bootstrap */
}

a {
    text-decoration: none;
    color: inherit;
}

.fas {
    color: inherit;
}

.fas + *:not(.fas):not(:empty) {
    margin-left: 0px;
}

/* Add space before the icon if preceded by text */
*:not(.fas):not(:empty) + .fas {
    margin-left: 0px;
}

/* === Style global inspiré de la barre ChatGPT mobile === */
:root {
    --bs-border-radius: 1.5rem;       /* global */
    --bs-border-radius-lg: 2rem;      /* pour les gros composants */
    --bs-border-radius-sm: 1rem;
}

body {
    overflow-x: hidden;
}

/* Inputs, champs de texte, boutons */
.form-control,
.form-select,
.btn {
    border-radius: var(--bs-border-radius-lg) !important;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Focus clair et moderne */
.form-control:focus,
.btn:focus {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
    outline: none;
}

/* Textarea arrondi façon bulle */
textarea.form-control {
    border-radius: var(--bs-border-radius-lg) !important;
    resize: none;
}

/* Cards et modals légèrement adoucies */
.card, .modal-content {
    border-radius: 1rem !important; /* Bootstrap’s default for cards/buttons (.rounded) */
    border: 0px solid rgba(0, 0, 0, 0.125); /* same as .card border */
    
}

.searchbar {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: #fff;
    border-radius: 2rem;
    border: 1px solid #ffffff;
    padding: 0.5rem 1rem;
}

/* Utilitaires supplémentaires */
.rounded-chat { border-radius: 1.5rem !important; }
.rounded-pill-lg { border-radius: 50rem !important; }

/* Make each card behave like a smooth, clickable button */
.btn-card {
    border-radius: 1rem !important; /* Bootstrap’s default for cards/buttons (.rounded) */
    border: 1px solid rgba(0, 0, 0, 0.125); /* same as .card border */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075); /* same as .shadow-sm */
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-card:hover {
    background: #f9f9f9;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.btn-card:active,
.btn-card:focus-within {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

/* Image / conteneur avec arrondi doux */
.img-fluid {
    border-radius: 0.3rem;
}

.transition-rotate {
    transition: transform 0.25s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .transition-rotate {
    transform: rotate(180deg);
}

/* Conteneur uniforme avec fond */
.card-img-wrapper {
    width: 150px;
    height: 100%;            /* même hauteur pour toutes */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 1rem;      /* coins arrondis identiques */
    padding: 0.5rem;
}

/* Image centrée et responsive */
.card-img-uniform {
    max-width: 150px;
    max-height: 100%;
    object-fit: contain;       /* conserve le ratio */
    object-position: center;
    display: block;
    transition: transform 0.2s ease;
}

/* Zoom doux au survol */
.btn-card:hover .card-img-uniform {
    transform: scale(1.05);
}

.sticky-filter {
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 40px); /* optional, prevent overflow */
    overflow-y: auto;               /* scroll inside if needed */
}

.sticky-stack {
    position: sticky;
    top: 56px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}