/* ============================================================
   Hermès Fresh — Design
   ------------------------------------------------------------
   Bootstrap 5.3 fournit TOUTE la structure (grid, card, form,
   btn, nav, offcanvas, list-group, toast, modal, progress).
   Ce fichier ne fait que du design :
     1. Tokens
     2. Pont de thème Bootstrap (clair / sombre)
     3. Chrome d'application
     4. Composants métier
     5. Finitions

   Règles tenues ici :
     - aucun !important
     - aucune redéfinition « nue » d'une classe Bootstrap générique
       (on passe par les variables --bs-* prévues pour le theming)
     - toutes les classes maison sont préfixées .hf-
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
    /* Marque — vert « potager » */
    --hf-brand-50:  #eef8f1;
    --hf-brand-100: #d6eddf;
    --hf-brand-200: #a9d9bd;
    --hf-brand-400: #4ba873;
    --hf-brand-500: #34995d;
    --hf-brand-600: #2d8a4e;
    --hf-brand-700: #226b3c;
    --hf-brand-800: #1a5230;

    /* Accents fonctionnels */
    --hf-accent:  #e8833a;   /* « il te manque » */
    --hf-danger:  #d64545;
    --hf-warning: #d99017;

    /* Rayons */
    --hf-radius-sm: .625rem;
    --hf-radius:    1rem;
    --hf-radius-lg: 1.25rem;

    /* Métriques de layout */
    --hf-appbar-h: 3.5rem;
    --hf-nav-h:    4rem;

    /* Zones sûres (encoche / barre d'accueil iOS) */
    --hf-safe-top:    env(safe-area-inset-top, 0px);
    --hf-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Mouvement */
    --hf-ease:      cubic-bezier(.32, .72, 0, 1);
    --hf-dur-fast:  .15s;
    --hf-dur:       .25s;
}

/* ============================================================
   2. PONT DE THÈME BOOTSTRAP
   On alimente les variables que Bootstrap consomme déjà, pour que
   ses composants adoptent la charte sans être réécrits.
   ============================================================ */

:root,
[data-bs-theme="light"] {
    --hf-surface:        #ffffff;
    --hf-surface-2:      #f4f7f5;
    --hf-surface-sunken: #eaf0ec;
    --hf-line:           #e2e8e4;
    --hf-text-soft:      #6b7671;
    --hf-shadow-sm:      0 1px 2px rgba(20, 40, 30, .06), 0 1px 3px rgba(20, 40, 30, .05);
    --hf-shadow:         0 2px 6px rgba(20, 40, 30, .06), 0 8px 24px rgba(20, 40, 30, .07);
    --hf-shadow-lg:      0 4px 12px rgba(20, 40, 30, .08), 0 18px 40px rgba(20, 40, 30, .12);
    --hf-scrim:          rgba(12, 22, 17, .45);
    --hf-brand-text:     var(--hf-brand-700);
    --hf-brand-soft:     var(--hf-brand-50);

    --bs-primary:       var(--hf-brand-600);
    --bs-primary-rgb:   45, 138, 78;
    --bs-body-bg:       var(--hf-surface-2);
    --bs-body-color:    #17211c;
    --bs-secondary-color: var(--hf-text-soft);
    --bs-border-color:  var(--hf-line);
    --bs-link-color:    var(--hf-brand-700);
    --bs-link-hover-color: var(--hf-brand-800);
    --bs-emphasis-color: #0f1712;
}

[data-bs-theme="dark"] {
    --hf-surface:        #1a211d;
    --hf-surface-2:      #121714;
    --hf-surface-sunken: #0d110f;
    --hf-line:           #2b3630;
    --hf-text-soft:      #9aa8a1;
    --hf-shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
    --hf-shadow:         0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .45);
    --hf-shadow-lg:      0 4px 12px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .55);
    --hf-scrim:          rgba(0, 0, 0, .6);
    --hf-brand-text:     var(--hf-brand-200);
    --hf-brand-soft:     rgba(45, 138, 78, .16);

    --bs-primary:       var(--hf-brand-500);
    --bs-primary-rgb:   52, 153, 93;
    --bs-body-bg:       var(--hf-surface-2);
    --bs-body-color:    #e6ece9;
    --bs-secondary-color: var(--hf-text-soft);
    --bs-border-color:  var(--hf-line);
    --bs-link-color:    var(--hf-brand-200);
    --bs-link-hover-color: var(--hf-brand-100);
    --bs-emphasis-color: #ffffff;
}

