/* Pages « pas cher » au prix au kilo (14/10/2026, d'abord
   /budget/croquettes-chien-pas-cher). Feuille propre a la page, chargee
   par budget_kilo.html (head_extra), donc hors de site.css. Cartes
   compactes, comme celles de /codes-promo (codes_promo.css) : la carte
   des rayons (.pcard) fait plus de 700 px de haut sur telephone, soit
   plus de 20 000 px pour les 30 sacs de la page. Ici, le chiffre qui
   compte est le prix au kilo. */

.kilo-sauts { margin-top: 18px; }

/* Cibles des pastilles : le bandeau collant du haut masquait le titre de
   la partie (meme correctif que /codes-promo). */
#grands-sacs,
#sacs-moyens,
#petits-sacs,
#prix-par-taille,
#questions { scroll-margin-top: 72px; }

.frontpage-h1-block .frontpage-sub a { color: var(--amber); }

.kilo-chapo,
.kilo-vide,
.kilo-suite {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.kilo-chapo { margin: 0 0 14px; }
.kilo-suite { margin: 4px 0 0; }
.kilo-suite a { color: var(--amber); }

.kilo-offres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px;
}

.kilo-offre {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--cream-2);
    border-radius: var(--r-md);
}

.kilo-offre-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
}
/* mobile.css impose img { height: auto !important } sous 900 px. */
.kilo-offre-img img {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain;
}

.kilo-offre-texte { min-width: 0; }

.kilo-offre-format {
    display: block;
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.kilo-offre-nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
}
.kilo-offre-nom a { color: var(--ink); text-decoration: none; }
.kilo-offre-nom a:hover { color: var(--amber); }

.kilo-offre-kilo,
.kilo-offre-prix,
.kilo-offre-suivant {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.45;
}
.kilo-offre-kilo strong {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-primary);
}
.kilo-offre-prix { color: var(--ink); }
.kilo-offre-suivant { color: var(--muted); }

.kilo-offre-cta {
    grid-column: 1 / -1;
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--amber);
    border-radius: var(--r-sm);
    text-decoration: none;
}
.kilo-offre-cta:hover { filter: brightness(0.94); }

.releve-guide-table td small { color: var(--muted); }

.kilo-methode {
    padding: 22px 26px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    border-left: 3px solid var(--amber);
}
.kilo-methode p { margin: 0 0 10px; }
.kilo-methode p:last-child { margin-bottom: 0; }
.kilo-methode a { color: var(--amber); }