/* =========================================================================
   Parrainage - alignement du plugin GENS sur la charte (boîtes vertes -> cartes)
   ========================================================================= */
.parrainage-compte {
    width: 75%;
    padding: 5% 8% 60px !important;
    align-items: stretch !important;
    row-gap: 26px !important;
}
.parrainage-compte .gens-refer-a-friend {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.parrainage-compte .gens-refer-a-friend--share-text {
    text-align: left;
}
.parrainage-compte .gens-refer-a-friend--share-text h1,
.parrainage-compte .gens-refer-a-friend--share-text h2,
.parrainage-compte .gens-refer-a-friend--share-text h3 {
    font-size: var(--fs-title) !important;
    color: var(--color-black) !important;
    font-weight: var(--fw-bold) !important;
    margin-bottom: 10px !important;
}
.parrainage-compte .gens-refer-a-friend--share-text p {
    font-size: var(--fs-text) !important;
    color: var(--color-dark-grey) !important;
    line-height: 1.55 !important;
}
/* Le bouton « copier » : c'est .gens-ctc que le script du plugin écoute, mais
   le markup est désormais le nôtre (wpgens-raf/parts/link.php), donc un vrai
   bouton libellé plutôt qu'un carré d'icône rattrapé après coup. */
.parrainage-compte .gens-ctc {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--color-light-black);
    color: var(--color-white);
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .18s ease, background .18s ease;
}
.parrainage-compte .gens-ctc:hover { opacity: .88; }
/* Le plugin remplace le texte par data-text une fois copié. */
.parrainage-compte .gens-ctc.gens-copied,
.parrainage-compte .gens-ctc.copied {
    background: #2F7A4E;
}

/* Le bloc de partage, sous le lien : un intertitre discret puis les boutons. */
.parrainage-compte .gens-referral_share {
    margin-top: 22px !important;
    padding-top: 20px !important;
    border-top: 1px solid #F0F0F2 !important;
}
.parrainage-compte .gens-referral_share::before {
    content: "Partager directement";
    flex: 1 0 100%;
    margin-bottom: 2px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-dark-grey);
}

/* Boutons de partage -> charte (blancs bordés, accent doré au survol) */
.parrainage-compte .gens-referral_share {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 8px !important;
}
.parrainage-compte .gens-referral_share > a {
    flex: 1 1 160px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-weight: var(--fw-bold) !important;
    font-size: var(--fs-text) !important;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04) !important;
    transition: border-color .18s ease, background .18s ease !important;
}
.parrainage-compte .gens-referral_share > a:hover {
    border-color: var(--color-yellow) !important;
    background: #FCFAF3 !important;
}
.parrainage-compte .gens-referral_share > a i { font-size: 18px !important; }
/* Pinterest retiré + doublon WhatsApp retiré */
.parrainage-compte .gens-referral_share__wa,
.parrainage-compte .gens-referral_share__pin { display: none !important; }
/* Bouton Instagram custom (injecté en JS) : icône contour, même style que WhatsApp. */
.parrainage-compte .dvpp-ig-share .dvpp-ig-ico { display: inline-flex; line-height: 0; }
.parrainage-compte .dvpp-ig-share .dvpp-ig-ico svg { width: 20px; height: 20px; display: block; }
.parrainage-compte .dvpp-ig-share.is-copied {
    border-color: var(--color-green) !important;
    background: color-mix(in srgb, var(--color-green) 12%, #fff) !important;
    color: #2F7A4E !important;
}

/* --- La page parrainage : ce que ça rapporte, comment ça marche, le lien ---
   Même langage que le reste du compte : cartes blanches, bord #E5E7EB,
   radius 12, eyebrow doré foncé, pastilles dorées. Le doré ne porte jamais de
   texte (1,27:1 sur blanc) : il remplit les pastilles, le noir écrit. */

.dvpp-parrain-gains {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.dvpp-parrain-gain {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.dvpp-parrain-gain-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-yellow) 34%, #fff);
    color: #6E5A2A;
}
.dvpp-parrain-gain-txt { display: flex; flex-direction: column; min-width: 0; }
.dvpp-parrain-montant {
    font-size: calc(var(--fs-title) - 2px);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--color-black);
}
.dvpp-parrain-qui {
    margin-top: 2px;
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    color: var(--color-black);
}
.dvpp-parrain-quand {
    margin-top: 6px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    line-height: 1.45;
    color: var(--color-dark-grey);
}

.dvpp-parrain-bloc {
    padding: 26px 28px;
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.dvpp-parrain-titre {
    margin: 0 0 20px;
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}

/* Les trois étapes : le numéro dans une pastille noire, comme le pas-à-pas de
   l'inscription, l'icône à côté, le libellé dessous. */
.dvpp-parrain-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.dvpp-parrain-etape {
    display: grid;
    grid-template-columns: 28px auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 4px 12px;
}
.dvpp-parrain-etape-num {
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-light-black);
    color: var(--color-white);
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
}
.dvpp-parrain-etape-ico { grid-row: 1; color: #6E5A2A; display: inline-flex; }
.dvpp-parrain-etape-titre {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}
.dvpp-parrain-etape-sous {
    grid-column: 1 / -1;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--color-dark-grey);
}

.dvpp-parrain-bonus {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--color-yellow);
    background: color-mix(in srgb, var(--color-yellow) 12%, #fff);
    border-radius: 0 8px 8px 0;
    font-size: var(--fs-text);
    line-height: 1.5;
    color: var(--color-black);
}
.dvpp-parrain-bonus-pastille { flex: none; display: inline-flex; color: #6E5A2A; }

/* Le lien : un champ qu'on peut lire en entier, et un bouton qui le copie. */
.dvpp-parrain-url + .dvpp-parrain-url { margin-top: 18px; }
.dvpp-parrain-url-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-dark-grey);
}
.dvpp-parrain-url-row { display: flex; gap: 10px; align-items: stretch; }
.dvpp-parrain-url-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #D9DBE1;
    border-radius: 8px;
    background: #FAFAFB;
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--color-black);
    text-overflow: ellipsis;
}
.dvpp-parrain-url-input:focus {
    outline: none;
    border-color: var(--color-light-black);
    background: var(--color-white);
}
.dvpp-parrain-url-input--code {
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    max-width: 260px;
}

.dvpp-parrain-reglement {
    margin: 0;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--color-dark-grey);
}

@media (max-width: 780px) {
    .dvpp-parrain-gains { grid-template-columns: 1fr; }
    .dvpp-parrain-etapes { grid-template-columns: 1fr; gap: 18px; }
    .dvpp-parrain-etape { grid-template-columns: 28px auto 1fr; }
    .dvpp-parrain-etape-titre { grid-column: 2 / -1; margin-top: 0; }
    .dvpp-parrain-etape-sous { grid-column: 2 / -1; }
    .dvpp-parrain-bloc { padding: 20px 18px; }
    .dvpp-parrain-url-row { flex-wrap: wrap; }
    .parrainage-compte .gens-ctc { width: 100%; justify-content: center; }
    .dvpp-parrain-url-input--code { max-width: none; }
}

/* =========================================================================
   Système "espace compte" - charte reprise des e-mails de confirmation
   (fond blanc, cartes bord fin #E5E7EB radius 12, eyebrow doré, pastilles).
   ========================================================================= */

.dvpp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A7220; /* doré foncé lisible sur blanc (dérivé de --color-yellow) */
}

.dvpp-account-head {
    margin-bottom: 26px;
}
.dvpp-account-title {
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    margin-top: 6px;
}

.dvpp-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 34px;
    border: 1px dashed var(--color-grey);
    border-radius: 12px;
    color: var(--color-dark-grey);
    font-size: var(--fs-text);
}

