/* Spliff — Popup « Recharge » AVANT l'ajout au panier (feature recharge-upsell)
 *
 * Desktop : carte centrée (fade + scale). Mobile : feuille pleine largeur
 * posée en bas (slide-up), qui prend AU PLUS tout l'écran.
 *
 * La carte ne dépasse JAMAIS l'écran (25/09/2026 — sur iPhone, 9 goûts, la
 * carte faisait plus que l'écran : titre et croix sortis par le haut, « Non
 * merci » caché sous la barre de Safari, tout se jouait au défilement). La
 * carte est une colonne flex bornée à la hauteur visible :
 *   - en-tête (image, titre, croix) et actions (bouton, « Non merci ») sont
 *     FIXES — la croix et « Non merci » sont toujours à l'écran ;
 *   - la zone de choix entre les deux est la seule à céder : ses rangées de
 *     tuiles (grille minmax) se tassent de 64 px jusqu'à 48 px (44 sur écran
 *     court) pour tenir ;
 *   - ce n'est que si ce minimum ne tient pas (très petit écran, beaucoup de
 *     goûts) que la zone de choix défile, seule, sous l'en-tête et au-dessus
 *     du bouton.
 * Paliers par HAUTEUR d'écran (≤ 700 px, ≤ 640 px) : la photo, puis les
 * dessins des cartes pack et le bandeau d'incitation cèdent leur place.
 *
 * Les boutons forcent leurs fonds en !important sur hover/focus/active : les
 * thèmes (Astra…) peignent les <button> au survol — même défense que les
 * autres modules Spliff. */

.spliff-rup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.spliff-rup[hidden] {
    display: none;
}
.spliff-rup *,
.spliff-rup *::before,
.spliff-rup *::after {
    box-sizing: border-box;
}

/* Scroll de fond verrouillé tant que la popup est ouverte (posé par le JS). */
html.spliff-rup-lock {
    overflow: hidden;
}

.spliff-rup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 16, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.spliff-rup.is-open .spliff-rup__overlay {
    opacity: 1;
}

.spliff-rup__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
    outline: none;
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    /* Typo D.A. déclarée EXPLICITEMENT : la popup vit en wp_footer, HORS des
       conteneurs Elementor → sans ça elle hérite des règles du thème (le h3
       du titre tombait sur Outfit). Syne PARTOUT dans la popup ; la famille
       est déjà @font-face site-wide (graisse variable). */
    font-family: 'Syne', sans-serif;
}
.spliff-rup.is-open .spliff-rup__card {
    opacity: 1;
    transform: none;
}

/* Les <button> n'héritent PAS de la police (défaut UA) → on force l'héritage
   sur tous les interactifs de la popup (même défense que les autres modules). */
.spliff-rup button {
    font-family: inherit;
}

/* ── En-tête : image · titre + nom · croix. Ne défile jamais. ── */
.spliff-rup__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.spliff-rup__head img,
.spliff-rup__img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: #F4F4F4;
    flex-shrink: 0;
}
.spliff-rup__info {
    flex: 1 1 auto;
    min-width: 0;
}
/* Le titre (h3) matche les règles ÉLÉMENT du thème (h3) : marge et Syne
   re-déclarées explicitement. */
.spliff-rup .spliff-rup__title {
    margin: 0;
    padding: 0;
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-transform: none;
    color: #0F0F10;
}
.spliff-rup__name {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #5C5C5C;
}

