/* ===================================================
   MySo NFT Certificate AGEC — CSS Front
   Charte MySongOriginal 3.0
   Forest #3d5a3d | Sage #7d9a78 | Terracotta #c67b5c
   Cream #faf8f5 | Sand #e8e2d9
   Cormorant Garamond + Outfit
   =================================================== */

/* ===== BADGE FICHE PRODUIT ===== */
.myso-nft-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: #faf8f5;
    border: 1.5px solid #e8e2d9;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
    margin: 0.6rem 0;
    user-select: none;
}
.myso-nft-badge:hover {
    border-color: #7d9a78;
    box-shadow: 0 3px 12px rgba(61,90,61,0.12);
    transform: translateY(-1px);
}
.myso-nft-badge:active { transform: translateY(0); }
.myso-nft-badge-icon { font-size: 1.15rem; line-height: 1; }
.myso-nft-badge-score {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.myso-nft-badge-text { font-size: 0.84rem; color: #2d3029; line-height: 1.3; }
.myso-nft-badge-text small { display: block; color: #7d9a78; font-size: 0.72rem; }
.myso-nft-badge-arrow { color: #7d9a78; font-size: 1rem; margin-left: 0.25rem; transition: transform 0.2s; }
.myso-nft-badge:hover .myso-nft-badge-arrow { transform: translateX(3px); }

/* ===== MODALE OVERLAY ===== */
.myso-nft-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 31, 22, 0.6); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: mysoFadeIn 0.2s ease;
}
@keyframes mysoFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== MODALE CONTENU ===== */
.myso-nft-modal {
    background: #fff; border-radius: 16px; max-width: 520px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: mysoSlideUp 0.25s ease;
    font-family: 'Outfit', sans-serif;
}
@keyframes mysoSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Header */
.myso-nft-modal-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #3d5a3d, #2a4030);
    border-radius: 16px 16px 0 0;
    position: relative;
}
.myso-nft-modal-header-left { display: flex; align-items: center; gap: 0.6rem; flex: 1; }
.myso-nft-modal-logo { font-size: 1.5rem; line-height: 1; }
.myso-nft-modal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; font-weight: 600; color: #faf8f5; margin: 0; line-height: 1.2; }
.myso-nft-modal-subtitle { font-size: 0.75rem; color: #a0b89b; margin: 0.15rem 0 0 0; }
.myso-nft-modal-grade {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); flex-shrink: 0;
}
.myso-nft-modal-close {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: none; border: none; color: #a0b89b;
    font-size: 1.5rem; cursor: pointer; line-height: 1;
    padding: 0.25rem; transition: color 0.2s;
}
.myso-nft-modal-close:hover { color: #fff; }

/* Body */
.myso-nft-modal-body { padding: 1.25rem 1.5rem; }
.myso-nft-modal-intro { font-size: 0.85rem; color: #555; margin: 0 0 1.25rem 0; line-height: 1.5; }

/* Sections */
.myso-nft-modal-section { margin-bottom: 1.25rem; }
.myso-nft-modal-section-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1rem; color: #3d5a3d; margin: 0 0 0.75rem 0; }

/* Data rows (traçabilité) */
.myso-nft-modal-data { display: flex; flex-direction: column; gap: 0.4rem; }
.myso-nft-modal-data-row { display: flex; gap: 0.5rem; font-size: 0.85rem; }
.myso-nft-modal-data-key { min-width: 110px; color: #888; flex-shrink: 0; }
.myso-nft-modal-data-val { color: #2d3029; font-weight: 500; }

/* Score rows (indicateurs AGEC) */
.myso-nft-modal-score-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid #f0ede6;
}
.myso-nft-modal-score-row:last-child { border-bottom: none; }
.myso-nft-modal-score-left { flex: 1; }
.myso-nft-modal-score-name { font-size: 0.85rem; color: #2d3029; font-weight: 500; }
.myso-nft-modal-score-detail { display: block; font-size: 0.75rem; color: #888; margin-top: 0.1rem; }
.myso-nft-modal-score-bar { display: flex; gap: 4px; }
.myso-nft-modal-score-pip {
    width: 28px; height: 24px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600;
    background: #f0ede6; color: #bbb;
}
.myso-nft-modal-score-pip.active { box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.myso-nft-modal-score-nc { font-size: 0.75rem; color: #b4b2a9; font-weight: 500; }

/* Éligibilité */
.myso-nft-modal-elig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.myso-nft-modal-elig-item {
    background: #faf8f5; border: 1px solid #e8e2d9; border-radius: 8px;
    padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #3d5a3d; text-align: center;
}

/* Footer */
.myso-nft-modal-footer {
    padding: 1rem 1.5rem; background: #faf8f5;
    border-radius: 0 0 16px 16px; border-top: 1px solid #e8e2d9;
}
.myso-nft-modal-footer p { font-size: 0.72rem; color: #888; margin: 0; line-height: 1.5; }

/* ===== ONGLET CERTIFICAT DANS FICHE PRODUIT ===== */
.myso-nft-cert-card {
    border: 1.5px solid #e8e2d9; border-radius: 12px; overflow: hidden;
    font-family: 'Outfit', sans-serif; max-width: 500px; margin: 1rem 0;
}
.myso-nft-cert-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #3d5a3d, #2a4030);
    color: #faf8f5; font-weight: 600; font-size: 0.9rem;
}
.myso-nft-cert-grade {
    padding: 0.3rem 0.75rem; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; color: #fff;
}
.myso-nft-cert-body { padding: 1rem 1.25rem; }
.myso-nft-cert-row {
    display: flex; justify-content: space-between; padding: 0.3rem 0;
    font-size: 0.85rem; border-bottom: 1px solid #f5f3f0;
}
.myso-nft-cert-row:last-of-type { border-bottom: none; }
.myso-nft-cert-val { font-weight: 500; color: #2d3029; text-align: right; }
.myso-nft-cert-score-row {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0;
}
.myso-nft-cert-score-label { flex: 1; font-size: 0.88rem; color: #2d3029; }
.myso-nft-cert-score-grade {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.myso-nft-cert-footer {
    padding: 0.75rem 1.25rem; background: #faf8f5;
    border-top: 1px solid #e8e2d9;
}
.myso-nft-cert-footer small { color: #7d9a78; font-size: 0.72rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 540px) {
    .myso-nft-modal { max-width: 100%; max-height: 95vh; border-radius: 12px; }
    .myso-nft-modal-header { padding: 1rem; border-radius: 12px 12px 0 0; }
    .myso-nft-modal-body { padding: 1rem; }
    .myso-nft-modal-footer { padding: 0.75rem 1rem; border-radius: 0 0 12px 12px; }
    .myso-nft-modal-data-key { min-width: 90px; }
    .myso-nft-modal-score-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .myso-nft-modal-elig-grid { grid-template-columns: 1fr; }
    .myso-nft-cert-row { flex-direction: column; gap: 0.15rem; }
    .myso-nft-cert-val { text-align: left; }
}

/* v1.3.0 — Alert boxes in modal */
.myso-nft-modal-alert { background: #fff8f0; border: 1px solid #f0d9c0; border-radius: 8px; padding: 8px 12px; font-size: 0.8rem; color: #8b5e3c; margin: 6px 0; line-height: 1.4; }
.myso-nft-modal-ecobalyse { background: linear-gradient(135deg, #f0f7f0, #e8f2e8); border: 1px solid #c8dcc4; border-radius: 10px; padding: 14px; }

/* v1.3.0 — Section labels in product tab */
.myso-nft-cert-section-label { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: #3d5a3d; font-size: 0.95rem; margin: 0.5rem 0 0.4rem; }