/* Composants Bootstrap : on ne surcharge que leurs variables de theming. */

.btn-primary {
    --bs-btn-bg: var(--hf-brand-600);
    --bs-btn-border-color: var(--hf-brand-600);
    --bs-btn-active-bg: var(--hf-brand-800);
    --bs-btn-active-border-color: var(--hf-brand-800);
    --bs-btn-disabled-bg: var(--hf-brand-400);
    --bs-btn-disabled-border-color: var(--hf-brand-400);
    /* Repli obligatoire : sans lui, le :hover collant du tactile ferait
       ressortir le bleu par défaut de Bootstrap. Ici, survol = état normal. */
    --bs-btn-hover-bg: var(--hf-brand-600);
    --bs-btn-hover-border-color: var(--hf-brand-600);
}
@media (hover: hover) {
    .btn-primary {
        --bs-btn-hover-bg: var(--hf-brand-700);
        --bs-btn-hover-border-color: var(--hf-brand-700);
    }
}

.btn-outline-primary {
    --bs-btn-color: var(--hf-brand-text);
    --bs-btn-border-color: var(--hf-brand-200);
    --bs-btn-active-bg: var(--hf-brand-700);
    --bs-btn-active-border-color: var(--hf-brand-700);
    /* Sur tactile, :hover COLLE après un tap : le bouton resterait vert alors
       qu'on vient de désélectionner la recette. On neutralise donc le survol
       par défaut et on ne le colore qu'avec un vrai pointeur. */
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--hf-brand-text);
    --bs-btn-hover-border-color: var(--hf-brand-200);
}
@media (hover: hover) {
    .btn-outline-primary {
        --bs-btn-hover-bg: var(--hf-brand-600);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-border-color: var(--hf-brand-600);
    }
}

.btn {
    --bs-btn-border-radius: var(--hf-radius-sm);
    --bs-btn-font-weight: 600;
    transition: transform var(--hf-dur-fast) var(--hf-ease),
                background-color var(--hf-dur-fast) var(--hf-ease);
}
.btn:active { transform: scale(.97); }

.card {
    --bs-card-border-radius: var(--hf-radius);
    --bs-card-inner-border-radius: var(--hf-radius);
    --bs-card-bg: var(--hf-surface);
    --bs-card-border-color: transparent;
}

.list-group {
    --bs-list-group-bg: var(--hf-surface);
    --bs-list-group-border-color: var(--hf-line);
    --bs-list-group-border-radius: var(--hf-radius);
    --bs-list-group-active-bg: var(--hf-brand-600);
    --bs-list-group-active-border-color: var(--hf-brand-600);
}

.form-control,
.form-select {
    --bs-border-radius: var(--hf-radius-sm);
    background-color: var(--hf-surface);
    border-color: var(--hf-line);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--hf-brand-400);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--hf-brand-600);
    border-color: var(--hf-brand-600);
}
.form-check-input:focus {
    border-color: var(--hf-brand-400);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--hf-radius-sm);
    --bs-nav-pills-link-active-bg: var(--hf-brand-600);
    --bs-nav-link-color: var(--hf-text-soft);
    --bs-nav-link-hover-color: var(--hf-brand-text);
}

.offcanvas { --bs-offcanvas-bg: var(--hf-surface); }
.modal     { --bs-modal-bg: var(--hf-surface); --bs-modal-border-radius: var(--hf-radius-lg); }
.progress  { --bs-progress-bg: var(--hf-surface-sunken); --bs-progress-bar-bg: var(--hf-brand-600); }
.toast     { --bs-toast-bg: var(--bs-emphasis-color); --bs-toast-color: var(--bs-body-bg); }
.alert     { --bs-alert-border-radius: var(--hf-radius-sm); }

