/* =========================================================================
   Badge Apogée / fenêtre de dégustation (Phase 2a)
   Charte native : Montserrat (héritée), tokens de couleur et de taille du
   thème, radius 8px.
   Réutilisé sur la fiche produit et dans "Ma cave" (Phase 3).
   ========================================================================= */

.dvpp-apogee {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 9px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-grey);
    background: var(--color-white);
    font-size: var(--fs-text);
    line-height: 1.3;
    color: var(--color-black);
}

.dvpp-apogee-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--color-dark-grey);
}

.dvpp-apogee-status {
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--fs-text-phone);
}

.dvpp-apogee-window {
    font-weight: var(--fw-medium);
}

.dvpp-apogee-mill {
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    font-size: var(--fs-text-phone);
}

.dvpp-apogee-mill::before {
    content: "·";
    margin-right: 9px;
    color: var(--color-grey);
}

/* ---- États ---- */
.dvpp-apogee-apogee {
    border-color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 12%, var(--color-white));
}
.dvpp-apogee-apogee .dvpp-apogee-dot { background: var(--color-green); }
.dvpp-apogee-apogee .dvpp-apogee-status { color: var(--color-green); }

.dvpp-apogee-ouverture,
.dvpp-apogee-jeune {
    border-color: var(--color-yellow);
    background: color-mix(in srgb, var(--color-yellow) 22%, var(--color-white));
}
.dvpp-apogee-ouverture .dvpp-apogee-dot,
.dvpp-apogee-jeune .dvpp-apogee-dot { background: var(--color-yellow); }

.dvpp-apogee-tardif {
    border-color: var(--color-dark-grey);
    background: var(--color-grey);
}
.dvpp-apogee-tardif .dvpp-apogee-dot { background: var(--color-dark-grey); }

/* ---- Emplacement fiche produit ---- */
.produit-apogee {
    margin-top: 16px;
}

@media (max-width: 640px) {
    .dvpp-apogee { font-size: var(--fs-text-phone); }
}

/* =========================================================================
   Variante "ligne" — utilisée en cave.
   Vingt bouteilles à la suite, c'est vingt encadrés colorés : plus rien ne
   ressort. On garde l'information, on retire le cadre, et le sablier dit d'un
   coup d'œil où en est la fenêtre. La couleur ne tient plus qu'au trait.
   ========================================================================= */

.dvpp-apogee--line {
    padding: 0;
    gap: 7px;
    border: none;
    background: none;
    font-size: var(--fs-text-phone);
}

.dvpp-apogee-ico {
    flex: 0 0 auto;
}

.dvpp-apogee--line .dvpp-apogee-status {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
}

.dvpp-apogee--line .dvpp-apogee-window {
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
}

/* Couleurs d'état : portées par le texte et le sablier, plus par un aplat. */
.dvpp-apogee--line.dvpp-apogee-apogee { color: #2F7A4E; }
.dvpp-apogee--line.dvpp-apogee-jeune,
.dvpp-apogee--line.dvpp-apogee-ouverture { color: #8A6D1F; }
.dvpp-apogee--line.dvpp-apogee-tardif { color: #8A5B00; }

.dvpp-apogee--line .dvpp-apogee-dot { display: none; }

/*
 * Une seule bouteille doit sauter aux yeux : celle qu'on peut ouvrir ce soir.
 * Le vert plein revient donc, mais uniquement sur « À boire maintenant » - les
 * trois autres états gardent leur ligne sobre, sans quoi tout crierait à
 * nouveau et plus rien ne ressortirait.
 */
.dvpp-apogee--line.dvpp-apogee-apogee .dvpp-apogee-status {
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-green) 17%, var(--color-white));
    color: #2F7A4E;
    font-weight: var(--fw-bold);
}