/* Croix : 44 px (cible tactile iOS/Android), toujours dans l'en-tête. */
.spliff-rup__close {
    flex: none;
    align-self: flex-start;
    width: 44px;
    height: 44px;
    margin: -6px -6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #F1F1F2 !important;
    color: #0F0F10 !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
.spliff-rup__close:hover,
.spliff-rup__close:focus,
.spliff-rup__close:active {
    background: #E4E4E6 !important;
    color: #0F0F10 !important;
    box-shadow: none !important;
    outline: none !important;
}
.spliff-rup__close:focus-visible {
    outline: 2px solid #3D5BFF !important;
    outline-offset: 2px;
}

/* ── Sélecteur de la recharge : bloc .spc-mix du moteur spliff-pack-mix
   (compact). Son style vient de pack-mix.css ; on ne règle ici que son
   insertion dans la carte, et la façon dont il cède de la hauteur.
   Chaîne qui rétrécit : .spliff-rup__mix → .spc-mix → .spc-tiles. Tout le
   reste de la carte est en flex: none. ── */
.spliff-rup__mix {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* marges négatives + padding : l'ombre des cartes pack n'est pas rognée
       par le overflow du bloc */
    margin: 12px -4px 0;
    padding: 0 4px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.spliff-rup__mix[hidden] {
    display: none;
}
.spliff-rup__mix > .spc-mix {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.spliff-rup__mix > .spc-mix > * {
    flex: none;
}
/* Les tuiles : rangées de 48 à 64 px — la grille prend ce que la carte lui
   laisse (`min-height: 0` : le minimum automatique d'un item flex vaudrait sa
   hauteur de contenu, rangées à 64 px, et rien ne céderait). Sous 48 px, les
   rangées ne descendent plus : elles débordent de la grille et c'est le bloc
   .spliff-rup__mix qui défile — jamais une tuile écrasée. */
.spliff-rup .spc-mix .spc-tiles {
    flex: 0 1 auto;
    min-height: 0;
    grid-auto-rows: minmax(48px, 64px);
    align-content: start;
}
.spliff-rup .spc-mix .spc-tile {
    height: auto;
    gap: 2px;
    padding: 3px;
}
/* Plus de 12 goûts : 4 colonnes (libellés sur 2 lignes au besoin). */
.spliff-rup .spliff-rup-mix--many .spc-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.spliff-rup .spliff-rup-mix--many .spc-tile {
    font-size: 11px;
}
/* Le toast du moteur passe au-dessus de la popup (z-index dans son contexte). */
.spliff-rup .spc-toast {
    z-index: 2;
}

.spliff-rup__actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.spliff-rup__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: #3D5BFF !important;
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.spliff-rup__add:hover,
.spliff-rup__add:focus {
    background: #2F49E0 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    outline: none !important;
}
.spliff-rup__add:active {
    transform: scale(0.985);
}
.spliff-rup__add.spc-btn--idle {
    opacity: 0.8;
}
.spliff-rup__add[hidden],
.spliff-rup__skip[hidden] {
    display: none;
}
.spliff-rup__add.is-nudge {
    animation: spliffRupNudge 0.3s ease;
}
@keyframes spliffRupNudge {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
}

/* ── Contenu du bouton = peint par le moteur pack-mix (mêmes classes que
   sa barre collante, non stylées hors `.spc-mix`) :
   .spc-btn__l  « Ajouter N packs | <s>régulier</s> net » (à 0 : « Choisissez vos goûts »)
   .spc-btn__cb « Vous économisez X € et obtenez Y € de cashback »
                (à 0 : rappel des paliers « 1 pack = … · 2+ = −10 % · 3+ = −20 % »). ── */
.spliff-rup__add {
    flex-direction: column;
    gap: 3px;
    line-height: 1.2;
}
.spliff-rup__add .spc-btn__l {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
}
.spliff-rup__add .spc-btn__l i {
    opacity: 0.6;
    font-style: normal;
}
.spliff-rup__add .spc-btn__l s {
    /* prix non remisé barré, en vert (token « vert barré » du chantier) */
    color: #39FF14;
    font-size: 13px;
    font-weight: 600;
}
.spliff-rup__add .spc-btn__cb {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
    text-align: center;
}

/* Message dans la carte : plafond atteint, ajout en échec (posé par le JS). */
.spliff-rup__msg {
    flex: none;
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #FEF3F2;
    color: #B42318;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.spliff-rup__msg[hidden] {
    display: none;
}

/* « Non merci » : discret, mais une vraie cible tactile (40 px) sous le bouton */
.spliff-rup__skip {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 0;
    border: 0;
    background: transparent !important;
    color: #5C5C5C !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.spliff-rup__skip:hover,
.spliff-rup__skip:focus,
.spliff-rup__skip:active {
    background: transparent !important;
    color: #0F0F10 !important;
    outline: none !important;
}

.spliff-rup__add.spc-btn--loading,
.spliff-rup__add[disabled] {
    /* ajout en vol (promesse de onAdd en attente) : le moteur désactive le bouton */
    opacity: 0.65;
    pointer-events: none;
}

/* ── Mobile : feuille pleine largeur, AU PLUS tout l'écran ──
   `.spliff-rup` est en fixed inset:0 → sa hauteur est la zone VISIBLE (barres
   du navigateur déduites, iOS comme Android) ; la carte y est bornée à 100 %
   (et non à 92vh : sur iOS, vh = écran barres repliées, plus haut que la zone
   visible — c'est ce qui faisait déborder la carte). */
@media (max-width: 767px) {
    .spliff-rup {
        align-items: flex-end;
        padding: 0;
    }
    .spliff-rup__card {
        max-width: none;
        max-height: 100%;
        border-radius: 16px 16px 0 0;
        padding: 14px 16px calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
        transform: translateY(28px);
    }
    .spliff-rup.is-open .spliff-rup__card {
        transform: none;
    }
    .spliff-rup__head img,
    .spliff-rup__img {
        width: 48px;
        height: 48px;
    }
    .spliff-rup__actions {
        margin-top: 10px;
        gap: 0;
    }
    /* Bouton : une ligne d'action, une ligne de cashback — pas trois. */
    .spliff-rup__add .spc-btn__l {
        gap: 5px;
        font-size: 14px;
    }
    .spliff-rup__add .spc-btn__cb {
        font-size: 11.5px;
    }
}

/* Téléphones étroits : le prix barré du bouton renvoyait le prix net seul à
   la ligne (bouton sur 3 lignes). L'économie reste dite deux fois — carte
   pack (barré) et ligne cashback du bouton. */
@media (max-width: 429px) {
    .spliff-rup__add .spc-btn__l s {
        display: none;
    }
}

/* Écrans moyens (iPhone 12→16 dans Safari, ≈ 660-700 px visibles) : la photo
   cède sa place au titre (2 lignes au lieu de 3), dessins des cartes pack et
   bandeau plus petits. Réglé pour tenir APRÈS le choix des goûts (bouton sur
   2 lignes, carte pack active plus haute), pas seulement à l'ouverture. */
@media (max-width: 767px) and (max-height: 700px), (max-height: 520px) {
    .spliff-rup__head img,
    .spliff-rup__img {
        display: none;
    }
    .spliff-rup .spliff-rup__title {
        font-size: 15px;
    }
    .spliff-rup .spc-mix--compact .spc-pack .spc-pack__pic {
        height: 28px;
    }
    .spliff-rup .spc-mix--compact .spc-pack .spc-pack__pic svg {
        height: 28px;
        width: 28px;
    }
    .spliff-rup .spc-mix--compact .spc-pack .spc-pack__pic svg.spp-wide {
        width: 50px;
    }
    .spliff-rup .spc-mix--compact .spc-nudge {
        margin-top: 6px;
        padding: 6px 10px;
    }
    .spliff-rup .spc-mix .spc-tiles {
        grid-auto-rows: minmax(46px, 64px);
    }
}

/* Écrans courts (iPhone SE, Android compacts, paysage) : on va plus loin —
   plus de dessins sur les cartes pack, plus de bandeau d'incitation (il
   redit les paliers déjà écrits sur les cartes et sous le bouton). */
@media (max-width: 767px) and (max-height: 640px), (max-height: 520px) {
    .spliff-rup__card {
        padding-top: 10px;
    }
    .spliff-rup .spliff-rup__title {
        font-size: 14px;
    }
    .spliff-rup__close {
        margin-top: -4px;
    }
    .spliff-rup__mix {
        margin-top: 8px;
    }
    .spliff-rup .spc-mix--compact .spc-pack .spc-pack__pic,
    .spliff-rup .spc-mix--compact [data-spc-nudge] {
        display: none;
    }
    .spliff-rup .spc-mix--compact .spc-pack,
    .spliff-rup .spc-mix--compact.spc-mix--pic .spc-pack {
        min-height: 0;
        padding-top: 26px;
    }
    .spliff-rup .spc-mix--compact .spc-pack .spc-rib {
        height: 22px;
    }
    .spliff-rup .spc-mix--compact .spc-sub {
        margin: 8px 0 6px;
    }
    .spliff-rup .spc-mix .spc-tiles {
        grid-auto-rows: minmax(44px, 64px);
    }
    .spliff-rup__actions {
        margin-top: 8px;
    }
    .spliff-rup__add {
        min-height: 48px;
        padding: 8px 14px;
    }
    .spliff-rup__skip {
        min-height: 36px;
        padding: 6px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spliff-rup__overlay,
    .spliff-rup__card,
    .spliff-rup__add {
        transition: none;
    }
}