/* ============================================================
   3. CHROME D'APPLICATION
   ============================================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

.hf-brandmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: linear-gradient(140deg, var(--hf-brand-500), var(--hf-brand-700));
    color: #fff;
    font-size: 1.15rem;
    box-shadow: var(--hf-shadow-sm);
}
.hf-brandmark-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 1.35rem;
    font-size: 2rem;
}

/* --- App bar --- */
.hf-appbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding-top: var(--hf-safe-top);
    min-height: calc(var(--hf-appbar-h) + var(--hf-safe-top));
    /* Dégradé VERTICAL, et non diagonal : le bord supérieur vaut alors
       exactement --hf-brand-600 sur toute sa largeur, ce qui permet à la
       barre de statut du téléphone (meta theme-color) de s'y raccorder sans
       démarcation. En diagonale, le haut allait de #2d894d à #1d5a35. */
    background: linear-gradient(180deg, var(--hf-brand-600), var(--hf-brand-800));
    color: #fff;
    box-shadow: var(--hf-shadow-sm);
}
.hf-appbar .btn {
    --bs-btn-color: rgba(255, 255, 255, .9);
    --bs-btn-border-color: rgba(255, 255, 255, .28);
    --bs-btn-active-bg: rgba(255, 255, 255, .24);
    /* Idem : sans ça, la flèche de semaine reste allumée après le tap. */
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: rgba(255, 255, 255, .9);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .28);
}
@media (hover: hover) {
    .hf-appbar .btn {
        --bs-btn-hover-bg: rgba(255, 255, 255, .16);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-border-color: rgba(255, 255, 255, .4);
    }
}
.hf-appbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
@media (max-width: 380px) {
    /* Sur les très petits écrans, le sélecteur de semaine prime sur le wordmark. */
    .hf-appbar-title { display: none; }
}

.hf-weekpicker { flex: 0 0 auto; }
.hf-weekpicker-label {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, .95);
}
.hf-weekpicker-sub { font-size: .68rem; color: rgba(255, 255, 255, .7); }

.hf-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}
.hf-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
    background: var(--hf-brand-soft);
    color: var(--hf-brand-text);
    border-color: transparent;
}

/* --- Écrans --- */
.hf-app { padding-bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom) + 1rem); }

/* Quand une barre d'action est affichée, on dégage la place sous le contenu
   pour que le dernier élément de la liste reste atteignable. */
body:has(.hf-actionbar:not(.d-none)) .hf-app {
    padding-bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom) + 4.75rem);
}

.hf-screen { animation: hf-screen-in var(--hf-dur) var(--hf-ease); }
@keyframes hf-screen-in {
    from { opacity: 0; transform: translateY(.5rem); }
    to   { opacity: 1; transform: none; }
}

.hf-section-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.hf-section-sub   { font-size: .82rem; color: var(--hf-text-soft); }

/* Libellé de rayon (Épicerie, Légumes…) */
.hf-aisle {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hf-text-soft);
}

/* --- Barre d'action collante (au-dessus de la bottom-nav) --- */
.hf-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom));
    z-index: 1015;
    padding: .625rem .875rem;
    background: linear-gradient(to top, var(--bs-body-bg) 62%, transparent);
    animation: hf-actionbar-in var(--hf-dur) var(--hf-ease);
}
@keyframes hf-actionbar-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* --- Bottom nav ---
   Classe .hf-tab et NON .nav-link : l'ancienne feuille redéfinissait
   .nav-link globalement en !important, ce qui cassait toute nav
   Bootstrap ailleurs dans l'app (les onglets de connexion notamment). */
.hf-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    height: calc(var(--hf-nav-h) + var(--hf-safe-bottom));
    padding-bottom: var(--hf-safe-bottom);
    background: var(--hf-surface);
    border-top: 1px solid var(--hf-line);
    box-shadow: 0 -1px 12px rgba(20, 40, 30, .05);
}

.hf-tab {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border: 0;
    background: none;
    padding: .25rem;
    color: var(--hf-text-soft);
    font-size: .68rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--hf-dur-fast) var(--hf-ease);
}
.hf-tab i { font-size: 1.35rem; line-height: 1; }
@media (hover: hover) {
    .hf-tab:hover { color: var(--hf-brand-text); }
}
.hf-tab.is-active { color: var(--hf-brand-text); }
.hf-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 2rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--hf-brand-600);
}
.hf-tab-badge {
    position: absolute;
    top: .3rem;
    left: 50%;
    margin-left: .35rem;
    font-size: .62rem;
    min-width: 1.1rem;
}

/* ============================================================
   4. COMPOSANTS MÉTIER
   ============================================================ */

/* --- Carte recette --- */
.hf-recipe {
    overflow: hidden;
    box-shadow: var(--hf-shadow-sm);
    border: 2px solid transparent;
    transition: border-color var(--hf-dur-fast) var(--hf-ease),
                box-shadow var(--hf-dur-fast) var(--hf-ease),
                transform var(--hf-dur-fast) var(--hf-ease);
}
.hf-recipe:active { transform: scale(.99); }
.hf-recipe.is-selected {
    border-color: var(--hf-brand-500);
    box-shadow: var(--hf-shadow);
}