/* ---- Pastilles d'état (réutilisables) ---- */
.dvpp-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--fw-bold);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}
.dvpp-pill-ok      { color: #2F7A4E; background: color-mix(in srgb, var(--color-green) 15%, #fff); border-color: color-mix(in srgb, var(--color-green) 45%, #fff); }
.dvpp-pill-warn    { color: #8A6516; background: color-mix(in srgb, var(--color-yellow) 34%, #fff); border-color: var(--color-yellow); }
.dvpp-pill-gap     { color: #9A4A3E; background: #F6ECEA; border-color: #E7C9C3; }
.dvpp-pill-neutral { color: var(--color-dark-grey); background: var(--color-grey); border-color: var(--color-grey); }

/* ---- Commandes en cartes ---- */
/* Conteneur bloc identique à .dvpp-cave : annule le display:flex + justify-content
   hérité de l'ancien .compte-contentCommandes (tableau) qui décalait la grille. */
.compte-contentCommandes.dvpp-account {
    display: block;
    width: 75%;
    padding: 6% 8% 60px;
    margin: 0;
    justify-content: initial;
}
/* Barre tri/filtre par date */
.dvpp-orders-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 18px;
}
.dvpp-orders-years { display: flex; flex-wrap: wrap; gap: 8px; }
.dvpp-orders-total-lab { font-size: var(--fs-text); color: var(--color-dark-grey); }
/* Un filtre est un outil, pas un titre : il se tient sous le contenu qu'il trie. */
.dvpp-ordf {
    font-family: inherit;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    background: var(--color-white);
    border: 1px solid #ECEDF2;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.dvpp-ordf:hover { border-color: #D8DAE0; color: var(--color-black); }
.dvpp-ordf.is-active {
    background: var(--color-grey);
    border-color: #D8DAE0;
    color: var(--color-black);
    font-weight: var(--fw-medium);
}
.dvpp-orders-sort {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-dark-grey);
    background: var(--color-white);
    border: 1px solid #ECEDF2;
    border-radius: 8px;
    padding: 6px 13px;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.dvpp-orders-sort:hover { border-color: #D8DAE0; color: var(--color-black); }
.dvpp-orders-sort-ico { font-size: 15px; line-height: 1; }
.dvpp-orders-count {
    font-size: var(--fs-text);
    color: var(--color-dark-grey);
    margin: -6px 0 16px;
}
.dvpp-orders-count[hidden] { display: none; }

/*
 * Un bloc par mois, une commande par ligne. En trois colonnes, l'oeil devait
 * balayer en zigzag pour suivre les dates ; en colonne unique il descend le
 * temps, et le titre de mois lui dit où il en est.
 */
.dvpp-orders {
    display: flex;
    flex-direction: column;
    gap: 38px;
}

.dvpp-ordgroup {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Un mois replié ne garde que son titre : l'écart du bloc suivant suffit. */
.dvpp-ordgroup:not([open]) { gap: 0; }

/*
 * Le mois et le numéro de commande se ressemblaient trait pour trait : même
 * taille, même graisse, même encre. Le mois change donc de registre - petites
 * capitales grises, comme une intercalaire - et cesse de rivaliser avec le
 * contenu qu'il annonce.
 */
.dvpp-ordgroup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ECEDF2;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--color-dark-grey);
    cursor: pointer;
    list-style: none;
    transition: color .16s ease;
}

.dvpp-ordgroup-title::-webkit-details-marker { display: none; }
.dvpp-ordgroup-title:hover { color: var(--color-black); }

.dvpp-ordgroup-title:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Le chevron pointe vers le bas quand le mois est ouvert, vers la droite
   quand il est replié - le sens du geste à faire. */
.dvpp-ordgroup-ico {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.dvpp-ordgroup:not([open]) .dvpp-ordgroup-ico { transform: rotate(-90deg); }

.dvpp-ordgroup-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-grey);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    color: var(--color-dark-grey);
}

.dvpp-ordgroup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dvpp-order {
    display: grid;
    /*
     * Date, numéro, état, montant, lien. La colonne de date a un plancher pour
     * que les numéros s'alignent d'une ligne à l'autre - c'est cet alignement
     * qui rend la colonne scannable. C'est la colonne du MONTANT qui absorbe
     * l'espace libre et se cale à droite : donner le 1fr à l'état laissait
     * celui-ci se réduire à zéro, et la pastille passait sous le montant.
     */
    grid-template-columns: minmax(88px, auto) minmax(0, auto) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    background: var(--color-white);
    border: 1px solid #ECEDF2;
    border-radius: 10px;
    padding: 18px 22px;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.dvpp-order:hover {
    border-color: #D8DAE0;
    box-shadow: 0 4px 14px rgba(24, 24, 28, .06);
}

/* Le numéro est ce qu'on cherche : c'est lui qui porte le poids de la ligne. */
.dvpp-order-num {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--color-black);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Le montant est de retour, à sa place : lisible, aligné à droite, sans
   prendre le pas sur le numéro. */
.dvpp-order-amount {
    justify-self: end;
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    color: var(--color-black);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * La date ouvre la ligne : c'est par elle qu'on cherche. Elle est donc lisible
 * et noire, mais en graisse moyenne - le numéro reste le seul en gras.
 * Le mois est déjà dans le titre du bloc, la ligne n'affiche que le jour.
 */
.dvpp-order-date {
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    color: var(--color-black);
    white-space: nowrap;
}

/*
 * « Voir le détail » était un pavé noir pleine largeur, répété à chaque fiche :
 * il pesait plus lourd que la commande elle-même. La fiche entière reste
 * cliquable au survol, le lien n'a donc plus besoin de crier.
 */
.dvpp-order-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: color .16s ease, gap .16s ease;
}

.dvpp-order-link:hover { color: var(--color-black); gap: 8px; }
.dvpp-order:hover .dvpp-order-link { color: var(--color-black); }

/*
 * Sous 900px la colonne de contenu ne tient plus les cinq informations sur une
 * ligne : elles se chevauchaient. La ligne se replie alors en trois rangées -
 * jour et montant, numéro et état, puis le lien - plutôt que de se serrer
 * jusqu'à ce que la pastille passe sous le prix.
 */
@media (max-width: 900px) {
    .dvpp-order {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
        padding: 16px 18px;
    }
    .dvpp-order-date   { grid-column: 1; grid-row: 1; }
    .dvpp-order-amount { grid-column: 2; grid-row: 1; justify-self: end; }
    .dvpp-order-num    { grid-column: 1; grid-row: 2; }
    .dvpp-order .dvpp-pill { grid-column: 2; grid-row: 2; justify-self: end; }
    .dvpp-order-link   { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

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

/* ---- Tableau de bord : aperçu (tuiles) ---- */
.dvpp-dash-intro {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    margin-top: 10px;
    max-width: 60ch;
}
/* Cinq colonnes annoncees, pas devinees : la colonne du compte plafonne vers
   940px, et un auto-fit en minmax(180px) n'en tenait que quatre - la cinquieme
   carte tombait seule sur une deuxieme ligne. */
.dvpp-hub {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0 6px;
}

@media (max-width: 1100px) {
    .dvpp-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .dvpp-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dvpp-hubcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dvpp-hubcard:hover {
    border-color: var(--color-yellow);
    box-shadow: 0 6px 20px rgba(24, 24, 28, .08);
    transform: translateY(-2px);
}
.dvpp-hubcard .dvpp-eyebrow { font-size: 11px; letter-spacing: .06em; }

/* La pastille se pose a cheval sur le bord haut : a 175px de large, elle
   n'aurait tenu ni a cote du surtitre ni au-dessus sans le repousser. */
.dvpp-hubcard .dvpp-new {
    position: absolute;
    top: -9px;
    right: 12px;
    margin-left: 0;
}

.dvpp-hub-num {
    font-size: 38px;
    font-weight: var(--fw-bold);
    color: var(--color-black);
    line-height: 1.05;
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}
.dvpp-hub-pct { font-size: 22px; }
.dvpp-hub-lab {
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    margin-top: 2px;
}
.dvpp-hub-flag {
    margin-top: 12px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: #8A6516;
}
.dvpp-hub-flag-ok { color: #2F7A4E; }
.dvpp-hub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}
.dvpp-hub-tags span {
    font-size: 11px;
    font-weight: var(--fw-medium);
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-grey);
    color: var(--color-black);
}

/* =========================================================================
   Espace personnalisé - profil œnologique (Phases 0-1)
   Charte native : Montserrat (héritée), tokens --color-* / --fs-*, radius 8px.
   Aucune couleur en dur.
   ========================================================================= */

/* Colonne de contenu alignée sur les pages compte natives (.compte-contentCompte)
   : width 75% + padding 8% -> dégage le header fixe (120px) comme les autres pages. */
.dvpp-tab,
.dvpp-onboarding {
    width: 75%;
    padding: 6% 8% 60px;
}

/* ---- En-têtes ---- */
.dvpp-title {
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    margin-bottom: 12px;
}

.dvpp-intro {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    line-height: 1.55;
    max-width: 60ch;
    margin-bottom: 24px;
}

.dvpp-onboarding-head,
.dvpp-head {
    margin-bottom: 26px;
}

/* ---- Jauge de complétion ----
   Collee sous l en-tete fixe pendant le defilement : neuf questions font une
   longue page, et l avancement doit rester sous les yeux. Le fond blanc et
   le leger rembourrage couvrent ce qui passe dessous. */
.dvpp-progress {
    position: sticky;
    top: 120px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding: 12px 0;
    background: var(--color-white);
}
/* L en-tete fixe change de hauteur aux paliers : la jauge suit. */
@media (max-width: 1024px) { .dvpp-progress { top: 110px; } }
@media (max-width: 640px)  { .dvpp-progress { top: 100px; } }

.dvpp-progress-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--color-grey);
    border-radius: 8px;
    overflow: hidden;
}

.dvpp-progress-fill {
    display: block;
    height: 100%;
    background: var(--color-yellow);
    border-radius: 8px;
    transition: width .4s ease;
}

.dvpp-progress-label {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-dark-grey);
    white-space: nowrap;
}

/* La position du pas-a-pas, dans la meme jauge : a gauche de la barre. */
.dvpp-progress-pos {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    white-space: nowrap;
}
.dvpp-progress-pos[hidden] { display: none; }

/* ---- Bannières de statut ---- */
.dvpp-banner {
    border-radius: 8px;
    padding: 13px 18px;
    margin-bottom: 22px;
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    border: 2px solid transparent;
}

.dvpp-banner-ok {
    background: color-mix(in srgb, var(--color-green) 14%, var(--color-white));
    border-color: var(--color-green);
    color: var(--color-black);
}

.dvpp-banner-warn {
    background: color-mix(in srgb, var(--color-yellow) 28%, var(--color-white));
    border-color: var(--color-yellow);
    color: var(--color-black);
}

/* ---- Formulaire ---- */
.dvpp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
 * Une question = un bloc posé. Six questions empilées sans séparation se
 * lisaient comme une seule longue liste : le cadre clair dit où commence et où
 * finit chaque sujet, et permet de baisser le titre d'un cran.
 */
.dvpp-q {
    border: 1px solid #ECEDF2;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0;
    background: var(--color-white);
}

/*
 * Un <legend> se place dans la bordure du fieldset : avec un cadre, le titre
 * sortait de la boîte. Le rendre flottant le remet dans le flux, et les puces
 * repassent dessous.
 */
.dvpp-q-legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.dvpp-q-label {
    font-size: calc(var(--fs-subtitle) - 5px);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    line-height: 1.3;
}

.dvpp-q-hint {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    font-style: normal;
}

/* ---- Choix en "chips" ---- */
.dvpp-choices {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dvpp-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1.5px solid #ECEDF2;
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}

.dvpp-chip:hover {
    border-color: var(--color-yellow);
}

.dvpp-chip:active {
    transform: translateY(1px);
}

/* input natif masqué mais accessible au clavier */
.dvpp-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.dvpp-chip-on,
.dvpp-chip:has(input:checked) {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-black);
    font-weight: var(--fw-bold);
}

/* « Je ne sais pas » n est pas une puce parmi les autres : un texte
   souligne, sans cadre ni fond, pour dire qu on sort de la liste. Choisi,
   il passe en noir gras, toujours sans le jaune des vrais gouts. */
.dvpp-chip--inconnu {
    border-color: transparent;
    background: none;
    padding-left: 6px;
    padding-right: 6px;
    color: var(--color-dark-grey);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #C9CBD3;
}
.dvpp-chip--inconnu:hover {
    border-color: transparent;
    background: none;
    color: var(--color-black);
    text-decoration-color: currentColor;
}
.dvpp-chip--inconnu.dvpp-chip-on,
.dvpp-chip--inconnu:has(input:checked) {
    background: none;
    border-color: transparent;
    color: var(--color-black);
    font-weight: var(--fw-bold);
    text-decoration-color: currentColor;
}

/* Focus clavier visible (accessibilité) */
.dvpp-chip:has(input:focus-visible) {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* Radio "spectre" : disposition en ligne continue */
.dvpp-q-scale .dvpp-choices {
    gap: 8px;
}

.dvpp-q-scale .dvpp-chip {
    flex: 1 1 140px;
    justify-content: center;
    text-align: left;
    min-width: 0;
}

/* ---- Consentement ---- */
.dvpp-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 2px solid var(--color-grey);
    border-radius: 8px;
    background: var(--color-white);
    font-size: var(--fs-text);
    line-height: 1.5;
    cursor: pointer;
}

.dvpp-consent input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-yellow);
    flex: 0 0 auto;
    cursor: pointer;
}

