/* NewKeys — Étiquette Énergie
   Marque Univers Restau : navy #002136, vert #4D6A63, orange #FAA633 */

.nkel-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    line-height: 1;
}

.nkel-ctx-list,
.nkel-ctx-product {
    margin-top: 6px;
}

/* --- Badge (flèche + échelle) --- */
.nkel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nkel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 12px 0 8px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #002136;
    -webkit-clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

/* Petite échelle A↑G à droite de la flèche */
.nkel-scale {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.9;
    font-family: Inter, Arial, sans-serif;
    font-weight: 700;
    font-size: 8px;
    color: #002136;
    border: 1px solid #002136;
    border-radius: 3px;
    padding: 2px 3px;
    background: #fff;
}
.nkel-scale-arrow { font-size: 9px; }

/* --- Bouton info "i" --- */
.nkel-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #4D6A63;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.nkel-info:hover { background: #002136; }
.nkel-info:focus { outline: 2px solid #FAA633; outline-offset: 1px; }

/* --- Couleurs officielles de l'échelle UE (A→G) --- */
.nkel-A .nkel-arrow, .nkel-gauge-bar.nkel-A { background: #00A651; color: #fff; }
.nkel-B .nkel-arrow, .nkel-gauge-bar.nkel-B { background: #50B848; color: #fff; }
.nkel-C .nkel-arrow, .nkel-gauge-bar.nkel-C { background: #BFD730; color: #1a1a1a; }
.nkel-D .nkel-arrow, .nkel-gauge-bar.nkel-D { background: #FFF200; color: #1a1a1a; }
.nkel-E .nkel-arrow, .nkel-gauge-bar.nkel-E { background: #FCB814; color: #1a1a1a; }
.nkel-F .nkel-arrow, .nkel-gauge-bar.nkel-F { background: #F3701B; color: #fff; }
.nkel-G .nkel-arrow, .nkel-gauge-bar.nkel-G { background: #ED1C24; color: #fff; }

/* --- Popin / modal --- */
.nkel-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.nkel-modal.is-open { display: block; }

.nkel-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 33, 54, 0.55);
}

.nkel-modal-dialog {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 520px;
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 33, 54, 0.35);
    padding: 26px 24px 24px;
    font-family: Inter, Arial, sans-serif;
    color: #002136;
    animation: nkel-pop .18s ease;
}
@keyframes nkel-pop {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.nkel-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #4D6A63;
    cursor: pointer;
}
.nkel-modal-close:hover { color: #002136; }

.nkel-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 30px 18px 0;
}
.nkel-modal-eu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #003399;
    color: #fff;
    padding: 5px 9px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: .5px;
    flex: 0 0 auto;
}
.nkel-modal-eu-stars { color: #FFCC00; font-size: 9px; line-height: 1; }
.nkel-modal-eu-text { font-size: 13px; }
.nkel-modal-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #002136;
}

/* --- Jauge officielle A→G --- */
.nkel-gauge {
    margin-bottom: 18px;
}
.nkel-gauge-row {
    display: flex;
    align-items: center;
    height: 34px;
}
.nkel-gauge-bars {
    flex: 0 0 74%;
    max-width: 74%;
}
.nkel-gauge-bar {
    display: flex;
    align-items: center;
    height: 26px;
    padding-left: 12px;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
    font-size: 15px;
    -webkit-clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.nkel-gauge-mark {
    flex: 0 0 26%;
    max-width: 26%;
    position: relative;
    height: 34px;
}
/* Pointeur noir façon étiquette UE, pointant vers l'échelle */
.nkel-gauge-pointer {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 52px;
    height: 30px;
    padding: 0 12px 0 20px;
    background: #1a1a1a;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
    font-size: 17px;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 22% 100%, 0 50%, 22% 0);
    clip-path: polygon(100% 0, 100% 100%, 22% 100%, 0 50%, 22% 0);
}
.nkel-gauge-row.is-active .nkel-gauge-bar { box-shadow: 0 0 0 2px rgba(26,26,26,.15) inset; }

.nkel-modal-body {
    font-size: 14px;
    line-height: 1.55;
    color: #2b3a42;
    white-space: pre-line;
}

@media (max-width: 480px) {
    .nkel-modal-dialog { margin-top: 5vh; padding: 22px 18px; }
    .nkel-gauge-row { height: 30px; }
    .nkel-gauge-bar { height: 23px; font-size: 13px; }
    .nkel-gauge-pointer { min-width: 42px; height: 26px; font-size: 15px; }
}