.hf-recipe-media {
    position: relative;
    background: linear-gradient(140deg, var(--hf-brand-100), var(--hf-brand-200));
    cursor: pointer;
}
.hf-recipe-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Repli quand l'image Unsplash ne charge pas */
.hf-media-fallback img { visibility: hidden; }
.hf-media-fallback::after {
    content: "\f312";           /* bi-egg-fried */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--hf-brand-700);
    opacity: .55;
}

.hf-recipe-check {
    position: absolute;
    top: .625rem;
    right: .625rem;
    z-index: 2;
}

.hf-recipe-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.hf-recipe-desc {
    font-size: .82rem;
    color: var(--hf-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Puces d'information (temps, kcal, protéines…) */
.hf-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--hf-surface-sunken);
    color: var(--bs-body-color);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.hf-chip i { font-size: .85rem; opacity: .7; }
.hf-chip-brand { background: var(--hf-brand-soft); color: var(--hf-brand-text); }

/* Semaine verrouillée : les commandes d'édition restent cliquables (pour
   pouvoir proposer de rouvrir) mais signalent clairement qu'elles ne sont
   plus actives. */
.hf-verrouille { opacity: .45; }

/* Plat déjà cuisiné : estompé, mais toujours consultable. */
.hf-recipe-faite { opacity: .65; }

/* --- Bouton de sélection posé sur la carte --- */
.hf-pick {
    --bs-btn-border-radius: 999px;
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-y: .35rem;
    --bs-btn-padding-x: .85rem;
}

/* --- Ligne d'ingrédient / d'article de courses --- */
.hf-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
}
.hf-line-name  { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.hf-line-meta  { font-size: .72rem; color: var(--hf-text-soft); }
.hf-line-qty {
    font-size: .82rem;
    font-weight: 700;
    color: var(--hf-brand-text);
    white-space: nowrap;
}

/* État « je l'ai déjà » / « acheté » : on barre au lieu de faire disparaître,
   pour que l'utilisateur voie ce qu'il a traité. */
.hf-line.is-done .hf-line-name,
.hf-line.is-done .hf-line-qty { text-decoration: line-through; }
.hf-line.is-done { opacity: .5; }

.hf-line-remove {
    --bs-btn-color: var(--hf-text-soft);
    --bs-btn-hover-color: var(--hf-danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-padding-x: .4rem;
    --bs-btn-padding-y: .2rem;
}


/* --- Étiquettes de recette (Épicé, Végétarien…) ---
   La couleur vient du `colorHandle` de la source ; tout handle inconnu
   retombe sur le style neutre. */
.hf-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--hf-surface-sunken);
    color: var(--hf-text-soft);
    white-space: nowrap;
}
.hf-tag-spicy        { background: rgba(214, 69, 69, .14);  color: #b83535; }
.hf-tag-veggie,
.hf-tag-vegan        { background: var(--hf-brand-soft);    color: var(--hf-brand-text); }
.hf-tag-calorieSmart { background: rgba(38, 110, 190, .14); color: #2166be; }
.hf-tag-quickPrep    { background: rgba(147, 87, 199, .14); color: #8046c4; }
.hf-tag-glutenFree   { background: rgba(217, 144, 23, .16); color: #a86c0b; }
[data-bs-theme="dark"] .hf-tag-spicy        { color: #f08a8a; }
[data-bs-theme="dark"] .hf-tag-calorieSmart { color: #8ab6ee; }
[data-bs-theme="dark"] .hf-tag-quickPrep    { color: #c3a0e8; }
[data-bs-theme="dark"] .hf-tag-glutenFree   { color: #e5b45c; }

/* --- Barre de filtres de l'écran Semaine --- */
.hf-filtres {
    display: flex;
    gap: .4rem;
    padding-bottom: .5rem;
    margin-bottom: .25rem;
}
.hf-filtre {
    flex: 0 0 auto;
    border: 1px solid var(--hf-line);
    background: var(--hf-surface);
    color: var(--bs-body-color);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--hf-dur-fast) var(--hf-ease),
                border-color var(--hf-dur-fast) var(--hf-ease);
}
.hf-filtre.is-on {
    background: var(--hf-brand-600);
    border-color: var(--hf-brand-600);
    color: #fff;
}

/* Dans le placard, TOUTES les lignes sont cochées par défaut : les barrer
   rendrait la section entière illisible. On se contente de les estomper. */
.hf-placard .hf-line.is-done { opacity: .6; }
.hf-placard .hf-line.is-done .hf-line-name,
.hf-placard .hf-line.is-done .hf-line-qty { text-decoration: none; }

/* --- Détail recette (écran plein) --- */
.hf-detail {
    position: fixed;
    inset: 0;
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bs-body-bg);
    animation: hf-detail-in var(--hf-dur) var(--hf-ease);
}
@keyframes hf-detail-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: none; }
}

.hf-hero { position: relative; background: linear-gradient(140deg, var(--hf-brand-100), var(--hf-brand-200)); }
.hf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, var(--hf-scrim), transparent);
    pointer-events: none;
}
.hf-hero-back {
    position: absolute;
    top: calc(.75rem + var(--hf-safe-top));
    left: .75rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.1rem;
    backdrop-filter: blur(6px);
}
.hf-hero-title {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* Étapes de préparation */
.hf-step { display: flex; gap: .85rem; padding: .85rem 0; }
.hf-step + .hf-step { border-top: 1px solid var(--hf-line); }
.hf-step-num {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-brand-soft);
    color: var(--hf-brand-text);
    font-size: .78rem;
    font-weight: 800;
}
.hf-step-title { font-size: .9rem; font-weight: 700; }
.hf-step-text  { font-size: .84rem; color: var(--hf-text-soft); line-height: 1.55; }

/* --- États vides --- */
.hf-empty { text-align: center; padding: 2.5rem 1.25rem; }
.hf-empty-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-brand-soft);
    color: var(--hf-brand-text);
    font-size: 2rem;
}
.hf-empty-title { font-weight: 700; margin-bottom: .25rem; }
.hf-empty-text  { font-size: .85rem; color: var(--hf-text-soft); }