.dvpp-consent em {
    display: block;
    color: var(--color-dark-grey);
    font-weight: var(--fw-light);
    font-size: var(--fs-text-phone);
    margin-top: 3px;
}

/* ---- Actions ---- */
.dvpp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}

.dvpp-actions .button-ripples {
    padding: 1em 2.4em;
}

.dvpp-skip {
    /* Le bouton utilitaire du thème gère déjà couleurs et bordure */
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .dvpp-title { font-size: var(--fs-title-tablet); }
    .dvpp-q-label { font-size: calc(var(--fs-subtitle-tablet) - 3px); }
    .dvpp-intro,
    .dvpp-banner,
    .dvpp-chip,
    .dvpp-consent { font-size: var(--fs-text-tablet); }
}

@media (max-width: 640px) {
    .dvpp-title { font-size: var(--fs-title-phone); }
    .dvpp-q-label { font-size: calc(var(--fs-subtitle-phone) - 1px); }
    .dvpp-intro,
    .dvpp-banner,
    .dvpp-chip,
    .dvpp-consent { font-size: var(--fs-text-phone); }

    .dvpp-actions { flex-direction: column; }
    .dvpp-actions .button-ripples { width: 100%; }
    .dvpp-q-scale .dvpp-chip { flex-basis: 100%; }
}

/* =========================================================================
   Ma cave (Phase 3)
   ========================================================================= */

.dvpp-cave {
    width: 75%;
    padding: 6% 8% 60px;
}

/* Menu latéral toujours visible (sticky sous le header fixe de 120px).
   Bureau seulement : en pile mobile, le menu est un bandeau (voir plus bas).
   La règle « .admin-bar » a deux classes ; laissée hors media query, elle
   battait le bandeau mobile et l'envoyait 152px plus bas, haut de 100vh. */
@media (min-width: 641px) {
    .compte-menus {
        position: sticky;
        top: 120px;
        align-self: flex-start;
        height: calc(100vh - 120px);
        min-height: 0;
    }
    .admin-bar .compte-menus {
        top: 152px; /* + barre d'admin WordPress (32px) */
        height: calc(100vh - 152px);
    }
}

/* Icônes des entrées de menu. */
.compte-menus-wrapper a,
.compte-menus-wrapper button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.dvpp-nav-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--color-dark-grey);
    transition: color .18s ease;
}
.compte-menus-wrapper a:hover .dvpp-nav-ico,
.compte-menus-wrapper button:hover .dvpp-nav-ico,
.compte-menus-wrapper-active .dvpp-nav-ico {
    color: #9A7220;
}

.dvpp-cave-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/*
 * Les compteurs renseignent, ils ne vendent rien : bord clair, fond blanc,
 * texte gris. Seul le nombre est en noir - c'est lui qu'on vient chercher.
 */
.dvpp-cave-stat {
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid #ECEDF2;
    background: var(--color-white);
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
}

.dvpp-cave-stat strong { font-weight: var(--fw-bold); color: var(--color-black); }

/* Le vert tenait tout l'aplat et tirait l'oeil avant le titre : il se réduit
   à une pastille, qui suffit à dire « c'est le sujet urgent ». */
.dvpp-cave-stat-drink { background: var(--color-white); }
.dvpp-cave-stat-drink::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-green);
    flex: 0 0 auto;
}

/* ---- Filtre "à boire maintenant" (stat cliquable) ---- */
.dvpp-cave-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease;
}
.dvpp-cave-filter:hover {
    background: color-mix(in srgb, var(--color-green) 8%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-green) 45%, var(--color-white));
}
.dvpp-cave-filter[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-green) 12%, var(--color-white));
    border-color: var(--color-green);
    color: var(--color-black);
}
.dvpp-cave-filter-x {
    display: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--color-green);
    color: var(--color-white);
    font-size: 14px; line-height: 18px; text-align: center;
    font-weight: var(--fw-bold);
}
.dvpp-cave-filter[aria-pressed="true"] .dvpp-cave-filter-x { display: inline-block; }

/* Bandeau indicateur de filtre + retrait facile */
.dvpp-cave-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-green) 10%, var(--color-white));
    border: 1px dashed color-mix(in srgb, var(--color-green) 55%, var(--color-white));
    font-size: var(--fs-text);
}
.dvpp-cave-filterbar[hidden] { display: none; }
.dvpp-cave-filterbar-lab { display: inline-flex; align-items: center; gap: 8px; color: var(--color-black); }
.dvpp-cave-filterbar-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-green); flex: 0 0 auto;
}
.dvpp-cave-filter-clear {
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    color: #2F7A4E;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-left: auto;
}
.dvpp-cave-filter-clear:hover { color: var(--color-black); }

