/* ══════════════════════════════════════════════════════════
   DAMAMME.COM — Véganisme — css/app.css
   Tout est préfixé #veganisme-app. Couleurs via var(--hub-*),
   composants du hub (.hub-card, .btn, .nav-tab…).
   Les boutons NE sont PAS redéfinis : classes du hub uniquement.
   ══════════════════════════════════════════════════════════ */

/* ─── Filtres de l'onglet Recettes ───────────────────────── */
#veganisme-app .veg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#veganisme-app #veg-search { flex: 2 1 260px; }
#veganisme-app #veg-filter-cat { flex: 1 1 180px; }
/* P4 (12/07/2026) : la case « j'ai ces ingrédients » vit DANS la barre. */
#veganisme-app #veg-filter-ingredient { flex: 1 1 180px; max-width: 260px; min-width: 150px; }
#veganisme-app .veg-chips { margin-top: 6px; }

#veganisme-app .veg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#veganisme-app .veg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--hub-blue-pale);
    color: var(--hub-blue);
    font-size: 13px;
}
#veganisme-app .veg-chip button {
    border: none;
    background: none;
    color: var(--hub-blue);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

/* ─── Grille des recettes ────────────────────────────────── */
#veganisme-app .veg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* ─── Sections (ressources / passages médias) ────────────── */
#veganisme-app .veg-sections { display: flex; flex-direction: column; gap: 16px; }
#veganisme-app .veg-section .hub-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
#veganisme-app .veg-sec-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}
#veganisme-app .veg-sec-file {
    display: inline-block;
    margin-top: 10px;
    color: var(--hub-blue);
    font-weight: 600;
}

/* ─── Listes d'administration (Paramètres) ───────────────── */
#veganisme-app .veg-hint {
    font-size: 13px;
    color: var(--hub-text-muted);
    margin: 0 0 10px;
}
#veganisme-app .veg-admin-list { display: flex; flex-direction: column; gap: 6px; }
#veganisme-app .veg-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
}
#veganisme-app .veg-admin-row.dragging { opacity: 0.5; }
#veganisme-app .veg-drag { cursor: grab; color: var(--hub-text-muted); font-size: 16px; }
#veganisme-app .veg-admin-label { flex: 1 1 auto; font-weight: 600; }
#veganisme-app .veg-admin-count { font-size: 12px; color: var(--hub-text-muted); }
#veganisme-app .veg-admin-row .btn { min-height: 30px; padding: 3px 10px; }

#veganisme-app .veg-admin-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
#veganisme-app .veg-admin-add input { flex: 1 1 auto; }

/* ─── Mots-clés (3 colonnes) ─────────────────────────────── */
#veganisme-app .veg-motcles-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
#veganisme-app .veg-motcles-cols h4 {
    margin: 0 0 8px;
    color: var(--hub-blue);
    font-size: 14px;
}
#veganisme-app .veg-mc-list {
    max-height: 220px;
    overflow-y: auto;
    gap: 4px;
}
#veganisme-app .veg-mc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    background: var(--hub-bg);
    border-radius: 6px;
    font-size: 13px;
}
#veganisme-app .veg-mc-item .btn {
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    #veganisme-app .veg-filters { flex-direction: column; align-items: stretch; }
    #veganisme-app .veg-filters .btn { width: 100%; }
    #veganisme-app .veg-grid { grid-template-columns: 1fr; }
    #veganisme-app .veg-admin-row { flex-wrap: wrap; }
    #veganisme-app .veg-admin-label { flex: 1 1 100%; }
}

/* ═══ RECETTES ═══════════════════════════════════════════ */

/* ─── Cartes ─────────────────────────────────────────────── */
#veganisme-app .veg-card {
    background: var(--hub-surface);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /*  (Éric, 15/07) : la carte est un <a> cliquable comme un GROS
        bouton — elle ne doit ni se souligner ni prendre la couleur
        « lien ». Le titre non plus (règle .veg-card-title ci-dessous). */
    text-decoration: none;
    color: inherit;
}
#veganisme-app .veg-card:hover { text-decoration: none; }
#veganisme-app .veg-card-img {
    height: 160px;
    background: var(--hub-bg);
    cursor: pointer;
    overflow: hidden;
}
#veganisme-app .veg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
}
#veganisme-app .veg-card-img:hover img { transform: scale(1.05); }
#veganisme-app .veg-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 40px;
    opacity: 0.4;
}
#veganisme-app .veg-card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
#veganisme-app .veg-card-title {
    font-weight: 600;
    color: var(--hub-blue);
    cursor: pointer;
}
#veganisme-app .veg-card-title:hover { text-decoration: none; }
#veganisme-app .veg-card-meta { font-size: 12px; color: var(--hub-text-muted); }
#veganisme-app .veg-card-actions { display: flex; gap: 6px; margin-top: 4px; }
#veganisme-app .veg-card-actions .btn { min-height: 30px; padding: 3px 10px; font-size: 12px; }

