/* privilegepopup v1.1.0 — bulle statut Privilège (fiche + listes)
   Couleurs pilotées par les variables --pp-orange / --pp-bg injectées
   depuis le back-office (hookHeader). Valeurs par défaut ci-dessous. */

:root {
    --pp-orange: #ff6600;
    --pp-bg:     #fff6ef;
}

/* Indice visuel au survol du lien */
.privileges-price,
.privileges-price a { cursor: help; }

/* ---------------------------------------------------------- */
/*  Bulle                                                      */
/* ---------------------------------------------------------- */
.is-privpop {
    position:      fixed;
    display:       none;
    width:         290px;
    max-width:     92vw;
    background:    var(--pp-bg, #fff6ef);
    border:        2px solid var(--pp-orange, #ff6600);
    border-radius: 12px;
    padding:       10px 11px;
    box-shadow:    0 12px 40px rgba(0, 0, 0, .18);
    z-index:       100000;
    text-align:    left;
    font-family:   Arial, Helvetica, sans-serif;
    opacity:       0;
    transition:    opacity .15s ease;
}
.is-privpop.is-visible { display: block; opacity: 1; }
.is-privpop *          { box-sizing: border-box; }

/* ---------------------------------------------------------- */
/*  Flèche « bulle BD » — double bordure                       */
/* ---------------------------------------------------------- */
.is-privpop-arrow { position: absolute; width: 0; height: 0; }

.is-privpop-arrow::before,
.is-privpop-arrow::after {
    content:      "";
    position:     absolute;
    width:        0;
    height:       0;
    border-style: solid;
    border-color: transparent;
}

/* Bulle AU-DESSUS de la cible → pointe vers le bas */
.is-privpop.is-above .is-privpop-arrow { top: 100%; }
.is-privpop.is-above .is-privpop-arrow::before {
    border-width: 9px; border-top-color: var(--pp-orange, #ff6600); left: -9px; top: 0;
}
.is-privpop.is-above .is-privpop-arrow::after {
    border-width: 7px; border-top-color: var(--pp-bg, #fff6ef); left: -7px; top: -2px;
}

/* Bulle EN DESSOUS de la cible → pointe vers le haut */
.is-privpop.is-below .is-privpop-arrow { bottom: 100%; }
.is-privpop.is-below .is-privpop-arrow::before {
    border-width: 9px; border-bottom-color: var(--pp-orange, #ff6600); left: -9px; bottom: 0;
}
.is-privpop.is-below .is-privpop-arrow::after {
    border-width: 7px; border-bottom-color: var(--pp-bg, #fff6ef); left: -7px; bottom: -2px;
}

/* ---------------------------------------------------------- */
/*  En-tête                                                    */
/* ---------------------------------------------------------- */
.is-privpop-title {
    font-size:      11px;
    font-weight:    bold;
    color:          #545454;
    text-transform: uppercase;
    text-align:     center;
    padding-bottom: 6px;
    margin-bottom:  8px;
    border-bottom:  2px solid var(--pp-orange, #ff6600);
    letter-spacing: .2px;
}
.is-privpop-title b { color: var(--pp-orange, #ff6600); }
.is-privpop-title small {
    display:        block;
    text-transform: none;
    font-weight:    normal;
    font-style:     italic;
    color:          #999;
    font-size:      9.5px;
    margin-top:     3px;
    letter-spacing: 0;
}

/* ---------------------------------------------------------- */
/*  Étapes                                                     */
/* ---------------------------------------------------------- */
.is-privpop-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   5px;
}
.is-privpop-step {
    background:    #fff;
    border-left:   3px solid var(--pp-orange, #ff6600);
    border-radius: 4px;
    padding:       5px 7px;
}
.is-privpop-step b {
    display:        block;
    color:          var(--pp-orange, #ff6600);
    font-weight:    bold;
    text-transform: uppercase;
    font-size:      9px;
    margin-bottom:  2px;
    letter-spacing: .2px;
}
.is-privpop-step span {
    font-size:   10px;
    color:       #545454;
    line-height: 1.3;
}
.is-privpop-step em {
    color:       var(--pp-orange, #ff6600);
    font-style:  normal;
    font-weight: bold;
}

/* ---------------------------------------------------------- */
/*  Note « à savoir » + bas de bulle                           */
/* ---------------------------------------------------------- */
.is-privpop-note {
    margin-top:    7px;
    background:    #fff;
    border:        1px dashed var(--pp-orange, #ff6600);
    border-radius: 6px;
    padding:       6px 8px;
    font-size:     9.5px;
    color:         #545454;
    line-height:   1.35;
}
.is-privpop-note b { color: var(--pp-orange, #ff6600); }

.is-privpop-foot {
    font-size:   8.5px;
    color:       #aaa;
    font-style:  italic;
    margin:      6px 0 0;
    line-height: 1.3;
}

.is-privpop-more {
    display:         block;
    text-align:      right;
    margin-top:      6px;
    font-size:       10px;
    font-weight:     bold;
    color:           var(--pp-orange, #ff6600);
    text-decoration: none;
}
.is-privpop-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------- */
/*  Mobile — bulle centrée fixe                                */
/* ---------------------------------------------------------- */
.is-privpop.is-mobile {
    position:   fixed;
    left:       10px;
    right:      10px;
    width:      auto;
    max-width:  none;
    top:        50%;
    transform:  translateY(-50%);
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.is-privpop.is-mobile .is-privpop-arrow { display: none; }

@media (max-width: 480px) {
    .is-privpop-grid { grid-template-columns: 1fr; }
}