/* ---- Bouton "Filtres" (ouvre le panneau repliable) ---- */
.dvpp-cave-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    background: var(--color-white);
    border: 1px solid #ECEDF2;
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.dvpp-cave-filter-toggle:hover { border-color: var(--color-yellow); }
.dvpp-cave-filter-toggle.is-open { background: var(--color-grey); border-color: var(--color-grey); }
.dvpp-filter-ico { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---- Filtres dynamiques Région / Couleur (chips) ---- */
.dvpp-cave-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 20px;
    padding: 14px 16px;
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}
.dvpp-cave-filters[hidden] { display: none; }
.dvpp-cave-fgroup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dvpp-cave-fgroup-lab {
    font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: .07em; color: var(--color-dark-grey);
    width: 66px; flex: 0 0 auto;
}
.dvpp-cave-fchip {
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.dvpp-cave-fchip:hover { border-color: var(--color-yellow); }
.dvpp-cave-fchip.is-active {
    background: var(--color-light-black);
    border-color: var(--color-light-black);
    color: var(--color-white);
    font-weight: var(--fw-bold);
}
.dvpp-cave-fchip.is-active::after {
    content: "×";
    margin-left: 7px;
    font-weight: var(--fw-bold);
    opacity: .85;
}
/* Facettage : option indisponible (0 résultat combiné aux autres filtres). */
.dvpp-cave-fchip:disabled,
.dvpp-cave-fchip.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}
.dvpp-cave-filter:disabled,
.dvpp-cave-filter.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Le millésime est déjà affiché en 2e ligne de la carte : on retire le doublon
   du badge apogée (uniquement dans la cave ; le badge reste complet ailleurs). */
.dvpp-cave-item .dvpp-apogee-mill { display: none; }
.dvpp-cave-noresult {
    font-size: var(--fs-text);
    color: var(--color-dark-grey);
    padding: 8px 0 4px;
}
.dvpp-cave-noresult[hidden] { display: none; }

.dvpp-cave-empty {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--color-grey);
    border-radius: 8px;
    color: var(--color-dark-grey);
}

.dvpp-cave-empty p { margin-bottom: 20px; }

/* Le compte non verifie : l avantage attend derriere ce bloc. Meme cadre
   que les etats vides, une enveloppe au lieu de la boussole. */
.dvpp-verif {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: 16px;
    padding: 36px 24px;
    border: 1px dashed var(--color-grey);
    border-radius: 8px;
}

.dvpp-verif-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #FBF6E8;
    color: #A8801F;
    margin-bottom: 6px;
}

.dvpp-verif-t {
    margin: 0;
    font-size: calc(var(--fs-subtitle) - 5px);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}

.dvpp-verif-d {
    margin: 0 0 14px;
    max-width: 48ch;
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--color-dark-grey);
}
.dvpp-verif-d strong { font-weight: var(--fw-medium); color: var(--color-black); }

.dvpp-verif-actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
}

.dvpp-verif-renvoyer.is-busy { opacity: .6; }

.dvpp-verif-status {
    margin: 10px 0 0;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
}
.dvpp-verif-status.is-ok { color: #2F7A4E; }
.dvpp-verif-status.is-ko { color: #B4372E; }

@media (max-width: 640px) {
    .dvpp-verif { padding: 28px 18px; }
    .dvpp-verif .button-ripples { width: 100%; }
}

/* Le tableau de bord sans suggestion : meme cadre en pointilles que la cave
   vide, avec l invitation a repondre au questionnaire. */
.dvpp-recos-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: 16px;
    padding: 36px 24px;
    border: 1px dashed var(--color-grey);
    border-radius: 8px;
}

.dvpp-recos-teaser-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #FBF6E8;
    color: #A8801F;
    margin-bottom: 6px;
}

.dvpp-recos-teaser-t {
    margin: 0;
    font-size: calc(var(--fs-subtitle) - 5px);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}

.dvpp-recos-teaser-d {
    margin: 0 0 14px;
    max-width: 46ch;
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--color-dark-grey);
}

@media (max-width: 640px) {
    .dvpp-recos-teaser { padding: 28px 18px; }
    .dvpp-recos-teaser .button-ripples { width: 100%; }
}

.dvpp-cave-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dvpp-cave-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--color-grey);
    border-radius: 8px;
    background: var(--color-white);
}

.dvpp-cave-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvpp-cave-thumb img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.dvpp-cave-body { min-width: 0; }

.dvpp-cave-name {
    display: block;
    font-weight: var(--fw-bold);
    color: var(--color-black);
    font-size: var(--fs-text);
    line-height: 1.35;
    margin-bottom: 6px;
}

.dvpp-cave-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    margin-bottom: 8px;
}

.dvpp-cave-qty { font-weight: var(--fw-medium); color: var(--color-black); }
.dvpp-cave-drunk { font-style: italic; }

.dvpp-cave-apogee { margin-top: 4px; }

.dvpp-cave-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/*
 * « J'en ai bu une » garde son poids : c'est la seule vraie action de la page,
 * et elle ouvre la notation. L'allègement du reste (apogée, conseils, filtres)
 * suffit à ce qu'elle ne soit plus noyée dans le bruit.
 */
.dvpp-cave-btn {
    border: 2px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 8px;
    padding: 9px 15px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.dvpp-cave-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.dvpp-cave-undo {
    border: none;
    background: none;
    color: var(--color-dark-grey);
    font-size: var(--fs-text-phone);
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.dvpp-cave-undo:hover { color: var(--color-black); }

/* Visibilité conditionnelle (togglée en JS via .has-consumed). */
.dvpp-cave-item:not(.has-consumed) .dvpp-cave-drunk,
.dvpp-cave-item:not(.has-consumed) .dvpp-cave-undo-wrap { display: none; }

/* Skeleton localisé pendant l'action AJAX (au lieu du loader plein écran). */
.dvpp-cave-item { transition: opacity .35s ease, transform .35s ease; }
.dvpp-cave-item.dvpp-cave-out { opacity: 0; transform: translateX(14px); }
.dvpp-cave-item.dvpp-skel { position: relative; }
.dvpp-cave-item.dvpp-skel > * { opacity: .4; pointer-events: none; }
.dvpp-cave-item.dvpp-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, transparent, rgba(24, 24, 28, .06), transparent);
    background-size: 200% 100%;
    animation: dvppShimmer 1.1s linear infinite;
}
@keyframes dvppShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Panneau de notation (étoiles + commentaire), ouvert au clic sur "J'en ai bu une". */
.dvpp-rate {
    position: relative;
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F0F0F2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: dvppRateIn .2s ease;
}

/* Croix de sortie : discrète, mais toujours là - on ne piège personne dans un
   panneau ouvert par mégarde. */
.dvpp-rate-close {
    position: absolute;
    top: 10px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-dark-grey);
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.dvpp-rate-close:hover {
    background: var(--color-grey);
    color: var(--color-black);
}
.dvpp-rate[hidden] { display: none !important; } /* n'apparaît qu'au clic sur "J'en ai bu une" */
@keyframes dvppRateIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dvpp-rate-title { font-size: var(--fs-text); font-weight: var(--fw-bold); color: var(--color-black); padding-right: 34px; }
.dvpp-stars { display: inline-flex; gap: 4px; }
.dvpp-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 26px;
    line-height: 1;
    color: #D8D8DE;
    transition: color .12s ease, transform .12s ease;
}
.dvpp-star:hover { transform: scale(1.12); }
.dvpp-star.on, .dvpp-star.hover { color: var(--color-yellow); } /* hover cumulatif géré en JS */
.dvpp-rate-comment {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: var(--fs-text);
    resize: vertical;
    outline: none;
}
.dvpp-rate-comment:focus { border-color: var(--color-yellow); }
.dvpp-rate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dvpp-rate-submit {
    background: var(--color-light-black);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-weight: var(--fw-bold);
    font-family: inherit;
    font-size: var(--fs-text);
    cursor: pointer;
    transition: opacity .18s ease;
}
.dvpp-rate-submit:hover { opacity: .85; }
.dvpp-rate-skip {
    background: none;
    border: none;
    color: var(--color-dark-grey);
    text-decoration: underline;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    cursor: pointer;
}
.dvpp-rate-skip:hover { color: var(--color-black); }