/* ─── Formulaire d'édition ───────────────────────────────── */
.veg-form { display: flex; flex-direction: column; gap: 10px; }
.veg-form label { font-weight: 600; font-size: 13px; color: var(--hub-blue); }
.veg-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.veg-form-row > div { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; }
.veg-form input[type="text"], .veg-form input[type="number"], .veg-form select { width: 100%; }
/* #veganisme-app label.veg-check (1,1,1) prime sur
   .hub-form-group label (0,1,1) du hub — sans !important (§7).
   (.veg-check seul conservé : la classe sert aussi en modale.) */
#veganisme-app label.veg-check, .veg-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    white-space: nowrap;
}

/* Ingrédients (édition) */
.veg-ings-edit { display: flex; flex-direction: column; gap: 4px; }
.veg-ing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--hub-bg);
    border-radius: 6px;
}
.veg-ing-row.dragging { opacity: 0.5; }
.veg-ing-txt { flex: 1 1 auto; font-size: 13px; }
.veg-ing-row .btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
/* Mots-clés cliquables */
.veg-motscles { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.veg-mc-groupe { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.veg-mc-titre { font-size: 11px; color: var(--hub-text-muted); width: 70px; flex: 0 0 auto; }
.veg-mc-btn {
    border: 1px solid var(--hub-bg-dark);
    background: var(--hub-surface);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.veg-mc-btn:hover { background: var(--hub-blue-pale); }

/* Photos : vignette des SECTIONS média (l'édition de la recette
   passe par HubPhotos, règle 8undecies — plus de CSS local). */
.veg-photo-item { position: relative; }
.veg-photo-item img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
}
.veg-photo-item .btn {
    position: absolute;
    top: -6px;
    right: -6px;
    min-height: 22px;
    padding: 0 6px;
    font-size: 11px;
    border-radius: 50%;
}

/* ─── Vue d'une recette ──────────────────────────────────── */
/* Photo principale à l'écran : ENTIÈRE et proportionnée (« cover »
   la rognait en haut et en bas et la zoomait exagérément). */
.veg-vue-photo {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: var(--hub-radius);
}
.veg-vue-meta { margin: 10px 0; }
.veg-vue-rendement {
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 10px 12px;
    margin: 12px 0;
}
.veg-vue-rendement input { width: 90px; }
.veg-vue-detail { color: var(--hub-text-muted); }
.veg-vue h3 { color: var(--hub-blue); margin: 14px 0 6px; font-size: 15px; }
.veg-vue-ings { margin: 0; padding-left: 20px; line-height: 1.7; }
.veg-ing-qte { font-weight: 700; color: var(--hub-blue); }
.veg-vue-prepa { line-height: 1.6; }
.veg-vue-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.veg-vue-photos figure { margin: 0; }
.veg-vue-photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; }
.veg-vue-photos figcaption { font-size: 11px; color: var(--hub-text-muted); text-align: center; }

/* ─── Export PDF (A4) ────────────────────────────────────── */
.veg-pdf {
    font-family: Arial, sans-serif;
    color: #222;
    width: 186mm;
    margin: 0;
    padding: 0;
    /* Hauteur utile d'une A4 (297 mm − 2 × 12 mm de marges). En faisant du
       conteneur une colonne flex de cette hauteur, on peut ANCRER le bloc
       photos en bas de page (margin-top:auto), comme le titre est en haut.
       Si la recette est plus longue, elle déborde normalement sur une 2e page. */
    display: flex;
    flex-direction: column;
    /* 260 mm et non 273 : html2canvas convertit en pixels et arrondit —
       viser la hauteur exacte faisait déborder de quelques pixels, ce qui
       créait une 2e page presque vide. */
    min-height: 260mm;
}
/* Le tout premier élément ne doit pas pousser le contenu vers le bas
   (html2canvas conserve les marges : d'où le grand blanc en haut de page). */
.veg-pdf > *:first-child { margin-top: 0; }
.veg-pdf-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 3px solid #174873;
    padding-bottom: 8px;
    margin: 0 0 12px 0;          /* aucune marge en haut */
}
.veg-pdf-entete img { width: 40px; height: 40px; object-fit: contain; }
.veg-pdf-entete h1 { margin: 0; font-size: 18px; color: #174873; }
.veg-pdf-sub { font-size: 10px; color: #666; }
/* Photo principale du PDF.
   ⚠ html2canvas ne respecte PAS « object-fit » : on ne peut donc ni
   recadrer ni redimensionner l'image par ce biais. On contraint sa
   HAUTEUR MAXIMALE et on la laisse choisir sa largeur : elle garde
   ainsi ses proportions d'origine, ENTIÈRE (rien n'est rogné), et
   reste compacte pour laisser la place à la recette. */
/* ─── Bandeau haut : infos+ingrédients À GAUCHE, photo À DROITE ───
   La photo seule laissait une large bande blanche à sa gauche et
   repoussait la recette en page 2. Objectif : une seule A4. */
.veg-pdf-haut {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}
.veg-pdf-infos {
    flex: 1 1 auto;          /* prend toute la place restante */
    min-width: 0;
    padding-right: 6mm;      /* remplace « gap », ignoré par html2canvas */
}
.veg-pdf-infos h2 { margin-top: 0; }

.veg-pdf-photo-wrap {
    flex: 0 0 auto;          /* la photo ne s'étire pas */
    margin: 0;
    text-align: center;
}
.veg-pdf-photo-wrap img {
    max-height: 50mm;        /* compact : la recette prime sur la photo */
    max-width: 70mm;
    width: auto;
    height: auto;            /* proportions d'origine préservées */
    display: block;
    border-radius: 2mm;
}

/* Ingrédients sur 2 colonnes quand la liste est longue (tenir en A4) */
.veg-pdf-ings-2col {
    column-count: 2;
    column-gap: 6mm;
}
.veg-pdf-ings-2col li { break-inside: avoid; page-break-inside: avoid; }

/* Préparation longue → 2 colonnes, comme un livre de cuisine */
.veg-pdf-2col {
    column-count: 2;
    column-gap: 8mm;
}
.veg-pdf-2col li,
.veg-pdf-2col p,
.veg-pdf-2col img { break-inside: avoid; page-break-inside: avoid; }
.veg-pdf-2col ol,
.veg-pdf-2col ul { margin-top: 0; }

/* Photos secondaires dans le PDF */
/* Bloc photos : poussé EN BAS de la page (le reste de la recette occupe
   l'espace disponible au-dessus). */
.veg-pdf-bas {
    margin-top: auto;        /* ← ancrage en bas */
    padding-top: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Vignettes calibrées pour 6 par ligne, quel que soit leur nombre
   (2 photos ont la même taille que 6).
   ⚠ NI « grid » NI « gap » ici : html2canvas ne les rend pas
   correctement (les vignettes partaient en escalier). On utilise des
   blocs en ligne à largeur fixe, que html2canvas gère fidèlement. */
.veg-pdf-photos {
    font-size: 0;            /* supprime l'espace entre inline-blocks */
    line-height: 0;
}
.veg-pdf-photos figure {
    display: inline-block;
    vertical-align: top;
    width: 28mm;             /* 6 × 28 mm + marges ≈ 186 mm (largeur utile) */
    margin: 0 2.4mm 2mm 0;
    break-inside: avoid;
    page-break-inside: avoid;
}
.veg-pdf-photos img {
    width: 100%;
    height: 26mm;            /* hauteur commune : la grille reste alignée */
    object-fit: cover;       /* recadrage : ce ne sont que des vignettes */
    display: block;
    border-radius: 1.5mm;
}
.veg-pdf-photos figcaption {
    font-size: 7px;
    color: #666;
    text-align: center;
    line-height: 1.2;
    margin-top: 1mm;
    overflow: hidden;
}
.veg-pdf-bas h2 { font-size: 13px; }
.veg-pdf-prepa { line-height: 1.45; }
.veg-pdf-prepa img {
    max-width: 100%;
    height: auto;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Aucun bloc du PDF ne doit être coupé en deux par un saut de page */
.veg-pdf-photo-wrap,
.veg-pdf-entete,
.veg-pdf h2,
.veg-pdf li,
.veg-pdf figure,
.veg-pdf img {
    break-inside: avoid;
    page-break-inside: avoid;
}
/* Un titre ne doit pas rester seul en bas de page */
.veg-pdf h2 { break-after: avoid; page-break-after: avoid; }
.veg-pdf h2 { font-size: 13px; color: #174873; margin: 8px 0 3px; }
.veg-pdf ul { margin: 0; padding-left: 16px; line-height: 1.45; }
.veg-pdf li { margin-bottom: 1px; }
.veg-pdf p  { margin: 4px 0; }
.veg-pdf img { max-width: 100%; }
/* Image insérée DANS la préparation (via HubRichEditor).
   Elle est réduite au FORMAT DES VIGNETTES du bas (28 mm) : insérée en
   pleine ligne au milieu des étapes, elle cassait le rythme de la liste
   et mangeait la moitié de la hauteur utile — c'est elle qui poussait une
   recette longue vers une 2e page. L'image reste GRANDE à l'écran :
   seul l'export PDF la réduit. */
.veg-pdf-prepa img {
    max-width: 28mm;
    max-height: 26mm;
    width: auto;
    height: auto;            /* proportions préservées */
    border-radius: 1.5mm;
    vertical-align: middle;
}

@media (max-width: 600px) {
    /* ⚠ En colonne, « flex: 1 1 130px » fait grandir les enfants sur l'axe
       VERTICAL : ils se partagent la hauteur du conteneur au lieu de rester
       compacts, d'où d'énormes vides entre les champs sur mobile.
       Il faut donc annuler la croissance. */
    .veg-form-row { flex-direction: column; }
    .veg-form-row > div { flex: 0 0 auto; }
}

/* ═══ OUTIL IMC / IMG (section Outil = imc) ══════════════ */
.veg-imc-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.veg-imc-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--hub-blue);
    margin-bottom: 3px;
}
.veg-imc-form input, .veg-imc-form select { width: 100%; }
.veg-imc-formule {
    font-size: 12px;
    color: var(--hub-text-muted);
    background: var(--hub-bg);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.veg-imc-resultats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.veg-imc-res {
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 12px;
    text-align: center;
}
.veg-imc-titre { font-size: 12px; color: var(--hub-text-muted); font-weight: 600; }
.veg-imc-valeur { font-size: 30px; font-weight: 700; line-height: 1.2; }
.veg-imc-interp { font-size: 13px; font-weight: 600; margin-top: 4px; }
.veg-imc-jauge {
    height: 8px;
    background: var(--hub-bg-dark);
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0;
}
.veg-imc-jauge-barre { height: 100%; transition: width 0.3s, background 0.3s; }
.veg-imc-baremes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.veg-imc-baremes h4 { color: var(--hub-blue); font-size: 13px; margin: 0 0 6px; }
.hub-table-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.hub-table-mini td, .hub-table-mini th {
    border: 1px solid var(--hub-bg-dark);
    padding: 4px 8px;
    text-align: left;
}
.hub-table-mini th { background: var(--hub-blue-pale); color: var(--hub-blue); }

/* ═══ SOUS-ONGLETS (Ressources / Passages médias) ════════ */
#veganisme-app .veg-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
#veganisme-app .veg-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--hub-bg-dark);
    border-radius: 18px;
    background: var(--hub-surface);
    color: var(--hub-blue);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
#veganisme-app .veg-subtab img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
}
#veganisme-app .veg-subtab:hover { background: var(--hub-blue-pale); }
#veganisme-app .veg-subtab.active {
    background: var(--hub-blue);
    color: #fff;
    border-color: var(--hub-blue);
}
#veganisme-app .veg-subtab.active:hover { background: var(--hub-blue-hover); }

/* ═══ MOTS-CLÉS : une couleur par catégorie ═════════════ */
.veg-mc-btn.mc-ingredient { background: #e8f5e9; border-color: #a5d6a7; color: #2e6b4f; }
.veg-mc-btn.mc-ingredient:hover { background: #c8e6c9; }
.veg-mc-btn.mc-verbe      { background: #e3f2fd; border-color: #90caf9; color: #174873; }
.veg-mc-btn.mc-verbe:hover { background: #bbdefb; }
.veg-mc-btn.mc-ustensile  { background: #fff3e0; border-color: #ffcc80; color: #8a5a2f; }
.veg-mc-btn.mc-ustensile:hover { background: #ffe0b2; }
.veg-mc-btn.mc-unite      { background: #f3e5f5; border-color: #ce93d8; color: #6a3d7a; }
.veg-mc-btn.mc-unite:hover { background: #e1bee7; }

/* ═══ Fichier joint d'une section ═══════════════════════ */
.veg-fichier-zone { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.veg-fichier-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    font-size: 13px;
}
.veg-fichier-item .btn { min-height: 24px; padding: 0 8px; font-size: 12px; }

/* ─── Pièce jointe d'une section ───────────────────────────
   Déposée par un ADMIN (donc fiable) : tout ce qui peut l'être est
   affiché directement dans la page — image, vidéo, audio, PDF —
   avec un bouton pour replier l'aperçu. */
#veganisme-app .veg-sec-pj {
    margin-top: 14px;
    border: 1px solid var(--hub-bg-dark);
    border-radius: var(--hub-radius);
    overflow: hidden;
}
#veganisme-app .veg-sec-pj-barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--hub-bg);
    flex-wrap: wrap;
}
#veganisme-app .veg-sec-pj-nom {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-blue);
    word-break: break-all;
}
#veganisme-app .veg-sec-pj-barre .btn {
    min-height: 28px;
    padding: 2px 10px;
    font-size: 12px;
}
#veganisme-app .veg-sec-pj-apercu {
    padding: 10px;
    background: var(--hub-surface);
}
#veganisme-app .veg-sec-pj-apercu.replie { display: none; }

#veganisme-app .veg-sec-pj-apercu video,
#veganisme-app .veg-sec-pj-apercu img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 6px;
}
#veganisme-app .veg-sec-pj-apercu video { background: #000; }
#veganisme-app .veg-sec-pj-apercu audio { width: 100%; }
#veganisme-app .veg-sec-pj-apercu iframe {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    border: none;
    border-radius: 6px;
}

@media (max-width: 600px) {
    #veganisme-app .veg-sec-pj-apercu iframe { height: 60vh; min-height: 300px; }
}

/* ══════════════════════════════════════════════════════════
   OUTILS INTERACTIFS — styles COMMUNS (préfixe .oi-)
   Utilisables par n'importe quel outil téléversé : un outil n'a
   donc pas besoin d'embarquer son propre CSS.
   ══════════════════════════════════════════════════════════ */
.oi-ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.oi-ligne label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--hub-blue);
    margin-bottom: 3px;
}
.oi-ligne input, .oi-ligne select { width: 100%; }
.oi-note {
    font-size: 12px;
    color: var(--hub-text-muted);
    margin-top: 12px;
    line-height: 1.5;
}
.oi-titre { color: var(--hub-blue); font-size: 15px; margin: 14px 0 6px; }

/* Résultat mis en avant */
.oi-resultat {
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 14px;
    text-align: center;
}
.oi-valeur { font-size: 30px; font-weight: 700; color: var(--hub-blue); line-height: 1.2; }
.oi-sous   { font-size: 13px; color: var(--hub-text-muted); }
.oi-equiv  { font-size: 13px; margin-top: 6px; }

/* Étiquettes (produits de saison…) */
.oi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oi-chip {
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--hub-blue-pale);
    color: var(--hub-blue);
    font-size: 13px;
}