/* --- Squelettes de chargement (placeholder-glow de Bootstrap) --- */
.hf-skeleton-media { border-radius: var(--hf-radius) var(--hf-radius) 0 0; }

/* --- Bandeau hors-ligne --- */
.hf-offline {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom) + .75rem);
    z-index: 1035;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: var(--hf-shadow);
}

/* --- Écran de connexion --- */
.hf-auth {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    padding-top: calc(1.5rem + var(--hf-safe-top));
    padding-bottom: calc(1.5rem + var(--hf-safe-bottom));
    background:
        radial-gradient(90rem 40rem at 50% -12rem, var(--hf-brand-500), transparent 62%),
        linear-gradient(160deg, var(--hf-brand-700), var(--hf-brand-800));
}
.hf-auth-card {
    width: 100%;
    max-width: 25rem;
    border-radius: var(--hf-radius-lg);
    box-shadow: var(--hf-shadow-lg);
}
.hf-auth-title    { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.hf-auth-subtitle { color: rgba(255, 255, 255, .8); font-size: .88rem; }

/* ============================================================
   5. FINITIONS
   ============================================================ */

/* Zone de scroll du contenu principal */
.hf-scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hf-scroll-x::-webkit-scrollbar { display: none; }

/* Le conteneur de toasts flotte au-dessus de la bottom-nav.
   Il ne doit RIEN intercepter : posé sur la barre d'action, il rendait le
   bouton « Passer la commande » incliquable pendant toute la durée du toast.
   Seul le toast lui-même reste cliquable, pour sa croix de fermeture. */
.hf-toasts {
    bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom) + .75rem);
    z-index: 1090;
    pointer-events: none;
}
.hf-toasts .toast { pointer-events: auto; }

/* Quand une barre d'action est affichée, le toast passe au-dessus d'elle. */
body:has(.hf-actionbar:not(.d-none)) .hf-toasts {
    bottom: calc(var(--hf-nav-h) + var(--hf-safe-bottom) + 4.5rem);
}

/* Respect des préférences système d'animation */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }
    .btn:active,
    .hf-recipe:active { transform: none; }
}

/* Au-delà du mobile, on borne la largeur pour garder la métaphore « app » */
@media (min-width: 992px) {
    .hf-bottomnav,
    .hf-actionbar {
        max-width: 45rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .hf-bottomnav { border-radius: var(--hf-radius) var(--hf-radius) 0 0; border-inline: 1px solid var(--hf-line); }
}