/* Conseils pour la table (details natif : service, accords, avis de Jean-Luc) */
.dvpp-cave-advice {
    grid-column: 1 / -1;
    margin-top: 12px;
    border-top: 1px solid #F0F0F2;
    padding-top: 10px;
}
.dvpp-cave-advice > summary {
    cursor: pointer;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dvpp-cave-advice > summary::-webkit-details-marker { display: none; }
.dvpp-cave-advice > summary::after { content: "\25BE"; transition: transform .18s ease; }
.dvpp-cave-advice[open] > summary::after { transform: rotate(180deg); }
.dvpp-cave-advice-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dvpp-cave-advice-line {
    display: grid; grid-template-columns: 84px 1fr; align-items: baseline;
    gap: 6px 18px; font-size: var(--fs-text);
}
/* Labels subordonnés au titre doré "Conseils de service" : gris, plus discrets. */
.dvpp-cave-advice-lab {
    font-size: 10.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-dark-grey); line-height: 1.6; white-space: nowrap;
}
/* Aligne le TEXTE de la 1re pastille avec le texte "Service" (compense le padding
   horizontal de la pastille), plutôt que d'aligner son fond. */
.dvpp-cave-accords { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: -10px; }
.dvpp-cave-accords span {
    font-size: var(--fs-text-phone); padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--color-yellow) 26%, #fff); color: var(--color-black);
}
.dvpp-cave-jl { background: var(--color-grey); border-radius: 8px; padding: 12px 14px; }
.dvpp-cave-jl-label {
    display: block; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: .06em; color: #9A7220; margin-bottom: 5px;
}
.dvpp-cave-jl p { font-size: var(--fs-text); line-height: 1.55; color: var(--color-black); margin: 0; }