/* Nutriments */
.oi-nutri-liste { display: flex; flex-direction: column; gap: 8px; }
.oi-nutri {
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 10px 12px;
    border-left: 4px solid var(--hub-blue);
}
.oi-nutri-alerte { border-left-color: var(--hub-danger); background: var(--hub-danger-bg); }
.oi-nutri-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.oi-nutri-nom  { font-weight: 700; color: var(--hub-blue); }
.oi-nutri-val  { font-weight: 700; }
.oi-nutri-src  { font-size: 13px; margin-top: 4px; }
.oi-nutri-note { font-size: 12px; color: var(--hub-text-muted); margin-top: 3px; }

/* Minuteurs */
.oi-timers { display: flex; flex-direction: column; gap: 8px; }
.oi-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 8px 12px;
}
.oi-timer-nom   { flex: 1 1 auto; font-weight: 600; }
.oi-timer-temps { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; min-width: 90px; text-align: right; }
.oi-timer-barre { flex: 0 0 120px; height: 6px; background: var(--hub-bg-dark); border-radius: 3px; overflow: hidden; }
.oi-timer-jauge { height: 100%; width: 100%; background: var(--hub-blue); transition: width 1s linear; }
.oi-timer .btn  { min-height: 28px; padding: 0 10px; }
.oi-timer-pause-on { opacity: 0.6; }
.oi-timer-fini {
    background: var(--hub-danger-bg);
    animation: oi-clignote 1s ease-in-out 3;
}
.oi-timer-fini .oi-timer-temps { color: var(--hub-danger); }
@keyframes oi-clignote { 50% { background: var(--hub-surface); } }

