/* =====================================================================
   Dog Food Checker — page publique (FR + EN)
   Porté depuis l'outil d'origine (astucesanimaux.com) et adapté au thème
   FBKC : mêmes composants, mêmes animations, sans emoji. S'appuie sur les
   variables Bootstrap 5.3 du thème pour rester juste en clair et en sombre.
   ===================================================================== */

.food-checker .breadcrumb-item a { color: var(--bs-white) !important; }

/* ---------- Titre à effet machine à écrire ---------- */
#categoryText {
    border-right: 2px solid;
    animation: fcBlink .75s step-end infinite;
}
@keyframes fcBlink {
    from, to { border-color: transparent; }
    50% { border-color: var(--bs-primary); }
}

#infoToggle { line-height: 1; vertical-align: middle; }

/* ---------- Champ de recherche ---------- */
/* Ces noms de classes sont volontairement ceux de l'outil d'origine, mais ils
   sont génériques : style.css définit déjà un « .search-suggestions » pour la
   recherche du site, avec un max-width de 800px qui écrasait le nôtre. Tout ce
   bloc est donc porté par « .food-checker » pour rester chez nous. */
.food-checker .search-box form { transition: all .3s ease-in-out; }
.food-checker .search-box .form-control {
    height: 60px;
    font-size: 1.1rem;
    border-radius: 20px;
    transition: all .3s ease-in-out;
}
.food-checker .search-box .form-control:focus {
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), .2);
    border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .food-checker .search-box .form-control {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark-border-subtle);
    color: var(--bs-white) !important;
}
[data-bs-theme="dark"] .food-checker .search-box .form-control:focus {
    background-color: var(--bs-dark-bg-subtle) !important;
    border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .food-checker .search-box .form-control::placeholder { color: var(--bs-secondary-color); }

/* Suggestions */
/* La liste est DANS le flux, entre le champ et le terme sélectionné : elle
   pousse le badge vers le bas au lieu de le recouvrir. L'ouverture et la
   fermeture sont animées via max-height (la liste est plafonnée à 8 entrées,
   260px correspond donc à sa hauteur réelle).
   Le sélecteur [hidden] est réaffirmé : sans lui, le « display » de cette
   règle l'emporterait sur la feuille de style du navigateur et la liste
   resterait visible une fois fermée. */
.food-checker .search-suggestions {
    display: block;
    width: 100%;
    max-width: none;   /* neutralise le max-width: 800px de style.css */
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
}
.food-checker .search-suggestions[hidden] { display: none; }
.food-checker .search-suggestions.is-open {
    max-height: 260px;
    opacity: 1;
    margin-top: .6rem;
    overflow-y: auto;
}
.food-checker .search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color .2s;
}
.food-checker .search-suggestion-item:hover,
.food-checker .search-suggestion-item.active { background-color: #f8f9fa; }
.food-checker .search-suggestion-item:first-child { border-radius: 15px 15px 0 0; }
.food-checker .search-suggestion-item:last-child { border-radius: 0 0 15px 15px; }
.food-checker .search-suggestion-item:only-child { border-radius: 15px; }
.food-checker .search-suggestion-item .bi { color: #6c757d; }
.food-checker .search-suggestion-name { flex: 1; }
.food-checker .search-suggestion-name mark { background: transparent; color: var(--bs-primary); font-weight: 700; padding: 0; }
.food-checker .search-suggestion-level { font-size: .78rem; font-weight: 600; color: var(--lvl); white-space: nowrap; }
[data-bs-theme="dark"] .food-checker .search-suggestions { background: var(--bs-dark); border: 1px solid var(--bs-dark-border-subtle); }
[data-bs-theme="dark"] .food-checker .search-suggestion-item:hover,
[data-bs-theme="dark"] .food-checker .search-suggestion-item.active { background-color: var(--bs-dark-bg-subtle); }

/* Terme sélectionné */
.food-checker .selected-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.food-checker .term-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--bs-primary);
    color: #fff;
    border-radius: 50px;
    padding: 5px 12px;
    font-size: .9rem;
    font-weight: 500;
    animation: fcBadgeIn .3s ease forwards;
}
.food-checker .term-badge .badge-remove {
    margin-left: 8px;
    cursor: pointer;
    opacity: .7;
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
    line-height: 1;
    transition: opacity .2s;
}
.food-checker .term-badge .badge-remove:hover { opacity: 1; }
@keyframes fcBadgeIn {
    from { transform: scale(.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ---------- Résultats ---------- */
/* Marge de défilement : quand on ouvre une fiche depuis une étiquette du bas
   de page, on s'arrête sur la fiche en laissant apparaître juste au-dessus le
   champ et le terme recherché. Réduite sur petit écran, où 100px mangeraient
   un tiers de la hauteur utile. */
.food-checker .search-results { min-height: 40px; scroll-margin-top: 100px; }
@media (max-width: 575.98px) {
    .food-checker .search-results { scroll-margin-top: 70px; }
}
.food-checker .search-results .card { animation: fcFadeInUp .5s ease forwards; }
@keyframes fcFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.food-checker .card { border-radius: 12px; overflow: hidden; }
.food-checker .alert { border-radius: 12px; }
.food-checker .card .badge { font-size: .9rem; font-weight: 500; }

/* Visuel de la fiche : photo si elle existe, sinon aplat teinté du niveau */
.substance-media { position: relative; height: 100%; min-height: 240px; }
.substance-media img { width: 100%; height: 100%; object-fit: cover; }
.substance-media--main { min-height: 300px; }
.substance-media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lvl-soft);
}
/* Enfant direct uniquement : sinon l'icône du badge de niveau, qui est aussi
   dans ce bloc, hériterait de la taille du visuel de repli. */
.substance-media--placeholder > .bi { font-size: 3.5rem; color: var(--lvl); opacity: .55; }
@media (max-width: 767.98px) {
    .substance-media,
    .substance-media--main { min-height: 190px; }
}

.substance-level-badge {
    position: absolute;
    top: 0; left: 0;
    margin: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--lvl);
    color: #fff;
    border-radius: 50px;
    padding: .45rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18);
}