/* Section "Déjà bu" - carnet de dégustation */
.dvpp-drunk { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--color-grey); }
.dvpp-drunk-title { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: var(--color-black); }
.dvpp-drunk-sub { font-size: var(--fs-text); color: var(--color-dark-grey); margin: 4px 0 18px; }
.dvpp-drunk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dvpp-drunk-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    background: var(--color-white);
}
.dvpp-drunk-item .dvpp-cave-thumb { width: 48px; height: 48px; }
.dvpp-drunk-item .dvpp-cave-thumb img { max-height: 48px; }
.dvpp-drunk-body { min-width: 0; }
.dvpp-drunk-rating { display: inline-block; color: #D8D8DE; font-size: 15px; letter-spacing: 1px; }
.dvpp-drunk-rating .on { color: var(--color-yellow); }

/* L avis du carnet : un details natif, plie par defaut, meme dessin que les
   conseils de service. Le libelle change avec l etat, sans script. */
.dvpp-drunk-avis { margin-top: 6px; }
.dvpp-drunk-avis > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
}
.dvpp-drunk-avis > summary::-webkit-details-marker { display: none; }
.dvpp-drunk-avis > summary::after { content: "\25BE"; transition: transform .18s ease; }
.dvpp-drunk-avis[open] > summary::after { transform: rotate(180deg); }
.dvpp-drunk-avis > summary:hover { color: var(--color-black); }
.dvpp-drunk-avis-cacher,
.dvpp-drunk-avis[open] .dvpp-drunk-avis-voir { display: none; }
.dvpp-drunk-avis[open] .dvpp-drunk-avis-cacher { display: inline; }
.dvpp-drunk-avis-body {
    margin-top: 8px;
    padding: 10px 14px;
    border-left: 2px solid var(--color-yellow);
    background: color-mix(in srgb, var(--color-yellow) 10%, #fff);
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dvpp-drunk-avis-txt { margin: 0; font-size: var(--fs-text); line-height: 1.5; color: var(--color-black); }
.dvpp-drunk-avis-txt--vide { color: var(--color-dark-grey); font-weight: var(--fw-light); }
.dvpp-drunk-avis-when { font-size: var(--fs-text-phone); color: var(--color-dark-grey); }
.dvpp-drunk-avis-none { display: inline-block; margin-top: 6px; font-size: var(--fs-text-phone); font-weight: var(--fw-light); color: #A6A6AD; }
.dvpp-drunk-rebuy {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    color: #9A7220;
    border: 1px solid var(--color-yellow);
    border-radius: 8px;
    padding: 8px 14px;
    white-space: nowrap;
    transition: background .18s ease;
}
.dvpp-drunk-rebuy:hover { background: color-mix(in srgb, var(--color-yellow) 20%, #fff); }
@media (max-width: 640px) {
    .dvpp-drunk-item { grid-template-columns: 44px 1fr; }
    .dvpp-drunk-rebuy { grid-column: 1 / -1; text-align: center; }
}

.dvpp-cave-foot {
    margin-top: 20px;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    font-style: italic;
}

@media (max-width: 640px) {
    .dvpp-cave-item {
        grid-template-columns: 52px 1fr;
        grid-template-areas: "thumb body" "actions actions";
        gap: 12px;
    }
    .dvpp-cave-thumb { grid-area: thumb; width: 52px; height: 52px; }
    .dvpp-cave-body { grid-area: body; }
    .dvpp-cave-actions {
        grid-area: actions;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }
    .dvpp-cave-stat { font-size: var(--fs-text-phone); }
}

/* =========================================================================
   Recommandé pour vous (Phase 4)
   ========================================================================= */

.dvpp-recos {
    width: 100%;
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid var(--color-grey);
}

/* Le tableau de bord avec recos est haut : on aligne menu ET contenu en HAUT
   (au lieu du centrage vertical prévu pour un contenu court). Scopé au seul
   dashboard-avec-recos via :has(), pour ne pas toucher les autres pages compte.
   Bureau seulement : :has() pèse lourd et, en pile mobile, ces 60px de marge
   haute doublaient l'espace entre le bandeau et le contenu. */
@media (min-width: 641px) {
    .compte:has(.dvpp-recos) .compte-contentCompte {
        justify-content: flex-start;
        margin-top: 0;
        padding-top: 60px;
    }

    .compte:has(.dvpp-recos) .compte-menus {
        align-items: flex-start;
        padding-top: 60px;
    }
}

.dvpp-recos-title {
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    margin-bottom: 4px;
}

.dvpp-recos-sub {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    margin-bottom: 20px;
}

/* Rayons thématiques : chaque groupe a un titre qui EST sa raison. */
.dvpp-recogroup + .dvpp-recogroup {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--color-grey);
}

.dvpp-recogroup-title {
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    margin-bottom: 6px;
    line-height: 1.25;
}
.dvpp-recogroup-sub {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    line-height: 1.5;
    max-width: 62ch;
    margin-bottom: 18px;
}

@media (max-width: 1024px) {
    .dvpp-recogroup-title { font-size: var(--fs-subtitle-tablet); }
}
@media (max-width: 640px) {
    .dvpp-recogroup-title { font-size: var(--fs-subtitle-phone); }
}

/* Même format que la boutique : cartes à largeur fixe centrées dans des
   colonnes souples (1fr) via justify-items:center. */
.dvpp-recos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: start;
}

.dvpp-reco-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Raison lisible : pourquoi ce vin est conseillé.
   Exactement la largeur de la carte (240 / 200 / 140 px selon card.css) :
   un bloc plus large que sa carte débordait sur celui d'à côté sur mobile. */
.dvpp-reco-reason {
    display: block;
    box-sizing: border-box;
    width: 240px;
    max-width: 100%;
    margin: -6px 0 22px;
    text-align: center;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: var(--color-black);
    background: color-mix(in srgb, var(--color-yellow) 32%, var(--color-white));
    border: 1px solid var(--color-yellow);
    border-radius: 8px;
    padding: 6px 12px;
}

@media (max-width: 1024px) {
    .dvpp-recos-title { font-size: var(--fs-subtitle-tablet); }
    .dvpp-recos-grid { grid-template-columns: repeat(2, 1fr); }
    .dvpp-reco-reason { width: 200px; }
}

@media (max-width: 640px) {
    .dvpp-recos-grid { grid-template-columns: repeat(2, 1fr); }
    .dvpp-recos-title { font-size: var(--fs-subtitle-phone); }
    .dvpp-reco-reason {
        width: 140px;
        margin: -2px 0 18px;
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* =========================================================================
   Mes informations / Mes adresses / Moyens de paiement (carnet + cartes)
   ========================================================================= */

/* Conteneur de contenu compte générique (colonne 75 %, comme .dvpp-cave). */
.dvpp-account {
    width: 75%;
    padding: 6% 8% 60px;
}
@media (max-width: 640px) {
    .dvpp-account { width: 100%; padding: 8% 6% 48px; }
}
.dvpp-account-intro {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    line-height: 1.55;
    max-width: 62ch;
    margin-top: 8px;
}
.dvpp-account-intro a { color: #9A7220; font-weight: var(--fw-bold); text-decoration: underline; }

/* Bannières */
.dvpp-banner-err {
    background: #F6ECEA;
    border: 1px solid #E7C9C3;
    color: #9A4A3E;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: var(--fs-text);
    margin-bottom: 22px;
}

/* Boutons génériques */
.dvpp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    border-radius: 8px;
    padding: 13px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    list-style: none;
    transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.dvpp-btn::-webkit-details-marker { display: none; }
.dvpp-btn-dark { background: var(--color-light-black); color: var(--color-white); }
.dvpp-btn-dark:hover { background: #000; }
.dvpp-btn-outline { background: var(--color-white); color: var(--color-black); border-color: #E5E7EB; width: fit-content; }
.dvpp-btn-outline:hover { border-color: var(--color-yellow); background: #FCFAF3; }

/* Boutons "lien" (actions discrètes) */
.dvpp-linkbtn {
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    color: var(--color-black);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    list-style: none;
}
.dvpp-linkbtn::-webkit-details-marker { display: none; }
.dvpp-linkbtn:hover { color: #9A7220; }
.dvpp-linkbtn-danger { color: #9A4A3E; }
.dvpp-linkbtn-danger:hover { color: #7d3a30; }

/* Champs de formulaire */
.dvpp-addr-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dvpp-field { display: flex; flex-direction: column; gap: 6px; }
.dvpp-field-full { grid-column: 1 / -1; }
.dvpp-field-lab { font-size: var(--fs-text); color: var(--color-black); }
.dvpp-field-hint { font-weight: var(--fw-light); color: var(--color-dark-grey); font-size: var(--fs-text-phone); }
.dvpp-field input,
.dvpp-field select {
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid #D9DBE1;
    border-radius: 8px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.dvpp-field input:focus,
.dvpp-field select:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-yellow) 35%, transparent);
}
.dvpp-field input:disabled { background: var(--color-grey); color: var(--color-dark-grey); }

/* Sections du formulaire "Mes informations" */
.dvpp-form-section { margin-bottom: 30px; }
.dvpp-form-legend { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: var(--color-black); margin-bottom: 14px; }
.dvpp-form-note { font-size: var(--fs-text); color: var(--color-dark-grey); margin-bottom: 14px; }
.dvpp-form-actions, .dvpp-addr-form-actions { margin-top: 8px; }

/* Sections empilées dans "Mes informations" (identité + adresses + paiement) */
.dvpp-acc-sep { border: none; border-top: 1px solid var(--color-grey); margin: 34px 0; }
.dvpp-acc-section { margin: 0; }
.dvpp-acc-section > .dvpp-form-note { margin-bottom: 18px; }

/* ---- Carnet d'adresses ---- */
.dvpp-addr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
    align-items: start;
}
.dvpp-addr-card {
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.dvpp-addr-card.is-default { border-color: var(--color-yellow); box-shadow: 0 0 0 1px var(--color-yellow); }
.dvpp-addr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dvpp-addr-label { font-size: var(--fs-text); font-weight: var(--fw-bold); color: var(--color-black); }
.dvpp-addr-badge {
    font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em;
    color: #8A6516; background: color-mix(in srgb, var(--color-yellow) 34%, #fff); border: 1px solid var(--color-yellow);
    border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.dvpp-addr-lines { font-style: normal; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-text); color: var(--color-light-black); line-height: 1.5; }
.dvpp-addr-lines span:first-child { font-weight: var(--fw-bold); }
.dvpp-addr-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-grey);
}
.dvpp-addr-inline { display: inline; margin: 0; }
.dvpp-addr-card .dvpp-addr-fields { grid-template-columns: 1fr; margin-top: 14px; }
.dvpp-addr-edit[open] > summary { margin-bottom: 4px; color: #9A7220; }
.dvpp-addr-form-actions { margin-top: 14px; }

.dvpp-addr-add { margin-top: 8px; }
.dvpp-addr-add > summary { display: inline-flex; }
.dvpp-addr-add[open] > summary { margin-bottom: 18px; }
.dvpp-addr-add-body {
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 22px;
}
.dvpp-addr-empty, .dvpp-pm-empty {
    font-size: var(--fs-text); color: var(--color-dark-grey);
    background: var(--color-grey); border-radius: 10px; padding: 18px 20px; margin-bottom: 22px;
}

/* ---- Moyens de paiement ---- */
.dvpp-pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    align-items: start;
}
.dvpp-pm-card {
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.dvpp-pm-card.is-default { border-color: var(--color-yellow); box-shadow: 0 0 0 1px var(--color-yellow); }
.dvpp-pm-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dvpp-pm-chip { display: inline-flex; color: var(--color-dark-grey); }
.dvpp-pm-chip svg { width: 30px; height: 30px; }
.dvpp-pm-badge {
    font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em;
    color: #8A6516; background: color-mix(in srgb, var(--color-yellow) 34%, #fff); border: 1px solid var(--color-yellow);
    border-radius: 999px; padding: 3px 10px;
}
.dvpp-pm-method { font-size: var(--fs-text); font-weight: var(--fw-bold); color: var(--color-black); }
.dvpp-pm-expires { font-size: var(--fs-text); color: var(--color-dark-grey); margin-top: 4px; }
.dvpp-pm-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-grey); }
.dvpp-pm-add { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.dvpp-pm-secure { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-text-phone); color: var(--color-dark-grey); }
.dvpp-pm-secure svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-green); }

/* ---- Ajouter une carte (formulaire passerelle habillé charte) ---- */
.dvpp-addcard .woocommerce-PaymentMethods { list-style: none; margin: 0 0 22px; padding: 0; }
.dvpp-addcard .woocommerce-PaymentMethod {
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.dvpp-addcard .woocommerce-PaymentMethod > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}
.dvpp-addcard .woocommerce-PaymentMethod input.input-radio { accent-color: var(--color-light-black); margin-right: 6px; }
.dvpp-addcard .woocommerce-PaymentBox { margin-top: 14px; }
.dvpp-addcard .woocommerce-PaymentBox p { font-size: var(--fs-text); color: var(--color-dark-grey); line-height: 1.55; }
.dvpp-addcard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 4px; }

@media (max-width: 640px) {
    .dvpp-addr-fields { grid-template-columns: 1fr; }
    .dvpp-form-legend { font-size: var(--fs-subtitle-phone); }
}

/* ---- Profil œnologique : loader bouton + message de statut ---- */
.dvpp-submit { position: relative; }
.dvpp-submit.is-loading { pointer-events: none; }
.dvpp-submit.is-loading .dvpp-submit-lab { visibility: hidden; }
.dvpp-submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(24, 24, 28, .28);
    border-top-color: var(--color-black);
    border-radius: 50%;
    animation: dvpp-spin .7s linear infinite;
}
@keyframes dvpp-spin { to { transform: rotate(360deg); } }

.dvpp-profil-status {
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: var(--fs-text);
    line-height: 1.5;
}
.dvpp-profil-status[hidden] { display: none; }
.dvpp-profil-status.is-ok {
    background: color-mix(in srgb, var(--color-green) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-green) 45%, #fff);
    color: #2F7A4E;
}
.dvpp-profil-status.is-warn {
    background: #F6ECEA;
    border: 1px solid #E7C9C3;
    color: #9A4A3E;
}
.dvpp-profil-status.is-info {
    background: var(--color-grey);
    border: 1px solid var(--color-grey);
    color: var(--color-light-black);
}

/* Profil complété à 100 % : passage au vert (barre + libellé + coche). */
.dvpp-progress.is-complete .dvpp-progress-fill { background: var(--color-green); }
.dvpp-progress.is-complete .dvpp-progress-label {
    color: #2F7A4E;
    font-weight: var(--fw-bold);
}
.dvpp-progress.is-complete .dvpp-progress-label::before { content: "\2713\00a0"; }

/* Tuile "Profil œnologique" du tableau de bord, à 100 % : juste le nombre en vert. */
.dvpp-hubcard-profile.is-complete .dvpp-hub-num { color: #2F7A4E; }



/* =========================================================================
   Pastilles de couleur et pictogrammes d'options
   La pastille est le même repère que dans le méga-menu, le panier et le
   récapitulatif de commande : mêmes teintes, même forme. Elles sont recopiées
   ici parce que panier.css ne se charge que sur le panier et la commande.
   ========================================================================= */

.dv-wine-color--blanc     { background: #fbf2b7; }
.dv-wine-color--rouge     { background: #a71640; }
.dv-wine-color--rose      { background: #f3977d; }
.dv-wine-color--champagne { background: #e1c6a4; }
.dv-wine-color--bio       { background: #51b37f; }

/* Sur la bouteille : posée en haut à droite de la vignette, comme au panier. */
.dvpp-cave-thumb .dv-wine-color {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .22);
    pointer-events: none;
}

/* Dans une puce du quiz : au fil du texte, alignée sur le libellé. */
.dvpp-swatch {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .22);
}

/*
 * Pictogrammes des options : gris au repos pour ne pas concurrencer le
 * libellé, encre pleine une fois l'option retenue.
 */
.dvpp-opt-ico {
    flex: 0 0 auto;
    color: var(--color-dark-grey);
    transition: color .18s ease;
}

.dvpp-chip:has(input:checked) .dvpp-opt-ico,
.dvpp-chip-on .dvpp-opt-ico {
    color: var(--color-black);
}

/* Le spectre du profil de bouche se lit en ligne : les barres d'intensité
   doivent rester à gauche du libellé, pas centrées avec lui. */
.dvpp-q-scale .dvpp-chip { gap: 10px; }

/* ---- Région en cave : l'information manquait pour situer la bouteille ---- */
.dvpp-cave-region {
    font-weight: var(--fw-medium);
    color: var(--color-black);
}

/* La pastille sur une carte produit est dessinee par card.css, la feuille
   globale des cartes : ici on ne la redefinit pas, ca battait sa regle mobile. */
.dvpp-reco-item { position: relative; }

/* =========================================================================
   Accueil des clients dans le nouvel espace : fenêtre du questionnaire,
   pas-à-pas, pastilles « Nouveau », bandeau de nouveautés.
   ========================================================================= */

/* ---- Pastille « Nouveau » ---- */
.dvpp-new {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-yellow);
    color: var(--color-black);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.5;
}

/* ---- Fenêtre ---- */
.dvpp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dvpp-modal[hidden] { display: none !important; }

.dvpp-modal-veil {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 28, .55);
    animation: dvppVeilIn .25s ease;
}

.dvpp-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(86vh, 760px);
    overflow-y: auto;
    padding: 30px 32px 26px;
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 24px 60px rgba(24, 24, 28, .28);
    animation: dvppBoxIn .28s cubic-bezier(.2, .8, .3, 1);
}

@keyframes dvppVeilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dvppBoxIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.dvpp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-dark-grey);
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.dvpp-modal-close:hover { background: var(--color-grey); color: var(--color-black); }

.dvpp-modal-title {
    font-size: calc(var(--fs-subtitle) - 2px);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin: 4px 0 8px;
    padding-right: 30px;
}

.dvpp-modal-sub {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    line-height: 1.5;
    margin-bottom: 20px;
}

.dvpp-modal-later {
    display: block;
    margin: 16px auto 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    text-decoration: underline;
    cursor: pointer;
}

.dvpp-modal-later:hover { color: var(--color-black); }

/* Dans la fenêtre, les blocs de question n'ont plus besoin de leur cadre :
   il n'y en a qu'un à l'écran. */
.dvpp-modal .dvpp-q { border: none; padding: 0; background: none; }
.dvpp-modal .dvpp-form { gap: 0; }

/* ---- Pas-à-pas ---- */
.dvpp-form--step .dvpp-q { display: none; }
.dvpp-form--step .dvpp-q.is-current { display: block; }

.dvpp-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.dvpp-step-track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: var(--color-grey);
    overflow: hidden;
}

.dvpp-step-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-yellow);
    transition: width .28s ease;
}