/* Saison : grille des 12 mois */
.oi-saison-fiche { background: var(--hub-bg); border-radius: var(--hub-radius); padding: 10px 12px; margin-bottom: 8px; }
.oi-saison-nom   { font-weight: 700; color: var(--hub-blue); margin-bottom: 6px; }
.oi-mois-grille  { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.oi-mois {
    text-align: center;
    font-size: 11px;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--hub-bg-dark);
    color: var(--hub-text-muted);
}
.oi-mois.actif { background: var(--hub-blue); color: #fff; font-weight: 600; }

/* Four */
.oi-four-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.oi-four-case {
    background: var(--hub-bg);
    border-radius: var(--hub-radius);
    padding: 12px;
    text-align: center;
}
.oi-four-case span  { display: block; font-size: 26px; font-weight: 700; color: var(--hub-blue); }
.oi-four-case small { font-size: 12px; color: var(--hub-text-muted); }
.oi-four-repere { margin-top: 12px; padding: 10px 12px; background: var(--hub-blue-pale); border-radius: var(--hub-radius); font-size: 14px; }

@media (max-width: 600px) {
    .oi-mois-grille { grid-template-columns: repeat(6, 1fr); }
    .oi-timer { flex-wrap: wrap; }
    .oi-timer-barre { flex: 1 1 100%; order: 3; }
}

/* P2 (12/07/2026) : carte recette cliquable, actions en bas à droite. */
#veganisme-app .veg-card-cliquable { cursor: pointer; }
#veganisme-app .veg-card-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 4px; }

/* P5/P6 (12/07/2026) : lignes admin sections — badge outil à droite,
   ligne cliquable (fiche lecture). */
#veganisme-app .veg-sec-row { cursor: pointer; }
#veganisme-app .veg-sec-row:hover { background: var(--hub-bg-dark, #eef2f5); }
#veganisme-app .veg-badge-outil { margin-left: auto; flex: 0 0 auto; }
#veganisme-app .veg-admin-row .hub-btn-icon { flex: 0 0 auto; }
#veganisme-app .veg-outil-row { cursor: pointer; }
#veganisme-app .veg-outil-row:hover { background: var(--hub-bg-dark, #eef2f5); }

/* ─── Ingrédients : facultatif + substitution (13/07/2026) ─── */
.veg-ing-row .veg-ing-fac {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.82rem; color: var(--text-secondary, #555);
    white-space: nowrap; margin-left: auto;
}
.veg-ing-row .veg-ing-sub {
    max-width: 160px; font-size: 0.82rem; padding: 2px 6px;
}
.veg-ing-suffixe { color: var(--text-secondary, #666); font-style: italic; }

/* ─── Anciennes recettes PDF (transition prod, 15/07/2026) ────── */
#veganisme-app a.veg-card-pdf {
    text-decoration: none;
    color: inherit;              /* .veg-card fournit déjà flex column */
}
#veganisme-app .veg-admin-mc {
    font-size: 11px;
    color: var(--hub-text-soft, #777);
    font-weight: normal;
}

/* ─── 16/07/2026 (Éric) — popup ingrédient dédié : paires
   quantité/unité (principale puis équivalence) côte à côte. */
.veg-ing-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.veg-ing-equiv { color: var(--hub-text-soft, #5a6b7a); }