/* ═══════════════════════════════════════════════════════════════════════
   CARTE INGRÉDIENT v4 — résumé « signal-first » (PHASE DE TEST)

   Activation : result.php?cards=v4 (admin uniquement).
   Ce fichier est chargé EN PLUS de ingredient_card_base + v3 et ne
   style QUE les éléments ing4-* rendus par la branche $cardV4 de
   _result_ingredient_card2.php. Le corps de la carte (onglets,
   magazine, KPI) reste entièrement stylé par base/v3 — inchangé.

   Contrat visuel (identique à toutes les largeurs, AUCUN media query
   sur le résumé — rien ne bouge, jamais) :

       [badge]  NOM DE L'INGRÉDIENT                    [chevron]
                rôles · rôles
                [chips de signal]        ← seulement si signal

   Le badge de position porte le niveau de sécurité par sa FORME
   (bouclier / triangle / octogone / cercle) ET sa couleur : double
   codage, lisible par les daltoniens. Masques SVG → la couleur reste
   pilotée par les tokens de cosmelyse2.css. Zéro couleur en dur :
   les fonds translucides passent par color-mix().
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Racine : liseré gauche par niveau ──────────────────────────── */

.ing-v4 {
    border-left: 4px solid var(--primary-green);
}
.ing-v4.ingredient-card--watch   { border-left-color: var(--warn-orange); }
.ing-v4.ingredient-card--avoid   { border-left-color: var(--danger-red);  }
.ing-v4.ingredient-card--unrated { border-left-color: var(--text-hint);   }


/* ── 2. Résumé : grille rigide 2 lignes ────────────────────────────── */

.ing4-head {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "pos   id    chev"
        "chips chips chips";
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    min-height: 56px;               /* cible tactile */
    -webkit-tap-highlight-color: transparent;
}
.ing4-head::marker,
.ing4-head::-webkit-details-marker { display: none; content: none; }
.ing4-head:focus-visible {
    outline: 2px solid var(--dark-pink);
    outline-offset: -2px;
    border-radius: 12px;
}


/* ── 3. Badge de position : la forme = le niveau ───────────────────── */

.ing4-head__pos {
    grid-area: pos;
    width: 32px;
    height: 32px;
    background: var(--primary-green);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    display: grid;
    place-items: center;
    /* Bouclier (défaut = sûr) */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1 L21 4.5 V11 C21 17.2 17.2 21.6 12 23 C6.8 21.6 3 17.2 3 11 V4.5 Z"/></svg>') center / contain no-repeat;
    mask:         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1 L21 4.5 V11 C21 17.2 17.2 21.6 12 23 C6.8 21.6 3 17.2 3 11 V4.5 Z"/></svg>') center / contain no-repeat;
    padding-bottom: 3px;            /* recentre le n° (pointe basse) */
}

/* Triangle (prudence) — le n° descend dans la base */
.ingredient-card--watch .ing4-head__pos {
    background: var(--warn-orange);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 L23 21 H1 Z" stroke="black" stroke-width="3" stroke-linejoin="round" fill="black"/></svg>');
    mask-image:         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 L23 21 H1 Z" stroke="black" stroke-width="3" stroke-linejoin="round" fill="black"/></svg>');
    padding-bottom: 0;
    padding-top: 8px;
    font-size: 0.66rem;
}

/* Octogone (à éviter / signal fort) */
.ingredient-card--avoid .ing4-head__pos {
    background: var(--danger-red);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 1 H16.5 L23 7.5 V16.5 L16.5 23 H7.5 L1 16.5 V7.5 Z"/></svg>');
    mask-image:         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 1 H16.5 L23 7.5 V16.5 L16.5 23 H7.5 L1 16.5 V7.5 Z"/></svg>');
    padding-bottom: 0;
}

/* Cercle (non évalué / fiche en cours) */
.ingredient-card--unrated .ing4-head__pos {
    background: var(--text-hint);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11"/></svg>');
    mask-image:         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11"/></svg>');
    padding-bottom: 0;
}


/* ── 4. Identité : nom puis rôles, empilés, ellipse si étroit ──────── */

.ing4-head__id {
    grid-area: id;
    min-width: 0;
}
.ing4-head__name {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ing4-head__roles {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.05rem;
}


/* ── 5. Chevron ────────────────────────────────────────────────────── */

.ing4-head__chev {
    grid-area: chev;
    color: var(--text-hint);
    transition: transform 0.2s ease;
}
.ing-v4[open] .ing4-head__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .ing4-head__chev { transition: none; }
}


/* ── 6. Chips de signal : ligne 2, uniquement si non neutre ────────── */

.ing4-head__chips {
    grid-area: chips;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.ing4-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 500;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ing4-chip--watch {
    background: color-mix(in srgb, var(--warn-orange) 13%, transparent);
    color: var(--dark-gold);
}
.ing4-chip--avoid {
    background: color-mix(in srgb, var(--danger-red) 12%, transparent);
    color: var(--danger-red);
}
.ing4-chip--neutral {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-secondary);
}


/* ── 7. Axes compacts : le neutre complet, sous le pli ─────────────── */
/* Rendu en tête du body v4, au-dessus des onglets base/v3.            */

.ing4-axes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.ing4-axes__item {
    background: color-mix(in srgb, var(--sand-light) 45%, transparent);
    border-radius: 8px;
    padding: 0.45rem 0.3rem;
    text-align: center;
}
.ing4-axes__val {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
}
.ing4-axes__val::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.3rem;
    background: var(--text-hint);
    vertical-align: 1px;
}
.ing4-axes__item--good  .ing4-axes__val::before { background: var(--primary-green); }
.ing4-axes__item--watch .ing4-axes__val::before { background: var(--warn-orange);   }
.ing4-axes__item--avoid .ing4-axes__val::before { background: var(--danger-red);    }
.ing4-axes__lbl {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* Seuil canonique uniquement (768) : 6 axes → grille 3×2 */
@media (max-width: 767.98px) {
    .ing4-axes { grid-template-columns: repeat(3, 1fr); }
}