.dvpp-step-n {
    flex: 0 0 auto;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    color: var(--color-dark-grey);
    font-variant-numeric: tabular-nums;
}

.dvpp-step-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.dvpp-step-prev {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    text-decoration: underline;
    cursor: pointer;
}

.dvpp-step-prev:hover { color: var(--color-black); }
.dvpp-step-prev[hidden] { display: none; }

.dvpp-step-next {
    margin-left: auto;
    padding: 12px 26px;
    border: none;
    border-radius: 8px;
    background: var(--color-light-black);
    color: var(--color-white);
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: opacity .18s ease;
}

.dvpp-step-next:hover { opacity: .85; }
.dvpp-step-next[hidden] { display: none; }

/* Consentement et bouton d'envoi n'apparaissent qu'au dernier écran. */
.dvpp-form--step .dvpp-consent,
.dvpp-form--step .dvpp-actions { display: none; }
.dvpp-form--step.is-last .dvpp-consent { display: flex; margin-top: 20px; }
.dvpp-form--step.is-last .dvpp-actions { display: flex; }
.dvpp-form--step.is-last .dvpp-step-nav { margin-top: 14px; }

/* ---- Bandeau de nouveautés ---- */
.dvpp-news {
    margin: 0 0 26px;
    border: 1px solid var(--color-yellow);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-yellow) 12%, var(--color-white));
    padding: 14px 18px;
}

.dvpp-news-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-text);
}

.dvpp-news-head::-webkit-details-marker { display: none; }

.dvpp-news-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-yellow);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dvpp-news-lab { font-weight: var(--fw-bold); color: var(--color-black); }

.dvpp-news-more {
    margin-left: auto;
    font-size: var(--fs-text-phone);
    color: #8A6D1F;
    text-decoration: underline;
}

.dvpp-news[open] .dvpp-news-more { visibility: hidden; }

.dvpp-news-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.dvpp-news-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--color-white);
    border: 1px solid #ECEDF2;
    transition: border-color .16s ease, transform .16s ease;
}

.dvpp-news-card:hover { border-color: var(--color-yellow); transform: translateY(-1px); }
.dvpp-news-card-t { font-weight: var(--fw-bold); font-size: var(--fs-text); color: var(--color-black); }
.dvpp-news-card-d { font-size: var(--fs-text-phone); color: var(--color-dark-grey); line-height: 1.45; }

.dvpp-news-close {
    margin-top: 14px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    text-decoration: underline;
    cursor: pointer;
}

.dvpp-news-close:hover { color: var(--color-black); }

/* ---- Relance profil sur les recommandations ---- */
.dvpp-recos-nudge {
    margin: 0 0 18px;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    line-height: 1.5;
}

.dvpp-recos-nudge a {
    color: var(--color-black);
    font-weight: var(--fw-bold);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .dvpp-modal { padding: 12px; }
    .dvpp-modal-box { padding: 26px 20px 22px; max-height: 92vh; }
    .dvpp-step-next { width: 100%; margin-left: 0; }
    .dvpp-step-nav { flex-wrap: wrap; }
}

/* Sortie de l'onboarding : un lien discret, toujours accessible, qui ne
   dispute pas la place au bouton « Suivant ». */
.dvpp-skip {
    display: inline-block;
    margin-top: 16px;
    font-size: var(--fs-text-phone);
    color: var(--color-dark-grey);
    text-decoration: underline;
}

.dvpp-skip:hover { color: var(--color-black); }

/* --- Ce que les recommandations deviendront --- */
.dvpp-teaser {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 34px;
    padding: 20px 22px;
    border: 1px solid var(--color-yellow);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-yellow) 12%, #fff);
}

.dvpp-teaser-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-white);
    color: #8A6D2F;
}

.dvpp-teaser-txt { min-width: 0; }

.dvpp-teaser-t {
    margin: 0 0 4px;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
    color: var(--color-black);
}

.dvpp-teaser-d {
    margin: 0;
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
    max-width: 68ch;
}

.dvpp-teaser-liens {
    margin: 12px 0 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.dvpp-teaser-liens a {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dvpp-teaser-liens a:hover { color: #8A6D2F; }

@media (max-width: 640px) {
    .dvpp-teaser { flex-direction: column; gap: 12px; padding: 18px; }
}

/* --- Suivre mes vins --- */
.dvpp-suivi-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    border: 1px dashed #D9DBE1;
    border-radius: 14px;
}

.dvpp-suivi-vide-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-grey);
    color: var(--color-dark-grey);
}

.dvpp-suivi-vide-t { margin: 6px 0 0; font-size: var(--fs-subtitle); font-weight: var(--fw-bold); }
.dvpp-suivi-vide-d { margin: 0 0 8px; max-width: 56ch; color: var(--color-dark-grey); font-weight: var(--fw-light); }

.dvpp-suivi-groupe { margin-bottom: 38px; }

.dvpp-suivi-groupe-t {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
}

.dvpp-suivi-compte {
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    color: var(--color-dark-grey);
    background: var(--color-grey);
    border-radius: 999px;
    padding: 2px 10px;
}

.dvpp-suivi-groupe-d {
    margin: 0 0 16px;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    color: var(--color-dark-grey);
}

.dvpp-suivi-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.dvpp-suivi-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid #E8E9ED;
    border-radius: 12px;
}

.dvpp-suivi-vignette img { width: 72px; height: 72px; object-fit: contain; }

.dvpp-suivi-nom {
    display: block;
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    color: var(--color-black);
}

.dvpp-suivi-nom:hover { text-decoration: underline; text-underline-offset: 3px; }