.substance-section { margin-bottom: 1rem; }
.substance-section h6 { font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.substance-section p { margin: 0 0 0 1.5rem; white-space: pre-line; line-height: 1.6; }
.substance-alert { border: 0; border-left: 4px solid var(--lvl); background: var(--lvl-soft); }
.substance-alert h6 { color: var(--lvl); }
.substance-alert p { margin: 0; white-space: pre-line; line-height: 1.6; }

.suggestion-card { height: 100%; transition: all .3s ease !important; }
.suggestion-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, .15) !important; }
[data-bs-theme="dark"] .food-checker .card-title { color: #fff !important; }

/* ---------- Centres antipoison ---------- */
.food-checker .poison-centres {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-danger);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    background: var(--bs-body-bg);
}
.food-checker .poison-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.food-checker .poison-list { list-style: none; margin: 0; padding: 0; }
.food-checker .poison-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}
.food-checker .poison-list li:last-child { border-bottom: 0; }
.food-checker .poison-country {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    min-width: 4.5rem;
}
.food-checker .poison-name { font-weight: 600; }
.food-checker .poison-tel {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-danger);
    text-decoration: none;
    white-space: nowrap;
}
.food-checker .poison-tel:hover, .food-checker .poison-tel:focus-visible { text-decoration: underline; }
.food-checker .poison-hours { font-size: .82rem; color: var(--bs-secondary-color); }
.food-checker .poison-cost {
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .5rem;
    white-space: nowrap;
}
.food-checker .poison-cost--free { background: rgba(12, 188, 135, .14); color: #0a8f66; }
.food-checker .poison-cost--paid { background: rgba(247, 195, 46, .18); color: #8a6400; }
.food-checker .poison-note { font-size: .82rem; color: var(--bs-secondary-color); margin-top: .75rem; }

/* Version resserrée dans le bandeau rouge d'une fiche dangereuse : la liste
   complète y tiendrait sur six lignes doubles, on comprime tout ce qui peut
   l'être sans perdre le numéro ni son tarif. */
.food-checker .substance-emergency .poison-list--compact li {
    border-bottom-color: rgba(255, 255, 255, .35);
    padding: .22rem 0;
    gap: .2rem .5rem;
    font-size: .88rem;
}
.food-checker .substance-emergency .poison-country { min-width: 0; font-size: .66rem; }
.food-checker .substance-emergency .poison-tel { font-size: .95rem; }
.food-checker .substance-emergency .poison-cost { font-size: .66rem; padding: .05rem .4rem; }
.food-checker .substance-emergency .poison-country,
.food-checker .substance-emergency .poison-tel { color: inherit; }
.food-checker .substance-emergency .poison-tel { text-decoration: underline; }
.food-checker .substance-emergency .poison-cost {
    background: rgba(255, 255, 255, .35);
    color: inherit;
}

/* Substance absente de la base */
.missing-substance-card { border: 1px dashed var(--bs-border-color) !important; }
.missing-substance-card .bi-search-heart { font-size: 2.2rem; color: var(--bs-primary); }
.fc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Accordéon des substances ---------- */
.substance-tags { background-color: #f8f9fa; border-radius: 20px; padding: 30px 0 50px; }
.substance-tags .accordion-button {
    background-color: #fff;
    border-radius: 15px !important;
    font-weight: 600;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.substance-tags .accordion-button:not(.collapsed) { background-color: #e8f5e9; color: #198754; }
.substance-tags .accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .25); }
.substance-tags .accordion-body { padding: 25px; background-color: #fff; border-radius: 0 0 15px 15px; }

.food-checker .letter-heading {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--bs-secondary-color);
    margin-top: 10px;
    font-size: 1.05rem;
}
.food-checker .letter-heading::before,
.food-checker .letter-heading::after { content: ""; flex: 1; height: 1px; background-color: #dee2e6; }
.food-checker .letter-heading::before { margin-right: 10px; }
.food-checker .letter-heading::after { margin-left: 10px; }
.food-checker .letter-heading span { font-weight: 600; padding: 0 5px; }

.food-checker .tags-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.substance-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    padding: 8px 15px;
    font-size: .9rem;
    color: #495057;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: all .2s ease;
}
.substance-tag:hover,
.substance-tag:focus-visible {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), .2);
}
.substance-tag:hover .tag-dot,
.substance-tag:focus-visible .tag-dot { background: #fff; }
.substance-tag.tag-clicked { animation: fcPulseTag 1s; }
@keyframes fcPulseTag {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); background-color: var(--bs-primary); color: #fff; }
    100% { transform: scale(1); }
}

/* Pastille de niveau */
.tag-dot {
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: var(--lvl, #adb5bd);
    flex: none;
}
.tag-dot--safe    { --lvl: #0cbc87; }
.tag-dot--caution { --lvl: #f7c32e; }
.tag-dot--avoid   { --lvl: #fd7e14; }
.tag-dot--toxic   { --lvl: #d6293e; }
.tag-dot--lethal  { --lvl: #6f2dbd; }

/* Mode sombre de l'accordéon */
[data-bs-theme="dark"] .substance-tags { background-color: #212529; }
[data-bs-theme="dark"] .substance-tags .accordion-button { background-color: #343a40; color: #fff; border-radius: 15px !important; overflow: hidden !important; }
[data-bs-theme="dark"] .substance-tags .accordion-button.collapsed { border-radius: 15px !important; }
[data-bs-theme="dark"] .substance-tags .accordion-button:not(.collapsed) {
    background-color: #2c4432;
    color: #86efac;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
[data-bs-theme="dark"] .substance-tags .accordion-button::after { filter: invert(1); }
[data-bs-theme="dark"] .substance-tags .accordion-item { background-color: transparent; }
[data-bs-theme="dark"] .substance-tags .accordion-body { background-color: #2b3035; color: #e9ecef; border-radius: 0 0 15px 15px; }
[data-bs-theme="dark"] .substance-tag { background-color: #343a40; border-color: #495057; color: #e9ecef; }
[data-bs-theme="dark"] .substance-tag:hover { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
[data-bs-theme="dark"] .food-checker .letter-heading span { color: #e9ecef; }
[data-bs-theme="dark"] .food-checker .letter-heading::before,
[data-bs-theme="dark"] .food-checker .letter-heading::after { background-color: #495057; }

/* ---------- Petits écrans ---------- */
@media (max-width: 767.98px) {
    .food-checker .display-6 { font-size: 1.6rem; }
    /* La classe .lead de Bootstrap (1.25rem) fait presque la taille du titre
       une fois celui-ci réduit : la consigne prenait trois lignes et pesait
       plus lourd que le titre lui-même. */
    .food-checker .lead { font-size: 1rem; line-height: 1.45; }
    .food-checker .search-box .form-control { height: 54px; font-size: 1rem; }
    .substance-tags { border-radius: 0; padding: 25px 0 35px; }
    .substance-tags .accordion-body { padding: 18px 15px; }
    .substance-level-badge { margin: .65rem; font-size: .78rem; padding: .35rem .7rem; }
}

@media (max-width: 575.98px) {
    .food-checker .display-6 { font-size: 1.45rem; }
    .food-checker .lead { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    #categoryText { animation: none; border-right: 0; }
    .food-checker .search-results .card,
    .food-checker .term-badge,
    .substance-tag.tag-clicked { animation: none; }
    .substance-tag,
    .suggestion-card,
    .food-checker .search-box form,
    .food-checker .search-suggestions,
    .food-checker .search-box .form-control { transition: none; }
}