.dvpp-suivi-etat { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dvpp-suivi-prix { font-size: var(--fs-text); font-weight: var(--fw-bold); }

.dvpp-suivi-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dvpp-suivi-voir { padding: .7em 1.3em !important; font-size: var(--fs-text-phone); }

/* Ce que l'on recevra : une information, pas un bouton. La cloche cliquable
   n'aurait pu que desabonner, sans le dire - c'est la croix qui s'en charge. */
.dvpp-suivi-statut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .5em .9em;
    border: 1px solid #E3E5EA;
    border-radius: 8px;
    background: #F8F9FB;
    color: var(--color-dark-grey);
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.dvpp-suivi-statut .dv-suivi-ico { flex: none; color: var(--color-light-black); }

/* Arreter de suivre. Discrete au repos, franche au survol : on ne pousse pas au
   desabonnement, mais on ne le cache pas non plus. */
.dvpp-suivi-retirer {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-dark-grey);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.dvpp-suivi-retirer:hover {
    border-color: #E7C9C3;
    background: #F6ECEA;
    color: #9A4A3E;
}

.dvpp-suivi-retirer:focus-visible {
    outline: 2px solid var(--color-light-black);
    outline-offset: 2px;
}

.dvpp-suivi-retirer.is-busy { opacity: .5; cursor: progress; }

/* --- La ligne qui s'en va ---
   Entre le clic et la reponse du serveur il s'ecoule une bonne seconde : la
   ligne se change en squelette plutot que de rester figee, puis se replie. */
.dvpp-suivi-item.is-partante {
    overflow: hidden;
    pointer-events: none;
    transition: height .28s ease, margin-bottom .28s ease,
                padding .28s ease, opacity .28s ease, border-color .28s ease;
}

.dvpp-suivi-item.is-repliee {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-color: transparent;
}

.dvpp-sq-corps { display: block; }

.dvpp-sq {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #ECEDF2 25%, #F7F8FB 50%, #ECEDF2 75%);
    background-size: 300% 100%;
    animation: dvpp-sq-luire 1.2s ease-in-out infinite;
}

.dvpp-sq-vignette { width: 72px; height: 72px; border-radius: 10px; }
.dvpp-sq-titre    { width: min(340px, 70%); height: 15px; }
.dvpp-sq-etat     { width: min(180px, 42%); height: 13px; margin-top: 11px; }
.dvpp-sq-action   { width: 180px; height: 34px; margin-left: auto; }

@keyframes dvpp-sq-luire {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dvpp-sq { animation: none; }
    .dvpp-suivi-item.is-partante { transition-duration: .01ms; }
}

@media (max-width: 720px) {
    .dvpp-sq-vignette { width: 60px; height: 60px; }
    .dvpp-sq-action { width: 100%; margin-left: 0; }
}

/* --- La confirmation --- */
.dvpp-suivi-boite {
    /* Le reset global du theme (* { margin: 0 }) prive <dialog> du margin:auto
       dont il se sert pour se centrer : sans ces quatre lignes, la boite se
       colle en haut a gauche de l'ecran. */
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100vh - 32px);
    overflow: auto;

    width: min(440px, calc(100vw - 32px));
    padding: 26px 28px 22px;
    border: none;
    border-radius: 14px;
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 18px 48px rgba(24, 24, 28, .22);
}

.dvpp-suivi-boite::backdrop { background: rgba(24, 24, 28, .45); }

.dvpp-suivi-boite-t {
    margin: 0 0 10px;
    font-size: var(--fs-subtitle-phone);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.dvpp-suivi-boite-nom {
    margin: 0 0 10px;
    font-size: var(--fs-text);
    font-weight: var(--fw-bold);
}

.dvpp-suivi-boite-d {
    margin: 0 0 22px;
    color: var(--color-dark-grey);
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-light);
    line-height: 1.55;
}

.dvpp-suivi-boite-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dvpp-suivi-boite-actions button {
    padding: .75em 1.4em;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--fs-text-phone);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.dvpp-suivi-boite-non {
    border: 1px solid #D9DBE1;
    background: var(--color-white);
    color: var(--color-black);
}

.dvpp-suivi-boite-non:hover { border-color: var(--color-light-black); }

/* Le geste destructeur porte sa couleur, sans crier. */
.dvpp-suivi-boite-oui {
    border: 1px solid #9A4A3E;
    background: #9A4A3E;
    color: var(--color-white);
}

.dvpp-suivi-boite-oui:hover { background: #833E34; border-color: #833E34; }

@media (max-width: 720px) {
    .dvpp-suivi-statut { font-size: 12px; padding: .45em .75em; }
}

@media (max-width: 780px) {
    .dvpp-suivi-item { grid-template-columns: 60px minmax(0, 1fr); }
    .dvpp-suivi-vignette img { width: 60px; height: 60px; }
    .dvpp-suivi-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   Telephone : une seule gouttiere pour tout l'espace compte
   =========================================================================
   Les panneaux de contenu heritaient du 75 % concu pour la colonne de droite
   du bureau. Passe en pile, ce 75 % laissait un quart de l'ecran vide a droite
   et decalait le contenu par rapport au menu, qui lui etait centre. Une seule
   gouttiere, la meme pour le menu et pour le contenu : c'est elle qui aligne. */
@media (max-width: 640px) {
    :root { --dvpp-gouttiere: 20px; }

    .dvpp-cave,
    .dvpp-account,
    .compte-contentCompte.dvpp-account,
    .compte-contentCommandes.dvpp-account,
    .dvpp-tab,
    .dvpp-onboarding {
        display: block;
        width: 100%;
        margin: 0;
        padding: 24px var(--dvpp-gouttiere) 48px;
        justify-content: initial;
    }

    /* Le plugin de parrainage impose ses valeurs : il faut le meme poids. */
    .parrainage-compte {
        width: 100% !important;
        padding: 24px var(--dvpp-gouttiere) 48px !important;
    }

    /* --- Le menu devient un bandeau qui defile ---
       `position: relative` est necessaire a la barre de chargement, mais il
       reveille le `top: 120px` du menu colle du bureau : sans `top: auto`, le
       bandeau descend de 120px et recouvre le titre de la page. La regle mobile
       precedente s'en tirait par `position: static`, ou `top` est ignore. */
    .compte-menus {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 0;
        display: block;
        position: relative;
        inset: auto;
        order: 0;
    }

    /* Huit entrees empilees poussaient le contenu a 600px sous l'entete : sur
       un telephone, on ne voyait jamais la page qu'on venait d'ouvrir. */
    .compte-menus-wrapper {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 0;
        column-gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        /* Pas de scroll-snap : avec snap-align:start, la premiere puce se colle
           au bord de l'ecran et avale la gouttiere, donc l'alignement avec le
           titre de page - la raison d'etre de ce bandeau. */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #C9CBD3 transparent;
        padding: 12px var(--dvpp-gouttiere);
    }

    /* L'attente est celle du serveur ; on ne peut que la rendre visible. */
    .compte-menus.is-chargement::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--color-yellow);
        transform-origin: left;
        animation: dvpp-attente 1.6s ease-out forwards;
    }

    @keyframes dvpp-attente {
        from { transform: scaleX(0); }
        to   { transform: scaleX(.92); }
    }

    .compte-menus-wrapper::-webkit-scrollbar { height: 4px; }
    .compte-menus-wrapper::-webkit-scrollbar-thumb { background: #C9CBD3; border-radius: 2px; }

    .compte-menus-wrapper a,
    .compte-menus-wrapper button {
        flex: none;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        background: var(--color-white);
        border: 1px solid #E1E3E9;
        font-size: var(--fs-text-phone);
        font-weight: var(--fw-medium);
        color: var(--color-dark-grey);
        /* line-height:1 : en 1.2, la puce active (en gras) prenait une boite de
           ligne plus haute que ses voisines et decrochait verticalement. */
        line-height: 1;
        box-sizing: border-box;
    }

    .compte-menus-wrapper .compte-menus-wrapper-active {
        background: var(--color-light-black);
        border-color: var(--color-light-black);
        color: var(--color-white);
        font-weight: var(--fw-bold);
    }

    .compte-menus-wrapper .dvpp-nav-ico { width: 16px; height: 16px; flex: none; }

    /* La pastille « Nouveau » dans une puce : plus petite, sans marge gauche
       propre puisque la puce a deja son gap. */
    .compte-menus-wrapper .dvpp-new { margin-left: 2px; padding: 1px 6px; font-size: 9px; }

    /* Le titre de page reprend la gouttiere : c'est lui que l'oeil aligne
       sur la premiere puce du menu. */
    .dvpp-head,
    .dvpp-account-head { padding: 0; }
}