/* Spliff Loyalty — Front CSS v2.0.8 */
:root{--sl-dark:#1b1b1b;--sl-light:#f9f9f9;--sl-accent:#E8A838;--sl-accent-soft:rgba(232,168,56,0.10);--sl-accent-border:rgba(232,168,56,0.25);--sl-green:#2e7d32;--sl-green-soft:rgba(46,125,50,0.08);--sl-red:#c62828;--sl-radius:14px;--sl-radius-sm:10px;--sl-font:'Syne',-apple-system,BlinkMacSystemFont,sans-serif}
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');
.sl-club,.sl-club *{box-sizing:border-box;margin:0;padding:0}
.sl-hidden{display:none !important}
.sl-club{font-family:var(--sl-font);background:var(--sl-light);max-width:100%;margin:0 auto;min-height:100vh;-webkit-font-smoothing:antialiased}

/* Guest (non logged-in) wrapper around [woocommerce_my_account] login/register form */
.sl-club-guest{box-sizing:border-box;padding:24px 20px;max-width:1280px;margin:0 auto;width:100%}
.sl-club-guest *{box-sizing:border-box}
@media(min-width:768px){.sl-club-guest{padding:48px 40px}}

/* HERO */
.sl-hero{position:relative;padding:20px;overflow:hidden}
.sl-hero-bg{position:absolute;inset:0;background:var(--sl-dark);background-size:cover;background-position:center;z-index:0}
.sl-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(27,27,24,0.7) 0%,rgba(27,27,24,0.35) 100%);z-index:1}
.sl-hero-content{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:stretch;gap:16px;padding:0;max-width:740px;margin:0 auto}
.sl-hero-left{display:flex;flex-direction:column;justify-content:space-between;flex:1;min-width:0}
.sl-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.sl-hero-brand{display:flex;align-items:center;gap:20px}
.sl-hero-logo{font-family:var(--sl-font);font-size:14px;font-weight:800;color:var(--sl-light);line-height:1;letter-spacing:.5px}
.sl-hero-logo span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:2px;opacity:.7}
.sl-tier-pill{font-size:9px !important;font-weight:800;padding:2px 10px;border-radius:99px;letter-spacing:1.5px;text-transform:uppercase;display:inline-block}
.sl-hero-greeting{font-size:12px;color:rgba(249,249,249,0.75);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.sl-hero-account-btn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(249,249,249,0.3);background:rgba(249,249,249,0.1);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.sl-hero-account-btn:hover{background:rgba(249,249,249,0.2)}
.sl-hero-balance{background:rgba(249,249,249,0.12);backdrop-filter:blur(8px);border:1px solid rgba(249,249,249,0.15);padding:6px 12px;border-radius:var(--sl-radius-sm);text-align:center;line-height:1.1}
.sl-hero-balance-amount{font-weight:800;font-size:16px;color:var(--sl-light)}
.sl-hero-balance-label{font-size:8px;color:rgba(249,249,249,0.5);text-transform:uppercase;letter-spacing:1px;margin-top:0}

/* HEADER STICKY — hero + tabs stick together */
.sl-header-sticky{position:sticky;top:0;z-index:50;background:var(--sl-dark)}
.sl-header-sticky::after{content:'';display:block;height:0}
body.admin-bar .sl-header-sticky{top:32px}
@media screen and (max-width:782px){body.admin-bar .sl-header-sticky{top:46px}}
/* Recette du 15/10/2026 : l'en-tête du site (`.spliff-smart-header`, snippet CFM hors dépôt : collant, caché en
   descendant, revenu en remontant, z-index 9999) collait au même top:0 que le bandeau du Club et passait PAR-DESSUS
   dès qu'on remontait, mobile comme desktop. Revenu, il pousse maintenant le bandeau dessous : le snippet publie sa
   hauteur dans --spliffHeaderH, et la même durée que son translateY (.22s) les fait descendre ensemble. Caché, le
   bandeau reprend le haut de l'écran. Sans :has() (Safari < 15.4), l'ancien comportement. */
.sl-header-sticky{transition:top .22s ease}
html:has(.spliff-smart-header:not(.spliff-header--hidden)) .sl-header-sticky{top:var(--spliffHeaderH,0px)}
html:has(.spliff-smart-header:not(.spliff-header--hidden)) body.admin-bar .sl-header-sticky{top:calc(32px + var(--spliffHeaderH,0px))}
@media screen and (max-width:782px){html:has(.spliff-smart-header:not(.spliff-header--hidden)) body.admin-bar .sl-header-sticky{top:calc(46px + var(--spliffHeaderH,0px))}}

/* TABS — tier colored */
.sl-tabs-wrap{background:#fff;border-bottom:1px solid #EBEBEB;position:static;width:100%}
.sl-tabs{display:flex;gap:0;max-width:100%;margin:0 auto}
.sl-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;border:none;background:none;cursor:pointer;font-family:var(--sl-font);font-size:9px !important;font-weight:600;color:#AAA;letter-spacing:.8px;text-transform:uppercase;transition:color .2s,border-color .2s;border-bottom:2.5px solid transparent;flex:1;white-space:nowrap;position:relative}
.sl-tab-badge{position:absolute;top:3px;left:50%;transform:translateX(2px);display:flex;align-items:center;justify-content:center;min-width:16px;height:16px;box-sizing:border-box;padding:0 4px;border-radius:99px;font-size:10px;font-weight:normal;line-height:1;letter-spacing:0}
.sl-tab.active{color:var(--tier-color,var(--sl-dark));border-bottom-color:var(--tier-color,var(--sl-dark));background:none !important;box-shadow:none !important;outline:none !important}
.sl-tab:hover:not(:focus-visible){background:rgba(0,0,0,0.03) !important}
.sl-tab:focus,.sl-tab:active,.sl-tab:focus-visible{background:none !important;box-shadow:none !important;outline:none !important}
.sl-tab:not(.active):hover:not(:focus-visible){color:var(--tier-color,#666);border-bottom-color:rgba(0,0,0,0.08)}

.sl-content{padding:18px 16px 50px}
.sl-panel{display:none;flex-direction:column;gap:18px}
.sl-panel.active{display:flex}
.sl-card{background:#fff;border-radius:var(--sl-radius);border:1px solid #EBEBEB;padding:18px;transition:box-shadow .25s;overflow:hidden}
.sl-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.sl-section{display:flex;flex-direction:column;gap:10px}
.sl-section-title{font-weight:800;font-size:16px;color:var(--sl-dark);text-transform:uppercase;letter-spacing:1px}
.sl-section-sub{font-size:11px;color:#999}
.sl-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Club V2 · L4c : palier, privilèges, parrainage, volets cashback et niveau ont leurs règles dans le bloc « Club V2 (L4c) ».
   Bloc amené à l'écran par le bouton d'une mission (parrainage) : un halo doré, une fois */
@keyframes sl-flash{0%{box-shadow:0 0 0 0 rgba(232,168,56,0)}25%{box-shadow:0 0 0 4px rgba(232,168,56,.75)}100%{box-shadow:0 0 0 0 rgba(232,168,56,0)}}
.sl-flash{animation:sl-flash 1.8s ease-out .3s 1;border-radius:12px}
@media (prefers-reduced-motion:reduce){.sl-flash{animation:none}}

/* Cashback bloqué sur une commande « Échouée » (4.118.2, allégé en 4.118.3) : une phrase, ton ambre de l'astuce panier, fond clair plein (lisible sur la carte sombre) */
.sl-held-cb{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:9px 12px;background:#FBF3E3;border:1px solid rgba(232,168,56,0.35);border-radius:10px;text-align:left;cursor:default}
.sl-held-cb-ico{flex-shrink:0;line-height:0;margin-top:1px}
.sl-held-cb p{margin:0;font-size:12px;line-height:1.45;color:#8B6914;font-weight:600}
.sl-held-cb-btn{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;font-weight:800;color:#8B6914;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sl-held-cb-btn:hover{color:#5f4610}
.sl-tracking-card-footer .sl-held-cb{margin:0 0 12px}
a.sl-held-cb-btn{color:#8B6914}
.sl-held-cb-line{display:flex;align-items:center;gap:5px;margin:6px 0 0;font-size:11px;font-weight:700;color:#8B6914}

/* INPUTS */
.sl-input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-family:var(--sl-font);font-size:14px;outline:none;transition:border .2s}
.sl-input:focus{border-color:var(--tier-color,var(--sl-accent))}
.sl-result-msg{margin-top:8px;padding:10px;border-radius:8px;font-size:12px;font-weight:600;text-align:center}
.sl-result-msg.success{background:var(--sl-green-soft);color:var(--sl-green)}
.sl-result-msg.error{background:rgba(198,40,40,0.08);color:var(--sl-red)}

/* HISTORY v2 */
.sl-filter-bar{display:flex;gap:5px}
.sl-filter-btn{padding:5px 12px;border:1px solid #eee;border-radius:99px;background:#fff;font-family:var(--sl-font);font-size:10px;font-weight:600;color:#bbb;cursor:pointer;transition:all .2s}
.sl-filter-btn.active{background:var(--sl-dark);color:var(--sl-light);border-color:var(--sl-dark)}
.sl-history-list{display:flex;flex-direction:column}
.sl-tx{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f5f5f5}
.sl-tx:last-child{border-bottom:none}

/* TRACKING CARD — Club V2 · L1b : carte CLAIRE (blanc, gris doux), le noir ne reste que sur Apple Pay.
   Pas de vert (hors DA) : bleu pour ce qui est fait ou validé, doré pour l'étape en cours et le cashback,
   rouge pour un incident, ambre pour une attente. Jetons locaux à l'onglet Commandes et à la fiche :
   --sl-green y est surchargée, Missions et parrainage gardent la leur. `.sl-tracking-card` seule les porte
   aussi pour l'aperçu admin (admin/views/tracking-preview.php), rendu hors de #sl-panel-orders. */
#sl-panel-orders,#sl-order-modal,.sl-tracking-card{--sl-green:#5A8BFF;--sl-green-soft:#EEF3FF;--o-ink:#1b1b1b;--o-ink2:#55554f;--o-mute:#8b8b85;--o-line:#ECECE8;--o-soft:#F6F6F3;--o-chip:#F1F1EC;--o-blue:#5A8BFF;--o-blue-ink:#3561D9;--o-blue-soft:#EEF3FF;--o-gold:#E8A838;--o-gold-ink:#9A6410;--o-gold-soft:rgba(232,168,56,.12);--o-red:#B42318;--o-red-soft:#FDEDED;--o-red-line:#F6CFCF;--o-amber:#A16207;--o-amber-soft:#FFF5E2;--o-amber-line:#F3DDAF}
/* Pictos maison (Spliff_Loyalty_Icons) */
svg.spi{display:inline-block;vertical-align:middle;flex-shrink:0}
svg.spi.in{margin:-2px 5px 0 0}
.sl-tracking-card{background:#fff;border:1px solid var(--o-line);border-radius:18px;padding:16px;cursor:pointer;transition:box-shadow .25s;color:var(--o-ink);box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(0,0,0,.12)}
.sl-tracking-card:hover{box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -14px rgba(0,0,0,.18)}
.sl-tracking-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.sl-tracking-card-label{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.9px;color:var(--o-blue-ink);font-weight:700}
.sl-tracking-card-label b{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;animation:slOrdLive 1.6s infinite}
@keyframes slOrdLive{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.sl-tracking-card-label b{animation:none}}
.sl-tracking-card-order{font-size:15px;font-weight:800;margin-top:6px;color:var(--o-ink)}
.sl-tracking-card-status{display:inline-flex;align-items:center;flex-shrink:0;max-width:52%;min-height:24px;padding:4px 10px;border-radius:99px;background:var(--o-blue-soft);color:var(--o-blue-ink);font-size:11px;font-weight:700;text-align:center;line-height:1.25 !important}
/* Frise (Spliff_Loyalty_Tracking::render_timeline, partagée carte + fiche) : fait = pastille bleue cochée,
   en cours = picto dans un anneau doré (bleu au relais, colis prêt), la suite en pointillés gris. */
.sl-tracking-timeline{display:flex;align-items:flex-start;margin:4px -2px 14px}
.sl-tl-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;min-width:34px}
.sl-tl-step span{max-width:78px;font-size:10.5px;line-height:1.2;font-weight:600;color:#A5A59E;text-align:center}
.sl-tl-step.done span{color:var(--o-ink2)}
.sl-tl-step.current span{color:var(--o-ink);font-weight:700}
.sl-tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px dashed #D3D3CC;background:#fff}
.sl-tl-dot.done{background:var(--o-blue);border:0}
.sl-tl-dot.current{width:34px;height:34px;margin-top:-3px;background:#fff;border:2.5px solid var(--o-gold);box-shadow:0 0 0 5px var(--o-gold-soft)}
.sl-tl-step.current.ok .sl-tl-dot{border-color:var(--o-blue);box-shadow:0 0 0 5px var(--o-blue-soft)}
/* Ce qui reste à parcourir est pointillé gris : surtout pas de plein partiel, qui se lit
   comme « presque livré » (cf. retour clients 07/2026). */
.sl-tl-line{flex:1;height:3px;margin:13px 4px 0;border-radius:2px;background:repeating-linear-gradient(90deg,#D9D9D3 0 5px,transparent 5px 9px)}
.sl-tl-line.active{background:var(--o-blue)}
/* Titre d'état de la fiche — première info lue, avant les pastilles. */
.sl-tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sl-tl-badge{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:700;line-height:1.25}
.sl-tl-badge.live,.sl-tl-badge.ok{background:var(--o-blue-soft);color:var(--o-blue-ink)}
/* Colis en incident (échec de livraison, retour expéditeur). Pas de variante de frise : un colis
   bloqué n'affiche pas de frise du tout, il affiche .sl-tracking-alert--problem. */
.sl-tl-badge.problem,.sl-tracking-card-status.problem{background:var(--o-red-soft);color:var(--o-red)}
.sl-tl-head-sub{font-size:12px;color:var(--o-mute)}
/* Retour en cours (bandeau de la carte) */
.sl-tracking-return{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 13px;border-radius:13px;background:var(--o-amber-soft);border:1px solid var(--o-amber-line)}
.sl-tracking-return--transit,.sl-tracking-return--arrived{background:var(--o-blue-soft);border-color:#D6E1FF}
.sl-tracking-return-icon{flex-shrink:0;line-height:0}
.sl-tracking-return-title{font-size:13px;font-weight:700;color:var(--o-amber)}
.sl-tracking-return--transit .sl-tracking-return-title,.sl-tracking-return--arrived .sl-tracking-return-title{color:var(--o-blue-ink)}
.sl-tracking-return-desc{font-size:12px;color:#6B4A0E;margin-top:2px;line-height:1.45}
.sl-tracking-return-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--o-amber);text-decoration:none}
.sl-order-status--return-pending{background:#FFF5E2;color:#A16207;margin-left:6px}
.sl-order-status--return-transit,.sl-order-status--return-arrived{background:#EEF3FF;color:#3561D9;margin-left:6px}
.sl-tracking-card-info{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--o-line)}
.sl-tracking-card-loc{font-size:11px;color:var(--o-mute);line-height:1.5}
.sl-tracking-card-loc svg.spi{vertical-align:-2px}
.sl-tracking-card-msg{margin-top:14px;padding:11px 12px;border-radius:12px;background:var(--o-soft);font-size:12.5px;line-height:1.45;color:var(--o-ink2)}
.sl-tracking-card-eta{display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--o-blue-soft);font-size:12.5px;line-height:1.3;color:var(--o-blue-ink)}
.sl-tracking-card-eta strong{font-weight:700;color:var(--o-blue-ink)}
.sl-tracking-card-num{font-size:10.5px;font-family:ui-monospace,Menlo,monospace;color:var(--o-ink2);background:var(--o-chip);padding:4px 7px;border-radius:6px;letter-spacing:.3px}
.sl-tracking-card-num:empty{display:none}
.sl-tracking-card-clickable{cursor:pointer}

/* ── Transporteur : « Livraison assurée par » puis le logo GLS ──
   Marque reproduite en CSS (pavé bleu GLS #061AB1, lettrage blanc, point jaune
   #FFD100) : aucune image à déployer, net sur tous les écrans. */
.sl-gls-logo{display:inline-flex;align-items:center;gap:3px;background:#061AB1;color:#fff;font-size:11px;font-weight:800;font-style:normal;letter-spacing:.08em;line-height:1;padding:5px 7px;border-radius:4px}
.sl-gls-logo i{display:block;width:4px;height:4px;border-radius:50%;background:#FFD100}
.sl-carrier{display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.sl-carrier-txt{font-size:11.5px;font-weight:600;color:var(--o-ink2)}
.sl-trk-carrier-row{display:flex;margin-bottom:12px}
.sl-trk-carrier-row .sl-carrier{margin-top:0}

/* ── Historique détaillé du colis (fiche) ──
   Frise verticale, du scan le plus récent au plus ancien : la même lecture que le
   portail GLS, que le client n'a donc plus besoin d'aller ouvrir. */
.sl-trk-hist{margin-top:16px;padding-top:14px;border-top:1px solid var(--o-line)}
.sl-trk-hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sl-trk-hist-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#A2A29B}
.sl-trk-hist-list{padding-left:2px}
.sl-trk-ev{position:relative;display:flex;gap:10px;padding-bottom:14px}
.sl-trk-ev:last-child{padding-bottom:0}
/* Trait de liaison entre deux scans, coupé sous le dernier de la liste. */
.sl-trk-ev::before{content:'';position:absolute;left:4px;top:13px;bottom:0;width:1px;background:#E4E4DF}
.sl-trk-ev:last-child::before{display:none}
.sl-trk-ev-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:#D3D3CC;margin-top:4px}
.sl-trk-ev.is-last .sl-trk-ev-dot{background:var(--o-gold);box-shadow:0 0 0 4px var(--o-gold-soft)}
.sl-trk-ev-label{font-size:12px;line-height:1.4;color:var(--o-ink2)}
.sl-trk-ev.is-last .sl-trk-ev-label{color:var(--o-ink);font-weight:700}
.sl-trk-ev-meta{margin-top:2px;font-size:10.5px;line-height:1.4;color:#A2A29B}
.sl-trk-ev-loc{display:inline-flex;align-items:center;gap:3px}
.sl-trk-hist-note{margin-top:12px;font-size:10.5px;line-height:1.4;color:#A2A29B}

/* Attente de paiement (ambre) et incident de livraison (rouge) */
.sl-tracking-card--awaiting .sl-tracking-card-status{background:var(--o-amber-soft);color:var(--o-amber)}
.sl-tracking-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:13px;background:var(--o-amber-soft);border:1px solid var(--o-amber-line);margin-bottom:4px}
.sl-tracking-alert-icon{flex-shrink:0;line-height:0}
.sl-tracking-alert-title{font-size:13px;font-weight:700;color:var(--o-amber);margin-bottom:3px}
.sl-tracking-alert-desc{font-size:12.5px;color:#6B4A0E;line-height:1.45}
/* Incident : remplace la frise, qui n'a pas de sens sur un colis qui ne progresse plus. Rouge et non
   ambre — ce n'est pas une attente, c'est un blocage sur lequel le client doit agir ; la description
   porte la consigne d'action (« Contactez-nous… »), elle doit se lire. */
.sl-tracking-alert--problem{background:var(--o-red-soft);border-color:var(--o-red-line);margin-bottom:14px}
.sl-tracking-alert--problem .sl-tracking-alert-title{color:var(--o-red)}
.sl-tracking-alert--problem .sl-tracking-alert-desc{color:#7A1F1F;line-height:1.5}

/* Pied de carte : articles (photo, quantité, pictos de goûts) puis adresse */
.sl-tracking-card-details{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding-top:12px;border-top:1px solid var(--o-line);margin-top:14px}
.sl-tracking-card-items{display:flex;flex-wrap:wrap;gap:6px}
.sl-tracking-item{display:flex;align-items:center;gap:6px;min-height:36px;padding:3px 9px 3px 3px;border-radius:10px;background:#fff;border:1px solid var(--o-line)}
.sl-tracking-item-img{width:28px;height:28px;border-radius:7px;object-fit:cover;display:block;flex-shrink:0}
.sl-tracking-item-qty{font-size:11px;font-weight:700;color:var(--o-ink)}
/* Nom de l'article : pour les lecteurs d'écran (la carte reste compacte, la fiche le montre). */
.sl-tracking-item-name,.sl-tracking-item .sl-fl-chip:not(.sl-fl-chip--txt) .sl-fl-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sl-tracking-card-address{font-size:12px;color:var(--o-ink2);display:flex;flex-wrap:wrap;gap:3px 6px;align-items:baseline;line-height:1.35}
.sl-tracking-card-address-label{font-weight:700;color:var(--o-mute);font-size:10px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}

/* ORDERS */
.sl-orders-list{display:flex;flex-direction:column;gap:10px}
.sl-order-card{padding:16px}
.sl-order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sl-order-id{font-weight:800;font-size:12px;color:var(--sl-dark)}
.sl-order-meta{font-size:11px;color:#999}
.sl-order-status{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}
.sl-order-status.delivered{background:rgba(37,99,235,0.1);color:#2563eb}
.sl-order-status.processing{background:var(--o-blue-soft,#EEF3FF);color:var(--o-blue-ink,#3561D9)}
.sl-order-status.pending{background:rgba(0,0,0,0.06);color:#999}
.sl-order-status.cancelled{background:rgba(198,40,40,0.08);color:var(--sl-red)}
.sl-order-status.refunded{background:rgba(232,168,56,0.12);color:#b8860b}
.sl-order-footer{display:flex;justify-content:space-between;align-items:center}
.sl-order-total-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sl-order-total{font-weight:700;font-size:15px;color:var(--sl-dark)}
.sl-order-cashback{font-size:11px;font-weight:700;color:var(--o-gold-ink,#9A6410)}

/* Order card v2: clickable */
.sl-order-card-v2{background:#fff;border-radius:12px;border:1px solid #EBEBEB;padding:14px;cursor:pointer;transition:all .15s}
.sl-order-card-v2:hover{border-color:#ccc;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.sl-order-card-v2:active{transform:scale(0.99)}
.sl-order-arrow{font-size:18px;color:#ccc;font-weight:300}

/* Order detail modal */
.sl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:99999;opacity:0;pointer-events:none;transition:opacity .3s}
.sl-modal-overlay.open{opacity:1;pointer-events:auto}
.sl-modal{position:fixed;bottom:0;left:0;right:0;max-height:85vh;background:var(--sl-light);z-index:100000;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:0 -4px 24px rgba(0,0,0,0.12);pointer-events:none;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.15) transparent}
.sl-modal::-webkit-scrollbar{width:6px}
.sl-modal::-webkit-scrollbar-track{background:transparent;margin-top:20px}
.sl-modal::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:3px}
.sl-modal::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}
.sl-modal.open{transform:translateY(0);pointer-events:auto}
.sl-modal-header{padding:16px 20px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #EBEBEB;position:sticky;top:0;z-index:2;border-radius:20px 20px 0 0}
.sl-modal-title{font-size:15px;font-weight:800;color:var(--sl-dark)}
.sl-modal-close{width:28px;height:28px;border-radius:50%;border:none;background:#f5f5f5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#999}
.sl-modal-body{padding:16px 20px calc(30px + var(--sl-ios-nav,0px))}
.sl-modal-loading{text-align:center;padding:40px 0;color:#999;font-size:13px}

/* Order detail content — Club V2 · L1b : « Commande #… », date et état dans l'en-tête de la fiche
   (slOdHead) ; bloc suivi clair. */
#sl-order-modal .sl-modal-header{align-items:flex-start;gap:12px}
#sl-order-modal .sl-od-hd{flex:1;min-width:0}
#sl-order-modal .sl-modal-title{display:block;font-size:17px;line-height:1.15}
#sl-order-modal .sl-od-hd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;font-size:12px;font-weight:500;line-height:1.3;color:var(--o-mute)}
#sl-order-modal .sl-od-hd-sub .sl-order-status{display:inline-block;line-height:1.3;text-align:center}
#sl-order-modal .sl-od-hd-date:empty,#sl-order-modal .sl-od-hd-badge:empty{display:none}
.sl-modal-tracking-card{background:#fff;border:1px solid var(--o-line,#ECECE8);border-radius:18px;padding:16px;margin-bottom:14px;color:var(--o-ink,#1b1b1b);box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(0,0,0,.12)}
.sl-modal-tracking-card .sl-tracking-timeline{margin-bottom:0}
.sl-modal-tracking-card .sl-tracking-card-info{margin-top:12px;padding-top:10px}
.sl-trk-msg{display:block;margin-bottom:6px;font-size:12.5px;line-height:1.45;color:var(--o-ink2)}
/* Infos enrichies GLS (fiche) */
.sl-tracking-eta{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--o-blue-soft);font-size:12.5px;line-height:1.35;color:var(--o-blue-ink)}
.sl-tracking-eta strong{font-weight:700;color:var(--o-blue-ink)}
.sl-tracking-delivered{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--o-blue-soft);font-size:12.5px;line-height:1.45;color:var(--o-blue-ink);font-weight:600}
/* Point relais : nom, adresse vers Google Maps, ouvert / fermé, horaires (Tracking::relais_bloc_html) */
.sl-tracking-parcelshop{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border-radius:13px;background:var(--o-soft);font-size:12.5px;line-height:1.45;color:var(--o-ink2)}
.sl-ps-ic{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;flex-shrink:0}
.sl-ps-body{flex:1;min-width:0}
.sl-tracking-parcelshop strong{display:block;font-size:13px;line-height:1.3;color:var(--o-ink);font-weight:700}
.sl-maps,.sl-maps:hover,.sl-maps:focus{color:var(--o-blue-ink,#3561D9);font-weight:600;text-decoration:none}
.sl-maps svg.spi{stroke:currentColor;margin:-2px 0 0 4px}
.sl-ps-body .sl-maps{display:block;margin-top:2px}
.sl-relais-etat{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:700;line-height:1.2}
.sl-relais-etat i{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.sl-relais-etat.is-open{color:var(--o-blue-ink)}
.sl-relais-etat.is-closed{color:var(--o-amber)}
.sl-relais-horaires{margin-top:10px}
.sl-relais-h-t{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--o-mute)}
.sl-relais-hours{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:6px 0 0;padding:10px 12px;border-radius:10px;background:#fff;font-size:12px;line-height:1.3}
.sl-relais-hours dt{color:var(--o-mute)}
.sl-relais-hours dd{margin:0;color:var(--o-ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sl-relais-conges,.sl-relais-delai{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:12px;line-height:1.45}
.sl-relais-conges{color:var(--o-amber)}
.sl-relais-delai{font-weight:700;color:var(--o-ink)}
.sl-relais-conges svg.spi,.sl-relais-delai svg.spi{margin-top:1px}
.sl-od-tracking{background:var(--o-soft,#F6F6F3);padding:10px 14px;border-radius:12px;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.sl-od-tracking-label{font-weight:700;color:var(--sl-dark)}
.sl-od-tracking-num{font-family:monospace;font-weight:700;letter-spacing:1px;color:#666}
.sl-od-tracking-link{color:#185FA5;font-weight:700;text-decoration:none}
.sl-od-track-loc{font-weight:600;color:var(--sl-dark)}
.sl-od-track-date{font-size:10px;color:#999}
.sl-od-track-num{font-family:monospace;font-size:10px;color:#bbb;letter-spacing:1px}
.sl-od-section-title{font-weight:800;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}
.sl-od-items{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.sl-od-item{display:flex;align-items:center;gap:10px}
.sl-od-item-img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}
.sl-od-item-placeholder{background:var(--o-soft,#f5f5f2);display:flex;align-items:center;justify-content:center}
.sl-od-item-mid{flex:1;min-width:0}
.sl-od-item-name{font-size:12px;font-weight:600;color:var(--sl-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-od-item-qty{font-size:10px;color:#999}
/* 4.102.0 — pastille molécule, entre le nom et la quantité. Point et contour = palette molécule
   du site, celle de la pastille du titre de la fiche produit (spliff-elementor-modules) : CBD
   #34C759, THC #FF9500, THCX #3D5BFF, CBN #8B5CF6, CBG #D4A017 ; texte un cran plus foncé,
   lisible à 9px. */
.sl-od-item-meta{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
.sl-od-mol{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:2px 7px 2px 6px;border-radius:999px;border:1px solid;font-size:9px;font-weight:700;letter-spacing:.4px;line-height:1.3}
.sl-od-mol::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sl-mol)}
.sl-od-mol--cbd{--sl-mol:#34C759;color:#1B7A3A;background:rgba(52,199,89,.14);border-color:rgba(52,199,89,.45)}
.sl-od-mol--thc{--sl-mol:#FF9500;color:#9A5200;background:rgba(255,149,0,.14);border-color:rgba(255,149,0,.45)}
.sl-od-mol--thcx{--sl-mol:#3D5BFF;color:#2A3FC4;background:rgba(61,91,255,.12);border-color:rgba(61,91,255,.40)}
.sl-od-mol--cbn{--sl-mol:#8B5CF6;color:#6D28D9;background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.42)}
.sl-od-mol--cbg{--sl-mol:#D4A017;color:#7A5A00;background:rgba(212,160,23,.15);border-color:rgba(212,160,23,.45)}
.sl-od-item-price{font-size:12px;font-weight:700;color:var(--sl-dark);flex-shrink:0}
.sl-od-totals{border-top:1px solid #f0f0f0;padding-top:10px;margin-bottom:10px}
.sl-od-total-row{display:flex;justify-content:space-between;font-size:12px;color:#999;padding:3px 0}
.sl-od-grand{font-weight:800;font-size:14px;color:var(--sl-dark);border-top:1px solid #eee;padding-top:8px;margin-top:4px}
.sl-od-discount span:last-child{color:var(--o-blue-ink,#3561D9)}
/* Cashback gagné : doré (Club V2 · L1b, décision 8) */
.sl-od-cb,.sl-od-cb span{color:var(--o-gold-ink,#9A6410);font-weight:700}
.sl-od-info-row{display:flex;justify-content:space-between;font-size:12px;color:#999;padding:6px 0;border-bottom:1px solid #f5f5f5}
.sl-od-address{font-size:12px;line-height:1.6;color:var(--sl-dark)}
/* Livraison : picto boutique / maison hors de #sl-od-address (réécrite par slAddrSave / slModalRelayToggle) */
.sl-od-addr-box{display:flex;gap:10px;align-items:flex-start}
.sl-od-addr-ic{width:34px;height:34px;border-radius:10px;background:var(--o-soft,#F6F6F3);display:grid;place-items:center;flex-shrink:0}
.sl-od-addr-box .sl-od-address{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--o-ink2,#55554f)}
.sl-od-addr-box .sl-od-address strong{color:var(--o-ink,#1b1b1b)}
.sl-od-bacs-box{background:linear-gradient(135deg,#f0f4ff 0%,#f5f3ff 100%);border:1px solid #ddd5f3;border-radius:12px;padding:18px;margin-top:10px;margin-bottom:6px}
.sl-od-bacs-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--sl-dark);margin-bottom:8px}
.sl-od-bacs-intro{font-size:13px;color:#444;line-height:1.5;margin-bottom:12px}
.sl-od-bacs-intro strong{color:var(--sl-dark);font-weight:800;font-size:14px}
.sl-od-bacs-details{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:8px;padding:14px;margin-bottom:12px;border:1px solid #e8e5f0}
.sl-od-bacs-row{display:flex;justify-content:space-between;font-size:13px;gap:8px}
.sl-od-bacs-row span:first-child{color:#888;font-weight:500;white-space:nowrap;flex-shrink:0}
.sl-od-bacs-row span:last-child{color:var(--sl-dark);font-weight:700;text-align:right;font-family:monospace;font-size:12px;word-break:break-all}
.sl-od-bacs-notice{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--sl-dark);line-height:1.5;background:#fff;border-radius:8px;padding:12px 14px;border:1px solid #e8e5f0;margin-bottom:8px}
.sl-od-bacs-notice strong{font-weight:800;color:#000}
.sl-od-bacs-note{font-size:12px;color:#666;line-height:1.5;margin-bottom:4px}
.sl-od-bacs-note:has(svg.spi){display:flex;gap:8px;align-items:flex-start}

/* DRAWER */
.sl-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:99999;opacity:0;pointer-events:none;transition:opacity .3s}
.sl-drawer-overlay.open{opacity:1;pointer-events:auto}
.sl-drawer{position:fixed;top:0;right:-100%;width:min(460px,calc(100vw - 14px));height:100%;background:var(--sl-light);z-index:100000;overflow:hidden;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,0.12);pointer-events:none}
.sl-drawer.open{right:0;pointer-events:auto}
.sl-drawer-header{padding:20px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #EBEBEB;flex-shrink:0;z-index:2}
.sl-drawer-header-left{display:flex;align-items:center;gap:10px}
.sl-drawer-back{width:32px !important;height:32px !important;min-width:32px;min-height:32px;border-radius:50% !important;border:none !important;background:#f5f5f5 !important;cursor:pointer;align-items:center;justify-content:center;color:#666 !important;transition:background .2s;padding:0 !important;margin:0;line-height:1;overflow:visible}
.sl-drawer-back svg{width:16px;height:16px;display:block;flex-shrink:0;stroke:#666}
.sl-drawer-back:hover{background:#eee !important}
.sl-drawer-title{font-size:16px;font-weight:800;color:var(--sl-dark)}
.sl-drawer-close{width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#999}
.sl-drawer-body{padding:16px 20px calc(40px + var(--sl-ios-nav,0px));display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.18) transparent}
.sl-drawer-body::-webkit-scrollbar{width:6px}
.sl-drawer-body::-webkit-scrollbar-track{background:transparent}
.sl-drawer-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);border-radius:3px}
.sl-drawer-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}

/* Drawer views */
.sl-drawer-view{display:none}
.sl-drawer-view.active{display:flex;flex-direction:column;gap:16px}

.sl-field-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5;font-size:13px}
.sl-field-label{color:#999}
.sl-field-value{font-weight:600;color:var(--sl-dark)}
.sl-address{font-size:13px;line-height:1.6;color:var(--sl-dark)}
.sl-drawer-actions{display:flex;flex-direction:column;gap:8px}
.sl-btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #ddd;border-radius:var(--sl-radius-sm);background:#fff;font-family:var(--sl-font);font-size:13px;font-weight:600;color:var(--sl-dark);cursor:pointer;text-decoration:none;text-align:center;transition:all .2s}
.sl-btn-outline:hover{background:#f5f5f2}
.sl-btn-outline.danger{color:var(--sl-red);border-color:rgba(198,40,40,0.2)}

/* Drawer forms */
.sl-drawer-form{display:flex;flex-direction:column;gap:14px}
.sl-form-group{display:flex;flex-direction:column;gap:4px}
.sl-form-label{font-size:11px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px}
.sl-form-input{padding:10px 14px;border:1px solid #ddd;border-radius:var(--sl-radius-sm);font-family:var(--sl-font);font-size:14px;color:var(--sl-dark);background:#fff;transition:border-color .2s;outline:none;width:100%;box-sizing:border-box}
.sl-form-input:focus{border-color:var(--sl-accent)}
.sl-form-input::placeholder{color:#bbb}
select.sl-form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.sl-form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sl-btn-primary{display:flex;align-items:center;justify-content:center;width:100%;padding:13px 16px;border:none;border-radius:var(--sl-radius-sm);background:var(--sl-dark);color:#fff;font-family:var(--sl-font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s}
.sl-btn-primary:hover{opacity:.9}
.sl-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.sl-btn-primary.danger{background:var(--sl-red)}
.sl-form-msg{font-size:12px;text-align:center;padding:8px;border-radius:var(--sl-radius-sm)}
.sl-form-msg:empty{display:none}
.sl-form-msg.success{background:rgba(76,175,80,0.08);color:var(--sl-green)}
.sl-form-msg.error{background:rgba(198,40,40,0.08);color:var(--sl-red)}

/* Logout confirmation */
.sl-logout-confirm{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px;gap:12px}
.sl-logout-icon{font-size:48px}
.sl-logout-title{font-size:18px;font-weight:800;color:var(--sl-dark);margin:0}
.sl-logout-text{font-size:14px;color:#999;margin:0}
.sl-logout-btns{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px}

.sl-toast{position:fixed;bottom:calc(20px + var(--sl-ios-nav,0px));left:50%;transform:translateX(-50%) translateY(100px);background:var(--sl-dark);color:var(--sl-light);padding:12px 24px;border-radius:12px;font-family:var(--sl-font);font-size:13px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:200000;opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}
.sl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:768px){.sl-toast{bottom:32px;padding:18px 36px;border-radius:14px;font-size:16px;box-shadow:0 12px 40px rgba(0,0,0,0.25)}}

.sl-login-prompt{text-align:center;padding:60px 20px;font-family:var(--sl-font)}
.sl-login-prompt a{display:inline-block;margin-top:16px;padding:12px 28px;background:var(--sl-dark);color:var(--sl-light);border-radius:8px;text-decoration:none;font-weight:700}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≥ 768px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

	/* Container */
	.sl-club { max-width: 100% }
	.sl-content { max-width: 740px; margin: 0 auto; padding: 24px 24px 60px }

	/* Hero */
	.sl-hero { padding: 24px 32px 20px }
	.sl-hero-greeting { font-size: 12px; letter-spacing: 2px }

	/* Tabs: match content width */
	.sl-tabs { max-width: 740px; margin: 0 auto; gap: 0 }
	.sl-tab { flex: 1; padding: 14px 8px 12px; font-size: 10px !important; gap: 5px; justify-content: center }
	.sl-tab svg { width: 22px; height: 22px }

	/* Cards & sections */
	.sl-card { padding: 22px }
	.sl-section-title { font-size: 18px }
	.sl-panel { gap: 20px }

	/* Stepper: stretch lines between dots */
	.sl-stepper { padding: 22px 20px 14px }
	.sl-stepper-dot { width: 42px; height: 42px; font-size: 18px }
	.sl-sn-current { font-size: 11px }
	.sl-sp-current { font-size: 18px }
	.sl-stepper-line { flex: 1 1 40px; min-width: 40px; margin-top: 21px; height: 3px; margin-left: 6px; margin-right: 6px }
	.sl-stepper-step { flex: 0 1 auto !important }

	/* Benefits: still 2 cols but bigger */
	.sl-grid-2 { gap: 14px }
	.sl-benefit { padding: 16px }
	.sl-benefit-icon { width: 42px; height: 42px; font-size: 20px }
	.sl-benefit-value { font-size: 16px }

	/* Referral */
	.sl-referral-hero { padding: 24px }
	.sl-referral-title { font-size: 20px }
	.sl-referral-code { font-size: 18px; padding: 12px }
	.sl-reward-card { padding: 22px 14px }
	.sl-reward-value { font-size: 26px }

	/* Balance card: toned down */
	.sl-balance-card-v2 { padding: 28px 24px }
	.sl-bal-amount { font-size: 40px; line-height: 1.3 }

	/* History transactions */
	.sl-tx { padding: 14px 0 }
	.sl-tx-lbl { font-size: 13px }
	.sl-tx-amt { font-size: 14px }

	/* Orders */
	.sl-order-card-v2 { padding: 18px }
	.sl-order-id { font-size: 15px }

	/* Order modal: centered dialog on tablet */
	.sl-modal {
		bottom: auto; left: 50%; right: auto; top: 50%;
		transform: translate(-50%, -50%) scale(0.95);
		opacity: 0;
		max-height: 80vh; max-width: 560px; width: 92vw;
		border-radius: 20px;
		transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
	}
	.sl-modal.open {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	.sl-modal-header { border-radius: 20px 20px 0 0 }

	/* Drawer wider */
	/* Drawer → centered modal on tablet */
	.sl-drawer {
		width: 560px; max-width: 90vw;
		height: auto; max-height: 80vh;
		top: 50%; right: auto; left: 50%;
		transform: translate(-50%, -50%) scale(0.95);
		opacity: 0;
		border-radius: 20px;
		box-shadow: 0 12px 40px rgba(0,0,0,0.18);
		transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
	}
	.sl-drawer.open {
		right: auto;
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	.sl-drawer-header { border-radius: 20px 20px 0 0 }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 1024px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

	/* Container */
	.sl-content { max-width: 960px; padding: 28px 32px 60px }

	/* Hero */
	.sl-hero { padding: 28px 40px 22px }
	.sl-hero-content { max-width: 960px; padding: 0 4% }
	.sl-hero-greeting { font-size: 13px }

	/* Tabs: match content width */
	.sl-tabs { max-width: 960px; margin: 0 auto; gap: 0 }
	.sl-tab { flex: 1; padding: 16px 12px 12px; font-size: 11px !important; gap: 6px; flex-direction: row; justify-content: center }
	.sl-tab svg { width: 18px; height: 18px }
	/* Badge notif : en desktop l'onglet passe en ligne (picto + mot cote a cote).
	   Le badge absolu centre (cale sur le picto en mobile) tomberait au milieu du
	   bouton → on le remet dans le flux, a droite du libelle (robuste multi-langues). */
	.sl-tab-badge { position: static; transform: none; margin-left: 6px }

	/* Benefits: 4 columns on desktop, reward cards stay 2 cols */
	.sl-grid-2 { grid-template-columns: repeat(4, 1fr); gap: 14px }
	.sl-grid-2:has(.sl-reward-card) { grid-template-columns: 1fr 1fr }

	/* Club panel */
	#sl-panel-club { gap: 22px }

	/* Stepper lines: much wider on desktop */
	.sl-stepper-line { flex: 2 1 80px; min-width: 60px; height: 4px; margin-left: 8px; margin-right: 8px }
	.sl-stepper-step { flex: 0 1 auto !important }
	.sl-bar-track { height: 7px }
	.sl-bar-dot { width: 22px; height: 22px }
	.sl-cp { width: 9px; height: 9px }
	.sl-bar-ends { font-size: 10px }
	.sl-bar-step-label { font-size: 9px }
	.sl-bar-cp-label { font-size: 9px }

	/* Referral section internals: code + sponsor side by side */
	.sl-referral-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

	/* Referral cards row */
	.sl-referral-code-row { gap: 12px }
	.sl-referral-code { font-size: 20px; padding: 14px }
	.sl-btn-copy { padding: 14px 20px; font-size: 13px }

	/* Referral rewards bigger */
	.sl-reward-value { font-size: 28px }
	.sl-reward-card { padding: 26px 16px }

	/* Balance: controlled size */
	.sl-balance-card-v2 { padding: 36px 32px }
	.sl-bal-amount { font-size: 46px; line-height: 1.3 }
	.sl-bal-label { font-size: 12px; letter-spacing: 1.5px; margin-top: 4px }
	.sl-bal-lifetime { font-size: 13px; margin-top: 14px }
	.sl-bal-tip { font-size: 13px }

	/* History: slightly wider rows */
	.sl-tx-ico { width: 32px; height: 32px; font-size: 14px }
	.sl-tx-lbl { font-size: 14px }
	.sl-tx-cat { font-size: 8px; padding: 2px 8px }
	.sl-tx-dt { font-size: 10px }
	.sl-tx-amt { font-size: 15px }

	/* Orders: single column, compact horizontal layout on desktop */
	.sl-orders-list { display: flex; flex-direction: column; gap: 10px }
	.sl-order-card-v2 { display: flex; align-items: center; gap: 20px; padding: 14px 20px }
	.sl-order-header { flex: 1; margin-bottom: 0 }
	.sl-order-footer { margin-top: 0; flex-shrink: 0; gap: 16px }

	/* Order modal: centered on desktop */
	.sl-modal {
		max-width: 640px;
		left: 50%; right: auto;
		top: 50%; bottom: auto;
		border-radius: 16px;
		transform: translate(-50%, -50%) scale(0.95);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform .3s, opacity .3s, visibility 0s .3s;
	}
	.sl-modal.open {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: transform .3s, opacity .3s, visibility 0s;
	}

	/* Drawer → centered modal on desktop */
	.sl-drawer {
		width: 720px; max-width: 90vw;
		height: auto; max-height: 80vh;
		top: 50%; right: auto; left: 50%;
		transform: translate(-50%, -50%) scale(0.95);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		border-radius: 20px;
		box-shadow: 0 16px 48px rgba(0,0,0,0.2);
		transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s, visibility 0s .3s;
	}
	.sl-drawer.open {
		right: auto;
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s, visibility 0s;
	}
	.sl-drawer-header { padding: 24px; border-radius: 20px 20px 0 0 }
	.sl-drawer-body { padding: 20px 24px 40px }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP (≥ 1280px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

	/* Wider container */
	.sl-content { max-width: 1080px; padding: 32px 40px 60px }

	/* Tabs: match content width */
	.sl-tabs { max-width: 1080px; margin: 0 auto }

	/* Hero more spacious */
	.sl-hero { padding: 32px 48px 24px }
	.sl-hero-content { max-width: 1080px }
	.sl-hero-greeting { font-size: 14px }
	.sl-hero-left { gap: 14px }
	.sl-hero-cashback-rate { font-size: 20px }
	.sl-tier-pill { font-size: 12px !important; padding: 5px 18px }

	/* Stepper bigger */
	.sl-stepper { padding: 28px 24px 16px }
	.sl-stepper-head { margin-bottom: 20px }
	.sl-stepper-rate { font-size: 16px }
	.sl-stepper-spent { font-size: 12px }
	.sl-stepper-line { flex: 3 1 100px; min-width: 80px; height: 4px; margin-left: 10px; margin-right: 10px }
	.sl-dot-current { width: 46px; height: 46px; font-size: 20px }
	.sl-dot-next { width: 36px; height: 36px; font-size: 17px }
	.sl-dot-reached, .sl-dot-upcoming { width: 30px; height: 30px; font-size: 14px }
	.sl-stepper-msg { font-size: 15px; margin-top: 16px }
	.sl-bar-wrap { margin-top: 14px }
	.sl-bar-track { height: 8px }
	.sl-bar-dot { width: 24px; height: 24px }
	.sl-bar-ends { font-size: 10px }
	.sl-cp { width: 10px; height: 10px }
	.sl-bar-step-label { font-size: 9px }
	.sl-bar-cp-label { font-size: 9px }
	.sl-bar-bottom { margin-top: 6px }

	/* Section titles */
	.sl-section-title { font-size: 20px; letter-spacing: 1.2px }

	/* Benefits: stay 4 cols, bigger cards */
	.sl-benefit { padding: 18px; gap: 12px }
	.sl-benefit-icon { width: 46px; height: 46px; font-size: 22px; border-radius: 12px }
	.sl-benefit-label { font-size: 11px }
	.sl-benefit-value { font-size: 18px }

	/* Referral section: two-column layout for code + sponsor + filleuls */

	/* Balance: controlled at large screen */
	.sl-balance-card-v2 { padding: 40px 40px }
	.sl-bal-amount { font-size: 50px; line-height: 1.3 }

	/* Orders: still 2 cols but bigger cards */
	.sl-order-card-v2 { padding: 20px }
	.sl-order-id { font-size: 16px }
	.sl-order-meta { font-size: 12px }
	.sl-order-total { font-size: 17px }

	/* Order modal even wider */
	.sl-modal { max-width: 720px }
	.sl-modal-body { padding: 24px 28px 36px }
	.sl-modal-header { padding: 20px 24px }
	.sl-modal-title { font-size: 17px }
}

/* ══════════════════════════════════════════════════════════
   CLUB TAB — Desktop 2-column referral layout (≥ 1024px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	/* Next tier card: make it more prominent */
	.sl-next-tier { display: flex; align-items: center }
	.sl-next-tier-header { gap: 16px }
	.sl-next-tier-icon { font-size: 32px }
	.sl-next-tier-title { font-size: 16px }
	.sl-next-tier-sub { font-size: 12px }
}

/* ══════════════════════════════════════════════════════════
   HOVER ENHANCEMENTS — Desktop only (pointer: fine)
   ══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
	.sl-order-card-v2:hover { border-color: var(--tier-color, var(--sl-accent)); box-shadow: 0 4px 16px rgba(0,0,0,0.06) }
	.sl-benefit:hover { border-color: var(--sl-accent-border); box-shadow: 0 2px 12px rgba(0,0,0,0.04) }
	.sl-btn-primary:hover { opacity: 0.9; transform: translateY(-1px) }
	.sl-btn-copy:hover { background: #333 }
	.sl-tab:not(.active):hover svg { opacity: 0.8 }
	.sl-hero-account-btn:hover { border-color: rgba(249,249,249,0.6) }
	.sl-filter-btn:hover:not(.active) { border-color: #ccc; color: #999 }
}

/* ══════ ONBOARDING WIZARD (bottom sheet, mandatory) ══════ */
/* z-index 100001 = above drawer (100000) and overlays (99999) so the wizard stays clickable on step 5 when the account drawer opens. */
.sl-onboarding{position:fixed;left:0;right:0;bottom:0;z-index:100001;padding:12px 12px calc(12px + var(--sl-ios-nav,0px));pointer-events:none}
.sl-onboarding.sl-ob-hidden{display:none}
.sl-onboarding-panel{pointer-events:auto;max-width:440px;margin:0 auto;background:var(--sl-dark);color:var(--sl-light);border-radius:var(--sl-radius);padding:18px 20px 16px;box-shadow:0 12px 32px rgba(0,0,0,.35);border:1px solid rgba(249,249,249,.08);animation:sl-ob-slide-up .28s ease-out}
@keyframes sl-ob-slide-up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.sl-ob-progress{display:flex;gap:6px;margin-bottom:14px}
.sl-ob-dot{flex:1;height:3px;border:none;padding:0;background:rgba(249,249,249,.18);border-radius:2px;cursor:pointer;transition:background .2s;appearance:none;outline:none}
.sl-ob-dot.active{background:var(--tier-color,#5A8BFF)}
.sl-ob-dot.done{background:rgba(90,139,255,.55)}
.sl-ob-dot:focus-visible{outline:2px solid var(--tier-color,#5A8BFF);outline-offset:2px}
.sl-ob-head{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(249,249,249,.55);margin-bottom:10px}
.sl-ob-step{color:rgba(249,249,249,.9)}
.sl-ob-sep{opacity:.4}
.sl-ob-section{color:var(--tier-color,#5A8BFF)}
.sl-ob-title{font-family:var(--sl-font);font-size:17px;font-weight:800;line-height:1.25;margin:0 0 8px;color:var(--sl-light)}
.sl-ob-body{font-size:13px;line-height:1.5;color:rgba(249,249,249,.8);margin:0 0 16px}
.sl-ob-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.sl-ob-spacer{flex:1}
.sl-ob-btn{font-family:var(--sl-font);font-size:13px;font-weight:700;padding:10px 18px;border-radius:var(--sl-radius-sm);cursor:pointer;transition:all .18s;border:1.5px solid transparent;white-space:nowrap}
.sl-ob-btn--ghost{background:transparent;color:rgba(249,249,249,.8);border-color:rgba(249,249,249,.22)}
.sl-ob-btn--ghost:hover{background:rgba(249,249,249,.08);border-color:rgba(249,249,249,.4)}
.sl-ob-btn--primary{background:transparent;color:var(--sl-light);border-color:var(--tier-color,#5A8BFF)}
.sl-ob-btn--primary:hover{background:var(--tier-color,#5A8BFF);color:var(--sl-dark)}
.sl-ob-hidden{display:none !important}
body.sl-ob-active .sl-content{padding-bottom:260px}
/* Web app : la feuille suit la capsule, au-dessus d'elle ou en bas quand elle se masque au défilement (Pwa_Nav::lifted_css), au rythme de nav.css. */
html.sl-webapp .sl-onboarding{transition:bottom .32s cubic-bezier(.3,.7,.2,1)}
@media (min-width:768px){
	.sl-onboarding{padding:20px}
	.sl-onboarding-panel{max-width:480px;padding:22px 24px 20px}
	.sl-ob-title{font-size:19px}
	.sl-ob-body{font-size:14px}
}
/* Desktop : floating card centered at bottom, prominent & always above the fold */
@media (min-width:1024px){
	.sl-onboarding{padding:28px 32px}
	.sl-onboarding-panel{max-width:620px;padding:26px 32px 22px;border-radius:18px;box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 0 1px rgba(249,249,249,.06)}
	.sl-ob-progress{gap:8px;margin-bottom:18px}
	.sl-ob-dot{height:4px;border-radius:3px}
	.sl-ob-head{font-size:11px;margin-bottom:14px}
	.sl-ob-title{font-size:22px;line-height:1.22;margin-bottom:10px}
	.sl-ob-body{font-size:15px;line-height:1.55;margin-bottom:22px}
	.sl-ob-actions{min-height:48px;gap:14px}
	.sl-ob-btn{font-size:14px;padding:12px 22px}
	body.sl-ob-active .sl-content{padding-bottom:320px}
}

/* ══════ DRAWER COMPTE — formulaire unifié ══════ */
.sl-account-card{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.sl-account-actions{display:flex;flex-wrap:wrap-reverse;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(0,0,0,0.06)}
.sl-account-actions>button{flex:1 1 calc(50% - 5px) !important;min-width:140px;width:auto !important;max-width:none !important;margin:0 !important;min-height:46px}

/* ══════ ORDER ACTION BUTTONS (Pay / Cancel) ══════ */
/* Footer wrapper on the active order card : contains optional Pay button + details row */
.sl-tracking-card-footer{margin:14px -16px -16px;padding:12px 16px 14px;border-top:1px solid var(--o-line,#ECECE8);border-radius:0 0 18px 18px;background:#FBFBF9}
/* When wrapped, the details row no longer needs its own border/padding/margin */
.sl-tracking-card-footer .sl-tracking-card-details{padding-top:0;border-top:none;margin-top:0}
/* Pay button base style (shared mobile + desktop) */
.sl-order-pay-btn{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sl-font,inherit);font-size:14px;font-weight:700;line-height:1.2;color:#fff;background:#5A8BFF;text-decoration:none;padding:12px 26px;border-radius:10px;width:fit-content;max-width:calc(100% - 28px);transition:all .15s;border:none;cursor:pointer}
.sl-order-pay-btn:hover{background:#3561D9;transform:translateY(-1px);color:#fff}
.sl-order-pay-btn:active{transform:translateY(0)}
/* Mobile (default) : Pay centered above details */
.sl-tracking-card-footer.has-pay .sl-order-pay-btn{margin:0 auto 14px}
/* Desktop ≥768px : Pay à gauche | items + adresse groupés à droite */
@media (min-width:768px){
	.sl-order-pay-btn{font-size:14px;padding:13px 30px}
	.sl-tracking-card-footer.has-pay{display:flex;align-items:center;gap:20px}
	.sl-tracking-card-footer.has-pay .sl-order-pay-btn{margin:0;flex-shrink:0}
	.sl-tracking-card-footer.has-pay .sl-tracking-card-details{flex:1;min-width:0;justify-content:flex-end;gap:20px}
}

/* Action row inside the order detail modal */
.sl-od-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #E4E4DF}
.sl-od-btn{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sl-font,inherit);font-size:14px;font-weight:700;padding:13px 16px;border-radius:12px;text-decoration:none;border:none;cursor:pointer;transition:all .15s}
.sl-od-btn-pay{background:#5A8BFF;color:#fff}
.sl-od-btn-pay:hover{background:#3561D9;transform:translateY(-1px);color:#fff}
.sl-od-btn-cancel{background:transparent;color:#C62828;border:1.5px solid #C62828}
.sl-od-btn-cancel:hover{background:#C62828;color:#fff}
@media (min-width:640px){
	.sl-od-actions{flex-direction:row}
	.sl-od-btn{flex:1}
}

/* ══════ EVENT PREDICTION HERO (onglet Missions) ══════ */
.sl-ev{background:linear-gradient(150deg,#1b1b1b 0%,#2a2418 100%);border:1px solid rgba(232,168,56,0.35);border-radius:var(--sl-radius);padding:18px;display:flex;flex-direction:column;gap:14px;color:var(--sl-light);position:relative}
/* Halo ancré DANS le coin (pas d'overflow:hidden : le badge mobile déborde du coin) */
.sl-ev::before{content:'';position:absolute;top:0;right:0;width:160px;height:160px;border-top-right-radius:var(--sl-radius);background:radial-gradient(circle at top right,rgba(232,168,56,0.18) 0%,transparent 70%);pointer-events:none}
.sl-ev-head{display:flex;align-items:center;gap:12px}
.sl-ev-ico{width:46px;height:46px;border-radius:12px;background:rgba(232,168,56,0.15);border:1px solid rgba(232,168,56,0.3);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.sl-ev-head-mid{flex:1;min-width:0}
.sl-ev-title{font-size:14px;font-weight:800;line-height:1.25;text-transform:uppercase;letter-spacing:.4px;overflow-wrap:break-word}
.sl-ev-sub{font-size:11px;color:rgba(249,249,249,0.65);margin-top:3px;line-height:1.4}
.sl-ev-reward{flex-shrink:0;font-size:13px;font-weight:800;color:#1b1b1b;background:var(--sl-accent);padding:5px 11px;border-radius:99px;align-self:flex-start}
.sl-ev-deadline{font-size:11px;font-weight:700;color:var(--sl-accent);background:rgba(232,168,56,0.1);border:1px solid rgba(232,168,56,0.25);padding:7px 12px;border-radius:8px;text-align:center}
.sl-ev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:280px;overflow-y:auto;padding-right:2px;scrollbar-width:thin}
.sl-ev-grid--ro{max-height:240px;margin-top:10px}
.sl-ev-country{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;border:1px solid rgba(249,249,249,0.12);background:rgba(249,249,249,0.05);color:var(--sl-light);font-family:var(--sl-font);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .12s;text-align:left;min-width:0}
.sl-ev-country:hover:not(:disabled):not(.sl-ev-country--ro){border-color:rgba(232,168,56,0.5);background:rgba(232,168,56,0.08)}
.sl-ev-country.selected{border-color:var(--sl-accent);background:rgba(232,168,56,0.16);box-shadow:0 0 0 1px var(--sl-accent)}
.sl-ev-country--ro{cursor:default}
.sl-ev-country--out{opacity:.38;cursor:not-allowed}
.sl-ev-country--out .sl-ev-country-name{text-decoration:line-through}
.sl-ev-country--won{border-color:var(--sl-accent);background:rgba(232,168,56,0.16)}
.sl-ev-country--mine{box-shadow:0 0 0 1px var(--sl-accent)}
.sl-ev-flag{width:22px;height:16px;object-fit:cover;border-radius:3px;flex-shrink:0;background:rgba(249,249,249,0.1)}
.sl-ev-country-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-ev-country-x{flex-shrink:0;font-size:11px}
.sl-ev-cta{width:100%;padding:13px;border:none;border-radius:11px;background:var(--sl-accent);color:#1b1b1b;font-family:var(--sl-font);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;transition:all .15s}
.sl-ev-cta:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.sl-ev-cta:disabled{opacity:.35;cursor:not-allowed}
.sl-ev-confirm{background:rgba(232,168,56,0.1);border:1px solid rgba(232,168,56,0.35);border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:12px}
.sl-ev-confirm-txt{font-size:12.5px;line-height:1.5;font-weight:600}
.sl-ev-confirm-btns{display:flex;gap:8px}
.sl-ev-btn-ghost{flex:1;padding:11px;border-radius:9px;border:1px solid rgba(249,249,249,0.25);background:none;color:var(--sl-light);font-family:var(--sl-font);font-size:12px;font-weight:700;cursor:pointer}
.sl-ev-btn-ghost:hover{background:rgba(249,249,249,0.08)}
.sl-ev-btn-go{flex:1.4;padding:11px;border-radius:9px;border:none;background:var(--sl-accent);color:#1b1b1b;font-family:var(--sl-font);font-size:12px;font-weight:800;cursor:pointer;text-transform:uppercase;letter-spacing:.4px}
.sl-ev-btn-go:disabled{opacity:.5;cursor:wait}
.sl-ev-pick{display:flex;flex-direction:column;gap:9px;background:rgba(249,249,249,0.06);border:1px solid rgba(249,249,249,0.14);border-radius:12px;padding:14px}
.sl-ev-pick-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl-ev-pick-row{display:flex;align-items:center;gap:10px;min-width:0}
.sl-ev-pick-row .sl-ev-flag{width:40px;height:29px;border-radius:5px}
.sl-ev-pick-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(249,249,249,0.55);line-height:1.4}
.sl-ev-pick-name{flex:1;min-width:0;font-size:clamp(13px,4.3vw,19px);font-weight:800;line-height:1.15}
.sl-ev-pick--won{border-color:var(--sl-accent);background:rgba(232,168,56,0.12)}
.sl-ev-pick--out{opacity:.75}
.sl-ev-badge{flex-shrink:0;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;padding:4px 10px;border-radius:99px}
.sl-ev-badge.alive{background:rgba(46,125,50,0.25);color:#7ED957;border:1px solid rgba(126,217,87,0.35)}
.sl-ev-badge.out{background:rgba(198,40,40,0.2);color:#FF8A80;border:1px solid rgba(255,138,128,0.3)}
.sl-ev-badge.won{background:var(--sl-accent);color:#1b1b1b;border:1px solid var(--sl-accent)}
.sl-ev-state{text-align:center;padding:4px 0 2px}
.sl-ev-state-title{font-size:14px;font-weight:800}
.sl-ev-state-sub{font-size:11px;color:rgba(249,249,249,0.6);margin-top:4px;line-height:1.5}
.sl-ev-champion{display:flex;flex-direction:column;gap:8px;background:rgba(232,168,56,0.14);border:1px solid rgba(232,168,56,0.4);border-radius:12px;padding:12px 14px}
.sl-ev-champion-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--sl-accent);line-height:1.4}
.sl-ev-champion-name{flex:1;min-width:0;font-size:clamp(13px,4vw,18px);font-weight:800;line-height:1.15}
.sl-ev-follow summary{cursor:pointer;font-size:11px;font-weight:700;color:rgba(249,249,249,0.7);padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px}
.sl-ev-follow summary::-webkit-details-marker{display:none}
.sl-ev-follow summary::before{content:'›';font-size:14px;transition:transform .15s;display:inline-block}
.sl-ev-follow[open] summary::before{transform:rotate(90deg)}
@media(max-width:767px){
	/* Mobile : pastille reward en sticker À CHEVAL sur le coin haut-droit de la carte
	   (déborde du bord), padding-top réservé pour l'espace badge ↔ titre. En mode
	   test, le bandeau admin se place sous cette bande. */
	.sl-ev{padding-top:18px}
	.sl-ev-reward{position:absolute;top:-12px;right:-6px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.25)}
	/* Un peu plus de place pour le nom du pays choisi (noms longs : Bosnien-Herzegowina…) */
	.sl-ev-pick-row{gap:8px}
	.sl-ev-pick-row .sl-ev-flag{width:34px;height:25px}
}
@media(min-width:768px){
	.sl-ev{padding:22px}
	.sl-ev-title{font-size:17px;letter-spacing:.5px}
	.sl-ev-reward{font-size:15px;padding:6px 12px}
	.sl-ev-pick-name{font-size:19px}
	.sl-ev-champion-name{font-size:18px}
	.sl-ev-grid{grid-template-columns:repeat(4,1fr);max-height:320px}
	.sl-ev-grid--ro{grid-template-columns:repeat(4,1fr)}
	.sl-ev-cta{width:auto;align-self:flex-end;padding:13px 28px}
}

/* ── Teaser événement sur l'onglet Club (.sl-evp) ── */
.sl-evp-wrap{container-type:inline-size}
.sl-evp{display:flex;align-items:center;gap:12px;background:linear-gradient(150deg,#1b1b1b 0%,#2a2418 100%);border:1px solid rgba(232,168,56,0.35);border-radius:10px;padding:14px;margin-bottom:14px;color:var(--sl-light);cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.sl-evp::before{content:'';position:absolute;top:0;right:0;width:140px;height:140px;background:radial-gradient(circle at top right,rgba(232,168,56,0.18) 0%,transparent 70%);pointer-events:none}
.sl-evp:hover{transform:translateY(-1px);border-color:rgba(232,168,56,0.6);box-shadow:0 6px 20px rgba(0,0,0,0.18)}
.sl-evp:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
.sl-evp-main{display:contents}
.sl-evp-ico{width:44px;height:44px;border-radius:10px;background:rgba(232,168,56,0.15);border:1px solid rgba(232,168,56,0.3);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sl-evp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sl-evp-top{display:flex;align-items:center;gap:8px}
.sl-evp-tag{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sl-accent);background:rgba(232,168,56,0.12);border:1px solid rgba(232,168,56,0.3);padding:2px 7px;border-radius:10px;white-space:nowrap}
.sl-evp-reward{font-size:11px;font-weight:800;color:#1b1b1b;background:var(--sl-accent);padding:2px 9px;border-radius:10px}
.sl-evp-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;line-height:1.2;overflow-wrap:break-word}
.sl-evp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;color:rgba(249,249,249,0.7);margin-top:1px}
.sl-evp-deadline{color:var(--sl-accent);font-weight:700}
.sl-evp-pick{display:inline-flex;align-items:center;gap:6px}
.sl-evp-pick .sl-ev-flag{width:22px;height:16px}
.sl-evp-pick-name{font-weight:700;color:var(--sl-light)}
.sl-evp-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:10px;white-space:nowrap}
.sl-evp-badge.alive{color:#7CFC9B;background:rgba(46,125,50,0.28)}
.sl-evp-badge.out{color:#ff9a9a;background:rgba(198,40,40,0.28)}
.sl-evp-badge.won{color:#1b1b1b;background:var(--sl-accent)}
.sl-evp--out .sl-evp-pick-name{text-decoration:line-through;opacity:.85}
.sl-evp-cta{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:800;color:#1b1b1b;background:var(--sl-accent);padding:10px 14px;border-radius:10px;white-space:nowrap}
.sl-evp-arrow{transition:transform .15s}
.sl-evp:hover .sl-evp-arrow{transform:translateX(2px)}
@container (max-width:500px){.sl-evp{flex-direction:column;align-items:stretch;gap:10px}.sl-evp-main{display:flex;align-items:center;gap:12px;min-width:0}.sl-evp-cta{width:100%}}

/* ══ SUPPORT (SAV) — onglet tickets (phase de test admin-only) ══ */
.sl-sav-view{display:flex;flex-direction:column;gap:14px}
.sl-sav-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sl-sav-btn{border:none;cursor:pointer;font-family:var(--sl-font);font-weight:700;font-size:13px;border-radius:99px;padding:10px 18px;transition:opacity .2s}
.sl-sav-btn:hover{opacity:.85}
.sl-sav-btn-primary{background:var(--tier-color,var(--sl-dark));color:#fff}
.sl-sav-btn:disabled{opacity:.5;cursor:default}
.sl-sav-back{align-self:flex-start;background:none;border:none;cursor:pointer;font-family:var(--sl-font);font-size:13px;font-weight:600;color:#888;padding:0}
.sl-sav-back:hover{color:var(--sl-dark)}
.sl-sav-list{display:flex;flex-direction:column;gap:10px}
.sl-sav-loading,.sl-sav-empty{padding:24px 16px;text-align:center;color:#999;font-size:13px}
.sl-sav-card{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:1px solid rgba(0,0,0,0.07);border-radius:var(--sl-radius);padding:14px 16px;cursor:pointer;font-family:var(--sl-font);transition:border-color .2s,box-shadow .2s}
.sl-sav-card:hover{border-color:var(--tier-color,var(--sl-dark));box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.sl-sav-card.unread{border-left:3px solid var(--tier-color,var(--sl-accent))}
.sl-sav-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sl-sav-card-subject{font-weight:700;font-size:14px;color:var(--sl-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sav-card-preview{font-size:12px;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sav-card-meta{font-size:11px;color:#aaa}
.sl-sav-pill{flex-shrink:0;display:inline-flex;align-items:center;border-radius:99px;padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sl-sav-pill-open{background:var(--sl-accent-soft);color:#a06a00}
.sl-sav-pill-answered{background:var(--sl-green-soft);color:var(--sl-green)}
.sl-sav-pill-resolved{background:rgba(0,0,0,0.06);color:#777}
.sl-sav-pill-closed{background:rgba(0,0,0,0.10);color:#555}
.sl-sav-closed{font-size:13px;line-height:1.6;color:#555;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08);border-radius:8px;padding:10px 12px;margin:0}
.sl-sav-form{display:flex;flex-direction:column;gap:10px}
.sl-sav-input{font-family:var(--sl-font);font-size:14px;color:var(--sl-dark);background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:var(--sl-radius-sm);padding:12px 14px;outline:none;transition:border-color .2s;width:100%}
.sl-sav-input:focus{border-color:var(--tier-color,var(--sl-dark))}
.sl-sav-textarea{resize:vertical;min-height:80px}
.sl-sav-ticket-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sl-sav-thread{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.sl-sav-sig{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,0.08)}
/* !important : le thème/Elementor posent `.elementor img{height:auto;max-width:100%}` (plus spécifique) — sans ça le logo 400 px s'étale sur toute la bulle (vu 04/09). */
.sl-sav-sig img.sl-sav-sig-av{width:38px!important;height:38px!important;border-radius:50%!important;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,0.12)}
.sl-sav-sig-who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sl-sav-sig-who b{font-size:13px;font-weight:700;color:var(--sl-dark)}
.sl-sav-sig-who small{font-size:10.5px;color:#8a8a86}
/* !important : le thème stylise tout `button` (taille, graisse, padding, hauteur mini) — sans ça le lien
   sortait en 13 px gras, plus gros que le prénom (vu 07/09/2026). Cible : la petite ligne du proto. */
.sl-sav-sig .sl-sav-sig-who-link{background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important;width:auto!important;box-shadow:none!important;border-radius:0!important;text-align:left;font-family:var(--sl-font)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--tier-color,var(--sl-dark))!important;cursor:pointer;line-height:1.15!important;opacity:.9}
.sl-sav-sig .sl-sav-sig-who-link:hover{text-decoration:underline;opacity:1}
.sl-sav-sig img.sl-sav-sig-av.is-link{cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tier-color,var(--sl-dark));transition:transform .2s}
.sl-sav-sig img.sl-sav-sig-av.is-link:hover{transform:scale(1.06)}
/* ── Fiche « Qui est Clara ? » ── */
.sl-agent-sheet{background:#fff;padding:0 0 calc(22px + var(--sl-ios-nav,0px));max-width:520px;margin:0 auto;overflow:hidden}
.sl-agent-sheet-x{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border-radius:50%;border:0;background:#fff;color:var(--sl-dark);font:600 18px/1 var(--sl-font);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center}
.sl-agent-sheet-hero{position:relative;height:230px;background:#ddd center 18%/cover no-repeat}
.sl-agent-sheet-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,#fff 100%)}
.sl-agent-sheet-tag{position:absolute;left:18px;top:16px;z-index:1;background:var(--sl-dark);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.sl-agent-sheet-name{position:relative;margin:-22px 20px 0;font-size:34px;line-height:.95;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--sl-dark)}
.sl-agent-sheet-name small{display:block;font-size:11px;letter-spacing:.08em;color:#8a8a86;text-transform:uppercase;margin-top:7px;font-weight:600}
.sl-agent-sheet-facts{list-style:none;margin:16px 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.sl-agent-sheet-facts li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--sl-dark)}
.sl-agent-sheet-facts li i{flex:none;width:34px;height:24px;border-radius:7px;background:rgba(0,0,0,0.06);color:var(--tier-color,var(--sl-dark));display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;letter-spacing:-.02em}
.sl-agent-sheet-ig{display:flex;align-items:center;justify-content:center;gap:9px;margin:4px 20px 0;border-radius:99px;padding:13px 16px;font-family:var(--sl-font);font-weight:700;font-size:14px;color:#fff!important;text-decoration:none!important;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.sl-agent-sheet-ig:hover{opacity:.9}
.sl-sav-sig img.sl-sav-sig-logo{height:16px!important;width:auto!important;max-width:none!important;margin-left:auto;flex:none}
.sl-sav-msg{max-width:85%;display:flex;flex-direction:column;gap:4px}
.sl-sav-msg.client{align-self:flex-end;align-items:flex-end}
.sl-sav-msg.spliff{align-self:flex-start;align-items:flex-start}
.sl-sav-msg-body{border-radius:var(--sl-radius);padding:10px 14px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.sl-sav-msg.client .sl-sav-msg-body{background:var(--tier-color,var(--sl-dark));color:#fff;border-bottom-right-radius:4px}
.sl-sav-msg.spliff .sl-sav-msg-body{background:#fff;border:1px solid rgba(0,0,0,0.07);color:var(--sl-dark);border-bottom-left-radius:4px}
.sl-sav-msg-meta{font-size:10px;color:#aaa;padding:0 4px}
/* Liens cliquables dans les messages du fil (ex. lien de suivi GLS). */
.sl-sav-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.sl-sav-msg.spliff .sl-sav-link{color:#1a73e8;font-weight:600}

/* Support — v2 : garde-fous, attente SAV, édition, hover propre */
.sl-sav-card{-webkit-appearance:none;appearance:none}
.sl-sav-card,.sl-sav-card:hover,.sl-sav-card:focus,.sl-sav-card:active{background:#fff !important;color:var(--sl-dark) !important;text-decoration:none !important;outline:none}
.sl-sav-card:hover{border-color:var(--tier-color,var(--sl-dark))}
.sl-sav-card:focus-visible{border-color:var(--tier-color,var(--sl-dark));box-shadow:0 0 0 2px var(--sl-accent-soft)}
.sl-sav-note{font-size:11px;color:#999;line-height:1.5}
/* Pièces jointes (formulaire support) */
.sl-sav-files{display:flex;flex-direction:column;gap:8px}
.sl-sav-file-actions{display:flex;flex-wrap:wrap;gap:8px}
.sl-sav-fileinput{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.sl-sav-filebtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:600;color:var(--sl-dark);background:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:var(--sl-radius-sm);padding:8px 12px;transition:border-color .15s}
.sl-sav-filebtn:hover{border-color:var(--sl-dark)}
.sl-sav-filelist{display:flex;flex-wrap:wrap;gap:6px}
.sl-sav-filelist:empty{display:none}
.sl-sav-filechip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:12px;color:var(--sl-dark);background:var(--sl-accent-soft);border:1px solid var(--sl-accent-border);border-radius:999px;padding:4px 6px 4px 10px}
.sl-sav-filechip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.sl-sav-filechip-x{flex:none;cursor:pointer;border:none;background:rgba(0,0,0,0.08);color:var(--sl-dark);width:18px;height:18px;line-height:1;border-radius:50%;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.sl-sav-filechip-x:hover{background:rgba(0,0,0,0.18)}
.sl-sav-filechip-busy{opacity:0.75}
.sl-sav-filechip-pct{flex:none;font-variant-numeric:tabular-nums;font-size:11px;color:var(--sl-dark)}
.sl-sav-filehint{margin:0}
.sl-sav-warn{background:var(--sl-accent-soft);border:1px solid var(--sl-accent-border);border-radius:var(--sl-radius-sm);padding:10px 14px;font-size:12px;font-weight:600;color:var(--sl-dark);line-height:1.5}
/* Carte Club : la boîte d'attente prend le noir du hero, l'or en signature
   (halo discret dans l'angle). La promesse comme un privilège de membre. */
.sl-sav-waiting{background:var(--sl-dark);background-image:radial-gradient(circle at 100% 0%,rgba(232,168,56,.16),transparent 55%);border:none;border-radius:var(--sl-radius);padding:15px 18px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:#fff;line-height:1.5}
/* Les contrôles qui vivent DANS la carte sombre : le ghost passe en clair,
   le primary en or (le bronze du tier disparaît sur le noir), le textarea
   d'édition garde son fond blanc — il reste un champ de saisie. */
.sl-sav-waiting .sl-sav-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.sl-sav-waiting .sl-sav-btn-ghost:hover{border-color:#fff}
.sl-sav-waiting .sl-sav-btn-primary{background:var(--sl-accent);color:var(--sl-dark)}
.sl-sav-slow{font-size:12px;line-height:1.6;color:#7a5c00;background:#fdf6e3;border:1px solid #f0e3b8;border-radius:8px;padding:10px 12px;margin:0}
/* Deux lignes, pas plus (décision 30/07/2026 — la v1 « trois niveaux + fil
   d'étapes » prenait trop de place) : la promesse en blanc dominant, la ligne
   file d'attente en tamisé. */
.sl-sav-sla-line{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.01em;margin:0;color:#fff}
.sl-sav-waiting-mail{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;margin:0}
.sl-sav-btn-ghost{background:none;border:1px solid rgba(0,0,0,0.15);color:var(--sl-dark);align-self:flex-start}
.sl-sav-btn-ghost:hover{border-color:var(--sl-dark)}
.sl-sav-row{display:flex;gap:8px}
select.sl-sav-input{cursor:pointer;appearance:auto}

/* Modale commande — édition d'adresse */
.sl-od-addr-edit{margin-top:8px}
.sl-od-addr-edit-btn{background:none;border:none;cursor:pointer;font-family:var(--sl-font);font-size:12px;font-weight:600;color:#888;padding:0;text-decoration:underline}
.sl-od-addr-edit-btn:hover{color:var(--sl-dark)}
.sl-od-addr-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sl-od-addr-row{display:flex;gap:8px}
.sl-od-addr-row .sl-sav-input{flex:1;min-width:0}
.sl-od-addr-note{font-size:11px;color:#999;line-height:1.5;margin:0}
/* Rue sans numéro : confirmation dans le formulaire (slAddrNoNumberAsk, 01/10/2026) */
.sl-addr-nonum{display:flex;flex-direction:column;gap:8px;background:var(--sl-accent-soft,#FDF6E9);border:1px solid var(--sl-accent-border,#F0D9A8);border-left:4px solid var(--sl-accent,#e8a838);border-radius:12px;padding:12px 14px}
.sl-addr-nonum-text{margin:0;font-size:14px;font-weight:700;line-height:1.4;color:var(--sl-dark,#1B1B1B)}
.sl-addr-nonum-fix{background:none;border:none;cursor:pointer;font-family:var(--sl-font,inherit);font-size:13px;font-weight:600;color:#666;padding:6px 0;text-decoration:underline}
.sl-addr-nonum-fix:hover{color:var(--sl-dark,#1B1B1B)}

/* Support — déflecteur intelligent (ClubAssist) */
/* ClubAssist — l'encart doit SE VOIR : bord accent épais, ombre, entrée
   marquée. En mobile il devient sticky en bas du viewport (au-dessus du
   clavier), sinon il se rate au fond du formulaire. */
.sl-sav-assist{display:flex;flex-direction:column;gap:10px;background:var(--sl-accent-soft);border:1px solid var(--sl-accent-border);border-left:4px solid var(--sl-accent,#e8a838);border-radius:var(--sl-radius);padding:14px 16px;box-shadow:0 6px 20px rgba(232,168,56,.18);animation:slSavAssistIn .3s cubic-bezier(.16,1,.3,1)}
.sl-sav-assist-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-dark)}
.sl-sav-assist-ico{font-size:15px;line-height:1;animation:slSavAssistIco 1.8s ease-in-out infinite}
.sl-sav-assist-text{font-size:14px;font-weight:600;color:var(--sl-dark);line-height:1.5}
.sl-sav-assist .sl-sav-btn{align-self:flex-start}
/* Parcours « Modifier mon adresse » : les actions sont centrées et plus
   discrètes que les CTA du déflecteur — c'est un formulaire, pas une
   accroche. Emporte sur .sl-sav-btn-ghost (align-self:flex-start). */
.sl-sav-assist .sl-sav-btn.sl-addr-btn{align-self:center;min-width:180px;padding:9px 22px;font-size:13px;text-align:center}
@keyframes slSavAssistIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slSavAssistIco{0%,100%{transform:none}50%{transform:scale(1.18) rotate(8deg)}}
@media (max-width:640px){
	/* Fond opaque (4.142.3) : collée en bas, la carte passe sur les pièces jointes, et le fond translucide
	   de --sl-accent-soft laissait lire leur texte au travers. Même teinte, posée sur du blanc. */
	.sl-sav-assist{position:sticky;bottom:calc(10px + var(--sl-ios-nav,0px));z-index:5;box-shadow:0 10px 32px rgba(20,20,18,.28);border-left-width:5px;background:linear-gradient(var(--sl-accent-soft),var(--sl-accent-soft)),#fff}
	.sl-sav-assist-text{font-size:14.5px}
	.sl-sav-assist .sl-sav-btn.sl-sav-assist-cta{align-self:stretch;text-align:center;padding:12px 16px;font-size:15px}
}
/* 4.70.0 — carte « mauvais goût » : substitution de variante */
.sl-swap{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.sl-swap-line{border-top:1px dashed rgba(0,0,0,.12);padding-top:8px}
.sl-swap-name{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:6px;font-size:14px}
.sl-swap-cur{opacity:.7;font-size:13px}
.sl-swap-pick{display:flex;gap:8px;align-items:center}
.sl-swap-pick .sl-swap-select{flex:1;min-width:0}
.sl-swap-btn{white-space:nowrap}
.sl-swap-hint{margin-top:6px;font-size:13px;font-weight:600}

/* Modale commande — choix d'un autre point relais */
.sl-od-relay-picker{display:flex;flex-direction:column;gap:8px}
.sl-od-relay-search{display:flex;gap:8px;align-items:center}
.sl-od-relay-search .sl-sav-input{flex:1;min-width:0;padding:10px 12px}
.sl-od-relay-search .sl-sav-btn{flex-shrink:0}
.sl-od-relay-list{display:flex;flex-direction:column;gap:8px}
.sl-od-relay-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:var(--sl-radius-sm);padding:10px 12px}
.sl-od-relay-info{min-width:0;font-size:13px;color:var(--sl-dark)}
.sl-od-relay-addr{font-size:11px;color:#888;line-height:1.4}
.sl-od-relay-row .sl-od-btn{flex-shrink:0;padding:8px 14px}

/* Boutons d'édition de la modale + croix : neutralise les hovers du thème */
.sl-od-addr-edit-btn,.sl-od-addr-edit-btn:hover,.sl-od-addr-edit-btn:focus,.sl-od-addr-edit-btn:active,.sl-od-addr-edit-btn:focus-visible{background:none !important;box-shadow:none !important;outline:none !important;transform:none !important}
.sl-od-addr-edit-btn{color:#888 !important}
.sl-od-addr-edit-btn:hover{color:var(--sl-dark) !important}
.sl-modal-close,.sl-modal-close:hover,.sl-modal-close:focus,.sl-modal-close:active,.sl-modal-close:focus-visible{background:#f5f5f5 !important;color:#999 !important;box-shadow:none !important;outline:none !important;border:none !important;transform:none !important}
.sl-modal-close:hover{color:var(--sl-dark) !important}
/* Club V2 · L1b : la croix est un SVG. Astra pose `padding:10px 20px` sur les boutons : sur 28 px de large il ne restait
   rien au SVG, écrasé à 0 (un « ✕ » en texte débordait, lui, et restait visible). */
.sl-modal-close,.sl-modal-close:hover,.sl-modal-close:focus,.sl-modal-close:active{width:28px !important;height:28px !important;min-width:0 !important;min-height:0 !important;padding:0 !important;line-height:1 !important}
.sl-modal-close svg{flex-shrink:0}

/* ══ BOTTOM SHEETS (cashback + palier), ouvertes depuis le hero ══ */
.sl-hero-balance--btn,.sl-tier-pill--btn{cursor:pointer;border:none;font-family:var(--sl-font);transition:transform .15s}
.sl-hero-balance--btn:hover,.sl-tier-pill--btn:hover{transform:translateY(-1px)}
.sl-hero-balance--btn:focus,.sl-hero-balance--btn:active,.sl-tier-pill--btn:focus,.sl-tier-pill--btn:active{outline:none;box-shadow:none}
.sl-hero-balance--btn::after,.sl-tier-pill--btn::after{content:'';display:none}
/* ── Bas d'écran × barre d'onglets flottante de Safari iOS 26 (4.154.1) ──
   Sur iPhone, hors web app installée, Safari 26 pose sa barre d'onglets par-dessus la page et assombrit en dégradé
   le bas de ce qui défile au-dessus d'elle : ~16 à 49 pt selon la fiche et l'état de la barre (déployée ou repliée
   après un défilement), mesuré aux pixels au simulateur iPhone 17 Pro, iOS 26.5, le 14/10/2026. Une fiche fixée en
   bas (bottom:0) s'arrête bien au-dessus de la barre, mais son pied tombe dans ce voile : bouton terni, dernière
   ligne à moitié lisible. Le voile tombe sur tout ce qui touche le bas DANS un conteneur défilant (overflow autre que
   visible : la page, .sl-modal, .sl-sheet-body, .sl-drawer, la fiche d'agent) ; un pied NON défilant d'une fiche
   fixe (« Remettre au panier ») est pris par Safari pour une barre : ni voile, ni marge. Vu aussi (session Missions,
   même jour, au sortir de la vue des onglets) : une fiche posée pour la barre repliée (innerHeight 754) alors que la
   barre est redéployée (714), décalée de 40 pt = 100lvh − 100svh jusqu'au défilement suivant ; 44px couvre ce cas.
   env(safe-area-inset-bottom) vaut 0 dans Safari : le navigateur ne le dit nulle part.
   RÈGLE COMMUNE : front.js pose `sl-ios-nav` sur <html> (iPhone, Safari ≥ 26 lu dans « Version/ » — l'OS est figé à
   18_7 dans l'User-Agent —, hors web app installée) ; --sl-ios-nav vaut alors 44px, 0 partout ailleurs (Android,
   iOS 18, web app, Chrome / Firefox iOS, navigateurs intégrés aux applis). Tout élément du Club ancré en bas d'écran
   dans un conteneur défilant ajoute var(--sl-ios-nav,0px) à la marge basse de son DERNIER bloc (corps défilant ou
   pied collé), jamais à la fiche : le fond du bloc remplit l'espace sous le voile. Ici : .sl-modal-body,
   .sl-sheet-body, fiche d'agent du Support, corps du volet compte, toasts, assistant du Support collé, onboarding ;
   missions.css : pied des fiches de mission, corps de « Ton avis » et de l'envoi de preuve. Toute nouvelle fiche
   fait de même. */
:root{--sl-ios-nav:0px}
html.sl-ios-nav{--sl-ios-nav:44px}
.sl-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:100000}
.sl-sheet-overlay.open{opacity:1;pointer-events:auto}
.sl-sheet{position:fixed;left:0;right:0;bottom:0;z-index:100001;background:var(--sl-light);border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);max-height:88vh;display:flex;flex-direction:column;font-family:var(--sl-font)}
.sl-sheet.open{transform:translateY(0)}
/* Recette du 15/10/2026 : fermée, une fiche ne se voit plus du tout. En desktop elle est posée à bottom:20px, et
   translateY(100%) la laissait dépasser de 20 px (poignée + ombre) en bas de l'écran, sur tous les onglets ; posée
   sous un ancêtre transformé, elle dépassait au-dessus du pied de page. Cachée APRÈS sa descente (visibility, 0,3 s),
   montrée dès l'ouverture ; son contenu fermé ne prend plus le focus au clavier. */
.sl-sheet:not(.open){visibility:hidden;transition:transform .3s cubic-bezier(.32,.72,0,1),visibility 0s linear .3s}
.sl-sheet::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:99px;background:rgba(0,0,0,.15)}
.sl-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 10px;flex-shrink:0}
.sl-sheet-title{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--sl-dark)}
.sl-sheet-close,.sl-sheet-close:hover,.sl-sheet-close:focus,.sl-sheet-close:active{width:28px;height:28px;border-radius:50%;border:none !important;background:rgba(0,0,0,.05) !important;color:#999 !important;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:none !important;outline:none !important}
.sl-sheet-close:hover{color:var(--sl-dark) !important}
.sl-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px calc(28px + var(--sl-ios-nav,0px));display:flex;flex-direction:column;gap:18px}
/* Flex column + hauteur contrainte (max-height:88vh) : sans flex-shrink:0 les enfants
   sont COMPRIMÉS au lieu de laisser la feuille scroller. Sur la carte solde, qui porte
   overflow:hidden pour ses cercles décoratifs, ça rognait le montant (bug 07/2026). */
.sl-sheet-body > *{flex-shrink:0}
@media(min-width:768px){.sl-sheet{max-width:640px;margin:0 auto;border-radius:20px;bottom:20px;left:20px;right:20px}.sl-sheet:not(.open){transform:translateY(calc(100% + 60px))}.sl-sheet-body{padding:0 24px 28px}}

/* Deux conteneurs .sl-content coexistent (les feuilles sont intercalées) :
   celui qui n'héberge aucun panneau actif ne doit pas ajouter son padding. */
.sl-content:not(:has(.sl-panel.active)){display:none}

/* ── Club V2 (L4c) ── onglet Club, hero, volets « Mon cashback » / « Mon niveau » / « Mon compte », visite guidée.
   Maquette validée (docs/chantier-club-v2/maquette.html) : blanc et gris clair, bleu #5A8BFF pour ce qui est fait ou
   validé, doré #E8A838 (texte #9A6410) pour les montants de cashback, aucun vert sauf WhatsApp (#25D366), zéro emoji.
   Les volets sont déplacés sous <body> par front.js : leurs règles passent par leur id, pas par .sl-club. Astra stylise
   `button`, `a`, `table` et leurs survols : chaque bouton est préfixé par un id et ses états remis à plat. */
.slc-sec{display:flex;flex-direction:column;min-width:0}
.slc-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sl-panel-club .slc-sec-t{margin:0;font-family:var(--sl-font);font-size:16px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:1px;color:#1b1b1b}
.slc-sec-s{margin:3px 0 12px;font:500 12.5px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-sec-sub{font:700 12px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#9A6410;white-space:nowrap}
.slc-card{background:#fff;border:1px solid #ECECE8;border-radius:16px;padding:14px;min-width:0}
.slc-grp-t{display:block;margin:0 0 10px;font:700 10px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1.2px;color:#A2A29B;text-transform:uppercase}
.slc-tip{display:flex;gap:8px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#EEF3FF;font:500 12px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#3561D9;text-align:left}
.slc-tip.is-amber{background:#FFF5E2;color:#A16207}
.slc-tip>span{flex:1;min-width:0}
.slc-tip svg.spi{margin-top:-1px}
.slc-guard{margin:10px 0 0;font:500 11px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;text-align:center}
.slc-guard strong{color:#1b1b1b;font-weight:800}
#sl-panel-club{gap:26px}

/* Hero : « +X € crédités » sur le solde (décision 16) et l'échéance du cashback */
.sl-hero-balance{position:relative}
.slc-bal-new{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 7px;border-radius:99px;background:#E8A838;color:#1b1b1b;font:800 9px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;letter-spacing:.2px;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
.slc-bal-exp{display:block;margin-top:3px;font:600 8px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:rgba(249,249,249,.6);letter-spacing:.2px}

/* Décision 13 : le bandeau « Un cadeau t'attend » (cadeau du SAV) ne s'affiche que sur l'onglet Support. Sans :has()
   (vieux navigateurs), il reste visible partout, comme avant : rien n'est perdu. */
@supports selector(:has(*)){.sl-club:not(:has(#sl-panel-support.active))>.sl-sav-gift-banner{display:none}}

/* Carte palier (maquette `.card.tier`) */
#sl-panel-club .slc-tier{position:relative;overflow:hidden;padding:16px}
#sl-panel-club .slc-tier::after{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.18),transparent 70%);pointer-events:none}
.slc-tier-h{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#sl-panel-club .slc-tier-pill,#sl-panel-club .slc-tier-pill:hover,#sl-panel-club .slc-tier-pill:focus{min-height:0;margin:0;padding:5px 12px;border:0;border-radius:99px;font-size:10px !important;font-weight:800;line-height:1.2;letter-spacing:1.4px;box-shadow:none;cursor:pointer;text-transform:uppercase}
.slc-tier-h b{font:800 14px/1 var(--sl-font);color:#9A6410}
.slc-tier-h>span{margin-left:auto;font:500 12px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-tier-h>span strong{color:#1b1b1b;font-weight:700}
.slc-ladder{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:20px 0 6px}
#sl-panel-club .slc-rung,#sl-panel-club .slc-rung:hover,#sl-panel-club .slc-rung:focus{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:#1b1b1b;text-align:center;cursor:pointer}
.slc-rung::before{content:'';position:absolute;top:21px;left:-50%;right:50%;height:3px;background:#E5E5E0;z-index:-1}
.slc-rung:first-child::before{display:none}
.slc-rung.is-done::before,.slc-rung.is-cur::before{background:linear-gradient(90deg,#D9A441,#E8C26F)}
.slc-md{width:44px;height:44px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px dashed #D8D8D2}
.slc-md svg{display:block}
.slc-rung.is-done .slc-md{border:2px solid #E8C26F;background:#FFF8E6}
.slc-rung.is-cur .slc-md{width:52px;height:52px;margin-top:-4px;border:3px solid #D9A441;background:#FFF8E6;box-shadow:0 0 0 6px rgba(217,164,65,.14)}
.slc-rung.is-next .slc-md{border:2px solid #9DB6FF;background:#EEF3FF}
.slc-rung b{margin-top:2px;font:800 9.5px/1 var(--sl-font);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.slc-rung small{font:600 10px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;white-space:nowrap}
.slc-prog-h{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:14px;font:600 12.5px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b}
.slc-prog-h>span{display:inline-flex;align-items:center;gap:4px}
.slc-prog-h strong{font-weight:800}
.slc-prog{position:relative;height:10px;border-radius:99px;background:#F0F0EB}
.slc-prog>i{position:absolute;left:0;top:0;bottom:0;min-width:10px;border-radius:99px;background:linear-gradient(90deg,#E8C26F,#D9A441)}
.slc-mk{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;border-radius:2px;background:#C9C9C2}
.slc-mk.is-on{background:#9A6410}
.slc-bar{position:relative;z-index:1;margin-top:12px}
.slc-bar-l{position:relative;display:flex;justify-content:space-between;min-height:12px;margin:0 0 6px;font:600 10px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#A5A59E}
.slc-bar-b{margin:7px 0 0}
.slc-bar-cp{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.slc-bar-cp.is-on{color:#9A6410;font-weight:800}
.slc-lvl-up{display:inline-flex;align-items:center;gap:3px;color:#8b8b85;font-weight:700}
#sl-panel-club .slc-tier .slc-tip{position:relative;z-index:1;margin-top:14px}

/* Privilèges et palier suivant (maquette `.priv` / `.nexttier`) */
.slc-priv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slc-pv{min-width:0;padding:12px 8px;border-radius:14px;background:#fff;border:1px solid #ECECE8;text-align:center}
.slc-pv i{display:flex;justify-content:center;height:28px;font-style:normal}
.slc-pv b{display:block;margin-top:6px;font:800 15px/1.1 var(--sl-font);color:#1b1b1b}
.slc-pv span{display:block;margin-top:3px;font:500 10.5px/1.25 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-next{display:flex;gap:12px;align-items:center;margin-top:10px;padding:14px;border-radius:16px;border:1.5px dashed #9DB6FF;background:#EEF3FF}
.slc-next i{display:flex;flex-shrink:0;font-style:normal}
.slc-next b{display:block;font:800 13.5px/1.2 var(--sl-font);color:#1b1b1b}
.slc-next span{display:block;margin-top:3px;font:500 11.5px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#3561D9}

/* Parrainage explicite (décision 14, maquette `#sl-referral`) */
.slc-ref-h{margin-top:12px;padding:16px;border-radius:16px;background:linear-gradient(135deg,#FFF6E2,#fff 80%);border:1px solid #F3E2B5}
.slc-ref-h b{display:block;font:800 17px/1.15 var(--sl-font);color:#1b1b1b}
.slc-ref-h span{display:block;margin-top:5px;font:500 12.5px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.slc-ref-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.slc-ref-r>div{min-width:0;padding:12px;border-radius:14px;background:#fff;border:1px solid #ECECE8}
.slc-ref-r small{display:block;font:700 10px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.8px;color:#A2A29B;text-transform:uppercase}
.slc-ref-r b{display:block;margin-top:6px;font:800 14px/1.15 var(--sl-font);color:#9A6410}
.slc-ref-r span{display:block;margin-top:3px;font:500 11px/1.35 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-ref-ex{margin-top:8px;padding:11px 12px;border-radius:12px;background:#fff;border:1px dashed #E8D5AA;font:500 12px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.slc-ref-ex b{color:#1b1b1b;font-weight:800}
.slc-code{margin-top:10px}
.slc-code-v{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;margin-top:8px;padding:12px 14px;border-radius:12px;background:#F6F6F3;border:1.5px dashed #D2D2CB}
#sl-panel-club .slc-code-v b{flex:none;margin:0;padding:0;border-radius:0;background:none;font:600 20px/1 ui-monospace,Menlo,monospace;letter-spacing:3px;text-align:left;color:#1b1b1b}
.slc-code-v span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;-webkit-user-select:all;user-select:all}
#sl-panel-club .slc-wa,#sl-panel-club .slc-wa:hover,#sl-panel-club .slc-wa:focus,#sl-panel-club .slc-wa:visited{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;border-radius:12px;background:#25D366;color:#fff;font:700 13.5px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-decoration:none;box-shadow:none}
.slc-shares{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px}
#sl-panel-club .slc-shares>*,#sl-panel-club .slc-shares>*:hover,#sl-panel-club .slc-shares>*:focus,#sl-panel-club .slc-shares>*:visited{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:42px;min-height:0;margin:0;padding:0 8px;border:0;border-radius:11px;background:#F1F1EC;color:#1b1b1b;font:700 12.5px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-decoration:none;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}
#sl-panel-club .slc-shares>* span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sl-panel-club .slc-shares>* svg{flex-shrink:0}
#sl-panel-club .slc-shares>.slc-sh-copy{background:#5A8BFF;color:#fff}
#sl-panel-club .slc-shares>[hidden]{display:none}
.slc-locked{display:flex;gap:12px;align-items:center;margin-top:10px;background:#F6F6F3;border-style:dashed}
.slc-locked svg{flex-shrink:0}
.slc-locked p{margin:0;font:600 12.5px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.slc-fls,.slc-sponsor{margin-top:10px}
.slc-fls .slc-grp-t{margin-bottom:4px}
.slc-fl{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F2F2EE;font:500 12.5px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b}
.slc-fl:last-child{border-bottom:0}
.slc-fl>div{min-width:0}
.slc-fl small{display:block;font-size:11px;color:#8b8b85}
.slc-fl--solo{padding:4px 0 0}
.slc-av{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#F6F6F3;font:800 12px/1 var(--sl-font);color:#1b1b1b}
.slc-fl-st{margin-left:auto;text-align:right;flex-shrink:0;max-width:48%}
.slc-fl-st b{display:block;color:#9A6410;font-weight:800}
.slc-fl-st small.is-ok{color:#3561D9;font-weight:700}
.slc-sponsor-none{margin:0;font:500 12.5px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.slc-sponsor-in{display:flex;gap:8px;margin-top:8px}
/* 16 px : sous 16 px, Safari iOS zoome la page à la saisie. */
#sl-panel-club .slc-sponsor-in input{flex:1;min-width:0;height:42px;margin:0;padding:0 12px;border:1.5px solid #E2E2DC;border-radius:11px;background:#fff;color:#1b1b1b;font:600 16px/1 ui-monospace,Menlo,monospace;letter-spacing:2px;text-transform:uppercase;box-shadow:none;outline:none}
#sl-panel-club .slc-sponsor-in input:focus{border-color:#5A8BFF}
#sl-panel-club .slc-sponsor-in button,#sl-panel-club .slc-sponsor-in button:hover,#sl-panel-club .slc-sponsor-in button:focus{flex-shrink:0;height:42px;min-height:0;margin:0;padding:0 16px;border:0;border-radius:11px;background:#5A8BFF;color:#fff;font:700 13px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}
#sl-referral .sl-result-msg.success{background:#EEF3FF;color:#3561D9}
#sl-referral .sl-result-msg.error{background:#FDEDED;color:#B42318}

/* Volets « Mon cashback » et « Mon niveau » (maquette `cashbackHTML` / `sheetTier`) */
.slc-sheet .sl-sheet-body{gap:12px}
.slc-sheet .sl-sheet-close svg{display:block}
.slc-bal{position:relative;overflow:hidden;padding:18px;border-radius:18px;background:#fff;border:1px solid #ECECE8;text-align:center}
.slc-bal::before,.slc-bal::after{content:'';position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.16),transparent 70%);pointer-events:none}
.slc-bal::before{width:160px;height:160px;left:-50px;top:-60px}
.slc-bal::after{width:120px;height:120px;right:-40px;bottom:-50px}
.slc-bal>b{position:relative;display:block;font:800 34px/1.1 var(--sl-font);color:#1b1b1b}
.slc-bal>span{position:relative;display:block;margin-top:6px;font:600 12px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-bal-tot{position:relative;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px;font:600 11.5px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.slc-bal-tot em{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:99px;background:#F6F6F3;font-style:normal}
.slc-bal-tot strong{color:#9A6410;font-weight:800}
.slc-hist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.slc-hist-h .slc-grp-t{margin:0}
#sl-cashback-sheet .slc-flt{display:flex;gap:6px;flex-wrap:wrap}
#sl-cashback-sheet .slc-flt .sl-filter-btn,#sl-cashback-sheet .slc-flt .sl-filter-btn:hover,#sl-cashback-sheet .slc-flt .sl-filter-btn:focus{height:30px;min-height:0;margin:0;padding:0 13px;border:1px solid #ECECE8;border-radius:99px;background:#fff;color:#55554f;font:700 12px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}
#sl-cashback-sheet .slc-flt .sl-filter-btn.active{background:#EEF3FF;border-color:#C9D7FF;color:#3561D9}
.slc-txs{padding:4px 14px}
.slc-tx{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #F2F2EE}
.slc-tx:last-child{border-bottom:0}
.slc-tx-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#F6F6F3}
.slc-tx-ic svg{display:block}
.slc-tx-mid{min-width:0}
.slc-tx-mid b{display:block;font:600 12.5px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b;overflow-wrap:anywhere}
.slc-tx-mid small{display:block;margin-top:2px;font:500 10.5px/1.35 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-tag{display:inline-block;margin-right:4px;padding:3px 5px;border-radius:4px;background:#F1F1EC;color:#55554f;font:700 9px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-transform:uppercase;letter-spacing:.3px}
.slc-amt{font:800 13px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap}
.slc-amt.is-p{color:#9A6410}
.slc-amt.is-m{color:#55554f}
.slc-empty{margin:0;padding:14px 0;text-align:center;font:500 12px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
.slc-lvl-md{position:relative;display:flex;justify-content:center}
.slc-lvl>b{margin-top:6px;font-size:26px}
.slc-lvl .slc-prog{margin-top:14px}
.slc-lvl .slc-guard{position:relative;margin-top:8px}
.slc-lvl .slc-tip{position:relative;margin-top:12px}
#sl-tier-sheet .slc-ttab{width:100%;margin:0;border:0;border-collapse:collapse;background:none;font:500 12.5px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b}
#sl-tier-sheet .slc-ttab th{padding:0 0 8px;border:0;background:none;text-align:left;font:700 10px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.8px;color:#A2A29B;text-transform:uppercase}
#sl-tier-sheet .slc-ttab td{padding:10px 0;border:0;border-top:1px solid #F2F2EE;background:none}
#sl-tier-sheet .slc-ttab tr.is-me td{font-weight:800}
#sl-tier-sheet .slc-ttab td:last-child,#sl-tier-sheet .slc-ttab th:last-child{text-align:right}
#sl-tier-sheet .slc-ttab td:nth-child(2),#sl-tier-sheet .slc-ttab th:nth-child(2){text-align:center}

/* Volet « Mon compte » (maquette `sheetAccount`) : champs titrés en 16 px (pas de zoom iOS), bouton bleu */
/* Volets et visite vivent sous <body> : la police du Club n'y arrive pas par .sl-club. */
#sl-drawer,#sl-onboarding{font-family:var(--sl-font)}
#sl-drawer .slc-drawer-sub{max-width:62vw;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
#sl-drawer .sl-drawer-close svg{display:block}
/* Recette Club V2 du 15/10/2026 : Astra (kit Elementor) pose padding:10px 20px sur tous les boutons ; les croix des volets
   (« Mon compte », cashback, palier, « Remettre au panier ») font 28-32 px en border-box : il ne restait 0 px pour l'icône,
   un rond gris vide en prod (iPhone et Pixel ; le banc visuel, sans le thème, ne le montrait pas). */
button.sl-drawer-close,button.sl-sheet-close{padding:0!important;min-width:0}
.sl-drawer-close svg,.sl-sheet-close svg{flex-shrink:0}
#sl-drawer .sl-drawer-body{gap:12px}
#sl-drawer .sl-drawer-form{gap:12px}
#sl-drawer .slc-acc{display:flex;flex-direction:column;gap:10px}
#sl-drawer .slc-acc .slc-grp-t{margin:0 0 2px}
.slc-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.slc-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.slc-field>span{font:700 11px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
#sl-drawer .slc-field .sl-form-input{height:44px;margin:0;padding:0 12px;border:1.5px solid #E2E2DC;border-radius:11px;background-color:#fff;color:#1b1b1b;font:500 16px/1.2 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:none}
#sl-drawer .slc-field select.sl-form-input{padding-right:32px}
#sl-drawer .slc-field .sl-form-input:focus{border-color:#5A8BFF}
#sl-drawer .slc-field .sl-form-input:disabled{background-color:#F6F6F3;color:#8b8b85;opacity:1}
/* Safari iOS seulement : un champ date y garde sa largeur propre et débordait à droite de la carte « Informations
   personnelles » (iPhone 17e, recette Club V2 du 15/10/2026). Apparence d'un champ texte (le sélecteur natif s'ouvre
   toujours au tap), date calée à gauche et centrée en hauteur. */
@supports (-webkit-touch-callout:none){
#sl-drawer .slc-field input[type=date].sl-form-input{display:block;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;text-align:left;line-height:41px}
#sl-drawer .slc-field input[type=date].sl-form-input::-webkit-date-and-time-value{text-align:left;margin:0}
}
#sl-drawer .slc-hint{display:flex;gap:6px;align-items:flex-start;margin:0;font:500 11px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
#sl-drawer .slc-hint svg{margin:0;flex-shrink:0}
.slc-tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 13px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b}
.slc-tgl small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:#8b8b85}
/* Club V2 · interrupteurs des préférences (Mon compte) : bleu #5A8BFF allumé, gris éteint, jamais vert ; enregistrés au clic.
   touch-action : un double tap sur l'interrupteur ne zoome plus la page dans Safari iOS (vu au banc, 14/10/2026). */
#sl-drawer .slc-prefs{gap:14px}
#sl-drawer .slc-prefs .slc-grp-t{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px}
.slc-pref-ok{display:inline-flex;align-items:center;gap:4px;color:#3561D9;font:700 11px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;text-transform:none;opacity:0;transition:opacity .2s}
.slc-pref-ok.is-on{opacity:1}
.slc-pref-ok svg{display:block;flex-shrink:0}
#sl-drawer .slc-sw,#sl-drawer .slc-sw:hover,#sl-drawer .slc-sw:focus{position:relative;flex-shrink:0;width:46px;height:28px;min-height:0;margin:0;padding:0;border:0;border-radius:99px;background:#D9D9D3;box-shadow:none;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#sl-drawer .slc-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
#sl-drawer .slc-sw[aria-checked="true"]{background:#5A8BFF}
#sl-drawer .slc-sw[aria-checked="true"]::after{transform:translateX(18px)}
#sl-drawer .slc-sw[aria-busy="true"]{opacity:.65}
#sl-drawer .slc-sw:focus-visible{outline:2px solid #3561D9;outline-offset:2px}
#sl-drawer .slc-mbtn,#sl-drawer .slc-mbtn:hover,#sl-drawer .slc-mbtn:focus{flex-shrink:0;height:34px;min-height:0;margin:0;padding:0 14px;border:0;border-radius:99px;background:#EEF3FF;color:#3561D9;font:700 12px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}
/* Enregistrer en premier, pleine largeur ; « Se déconnecter » dessous, sur une ligne (maquette : bouton fantôme). */
#sl-drawer .sl-account-actions{flex-direction:column-reverse;flex-wrap:nowrap;margin-top:4px}
#sl-drawer .sl-account-actions>button{flex:0 0 auto !important;width:100% !important;white-space:nowrap}
#sl-drawer .slc-btn-blue,#sl-drawer .slc-btn-blue:focus{background:#5A8BFF;color:#fff;border:0;border-radius:12px;box-shadow:none}
#sl-drawer .slc-btn-blue:hover{background:#3561D9;color:#fff}
#sl-drawer .slc-logout,#sl-drawer .slc-logout:hover,#sl-drawer .slc-logout:focus{gap:8px;background:#fff;color:#B42318;border:1px solid #F2D5D2;border-radius:12px;box-shadow:none}
#sl-drawer .sl-form-msg.success{background:#EEF3FF;color:#3561D9}
#sl-drawer .sl-logout-icon svg{display:block;margin:0 auto}

/* Visite guidée en clair (maquette `.ob`) : carte blanche, progression dorée, bouton bleu. Le panneau vit sous <body>
   (front.js) : --tier-color n'y arrive pas, les couleurs sont donc écrites. */
#sl-onboarding .sl-onboarding-panel{background:#fff;color:#1b1b1b;border:1px solid #ECECE8;border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
#sl-onboarding .sl-ob-dot{background:#EAEAE5}
#sl-onboarding .sl-ob-dot.active{background:#D9A441}
#sl-onboarding .sl-ob-dot.done{background:rgba(217,164,65,.55)}
#sl-onboarding .sl-ob-head{color:#8b8b85}
#sl-onboarding .sl-ob-step{color:#1b1b1b}
#sl-onboarding .sl-ob-section{color:#9A6410}
#sl-onboarding .sl-ob-title{color:#1b1b1b}
#sl-onboarding .sl-ob-body{color:#55554f}
#sl-onboarding .sl-ob-btn--ghost,#sl-onboarding .sl-ob-btn--ghost:hover,#sl-onboarding .sl-ob-btn--ghost:focus{background:#F1F1EC;color:#1b1b1b;border-color:transparent}
#sl-onboarding .sl-ob-btn--primary,#sl-onboarding .sl-ob-btn--primary:focus{background:#5A8BFF;color:#fff;border-color:#5A8BFF}
#sl-onboarding .sl-ob-btn--primary:hover{background:#3561D9;color:#fff;border-color:#3561D9}
@media(prefers-reduced-motion:reduce){.slc-rung,.slc-prog>i{transition:none}}
/* ── fin Club V2 (L4c) ── */


/* Pronostic soldé, rangé dans « missions terminées ».
   Markup dédié et plat (cf. render_history) : titre, une ligne de résultat, le verdict.
   Habillage aligné sur .sl-mc-done pour ne pas détonner parmi les cartes voisines. */
.sl-evh{background:rgba(46,125,50,0.04);border:1px solid rgba(46,125,50,0.12);border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.sl-evh--won{background:rgba(232,168,56,0.06);border-color:rgba(232,168,56,0.25)}
.sl-evh-top{display:flex;align-items:center;gap:8px;min-width:0}
.sl-evh-ico{font-size:16px;flex-shrink:0;opacity:.7}
.sl-evh-title{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-evh-reward{flex-shrink:0;font-size:10px;font-weight:800;color:#1b1b1b;background:var(--sl-accent);padding:2px 8px;border-radius:99px}
.sl-evh-row{display:flex;align-items:center;gap:7px;min-width:0}
.sl-evh-lbl{flex-shrink:0;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:#999}
.sl-evh-row .sl-ev-flag{width:20px;height:15px;flex-shrink:0}
.sl-evh-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--sl-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-evh-state{font-size:11px;color:#888;line-height:1.45}
.sl-evh-state strong{color:var(--sl-dark);font-weight:800}
.sl-evh .sl-ev-badge{flex-shrink:0;font-size:8px;padding:3px 8px}
.sl-evh .sl-ev-badge.out{background:rgba(198,40,40,0.08);color:#c62828;border:1px solid rgba(198,40,40,0.2)}
.sl-evh .sl-ev-badge.won{background:var(--sl-accent);color:#1b1b1b;border:1px solid var(--sl-accent)}

/* ═══ Bannière cadeau SAV (permanente sous le hero) ═══ */
.sl-sav-gift-banner{display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:13px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.75));border:1.5px solid var(--tier-color,#e7c36a);box-shadow:0 4px 16px rgba(20,20,18,0.07)}
.sl-sav-gift-banner-icon{font-size:26px;line-height:1;flex-shrink:0;animation:sl-gift-pop 2.4s ease-in-out infinite}
@keyframes sl-gift-pop{0%,100%{transform:scale(1) rotate(0deg)}8%{transform:scale(1.12) rotate(-6deg)}16%{transform:scale(1.06) rotate(5deg)}24%{transform:scale(1) rotate(0deg)}}
.sl-sav-gift-banner-text{min-width:0;line-height:1.4;font-size:13px;color:#3a3a36}
.sl-sav-gift-banner-text strong{display:block;font-size:14px;font-weight:800;color:#1b1b1b;margin-bottom:1px}
.sl-sav-gift-banner-text em{font-style:normal;font-weight:700;color:#1b7a3d}
@media (min-width:768px){.sl-sav-gift-banner{max-width:740px;margin:16px auto 0}}

/* ═══ Geste SAV — bandeau accolé à la réponse dans le chat Club ═══ */
.sl-sav-gift-strip{margin:6px 0 10px;padding:10px 13px;border-radius:12px;background:linear-gradient(135deg,#fff8ec,#fffdf7);border:1.5px solid #e7c36a;font-size:12.5px;line-height:1.45;color:#3a3a36;max-width:85%}

/* ═══ Cadeau à personnaliser — sélecteur de goûts dans le fil ═══
   Même habillage doré que le bandeau passif, mais plus large et actionnable :
   c'est le seul bloc du fil où le membre a un geste à faire. */
.sl-sav-gift-choose{margin:6px 0 10px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#fff8ec,#fffdf7);border:1.5px solid #e7c36a;font-size:12.5px;line-height:1.45;color:#3a3a36;max-width:92%}
.sl-sav-gift-choose-head{font-size:13.5px;font-weight:800;color:#1b1b1b}
.sl-sav-gift-choose-lead{margin:2px 0 10px;font-size:12.5px}
.sl-sav-gift-choose-list{display:flex;flex-direction:column;gap:6px}
.sl-sav-gv{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,0.75);border:1px solid rgba(231,195,106,0.5)}
.sl-sav-gv.is-oos{opacity:0.55;background:none}
.sl-sav-gv-name{min-width:0;flex:1}
.sl-sav-gv-ctrl{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.sl-sav-gv-btn{width:26px;height:26px;border-radius:7px;border:1px solid #e7c36a;background:#fff;color:#1b1b1b;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sl-sav-gv-btn:disabled{opacity:0.35;cursor:not-allowed}
.sl-sav-gv-n{min-width:18px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.sl-sav-gift-choose-err{margin:8px 0 0;color:#c62828;font-weight:600}
.sl-sav-gift-choose-err:empty{display:none}
.sl-sav-gift-choose-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.sl-sav-gift-choose-left{font-weight:700;color:#7a6320}
.sl-sav-gift-choose-cta:disabled{opacity:0.45;cursor:not-allowed}
.sl-sav-gift-choose.is-done{font-weight:700;color:#1b7a3d}

/* ═══ Pièces jointes dans le fil support ═══
   Les fichiers ne passent pas par la médiathèque WP : aucune taille de
   miniature n'existe, l'original est contraint par object-fit. D'où la taille
   fixe — sans elle, une photo de téléphone déroulerait tout le fil.
   Aligné à droite côté client, à gauche côté Spliff, comme les bulles. */
.sl-sav-attach{display:flex;flex-direction:column;gap:6px;max-width:100%}
.sl-sav-msg.client .sl-sav-attach{align-items:flex-end}
.sl-sav-attach-grid{display:flex;flex-wrap:wrap;gap:6px}
.sl-sav-msg.client .sl-sav-attach-grid{justify-content:flex-end}
.sl-sav-thumb{padding:0;width:88px;height:88px;border:1px solid rgba(0,0,0,0.12);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;flex:none}
.sl-sav-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sl-sav-thumb:hover{border-color:var(--tier-color,var(--sl-dark))}
.sl-sav-attach-video{max-width:min(320px,100%);border-radius:12px;border:1px solid rgba(0,0,0,0.12);background:#000;display:block}
.sl-sav-attach-file{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px;border:1px solid rgba(0,0,0,0.12);border-radius:999px;background:#fff;color:var(--sl-dark);font-size:12px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sav-attach-file:hover{border-color:var(--tier-color,var(--sl-dark))}
.sl-sav-products{display:flex;flex-direction:column;gap:6px;max-width:100%}
.sl-sav-msg.client .sl-sav-products{align-items:flex-end}
.sl-sav-product{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(0,0,0,0.12);border-radius:12px;background:#fff;text-decoration:none;color:var(--sl-dark);max-width:100%}
.sl-sav-product:hover{border-color:var(--tier-color,var(--sl-dark))}
.sl-sav-product img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none;background:#f4f1ea}
.sl-sav-product-info{display:flex;flex-direction:column;min-width:0}
.sl-sav-product-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sav-product-price{font-size:12.5px;color:#6f6e66}
/* Agrandissement : au-dessus de la modale commande (z-index 100000). */
.sl-sav-zoom{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0.85);cursor:zoom-out}
.sl-sav-zoom img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;background:#fff}

/* ── Hold Up : mission du moment (hero, mêmes bases que .sl-ev) ── */
/* ── Spliff Hold-Up : la mission du moment (hero de l'onglet Missions) ── */
.sl-holdup{position:relative;overflow:hidden;border-radius:var(--sl-radius);padding:18px 16px 16px;color:var(--sl-light);display:flex;flex-direction:column;gap:14px;background:radial-gradient(120% 90% at 100% 0%,rgba(240,86,143,.42) 0%,rgba(240,86,143,0) 55%) #12080f;border:1px solid rgba(240,86,143,.35);box-shadow:0 24px 50px -30px rgba(240,86,143,.6)}
.sl-holdup::after{content:'';position:absolute;left:-30%;bottom:-40%;width:80%;height:80%;background:radial-gradient(circle,rgba(232,168,56,.22) 0%,transparent 65%);pointer-events:none}
.sl-holdup>*{position:relative;z-index:1}
.sl-holdup-test{background:rgba(232,168,56,.16);border:1px dashed rgba(232,168,56,.6);border-radius:8px;padding:7px 12px;font-size:10.5px;font-weight:700;line-height:1.5;text-align:center;color:#E8A838}
.sl-holdup-test code{font-size:10px}
.sl-holdup-top{display:flex;align-items:center;gap:10px}
.sl-holdup-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);padding:5px 9px;border-radius:999px}
.sl-holdup-live i{width:7px;height:7px;border-radius:50%;background:#ff3355;box-shadow:0 0 8px #ff3355;animation:slHoldupPulse 1.2s infinite}
@keyframes slHoldupPulse{50%{opacity:.3}}
.sl-holdup .sl-holdup-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,249,249,.6)}
.sl-holdup-scene{display:grid;grid-template-columns:1fr minmax(120px,34%);gap:14px;align-items:center}
.sl-holdup .sl-holdup-title{margin:0;font-size:clamp(28px,9vw,40px);line-height:.92;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 30%,#FFC94A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sl-holdup .sl-holdup-pitch{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:rgba(249,249,249,.85)}
.sl-holdup-bareme{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.sl-holdup-bareme li{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.sl-holdup-bareme li.is-1{background:linear-gradient(90deg,rgba(255,201,74,.28),rgba(255,201,74,.06));border-color:rgba(255,201,74,.5)}
.sl-holdup-bareme b{font-size:18px;font-weight:900;color:#FFC94A;min-width:44px;letter-spacing:-.02em}
.sl-holdup-bareme li.is-1 b{font-size:22px}
.sl-holdup-bareme span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.sl-holdup-tel{position:relative;display:block;width:100%;max-width:150px;margin-left:auto;aspect-ratio:9/19.5;border-radius:28px;background:#0d0d10;padding:6px;box-shadow:0 30px 50px -20px rgba(240,86,143,.75),inset 0 0 0 1.5px #2a2a2f;transform:rotate(-4deg);transition:transform .25s;text-decoration:none}
.sl-holdup-tel:hover{transform:rotate(-2deg) scale(1.03)}
.sl-holdup-tel video{width:100%;height:100%;object-fit:cover;border-radius:23px;background:#1a1626;display:block}
.sl-holdup-encoche{position:absolute;top:12px;left:50%;width:38%;height:14px;transform:translateX(-50%);background:#0d0d10;border-radius:999px;z-index:2}
.sl-holdup-play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;background:rgba(240,86,143,.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;padding-left:3px;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:2;transition:opacity .3s}
.sl-holdup-tel video[src]~.sl-holdup-play{opacity:0}
.sl-holdup-podium{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.sl-holdup-podium-t{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,249,249,.55);margin-bottom:4px}
.sl-holdup-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;font-weight:700}
.sl-holdup-row:first-of-type{background:linear-gradient(90deg,rgba(255,201,74,.22),rgba(255,201,74,.03))}
.sl-holdup-row.is-me{box-shadow:0 0 0 1.5px #F0568F}
/* Rang, drapeau et points ne rétrécissent JAMAIS : sans `flex:none`, un item
   de largeur fixe est la première victime du manque de place — `.sl-holdup-name`
   a `flex-basis:0`, donc il ne participe pas au rétrécissement et laisse les
   autres encaisser. Et 22 px ne tenaient pas trois chiffres : « 107 » mesure
   23,4 px en Syne à 11 px, il débordait sur le drapeau ; serré, un rang à deux
   chiffres se coupait en deux lignes (« 5 » / « 2 », vu par Oliver le
   10/09/2026). `min-width` plutôt qu'une largeur fixe : la colonne reste alignée
   jusqu'à 999 et un rang plus long s'élargit au lieu de se casser. */
.sl-holdup-medal{flex:none;min-width:24px;text-align:center;font-size:15px;white-space:nowrap}
.sl-holdup-flag{flex:none;width:20px;font-size:15px;line-height:1}
.sl-holdup-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.sl-holdup-name em{font-style:normal;font-size:9px;color:#F0568F;margin-left:4px;letter-spacing:.1em}
/* Le séparateur de milliers est une espace : « 9 316 » a le droit de passer à
   la ligne. C'est le pseudo qui doit céder (il a son ellipse), jamais le score. */
.sl-holdup-pts{flex:none;font-weight:900;color:#FFC94A;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-holdup-row.is-dots{justify-content:center;padding:0 8px;color:rgba(249,249,249,.4);font-size:13px;letter-spacing:.25em;line-height:1.1}
.sl-holdup-prime{flex:none;font-size:10px;font-weight:900;letter-spacing:.04em;color:#1b1b1b;background:linear-gradient(90deg,#FFC94A,#F0568F);padding:2px 7px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-holdup-next{font-size:11.5px;line-height:1.4;font-weight:700;text-align:center;color:#FFC94A;padding:6px 8px 2px}
.sl-holdup-medal.is-num{font-size:11px;font-weight:900;color:rgba(249,249,249,.6);font-variant-numeric:tabular-nums;word-break:keep-all}
.sl-holdup-full{margin-top:4px}
.sl-holdup-full summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#FFC94A;-webkit-tap-highlight-color:transparent}
.sl-holdup-full summary::-webkit-details-marker{display:none}
.sl-holdup-full summary::after{content:'▾';font-size:12px}
.sl-holdup-full[open] summary::after{content:'▴'}
.sl-holdup-full-close,.sl-holdup-full[open] .sl-holdup-full-open{display:none}
.sl-holdup-full[open] .sl-holdup-full-close{display:inline}
.sl-holdup-full-list{margin-top:8px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}
.sl-holdup-full-list .sl-holdup-row{font-size:12.5px;padding:5px 8px}
.sl-holdup-full-list .sl-holdup-row:first-of-type{background:none}
.sl-holdup-etat{font-size:12.5px;line-height:1.5;text-align:center}
.sl-holdup-etat small{display:block;opacity:.7;font-size:11px;margin-top:2px}
.sl-holdup-cta,.sl-holdup-cta:hover,.sl-holdup-cta:visited{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:15px;border-radius:12px;background:linear-gradient(90deg,#F0568F,#FFC94A);color:#1b1b1b;font-family:var(--sl-font);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;box-shadow:0 12px 28px -8px rgba(240,86,143,.8);animation:slHoldupGlow 2.2s ease-in-out infinite}
.sl-holdup-cta span{font-size:18px}
@keyframes slHoldupGlow{50%{box-shadow:0 12px 34px -4px rgba(255,201,74,.9);transform:translateY(-1px)}}
/* Mission accomplie : le membre a déjà été payé, il ne rejoue pas la campagne.
   Doré comme une récompense, et surtout : plus aucun « Jouer ». */
.sl-holdup-done{display:flex;flex-direction:column;gap:5px;text-align:center;padding:13px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(255,201,74,.26),rgba(255,201,74,.06));border:1px solid rgba(255,201,74,.55)}
.sl-holdup-done b{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#FFC94A}
.sl-holdup-done span{font-size:12.5px;line-height:1.45;font-weight:700}
.sl-holdup-tel.is-done{cursor:default;transform:rotate(-4deg)}
.sl-holdup-note{font-size:10.5px;text-align:center;opacity:.65;line-height:1.4}
.sl-holdup-rules{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sl-form-hint{display:block;margin-top:4px;font-size:11px;color:#8a8a85;line-height:1.35}
@media (prefers-reduced-motion:reduce){.sl-holdup-live i,.sl-holdup-cta{animation:none}}
/* « Modifier mon message » vit dans la boîte d'attente (fond sombre) : les puces
   de pièces jointes, pensées pour le formulaire clair, y étaient illisibles. */
.sl-sav-waiting .sl-sav-filechip{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.35);color:#fff}
.sl-sav-waiting .sl-sav-filechip-x{background:rgba(255,255,255,0.22);color:#fff}
.sl-sav-waiting .sl-sav-filechip-x:hover{background:rgba(255,255,255,0.4)}
.sl-sav-waiting .sl-sav-filechip-pct{color:#fff}
.sl-sav-waiting .sl-sav-filehint{color:rgba(255,255,255,0.7)}
/* Facture client (spliff-facture) — ligne info, bouton d'action, pastille de carte */
.sl-od-info-invoice{align-items:center}
.sl-od-invoice-link{display:inline-flex;align-items:center;gap:4px;color:var(--sl-dark);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(27,27,27,.25)}
.sl-od-invoice-link:hover{border-bottom-color:var(--sl-dark)}
.sl-od-btn-invoice{background:#fff;color:var(--sl-dark);border:1.5px solid #E4E4DF}
.sl-od-btn-invoice:hover{border-color:var(--sl-dark);color:var(--sl-dark);transform:translateY(-1px)}
.sl-order-footer-right{display:flex;align-items:center;gap:10px}
.sl-order-invoice{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#666;background:rgba(0,0,0,.05);border-radius:999px;padding:4px 9px;text-decoration:none;transition:all .15s}
.sl-order-invoice:hover{background:var(--sl-dark);color:#fff}
/* 4.89.0 — demande d'annulation : bandeau du fil + note fiche commande */
.sl-sav-cancel-strip{background:linear-gradient(135deg,#fff1ee,#fffaf8);border-color:#e8a08f}
.sl-od-cancel-requested{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;line-height:1.4;color:#8a3b2b}
.sl-sav-cancel-needtext{color:#8a3b2b;font-weight:600}
/* 4.90.0 — changer un cadeau depuis la fiche commande */
.sl-od-item-swap{margin-top:4px;padding:4px 9px;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:none;font:inherit;font-size:12px;cursor:pointer;color:var(--sl-dark)}
.sl-od-item-swap:hover{background:rgba(0,0,0,.04)}

/* ── Produit pris en plusieurs goûts = une ligne (4.94.0) ─────────────
   Fiche commande et carte de suivi : pastilles picto + goût (« ×2 » après le
   goût), pictos PNG servis par spliff-mail-builder. */
.sl-od-flavours,.sl-tracking-item-flavours{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.sl-fl-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.2;white-space:nowrap;opacity:.9}
.sl-fl-chip b{font-weight:700}
.sl-fl-ic{display:inline-block;flex:none;border-radius:50%;background:#fff}
.sl-tracking-item-flavours{display:flex;margin-top:2px}
.sl-od-item--group .sl-od-item-swap{margin-top:6px}

/* ── Onglet Jeux (Spliff_Loyalty_Games) et carte Preroll Panic (Spliff_Loyalty_Preroll) — 4.152.0 ──
   DA Club V2 (décisions d'Oliver) : panneau clair, blanc et gris clair, bleu #5A8BFF pour l'action et « toi »,
   doré #E8A838 (texte #9A6410) pour les points et le cashback, aucun vert, zéro emoji. Remplace le fond arcade
   sombre de la 4.95.0 (onglet réservé au staff jusque-là). Astra stylise `button`, `a` et leurs survols : chaque
   bouton est préfixé par un id ou par .sl-pp, et ses états sont remis à plat.
   Préfixes : sl-pp- (carte Preroll, en tête de Jeux #sl-g-preroll ; plus dans Missions depuis la 4.178.3), sl-g- (onglet). */
.sl-pp{position:relative;overflow:hidden;border-radius:18px;background:#fff;border:1px solid #ECECE8;box-shadow:0 18px 40px -28px rgba(27,27,27,.35);font-family:var(--sl-font);color:#1b1b1b}
.sl-pp.is-flash{animation:sl-pp-flash 2s ease-out}
@keyframes sl-pp-flash{0%,100%{box-shadow:0 18px 40px -28px rgba(27,27,27,.35)}20%{box-shadow:0 0 0 4px rgba(90,139,255,.55)}}
.sl-pp .sl-pp-art,.sl-pp .sl-pp-art:hover,.sl-pp .sl-pp-art:focus{position:relative;display:block;height:clamp(176px,52vw,220px);overflow:hidden;background:#0b0910;text-decoration:none;border:0}
.sl-pp-cover{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 2%;display:block}
/* L'affiche porte son propre titre vers 45 % de sa hauteur : le bandeau n'en montre que le haut (visage, lune), le logo fait le titre. */
.sl-pp .sl-pp-art::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,rgba(11,9,16,0),rgba(11,9,16,.72));pointer-events:none}
.sl-pp-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#fff;color:#1b1b1b;font:800 10px/1 var(--sl-font);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.sl-pp-badge i{width:7px;height:7px;border-radius:50%;background:#5A8BFF;box-shadow:0 0 0 3px rgba(90,139,255,.25);animation:slHoldupPulse 1.4s infinite}
.sl-pp-badge.is-off i{animation:none;background:#A2A29B;box-shadow:none}
.sl-pp-cash{position:absolute;top:10px;right:10px;z-index:2;padding:6px 10px;border-radius:99px;background:#E8A838;color:#1b1b1b;font:800 10.5px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap}
.sl-pp-logo{position:absolute;left:12px;bottom:8px;z-index:2;width:min(50%,220px);height:auto;max-width:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.65))}
.sl-pp-body{display:flex;flex-direction:column;gap:10px;padding:14px}
.sl-pp-pitch{margin:0;font:500 13px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#55554f}
.sl-pp-phase strong{font-weight:800}
.sl-pp-gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sl-pp-gain{min-width:0;padding:10px 6px;border-radius:14px;background:#fff;border:1px solid #ECECE8;text-align:center}
.sl-pp-gain.is-1{background:#FFF8E6;border-color:#F3E2B5}
.sl-pp-gain i{display:flex;justify-content:center;height:26px;font-style:normal}
.sl-pp-gain b{display:block;margin-top:6px;font:800 15px/1.1 var(--sl-font);color:#9A6410;white-space:nowrap}
.sl-pp-gain span{display:block;margin-top:3px;font:500 10.5px/1.25 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;overflow-wrap:break-word}
.sl-pp-note{margin:0;font:500 11px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;text-align:center}
.sl-pp .sl-pp-cta,.sl-pp .sl-pp-cta:hover,.sl-pp .sl-pp-cta:focus,.sl-pp .sl-pp-cta:visited{display:flex;align-items:center;justify-content:center;height:50px;margin:0;padding:0 16px;border:0;border-radius:13px;background:#5A8BFF;color:#fff;font:700 14.5px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-decoration:none;text-transform:none;letter-spacing:normal;box-shadow:none}
.sl-pp .sl-pp-cta:hover{background:#3561D9}
.sl-pp .sl-pp-cta:active{transform:scale(.98)}
.sl-pp .sl-pp-cta:focus-visible{outline:2px solid #3561D9;outline-offset:2px}
.sl-pp .sl-pp-rules,.sl-pp .sl-pp-rules:visited,.sl-pp .sl-pp-rules:hover,.sl-pp .sl-pp-rules:focus{align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:600 11.5px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85;text-decoration:underline;text-underline-offset:2px;background:none;border:0}
@media(min-width:768px){.sl-pp .sl-pp-art{height:260px}.sl-pp-cover{object-position:50% 10%}}
/* Onglet Jeux — Club V2 (décision d'Oliver du 14/10/2026, « le refaire en clair ») : même grammaire que l'onglet
   Missions (missions.css) — en-têtes de section en capitales, cartes blanches bordées #ECECE8, pastilles, cibles
   tactiles de 44 px ; tuiles claires (vignette, puis titre et ligne d'info sur blanc), plus de fond noir. Bleu pour
   l'action et « toi », doré pour les places et les points, aucun vert, zéro emoji. Chaque bouton est préfixé par
   #sl-panel-games ou #sl-games-sheet et ses états remis à plat (Astra stylise `button`, `a` et leurs survols). */
#sl-panel-games,#sl-games-sheet{--g-line:#ECECE8;--g-mute:#8b8b85;--g-ink2:#55554f;--g-bg:#F6F6F3;--g-chip:#F1F1EC;--g-gold:#E8A838;--g-gold-soft:#FFF8E6;--g-gold-line:#F3E2B5;--g-gold-ink:#9A6410;--g-blue:#5A8BFF;--g-blue-soft:#EEF3FF;--g-blue-ink:#3561D9;--g-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif}
.sl-panel.sl-games{gap:22px;color:#1b1b1b}
#sl-panel-games [hidden],#sl-games-sheet [hidden]{display:none!important}
#sl-panel-games .spi,#sl-games-sheet .spi{display:block;flex-shrink:0}
.sl-g-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.sl-g-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sl-panel-games .sl-g-t{margin:0;padding:0;font:800 16px/1.2 var(--sl-font);letter-spacing:1px;text-transform:uppercase;color:#1b1b1b}
.sl-g-head small{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:var(--g-chip);font:800 11px/1 var(--g-ui);color:var(--g-ink2)}
.sl-g-staff{margin:0}
/* Preroll Panic : « Ta partie » (fiche de l'onglet Jeux seulement) */
.sl-pp-moi{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px;border-radius:14px;background:var(--g-bg)}
.sl-pp-moi-h{grid-column:1/-1;font:800 10px/1 var(--g-ui);letter-spacing:.9px;text-transform:uppercase;color:#A2A29B}
.sl-pp-moi-c{min-width:0;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--g-line)}
.sl-pp-moi-c small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10.5px/1.2 var(--g-ui);color:var(--g-mute)}
.sl-pp-moi-c b{display:block;margin-top:4px;font:800 18px/1.1 var(--sl-font);color:#1b1b1b;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-pp-moi-c.is-gold{background:var(--g-gold-soft);border-color:var(--g-gold-line)}
.sl-pp-moi-c.is-gold b{color:var(--g-gold-ink)}
.sl-pp-moi-n{grid-column:1/-1;margin:0;font:500 11.5px/1.4 var(--g-ui);color:var(--g-mute)}
.sl-pp-moi.is-empty{display:flex;align-items:center;gap:10px;grid-template-columns:none;font:600 12.5px/1.4 var(--g-ui);color:var(--g-ink2)}
.sl-pp-moi.is-empty .spi{flex-shrink:0}
/* Hold-Up : carte compacte. Accès libre (17/10/2026) : bouton Jouer bleu + classement ; jeu fermé : le classement seul */
.sl-g-holdup{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--g-line)}
#sl-panel-games .sl-g-cover,#sl-panel-games .sl-g-cover:hover,#sl-panel-games .sl-g-cover:focus{display:block;width:64px;aspect-ratio:9/13;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--g-bg);cursor:pointer;box-shadow:none}
.sl-g-cover img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.sl-g-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sl-g-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sl-g-hu-t{font:800 14px/1.15 var(--sl-font);text-transform:uppercase;letter-spacing:.3px;color:#1b1b1b}
.sl-g-chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;background:var(--g-chip);color:var(--g-ink2);font:800 9.5px/1 var(--g-ui);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.sl-g-chip.is-on{background:var(--g-blue);color:#fff}
.sl-g-rank{align-self:stretch;display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;font:600 12px/1.2 var(--g-ui);color:var(--g-mute)}
.sl-g-rank b{font:800 22px/1 var(--sl-font);color:var(--g-gold-ink);font-variant-numeric:tabular-nums}
.sl-g-rank b sup{font-size:10px;margin-left:1px}
.sl-g-rank-pts{color:#1b1b1b;font-weight:800}
.sl-g-rank-n{margin-left:auto;white-space:nowrap}
.sl-g-xp-l{font:500 12px/1.45 var(--g-ui);color:var(--g-mute)}
#sl-panel-games .sl-g-board-btn,#sl-panel-games .sl-g-board-btn:hover,#sl-panel-games .sl-g-board-btn:focus{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:12px;background:var(--g-blue-soft);color:var(--g-blue-ink);font:700 13.5px/1 var(--g-ui)!important;text-transform:none;letter-spacing:normal;cursor:pointer;box-shadow:none}
#sl-panel-games .sl-g-board-btn:active{transform:scale(.98)}
#sl-panel-games .sl-g-play,#sl-panel-games .sl-g-play:hover,#sl-panel-games .sl-g-play:focus,#sl-panel-games .sl-g-play:visited,#sl-games-sheet .sl-g-play,#sl-games-sheet .sl-g-play:hover,#sl-games-sheet .sl-g-play:focus,#sl-games-sheet .sl-g-play:visited{grid-column:1/-1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:48px;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:12px;background:var(--g-blue);color:#fff;font:700 14.5px/1 var(--g-ui)!important;text-decoration:none;text-transform:none;letter-spacing:normal;box-shadow:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){#sl-panel-games .sl-g-play:hover,#sl-games-sheet .sl-g-play:hover{background:#3561D9}}
#sl-panel-games .sl-g-play:active,#sl-games-sheet .sl-g-play:active{transform:scale(.98)}
#sl-panel-games .sl-g-play:focus-visible,#sl-games-sheet .sl-g-play:focus-visible{outline:2px solid #3561D9;outline-offset:2px}
#sl-panel-games .sl-g-board-btn:focus-visible,#sl-panel-games .sl-g-tile:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px}
/* Bibliothèque : tuiles claires (vignette + texte sur blanc). Chrome (124 au moins) pose align-items:flex-start sur
   <button> : sans align-items:stretch ni width:100%, la vignette d'une tuile-bouton tombe à 0 px (vu sur Pixel 8). */
.sl-g-lib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:768px){.sl-g-lib{grid-template-columns:repeat(4,minmax(0,1fr))}}
#sl-panel-games .sl-g-tile,#sl-panel-games .sl-g-tile:hover,#sl-panel-games .sl-g-tile:focus,#sl-panel-games .sl-g-tile:visited{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;min-height:44px;margin:0;padding:6px;border:1px solid var(--g-line);border-radius:16px;overflow:hidden;background:#fff;color:#1b1b1b;text-align:left;text-decoration:none;text-transform:none;letter-spacing:normal;cursor:pointer;box-shadow:none;font:600 12px/1.3 var(--g-ui)!important;-webkit-tap-highlight-color:transparent}
#sl-panel-games .sl-g-tile:active{transform:scale(.98)}
@media (hover:hover){#sl-panel-games .sl-g-tile:hover{border-color:#DADAD3;box-shadow:0 4px 16px rgba(0,0,0,.05)}}
.sl-g-media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:var(--g-bg);color:#1b1b1b}
.sl-g-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.sl-g-tile.is-preroll .sl-g-media{background:#0b0910}
.sl-g-tile.is-preroll .sl-g-media img{object-position:50% 28%}
.sl-g-tile.is-holdup .sl-g-media img{object-position:50% 35%}
.sl-g-rib{position:absolute;top:6px;left:6px;z-index:1;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;padding:5px 8px;border-radius:99px;background:#fff;color:#1b1b1b;font:800 9.5px/1 var(--g-ui);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sl-g-rib.is-on{background:var(--g-blue);color:#fff}
.sl-g-rib.is-done{background:#FFF5E2;color:var(--g-gold-ink)}
.sl-g-tile-txt{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;box-sizing:border-box;padding:9px 4px 4px}
.sl-g-tt{font:800 13px/1.2 var(--sl-font);color:#1b1b1b;overflow-wrap:break-word}
.sl-g-sub{font:600 11px/1.3 var(--g-ui);color:var(--g-mute)}
.sl-g-sub b{color:var(--g-gold-ink);font-weight:800}
.sl-g-foot{padding:0 10px;font:500 11px/1.5 var(--g-ui);text-align:center;color:var(--g-mute)}
#sl-panel-games .sl-g-foot a,#sl-panel-games .sl-g-foot a:hover,#sl-panel-games .sl-g-foot a:visited{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* Volet du classement Hold-Up : le volet clair standard (.sl-sheet) */
.sl-sheet--games .sl-sheet-body{gap:12px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--sl-ios-nav,0px))}
.sl-g-note{margin:0 0 10px;padding:0 6px;font:500 12px/1.45 var(--g-ui);color:var(--g-mute);text-align:center}
.sl-g-note b{color:#1b1b1b}
.sl-g-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:end;padding:6px 4px 0}
.sl-g-p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.sl-g-av{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g-bg);border:2px solid var(--g-line);font:800 14px/1 var(--sl-font);color:#1b1b1b}
.sl-g-p1 .sl-g-av{width:56px;height:56px;border-color:var(--g-gold);background:var(--g-gold-soft)}
.sl-g-p.is-me .sl-g-av{border-color:var(--g-blue);box-shadow:0 0 0 3px rgba(90,139,255,.2)}
.sl-g-av em{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);display:flex;font-style:normal}
.sl-g-nm{max-width:100%;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 10.5px/1.2 var(--sl-font);text-transform:uppercase;letter-spacing:.3px;color:#1b1b1b}
.sl-g-sc{font:800 12px/1 var(--sl-font);color:var(--g-gold-ink);font-variant-numeric:tabular-nums}
.sl-g-step{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;border-radius:8px 8px 0 0;background:var(--g-chip);font:900 16px/1 var(--sl-font);color:#A2A29B}
.sl-g-p1 .sl-g-step{height:44px;background:linear-gradient(180deg,#FFE2A8,var(--g-gold-soft));color:var(--g-gold-ink)}
.sl-g-p2 .sl-g-step{height:30px}.sl-g-p3 .sl-g-step{height:22px}
.sl-g-board{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--g-line)}
.sl-g-row{display:flex;align-items:center;gap:7px;padding:9px 8px;border-radius:10px;font:700 12.5px/1.2 var(--sl-font);color:#1b1b1b}
.sl-g-row.is-me{background:var(--g-blue-soft);box-shadow:inset 0 0 0 1.5px var(--g-blue)}
.sl-g-medal{flex:none;min-width:24px;text-align:center;font-size:11px;font-weight:800;color:var(--g-mute);font-variant-numeric:tabular-nums}
.sl-g-cc{flex:none;padding:2px 4px;border-radius:4px;background:var(--g-chip);color:var(--g-mute);font:700 9px/1 var(--g-ui);letter-spacing:.4px}
.sl-g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.sl-g-name em{margin-left:4px;font-style:normal;font-size:9.5px;color:var(--g-blue-ink);letter-spacing:.6px}
.sl-g-parties{flex:none;font:600 10px/1 var(--g-ui);color:#A2A29B;white-space:nowrap}
.sl-g-pts{flex:none;font-weight:800;color:var(--g-gold-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-g-row.is-dots{justify-content:center;padding:0;color:#C9C9C2;letter-spacing:.25em}
.sl-g-more{margin:4px 0 0;padding:8px;text-align:center;font:700 10.5px/1 var(--g-ui);letter-spacing:.6px;text-transform:uppercase;color:#A2A29B}
@media(prefers-reduced-motion:reduce){.sl-pp-badge i,.sl-pp.is-flash{animation:none}#sl-panel-games .sl-g-tile:active,#sl-panel-games .sl-g-board-btn:active,#sl-panel-games .sl-g-play:active,#sl-games-sheet .sl-g-play:active{transform:none}}

/* ── Remettre au panier (Club V2 · L1a, 4.144.0) ─────────────────────────────────────────────
   Volet clair (décision 1 du chantier Club V2) : blanc et gris clair, bleu #5A8BFF pour les sélections
   et validations, doré pour les montants gagnés, pas de vert. Tout est préfixé par l'id du volet (ou du
   panneau Commandes) : les règles `button`/`button:hover` du thème Astra ne passent pas par-dessus. */
.sl-ro-overlay{z-index:100002}
#sl-reorder-sheet{z-index:100003;background:#F6F6F3;max-height:92vh;max-height:92dvh;color:#1b1b1b}
#sl-reorder-sheet .sl-ro-head{align-items:flex-start;gap:12px;background:#fff;border-radius:20px 20px 0 0;border-bottom:1px solid #ECECE8;padding:22px 18px 14px}
#sl-reorder-sheet .sl-ro-h{min-width:0}
#sl-reorder-sheet .sl-ro-eb{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#9A6410}
#sl-reorder-sheet .sl-ro-t{font-weight:800;font-size:16px;line-height:1.2;margin-top:5px}
#sl-reorder-sheet .sl-ro-s{font-size:12px;color:#8b8b85;margin-top:3px}
#sl-reorder-sheet .sl-ro-body{padding:14px 14px 16px;gap:12px}
#sl-reorder-sheet .sl-ro-selbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;font-size:12px;font-weight:600;color:#55554f}
#sl-reorder-sheet .sl-ro-selbar button,#sl-reorder-sheet .sl-ro-selbar button:hover,#sl-reorder-sheet .sl-ro-selbar button:focus{background:none;border:0;padding:0;min-height:0;font:inherit;font-weight:700;color:#3561D9;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-reorder-sheet .sl-ro-list{background:#fff;border:1px solid #ECECE8;border-radius:16px;padding:2px 14px}
#sl-reorder-sheet .sl-ro-li{display:grid;grid-template-columns:24px 58px minmax(0,1fr);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #F2F2EE}
#sl-reorder-sheet .sl-ro-li:last-child{border-bottom:0}
#sl-reorder-sheet .sl-ro-li.off .sl-ro-img,#sl-reorder-sheet .sl-ro-li.off .sl-ro-mid{opacity:.45}
#sl-reorder-sheet .sl-ro-chk,#sl-reorder-sheet .sl-ro-chk:hover,#sl-reorder-sheet .sl-ro-chk:focus{width:24px;height:24px;min-height:0;border-radius:50%;border:2px solid #D4D4CE;background:#fff;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:none}
#sl-reorder-sheet .sl-ro-chk:disabled{cursor:default;opacity:.5}
#sl-reorder-sheet .sl-ro-chk svg{opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
#sl-reorder-sheet .sl-ro-li.on .sl-ro-chk{background:#5A8BFF;border-color:#5A8BFF}
#sl-reorder-sheet .sl-ro-li.on .sl-ro-chk svg{opacity:1;transform:none}
#sl-reorder-sheet .sl-ro-img{width:58px;height:58px;border-radius:13px;background:#F6F6F3;overflow:hidden}
#sl-reorder-sheet .sl-ro-img img{width:100%;height:100%;object-fit:cover;display:block}
#sl-reorder-sheet .sl-ro-mid{min-width:0}
#sl-reorder-sheet .sl-ro-n{font-weight:800;font-size:13px;line-height:1.25}
#sl-reorder-sheet .sl-ro-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
#sl-reorder-sheet .sl-ro-flav,#sl-reorder-sheet .sl-ro-flav:hover,#sl-reorder-sheet .sl-ro-flav:focus{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 9px 2px 5px;border-radius:99px;background:#F1F1EC;border:0;font-size:11.5px;font-weight:600;line-height:1.2;color:#1b1b1b;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-reorder-sheet span.sl-ro-flav{cursor:default}
#sl-reorder-sheet .sl-ro-flav svg{width:18px;height:18px;flex-shrink:0}
#sl-reorder-sheet .sl-ro-flav .chv{width:10px;height:10px;transition:transform .25s}
#sl-reorder-sheet .sl-ro-flav.open .chv{transform:rotate(180deg)}
#sl-reorder-sheet .sl-ro-promo{font-size:9px;font-weight:800;color:#fff;background:#E5484D;padding:4px 6px;border-radius:6px}
#sl-reorder-sheet .sl-ro-out{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#B42318;background:#FDEDED;padding:4px 7px;border-radius:6px}
#sl-reorder-sheet .sl-ro-pr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
#sl-reorder-sheet .sl-ro-step{display:inline-flex;align-items:center;height:32px;border:1px solid #E3E3DE;border-radius:99px;background:#fff;flex-shrink:0}
#sl-reorder-sheet .sl-ro-step button,#sl-reorder-sheet .sl-ro-step button:hover,#sl-reorder-sheet .sl-ro-step button:focus{width:32px;height:32px;min-height:0;border:0;background:none;display:grid;place-items:center;padding:0;cursor:pointer;color:#1b1b1b;box-shadow:none}
#sl-reorder-sheet .sl-ro-step button:disabled{color:#CCC;cursor:default}
#sl-reorder-sheet .sl-ro-step b{min-width:22px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
#sl-reorder-sheet .sl-ro-price{text-align:right;min-width:0}
#sl-reorder-sheet .sl-ro-price b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
#sl-reorder-sheet .sl-ro-price small{display:block;font-size:10.5px;color:#8b8b85;margin-top:3px}
#sl-reorder-sheet .sl-ro-price s{color:#bbb}
#sl-reorder-sheet .sl-ro-flavs{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px}
#sl-reorder-sheet .sl-ro-flavs button,#sl-reorder-sheet .sl-ro-flavs button:hover,#sl-reorder-sheet .sl-ro-flavs button:focus{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:3px 11px 3px 6px;border-radius:99px;border:1px solid #E3E3DE;background:#fff;font-size:11.5px;font-weight:600;line-height:1.2;color:#1b1b1b;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-reorder-sheet .sl-ro-flavs button svg{width:18px;height:18px;flex-shrink:0}
#sl-reorder-sheet .sl-ro-flavs button.cur{background:#EEF3FF;border-color:#5A8BFF;color:#3561D9}
#sl-reorder-sheet .sl-ro-flavs button:disabled{opacity:.4;cursor:default}
#sl-reorder-sheet .sl-ro-swap{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#FFF5E2;border:1px solid #F3DDAF;font-size:11.5px;line-height:1.35;color:#6B4A0E}
#sl-reorder-sheet .sl-ro-swap button,#sl-reorder-sheet .sl-ro-swap button:hover,#sl-reorder-sheet .sl-ro-swap button:focus{flex-shrink:0;height:30px;min-height:0;padding:0 12px;border-radius:99px;background:#fff;border:1.5px solid #A16207;color:#A16207;font-weight:700;font-size:11.5px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-reorder-sheet .sl-ro-gifts{border:1.5px dashed #E8D5AA;border-radius:16px;padding:12px 14px;background:#FFFCF5}
#sl-reorder-sheet .sl-ro-gifts-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:#9A6410}
#sl-reorder-sheet .sl-ro-gifts p{font-size:12px;line-height:1.45;color:#7A7A72;margin:6px 0 10px}
#sl-reorder-sheet .sl-ro-gifts-row{display:flex;gap:8px;flex-wrap:wrap}
#sl-reorder-sheet .sl-ro-gifts-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;filter:grayscale(.3);opacity:.85}
#sl-reorder-sheet .sl-ro-info{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#EEF3FF;font-size:12px;line-height:1.35;color:#3561D9}
#sl-reorder-sheet .sl-ro-info svg{flex-shrink:0}
#sl-reorder-sheet .sl-ro-foot{flex-shrink:0;background:#fff;border-top:1px solid #ECECE8;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
#sl-reorder-sheet .sl-ro-pack{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#55554f;margin-bottom:6px}
#sl-reorder-sheet .sl-ro-pack span:last-child{color:#9A6410;font-weight:700;white-space:nowrap}
#sl-reorder-sheet .sl-ro-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
#sl-reorder-sheet .sl-ro-sum-l{font-size:12px;font-weight:600;color:#8b8b85;min-width:0}
#sl-reorder-sheet .sl-ro-sum-l small{display:block;font-weight:500;font-size:10.5px;color:#aaa;margin-top:2px}
#sl-reorder-sheet .sl-ro-sum b{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
#sl-reorder-sheet .sl-ro-cta,#sl-reorder-sheet .sl-ro-cta:hover,#sl-reorder-sheet .sl-ro-cta:focus{width:100%;height:50px;min-height:0;border-radius:13px;border:0;background:#5A8BFF;color:#fff;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;padding:0 16px}
#sl-reorder-sheet .sl-ro-cta:disabled{background:#D5D5D0;cursor:default}
/* Apple Pay / Google Pay sous « Ajouter au panier » (Club V2 · L3, 4.150.0) : noirs tous les deux (décision 1 : le noir
   reste à Apple Pay ; Google Pay en bouton sombre de la marque, pas de vert, décision 8). Deux wallets (ordinateur) :
   côte à côte. Les !important du tiroir n'existent pas ici : tout est fixé sur le bouton, :hover et :focus compris (Astra). */
#sl-reorder-sheet .sl-ro-xps{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
#sl-reorder-sheet .sl-ro-xps.x2{grid-template-columns:1fr 1fr}
#sl-reorder-sheet .sl-ro-xp,#sl-reorder-sheet .sl-ro-xp:hover,#sl-reorder-sheet .sl-ro-xp:focus{width:100%;height:50px;min-height:0;margin:0;border-radius:13px;border:0;background:#000;color:#fff;font:600 17px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,Arial,sans-serif;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 16px;cursor:pointer;box-shadow:none;text-transform:none;text-decoration:none}
#sl-reorder-sheet .sl-ro-xp svg{width:22px;height:22px;flex:none;margin-top:-2px}
#sl-reorder-sheet .sl-ro-xp--google{gap:6px}
#sl-reorder-sheet .sl-ro-xp--google svg{width:19px;height:19px;margin-top:0}
#sl-reorder-sheet .sl-ro-xp:disabled{opacity:.35;cursor:default}
#sl-reorder-sheet .sl-ro-xp:focus-visible{outline:2px solid #5A8BFF;outline-offset:2px}
#sl-reorder-sheet .sl-ro-xnote{margin:8px 0 0;padding:0;font-size:11px;line-height:1.35;font-weight:500;color:#8b8b85;text-align:center}
#sl-reorder-sheet .sl-ro-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:slRoSp .7s linear infinite}
#sl-reorder-sheet .sl-ro-spin.dark{border-color:rgba(0,0,0,.12);border-top-color:#5A8BFF}
@keyframes slRoSp{to{transform:rotate(360deg)}}
#sl-reorder-sheet .sl-ro-loading{display:grid;place-items:center;padding:40px 0}
#sl-reorder-sheet .sl-ro-err{text-align:center;color:#8b8b85;font-size:13px;line-height:1.45;padding:24px 8px;margin:0}
@media(prefers-reduced-motion:reduce){#sl-reorder-sheet .sl-ro-spin{animation-duration:2s}#sl-reorder-sheet .sl-ro-chk svg,#sl-reorder-sheet .sl-ro-flav .chv{transition:none}}
/* Bouton de la carte d'historique (à côté de « Facture » ; la carte entière ouvre la fiche) */
#sl-panel-orders .sl-order-footer-right{flex-wrap:wrap;justify-content:flex-end}
#sl-panel-orders .sl-order-reorder,#sl-panel-orders .sl-order-reorder:hover,#sl-panel-orders .sl-order-reorder:focus{display:inline-flex;align-items:center;gap:5px;height:28px;min-height:0;padding:0 11px 0 9px;border-radius:99px;border:0;background:#EEF3FF;color:#3561D9;font-size:11.5px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-panel-orders .sl-order-reorder svg{flex-shrink:0}
/* Bouton de la fiche commande : bleu V2 (le vert de .sl-od-btn-pay sort avec la refonte L1b), doux sur une commande en cours */
#sl-order-modal .sl-od-btn-reorder,#sl-order-modal .sl-od-btn-reorder:hover,#sl-order-modal .sl-od-btn-reorder:focus{background:#5A8BFF;color:#fff;border:0;box-shadow:none;text-transform:none;letter-spacing:normal;gap:7px}
#sl-order-modal .sl-od-btn-reorder.soft,#sl-order-modal .sl-od-btn-reorder.soft:hover,#sl-order-modal .sl-od-btn-reorder.soft:focus{background:#EEF3FF;color:#3561D9}
/* ══ Club V2 · L1b — onglet Commandes et fiche en clair : boutons et pastilles ══
   Le thème Astra stylise `button` et `button:hover` : chaque bouton est préfixé par l'id du panneau ou de
   la fiche, comme le bloc « Remettre au panier » ci-dessus. */
#sl-panel-orders .sl-order-pay-btn,#sl-panel-orders .sl-order-pay-btn:hover,#sl-panel-orders .sl-order-pay-btn:focus{background:#5A8BFF;color:#fff;box-shadow:none}
#sl-panel-orders .sl-order-pay-btn:hover{background:#3561D9}
#sl-order-modal .sl-od-btn-pay,#sl-order-modal .sl-od-btn-pay:hover,#sl-order-modal .sl-od-btn-pay:focus{background:#5A8BFF;color:#fff;border:0;box-shadow:none;text-transform:none;letter-spacing:normal}
#sl-order-modal .sl-od-btn-pay:hover{background:#3561D9}
/* Changer de goût / changer ce cadeau : pastille bleue douce (maquette `.mini`) */
#sl-order-modal .sl-od-item-swap,#sl-order-modal .sl-od-item-swap:hover,#sl-order-modal .sl-od-item-swap:focus{display:inline-flex;align-items:center;gap:5px;margin-top:8px;height:28px;min-height:0;padding:0 10px 0 7px;border-radius:99px;border:0;background:#EEF3FF;color:#3561D9;font-size:11.5px!important;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
/* Modifier l'adresse / changer de point relais : bouton au trait, pleine largeur */
#sl-order-modal .sl-od-addr-edit-btn,#sl-order-modal .sl-od-addr-edit-btn:hover,#sl-order-modal .sl-od-addr-edit-btn:focus,#sl-order-modal .sl-od-addr-edit-btn:active,#sl-order-modal .sl-od-addr-edit-btn:focus-visible{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:44px;min-height:0;margin-top:4px;padding:0 14px;border-radius:12px;border:1.5px solid #E4E4DF!important;background:#fff!important;color:#1b1b1b!important;font-size:13px!important;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:none!important;transform:none!important;text-transform:none;letter-spacing:normal}
#sl-order-modal .sl-od-addr-edit-btn:hover{border-color:#1b1b1b!important}
/* Pastilles de goûts de la fiche : picto + nom, fond gris doux */
#sl-order-modal .sl-fl-chip{min-height:24px;padding:2px 9px 2px 3px;border-radius:99px;background:#F1F1EC;font-size:11px;font-weight:600;color:#55554f;opacity:1}
#sl-order-modal .sl-fl-chip--txt{padding-left:9px}
#sl-order-modal .sl-fl-chip b{color:#1b1b1b}
#sl-order-modal .sl-od-item-meta{flex-wrap:wrap}
#sl-order-modal .sl-od-item-name svg.spi{margin:-2px 5px 0 0}
/* Fiche d'une commande à payer : l'encart ambre suffit, sans carte blanche autour. */
.sl-modal-tracking-card:has(> .sl-tracking-alert:only-child){padding:0;border:0;background:none;box-shadow:none}
/* ══ Club V2 · décision 22 — encarts « app Spliff » (Commandes, Support) ══
   Carte claire, picto maison, montant de la mission en pastille dorée (maquette `.td.earn`). Rendus `hidden` par
   Spliff_Loyalty_App_Promo, montrés par front.js ; `is-app` = vu dans l'app sans les notifications (autre titre).
   Préfixés par l'id du panneau : Astra stylise `a` et `button`. */
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo{position:relative;margin:6px 0 20px}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo[hidden]{display:none}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main:hover,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main:focus,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main:visited{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:16px;background:#fff;border:1px solid #ECECE8;box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(0,0,0,.12);color:#1b1b1b;text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .15s}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main:active{transform:scale(.985)}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo--gain .sl-app-promo-main{background:linear-gradient(135deg,#FFF8E6,#fff 72%);border-color:#F3E2B5}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo--gain .sl-app-promo-main::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#E8A838}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#EEF3FF}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo--sav .sl-app-promo-ic,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo--gain .sl-app-promo-ic{background:#FFF5E2}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-ic .spi{display:block}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-txt b{display:block;font-size:13.5px;line-height:1.3;font-weight:700;color:#1b1b1b;letter-spacing:0;text-transform:none}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-txt small{display:block;margin-top:3px;font-size:12px;line-height:1.4;font-weight:500;color:#8b8b85}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo .sl-app-promo-app,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo.is-app .sl-app-promo-web{display:none}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo.is-app b.sl-app-promo-app,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo.is-app small.sl-app-promo-app{display:block}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-cash{display:flex;flex-direction:column;align-items:center;gap:4px}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-cash b{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:58px;padding:0 12px;border-radius:99px;background:#E8A838;color:#1b1b1b;font-family:var(--sl-font);font-size:14px;font-weight:800;line-height:1;white-space:nowrap}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-cash small{font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.4px;text-transform:uppercase;color:#9A6410;white-space:nowrap}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-go{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:#EEF3FF;color:#3561D9}
/* « Plus tard » : pastille ronde posée sur le coin, zone de toucher élargie (44 px) par ::after */
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x:hover,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x:focus,:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x:active{position:absolute;top:-9px;right:-7px;z-index:2;display:grid;place-items:center;width:26px;height:26px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #ECECE8;border-radius:99px;background:#fff;color:#8b8b85;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x::after{content:'';position:absolute;inset:-9px}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x:focus-visible{outline:2px solid #5A8BFF;outline-offset:2px}
:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-x svg{display:block}
@media(prefers-reduced-motion:reduce){:is(#sl-panel-orders,#sl-panel-support) .sl-app-promo-main{transition:none}}
/* ── « Tes favoris » (Club V2 · L2, 4.148.0 — maquette .favs/.fav) ──
   Rangée défilante de vignettes de 136 px (scroll-snap), qui déborde jusqu'aux bords de l'écran sur mobile.
   Pas de prix (décision 15). « + » bleu = l'action ; la pastille « N achetés » n'est pas du cashback : pas d'or.
   Tout est préfixé #sl-panel-orders : Astra stylise boutons et liens (fond, bordure, survol, focus). */
#sl-panel-orders .sl-favs-wrap{display:flex;flex-direction:column;gap:12px;min-width:0}
#sl-panel-orders .sl-favs-wrap .sl-section{gap:3px}
#sl-panel-orders .sl-favs-sub{margin:0;font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12.5px;line-height:1.4;font-weight:500;color:#8b8b85}
#sl-panel-orders .sl-favs{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#sl-panel-orders .sl-favs::-webkit-scrollbar{display:none}
#sl-panel-orders .sl-fav{position:relative;flex:0 0 136px;width:136px;min-width:0;box-sizing:border-box;scroll-snap-align:start;background:#fff;border:1px solid #ECECE8;border-radius:16px;padding:8px 8px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
#sl-panel-orders .sl-fav:active{transform:scale(.98)}
#sl-panel-orders .sl-fav-img{position:relative;width:100%;aspect-ratio:1;border-radius:11px;background:#F6F6F3;overflow:hidden}
#sl-panel-orders .sl-fav-img img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
#sl-panel-orders .sl-fav-c{position:absolute;top:6px;left:6px;max-width:calc(100% - 12px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.08);font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:9.5px;line-height:1;font-weight:700;color:#55554f}
#sl-panel-orders .sl-fav-n{margin:9px 2px 0;min-height:2.44em;font-size:11px;line-height:1.22;font-weight:800;color:#1b1b1b;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#sl-panel-orders .sl-fav-p{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:32px;margin:8px 2px 0}
#sl-panel-orders .sl-fav-f{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap;font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;line-height:1.3;font-weight:500;color:#8b8b85}
#sl-panel-orders .sl-fav-f>span{overflow:hidden;text-overflow:ellipsis}
#sl-panel-orders .sl-fav-ic{display:inline-flex;flex-shrink:0;font-style:normal}
#sl-panel-orders .sl-fav-ic svg{width:16px;height:16px;flex-shrink:0}
#sl-panel-orders .sl-fav-add,#sl-panel-orders .sl-fav-add:hover,#sl-panel-orders .sl-fav-add:focus,#sl-panel-orders .sl-fav-add:active{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:#5A8BFF;color:#fff;box-shadow:none;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent;transition:transform .2s,background .25s}
#sl-panel-orders .sl-fav-add:active{transform:scale(.88)}
#sl-panel-orders .sl-fav-add:focus-visible{outline:2px solid #5A8BFF;outline-offset:2px}
#sl-panel-orders .sl-fav-add svg{display:block}
/* Feuille en chargement (données pas encore préchargées) : le « + » pulse au lieu de rester muet. */
#sl-panel-orders .sl-fav.is-busy .sl-fav-add{animation:sl-fav-busy .9s ease-in-out infinite}
@keyframes sl-fav-busy{50%{opacity:.45}}
@media(min-width:768px){#sl-panel-orders .sl-favs{margin:0;padding:2px 0 6px;scroll-padding:0}}
@media(prefers-reduced-motion:reduce){#sl-panel-orders .sl-fav,#sl-panel-orders .sl-fav-add{transition:none}#sl-panel-orders .sl-fav.is-busy .sl-fav-add{animation:none;opacity:.6}}

/* ── Support V2 (L4a) ── Club V2, maquette V2.3 (12/10/2026) : onglet Support en clair.
   Blanc / gris clair, bleu #5A8BFF pour les validations et l'étape faite, doré #E8A838 pour le cadeau et le
   cashback, aucun vert, aucun noir (décisions 1, 8, 9). Préfixé par #sl-panel-support : Astra stylise `button`,
   `button:hover`, `input`, `select` — chaque bouton redit fond, bordure, police et hauteur, états compris. */
#sl-panel-support{--s-ink:#1b1b1b;--s-ink2:#55554f;--s-mute:#8b8b85;--s-line:#ECECE8;--s-soft:#F6F6F3;--s-chip:#F1F1EC;--s-blue:#5A8BFF;--s-blue-ink:#3561D9;--s-blue-soft:#EEF3FF;--s-blue-line:#D6E1FF;--s-gold:#E8A838;--s-gold-ink:#9A6410;--s-gold-soft:rgba(232,168,56,.12);--s-amber-soft:#FFF5E2;--s-amber-ink:#A16207;--s-amber-line:#F3DDAF;--s-red:#C62828;--s-red-ink:#B42318;color:var(--s-ink)}
#sl-panel-support svg.spi{display:inline-block;vertical-align:middle;flex-shrink:0}
/* Pendant la saisie, front.js garde le champ à sa place quand la réponse immédiate au-dessus change de taille
   (assistKeepField). L'ancrage natif de Chrome / Firefox ferait la même correction une seconde fois : coupé ici,
   une seule règle pour tous les navigateurs (Safari iOS n'ancre pas). */
#sl-panel-support{overflow-anchor:none}
#sl-panel-support svg.spi.in{margin:-2px 5px 0 0}
#sl-panel-support .sl-sav-view{gap:14px}
/* Boutons : bleu plein (validation), au trait (secondaire), bleu doux (répondre), rouge au trait (annuler). */
#sl-panel-support .sl-sav-btn,#sl-panel-support .sl-sav-btn:hover,#sl-panel-support .sl-sav-btn:focus{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:0;height:auto;padding:12px 18px;border-radius:13px;border:1.5px solid transparent;box-shadow:none;font-family:var(--sl-font);font-size:13.5px;font-weight:700;line-height:1.2;letter-spacing:normal;text-transform:none;text-decoration:none;text-align:center;opacity:1;transition:transform .15s,background .2s}
#sl-panel-support .sl-sav-btn:active{transform:scale(.98)}
#sl-panel-support .sl-sav-btn:disabled{opacity:.5}
#sl-panel-support .sl-sav-btn-primary,#sl-panel-support .sl-sav-btn-primary:hover,#sl-panel-support .sl-sav-btn-primary:focus{background:var(--s-blue);border-color:var(--s-blue);color:#fff}
#sl-panel-support .sl-sav-btn-primary:hover{background:var(--s-blue-ink);border-color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-btn-line,#sl-panel-support .sl-sav-btn-line:hover,#sl-panel-support .sl-sav-btn-line:focus,#sl-panel-support .sl-sav-btn-ghost,#sl-panel-support .sl-sav-btn-ghost:hover,#sl-panel-support .sl-sav-btn-ghost:focus{background:#fff;border-color:#E4E4DF;color:var(--s-ink)}
#sl-panel-support .sl-sav-btn-line:hover,#sl-panel-support .sl-sav-btn-ghost:hover{border-color:var(--s-ink)}
#sl-panel-support .sl-sav-btn-soft,#sl-panel-support .sl-sav-btn-soft:hover,#sl-panel-support .sl-sav-btn-soft:focus{background:var(--s-blue-soft);border-color:var(--s-blue-soft);color:var(--s-blue-ink);width:100%}
#sl-panel-support .sl-sav-btn-red,#sl-panel-support .sl-sav-btn-red:hover,#sl-panel-support .sl-sav-btn-red:focus{background:#fff;border-color:var(--s-red);color:var(--s-red)}
#sl-panel-support .sl-sav-back,#sl-panel-support .sl-sav-back:hover,#sl-panel-support .sl-sav-back:focus{background:none;border:0;box-shadow:none;padding:0;min-height:0;color:var(--s-blue-ink);font-family:var(--sl-font);font-size:12.5px;font-weight:700;text-transform:none;letter-spacing:normal}
#sl-panel-support .sl-section-title{font-size:15px;letter-spacing:1px}
/* Liste : en-tête, « + Nouvelle demande » en pilule bleue */
#sl-panel-support .sl-sav-head{flex-direction:row;justify-content:space-between;align-items:center;gap:10px}
#sl-panel-support .sl-sav-head{flex-wrap:wrap;row-gap:8px}
#sl-panel-support .sl-sav-head .sl-section-title{margin:0;font-size:13px;letter-spacing:.3px;white-space:nowrap}
#sl-panel-support .sl-sav-new,#sl-panel-support .sl-sav-new:hover,#sl-panel-support .sl-sav-new:focus{height:36px;padding:0 11px;border-radius:99px;font-size:11.5px;white-space:nowrap;flex-shrink:0;margin-left:auto}
/* Bandeau « Un cadeau t'attend » (décision 13) : doré, picto cadeau maison */
#sl-panel-support .sl-sav-gift-banner{margin:0;max-width:none;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#FFF8E6,#fff 70%);border:1.5px solid #F0D58C;box-shadow:none}
#sl-panel-support .sl-sav-gift-banner-icon{display:flex;animation:sl-gift-pop 2.4s ease-in-out infinite}
#sl-panel-support .sl-sav-gift-banner-text{font-size:12px;line-height:1.45;color:var(--s-ink2)}
#sl-panel-support .sl-sav-gift-banner-text strong{font-size:13.5px;font-weight:800;color:var(--s-ink);margin-bottom:2px}
#sl-panel-support .sl-sav-gift-banner-text em{font-style:normal;font-weight:700;color:var(--s-gold-ink)}
/* Délai de la demande en cours (liste) et boîte d'attente (fil) : bleu clair, ambre quand c'est en retard */
#sl-panel-support .sl-sav-sla-box,#sl-panel-support .sl-sav-wait-box{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,#F2F6FF,#fff 75%);border:1px solid #D9E3FF}
#sl-panel-support .sl-sav-sla-box.is-late,#sl-panel-support .sl-sav-waiting.is-late .sl-sav-wait-box{background:var(--s-amber-soft);border-color:var(--s-amber-line)}
#sl-panel-support .sl-sav-sla-ic,#sl-panel-support .sl-sav-wait-ic{display:flex;flex-shrink:0}
#sl-panel-support .sl-sav-sla-box b{display:block;font-size:13px;font-weight:700;line-height:1.3;color:var(--s-ink)}
#sl-panel-support .sl-sav-sla-box.is-late b{font-weight:600;font-size:12.5px;line-height:1.5;color:#6B4A0E}
#sl-panel-support .sl-sav-sla-box span{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--s-ink2)}
/* Cartes de demande (maquette `.tk`) */
#sl-panel-support .sl-sav-list{gap:10px}
#sl-panel-support .sl-sav-card,#sl-panel-support .sl-sav-card:hover,#sl-panel-support .sl-sav-card:focus{position:relative;overflow:hidden;gap:0;padding:14px;border-radius:16px;border:1px solid var(--s-line);background:#fff!important;box-shadow:none}
#sl-panel-support .sl-sav-card:hover{border-color:#D8D8D2}
#sl-panel-support .sl-sav-card.unread{border-left:1px solid var(--s-line)}
#sl-panel-support .sl-sav-card.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#D9A441}
#sl-panel-support .sl-sav-card-top{align-items:flex-start}
#sl-panel-support .sl-sav-card-subject{font-size:13px;font-weight:800;line-height:1.3;white-space:normal}
#sl-panel-support .sl-sav-card-preview{margin-top:6px;font-size:12px;line-height:1.4;color:var(--s-ink2);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#sl-panel-support .sl-sav-card-preview em{font-style:normal;font-weight:700;color:var(--s-ink)}
#sl-panel-support .sl-sav-card-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#A2A29B}
#sl-panel-support .sl-sav-oc{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px 0 3px;border-radius:7px;background:var(--s-soft);color:var(--s-ink2);font-weight:600}
#sl-panel-support .sl-sav-oc:not(:has(img)){padding-left:8px}
#sl-panel-support .sl-sav-oc img{width:18px;height:18px;border-radius:5px;object-fit:cover}
#sl-panel-support .sl-sav-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--s-blue)}
#sl-panel-support .sl-sav-empty{padding:28px 18px;border-radius:16px;background:#fff;border:1px dashed #DCDCD5;color:var(--s-mute);line-height:1.5}
/* Statuts : En cours (doré), Répondu (bleu), Résolu / Clos (gris) — plus de vert */
#sl-panel-support .sl-sav-pill{font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:5px 8px}
#sl-panel-support .sl-sav-pill-open{background:var(--s-gold-soft);color:#a06a00}
#sl-panel-support .sl-sav-pill-answered{background:var(--s-blue-soft);color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-pill-resolved{background:var(--s-chip);color:#777}
#sl-panel-support .sl-sav-pill-closed{background:var(--s-chip);color:#555}
/* Raccourcis de réponse immédiate (maquette `.tiles`) et sujets (`.topics`) */
#sl-panel-support .sl-sav-quick{margin-top:6px}
#sl-panel-support .sl-sav-quick-t{margin:0;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--s-ink)}
#sl-panel-support .sl-sav-quick-s{margin:3px 0 12px;font-size:12.5px;line-height:1.4;color:var(--s-mute)}
#sl-panel-support .sl-sav-tiles,#sl-panel-support .sl-sav-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#sl-panel-support .sl-sav-tile,#sl-panel-support .sl-sav-tile:hover,#sl-panel-support .sl-sav-tile:focus,#sl-panel-support .sl-sav-topic,#sl-panel-support .sl-sav-topic:hover,#sl-panel-support .sl-sav-topic:focus{display:flex;align-items:center;gap:9px;min-height:56px;height:auto;margin:0;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--s-line);box-shadow:none;color:var(--s-ink);font-family:var(--sl-font);font-size:12px;font-weight:600;line-height:1.25;letter-spacing:normal;text-transform:none;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
#sl-panel-support .sl-sav-topic,#sl-panel-support .sl-sav-topic:hover,#sl-panel-support .sl-sav-topic:focus{border-width:1.5px;font-weight:700;font-size:12.5px}
#sl-panel-support .sl-sav-tile i,#sl-panel-support .sl-sav-topic i{display:flex;flex-shrink:0;font-style:normal}
#sl-panel-support .sl-sav-tile span,#sl-panel-support .sl-sav-topic span{min-width:0}
#sl-panel-support .sl-sav-tile:active,#sl-panel-support .sl-sav-topic:active{transform:scale(.98)}
#sl-panel-support .sl-sav-topic.is-full{grid-column:1/-1}
#sl-panel-support .sl-sav-topic.on,#sl-panel-support .sl-sav-topic.on:hover,#sl-panel-support .sl-sav-topic.on:focus{border-color:var(--s-blue);background:var(--s-blue-soft);color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-lbl{display:block;margin:6px 0 0;font-size:10px;font-weight:700;line-height:1;letter-spacing:1.2px;text-transform:uppercase;color:#A2A29B}
#sl-panel-support .sl-sav-form{gap:10px}
/* Commandes en cartes, défilement horizontal (maquette `.opick`) */
#sl-panel-support .sl-sav-opick{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 16px}
#sl-panel-support .sl-sav-opick::-webkit-scrollbar{display:none}
#sl-panel-support .sl-sav-op,#sl-panel-support .sl-sav-op:hover,#sl-panel-support .sl-sav-op:focus{flex:0 0 150px;display:block;min-height:0;height:auto;margin:0;padding:10px;border-radius:14px;background:#fff;border:1.5px solid var(--s-line);box-shadow:none;color:var(--s-ink);font-family:var(--sl-font);text-align:left;text-transform:none;letter-spacing:normal;cursor:pointer}
#sl-panel-support .sl-sav-op.on,#sl-panel-support .sl-sav-op.on:hover,#sl-panel-support .sl-sav-op.on:focus{border-color:var(--s-blue);box-shadow:0 0 0 3px var(--s-blue-soft)}
#sl-panel-support .sl-sav-op b{display:block;font-size:11.5px;font-weight:800;line-height:1.2}
#sl-panel-support .sl-sav-op small{display:block;margin-top:3px;font-size:10.5px;font-weight:500;line-height:1.3;color:var(--s-mute)}
#sl-panel-support .sl-sav-op small.sl-sav-op-st{font-weight:700}
#sl-panel-support .sl-sav-op.is-active .sl-sav-op-st{color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-op.is-pay .sl-sav-op-st{color:var(--s-amber-ink)}
#sl-panel-support .sl-sav-op.is-closed .sl-sav-op-st,#sl-panel-support .sl-sav-op.is-problem .sl-sav-op-st{color:var(--s-red-ink)}
#sl-panel-support .sl-sav-op-th{display:flex;margin-top:8px}
#sl-panel-support .sl-sav-op-th img,#sl-panel-support .sl-sav-op-ph{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-6px;object-fit:cover;background:var(--s-soft);display:grid;place-items:center}
#sl-panel-support .sl-sav-op-th>:first-child{margin-left:0}
/* Ce qui manque à l'envoi (novalidate) : le bloc clignote en bleu */
#sl-panel-support .is-missing{animation:slSavMissing .9s 2}
@keyframes slSavMissing{50%{box-shadow:0 0 0 3px var(--s-blue-soft);border-radius:14px;background:var(--s-blue-soft)}}
/* Message, aide, pièces jointes */
#sl-panel-support .sl-sav-msgwrap{display:flex;flex-direction:column;gap:6px}
/* 16 px : en dessous, Safari iOS zoome sur le champ au focus (le CSS global du site force déjà 16 px). */
#sl-panel-support .sl-sav-input,#sl-panel-support .sl-sav-input:focus{border:1.5px solid #E4E4DE;border-radius:12px;background:#fff;color:var(--s-ink);font-family:var(--sl-font);font-size:16px;box-shadow:none}
#sl-panel-support .sl-sav-input:focus{border-color:var(--s-blue)}
#sl-panel-support .sl-sav-textarea{min-height:110px;line-height:1.4;resize:none}
#sl-panel-support .sl-sav-note{margin:0;font-size:11px;line-height:1.45;color:var(--s-mute)}
#sl-panel-support .sl-sav-msg-hint{display:flex;align-items:center}
#sl-panel-support .sl-sav-filebtn,#sl-panel-support .sl-sav-filebtn:hover{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:99px;border:0;background:var(--s-chip);color:var(--s-ink);font-size:11.5px;font-weight:700}
#sl-panel-support .sl-sav-files-hl .sl-sav-filebtn{animation:slSavAttFlash .9s 4}
@keyframes slSavAttFlash{50%{background:var(--s-gold-soft);box-shadow:0 0 0 2px var(--s-gold)}}
#sl-panel-support .sl-sav-filechip{background:var(--s-chip);border:0;border-radius:99px;font-size:11.5px;font-weight:600}
#sl-panel-support .sl-sav-filechip-pct{display:inline-flex;align-items:center;gap:4px}
#sl-panel-support .sl-sav-filechip-x,#sl-panel-support .sl-sav-filechip-x:hover{width:22px;height:22px;min-height:0;padding:0;border-radius:50%;background:#fff;border:0;color:var(--s-ink);font-size:14px;line-height:1}
#sl-panel-support .sl-sav-warn{display:flex;gap:8px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--s-amber-soft);border:0;color:var(--s-amber-ink);font-size:12px;font-weight:500;line-height:1.4}
#sl-panel-support #sl-sav-submit{width:100%;height:50px}
/* Réponse immédiate (maquette `.assist`) : au-dessus du message, plus collée en bas de l'écran (décision 17) */
#sl-panel-support .sl-sav-assist{position:static;gap:10px;padding:14px;border-radius:16px;background:linear-gradient(135deg,#FFF8E6,#fff 80%);border:1px solid #F3E2B5;border-left:4px solid var(--s-gold);box-shadow:none;animation:slSavAssistIn .3s ease-out}
#sl-panel-support .sl-sav-assist-head{align-items:flex-start;gap:6px;flex-wrap:nowrap;font-size:10px;font-weight:800;line-height:1.35;letter-spacing:.9px;color:var(--s-gold-ink)}
#sl-panel-support .sl-sav-assist-title{flex:1;min-width:0;padding-top:1px}
#sl-panel-support .sl-sav-assist-ico{display:inline-flex;font-size:0;animation:slSavAssistIco 1.8s ease-in-out infinite}
#sl-panel-support .sl-sav-assist-text{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--s-ink2)}
#sl-panel-support .sl-sav-assist .sl-sav-btn,#sl-panel-support .sl-sav-assist .sl-sav-btn:hover,#sl-panel-support .sl-sav-assist .sl-sav-btn:focus{align-self:stretch;width:100%;min-height:44px;padding:10px 14px;font-size:13px}
#sl-panel-support .sl-sav-assist .sl-sav-btn.sl-addr-btn{align-self:stretch;min-width:0}
#sl-panel-support .sl-sav-assist-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#sl-panel-support .sl-sav-assist-grid .sl-sav-btn,#sl-panel-support .sl-sav-assist-grid .sl-sav-btn:hover{font-size:12.5px;padding:8px}
#sl-panel-support .sl-sav-assist-grid>:nth-child(odd):last-child{grid-column:1/-1}
#sl-panel-support .sl-sav-assist.is-pending{opacity:.45;pointer-events:none;transition:opacity .15s}
#sl-panel-support .sl-sav-assist.is-done{background:linear-gradient(135deg,var(--s-blue-soft),#fff 80%);border-color:var(--s-blue-line);border-left-color:var(--s-blue)}
#sl-panel-support .sl-sav-assist-ok{display:flex;gap:10px;align-items:center}
#sl-panel-support .sl-sav-assist-ok-ic{display:flex;flex-shrink:0}
#sl-panel-support .sl-sav-assist-ok .sl-sav-assist-text{font-size:13.5px;font-weight:700;color:var(--s-ink)}
#sl-panel-support .sl-sav-assist-carrier .sl-carrier{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--s-ink2)}
#sl-panel-support .sl-sav-assist .sl-sav-form{gap:8px}
#sl-panel-support .sl-sav-assist .sl-sav-input{height:44px;padding:0 12px;font-size:16px}
#sl-panel-support .sl-sav-assist .sl-sav-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#sl-panel-support .sl-sav-assist .sl-swap-line{border-top:1px solid #F2F2EE}
#sl-panel-support .sl-sav-assist .sl-swap-select{height:40px;padding:0 10px;font-size:16px;appearance:auto}
#sl-panel-support .sl-sav-assist .sl-swap-btn,#sl-panel-support .sl-sav-assist .sl-swap-btn:hover{width:auto;align-self:auto;min-height:40px}
#sl-panel-support .sl-sav-assist .sl-swap-hint{display:flex;align-items:center;color:var(--s-gold-ink);font-size:12px}
#sl-panel-support .sl-sav-assist .sl-od-relay-row{border-color:var(--s-line);border-radius:12px}
#sl-panel-support .sl-sav-assist .sl-od-relay-row .sl-sav-btn,#sl-panel-support .sl-sav-assist .sl-od-relay-row .sl-sav-btn:hover{width:auto;min-height:32px;height:32px;padding:0 12px;border-radius:99px;background:var(--s-blue-soft);border-color:var(--s-blue-soft);color:var(--s-blue-ink);font-size:12px}
#sl-panel-support .sl-sav-assist .sl-od-relay-search .sl-sav-btn,#sl-panel-support .sl-sav-assist .sl-od-relay-search .sl-sav-btn:hover{width:auto;min-height:40px}
#sl-panel-support .sl-sav-assist .sl-addr-nonum{border-left-color:var(--s-gold)}
/* Club V2 · L4b — cartes des intents nouveaux : ligne produit / commande, puces à choisir (article, problème), notes. */
#sl-panel-support .sl-sav-assist-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--s-line);border-radius:12px;background:#fff}
#sl-panel-support .sl-sav-assist-row img{width:40px;height:40px;flex-shrink:0;border-radius:8px;object-fit:cover;background:#F6F6F2}
#sl-panel-support .sl-sav-assist-row-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:12.5px;font-weight:700;color:var(--s-ink);overflow-wrap:anywhere}
#sl-panel-support .sl-sav-assist-row-m small{font-size:11.5px;font-weight:500;color:var(--s-ink2)}
#sl-panel-support .sl-sav-assist .sl-sav-assist-row-btn,#sl-panel-support .sl-sav-assist .sl-sav-assist-row-btn:hover{flex-shrink:0;width:auto;min-height:34px;height:34px;padding:0 12px;border-radius:99px;font-size:12px;display:inline-flex;align-items:center;text-decoration:none}
#sl-panel-support .sl-sav-assist-sub{margin-top:2px;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--s-ink2)}
#sl-panel-support .sl-sav-chips{display:flex;flex-wrap:wrap;gap:6px}
#sl-panel-support .sl-sav-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border:1px solid var(--s-line);border-radius:99px;background:#fff;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--s-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sl-panel-support .sl-sav-chip img{width:26px;height:26px;flex-shrink:0;border-radius:6px;object-fit:cover}
#sl-panel-support .sl-sav-chip.is-on{border-color:var(--s-blue);background:var(--s-blue-soft);color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-assist-note,#sl-panel-support .sl-sav-assist-foot{margin:0;font-size:11.5px;line-height:1.45;color:var(--s-ink2)}
#sl-panel-support .sl-sav-assist a.sl-sav-btn{display:flex;text-decoration:none}
/* Club V2 · cartes complètes (maquette V2.3) : virement à copier, échéance du cashback, relais de la fiche, frise du retour,
   point « Nouveau » des raccourcis */
#sl-panel-support .sl-sav-assist-kv{display:grid;grid-template-columns:auto 1fr;margin:0;padding:2px 12px;border:1px solid var(--s-line);border-radius:12px;background:#fff;font-size:12.5px;line-height:1.3}
#sl-panel-support .sl-sav-assist-kv dt,#sl-panel-support .sl-sav-assist-kv dd{display:flex;align-items:center;min-height:42px;margin:0;padding:6px 0;border-top:1px solid #F2F2EE}
#sl-panel-support .sl-sav-assist-kv dt:first-of-type,#sl-panel-support .sl-sav-assist-kv dd:first-of-type{border-top:0}
#sl-panel-support .sl-sav-assist-kv dt{padding-right:12px;color:var(--s-mute);font-weight:600}
#sl-panel-support .sl-sav-assist-kv dd{justify-content:flex-end;gap:8px;min-width:0;color:var(--s-ink);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
#sl-panel-support .sl-sav-assist-kv dd span{min-width:0;overflow-wrap:anywhere}
#sl-panel-support .sl-sav-assist .sl-sav-assist-copy,#sl-panel-support .sl-sav-assist .sl-sav-assist-copy:hover,#sl-panel-support .sl-sav-assist .sl-sav-assist-copy:focus{flex-shrink:0;width:auto;min-height:30px;height:30px;margin:0;padding:0 11px;border:1px solid var(--s-blue-line);border-radius:99px;background:var(--s-blue-soft);box-shadow:none;color:var(--s-blue-ink);font-family:var(--sl-font);font-size:11.5px;font-weight:700;line-height:1;letter-spacing:normal;text-transform:none;cursor:pointer;transition:background .2s,color .2s}
#sl-panel-support .sl-sav-assist .sl-sav-assist-copy.is-done{background:var(--s-blue);border-color:var(--s-blue);color:#fff}
#sl-panel-support .sl-sav-assist-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:var(--s-blue-soft);font-size:12px;font-weight:600;line-height:1.4;color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-assist-tip.is-amber{background:var(--s-amber-soft);color:var(--s-amber-ink)}
#sl-panel-support .sl-sav-assist-tip>span{flex:1;min-width:0}
#sl-panel-support .sl-sav-assist-tip svg{flex-shrink:0;margin-top:1px}
#sl-panel-support .sl-sav-assist-relay{--o-ink:var(--s-ink);--o-ink2:var(--s-ink2);--o-mute:var(--s-mute);--o-soft:var(--s-soft);--o-blue-ink:var(--s-blue-ink);--o-amber:var(--s-amber-ink)}
#sl-panel-support .sl-sav-assist-relay .sl-tracking-parcelshop{margin-top:0;background:#fff;border:1px solid var(--s-line)}
#sl-panel-support .sl-sav-assist-relay .sl-ps-ic,#sl-panel-support .sl-sav-assist-relay .sl-relais-hours{background:var(--s-soft)}
/* 4.198.0 : liste numérotée d'une carte (dépannage vape). */
#sl-panel-support .sl-sav-assist-list{margin:6px 0 4px;padding:0 0 0 22px;font-size:13px;line-height:1.45;color:var(--s-ink,#1d1d1f)}
#sl-panel-support .sl-sav-assist-list li{margin:3px 0}
#sl-panel-support .sl-sav-assist-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 4px 10px;border:1px solid var(--s-line);border-radius:12px;background:#fff}
#sl-panel-support .sl-sav-assist-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 2px;text-align:center}
#sl-panel-support .sl-sav-assist-step+.sl-sav-assist-step::before{content:"";position:absolute;top:13px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;border-radius:2px;background:var(--s-line)}
#sl-panel-support .sl-sav-assist-step.is-done::before,#sl-panel-support .sl-sav-assist-step.is-cur::before{background:var(--s-blue)}
#sl-panel-support .sl-sav-assist-step-d{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--s-soft);border:1.5px solid var(--s-line);box-sizing:border-box}
#sl-panel-support .sl-sav-assist-step.is-done .sl-sav-assist-step-d{background:var(--s-blue);border-color:var(--s-blue)}
#sl-panel-support .sl-sav-assist-step.is-cur .sl-sav-assist-step-d{background:var(--s-blue-soft);border-color:var(--s-blue)}
#sl-panel-support .sl-sav-assist-step-l{font-size:10.5px;font-weight:600;line-height:1.25;color:var(--s-mute);overflow-wrap:anywhere}
#sl-panel-support .sl-sav-assist-step.is-done .sl-sav-assist-step-l{color:var(--s-ink2)}
#sl-panel-support .sl-sav-assist-step.is-cur .sl-sav-assist-step-l{color:var(--s-ink);font-weight:700}
#sl-panel-support .sl-sav-tile{position:relative}
#sl-panel-support .sl-sav-tile-nd{display:none;position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:#8C6CF0}
#sl-panel-support .sl-sav-quick.is-nd-ready .sl-sav-tile-nd{display:block}
@media(prefers-reduced-motion:reduce){#sl-panel-support .sl-sav-assist,#sl-panel-support .sl-sav-assist-ico,#sl-panel-support .sl-sav-gift-banner-icon{animation:none}}
/* Fil : en-tête, bulles (crème pour toi, blanc pour Spliff), pièces jointes en vignettes, bandeaux */
#sl-panel-support .sl-sav-ticket-head{display:block;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--s-line)}
#sl-panel-support .sl-sav-ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#sl-panel-support .sl-sav-ticket-top .sl-section-title{margin:0;font-size:15px;line-height:1.25;letter-spacing:0;text-transform:none}
#sl-panel-support .sl-sav-ticket-order{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#A2A29B}
#sl-panel-support .sl-sav-ticket-order .sl-sav-oc{height:26px}
#sl-panel-support .sl-sav-ticket-order .sl-sav-oc img{width:20px;height:20px}
#sl-panel-support .sl-sav-thread{gap:12px}
#sl-panel-support .sl-sav-msg{max-width:84%}
#sl-panel-support .sl-sav-msg-body{border-radius:18px;padding:11px 13px;font-size:13.5px;line-height:1.45}
#sl-panel-support .sl-sav-msg.client .sl-sav-msg-body{background:#FFF3D6;border:1px solid #F3DDA6;color:var(--s-ink);border-bottom-right-radius:6px}
#sl-panel-support .sl-sav-msg.spliff .sl-sav-msg-body{background:#fff;border:1px solid var(--s-line);border-bottom-left-radius:6px}
#sl-panel-support .sl-sav-msg.client .sl-sav-link{color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-msg-meta{font-size:10.5px;color:#A2A29B}
#sl-panel-support .sl-sav-sig{border-top-color:#F2F2EE}
#sl-panel-support .sl-sav-sig .sl-sav-sig-who-link{color:var(--s-blue-ink)!important}
#sl-panel-support .sl-sav-sig img.sl-sav-sig-av.is-link{box-shadow:0 0 0 2px #fff,0 0 0 4px #D9A441}
#sl-panel-support .sl-sav-thumb{width:64px;height:64px;border-radius:10px;border-color:var(--s-line)}
#sl-panel-support .sl-sav-thumb:hover{border-color:var(--s-blue)}
/* L9 — commande jointe par la conseillère sous sa réponse (maquette `.actcard`) : vignette, article, n°, « Remettre » */
#sl-panel-support .sl-sav-actcard{display:flex;gap:10px;align-items:center;margin-top:6px;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--s-line)}
#sl-panel-support .sl-sav-actcard>img,#sl-panel-support .sl-sav-actcard-ic{width:44px;height:44px;flex-shrink:0;border-radius:10px;object-fit:cover;background:var(--s-soft)}
#sl-panel-support .sl-sav-actcard-ic{display:grid;place-items:center}
#sl-panel-support .sl-sav-actcard-t{flex:1;min-width:0}
#sl-panel-support .sl-sav-actcard-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--s-ink)}
#sl-panel-support .sl-sav-actcard-t small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:var(--s-mute)}
#sl-panel-support .sl-sav-actcard-btn,#sl-panel-support .sl-sav-actcard-btn:hover,#sl-panel-support .sl-sav-actcard-btn:focus{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;width:auto;height:40px;min-height:40px;margin:0;padding:0 13px;border:0;border-radius:99px;background:var(--s-blue-soft);box-shadow:none;color:var(--s-blue-ink);font-family:var(--sl-font);font-size:12px;font-weight:700;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sl-panel-support .sl-sav-actcard-btn:active{background:var(--s-blue-line)}
#sl-panel-support .sl-sav-tban{display:flex;gap:10px;align-items:center;max-width:100%;margin:2px 0;padding:11px 12px;border-radius:14px;font-size:12px;line-height:1.4}
#sl-panel-support .sl-sav-tban>.spi{flex-shrink:0}
#sl-panel-support .sl-sav-tban--gift{background:#FFF8E6;border:1px solid #F0D58C;color:#6B4A0E}
#sl-panel-support .sl-sav-tban--hold{background:var(--s-blue-soft);border:1px solid var(--s-blue-line);color:var(--s-blue-ink)}
/* Cadeau à personnaliser : doré, − / + au trait, épuisés grisés */
#sl-panel-support .sl-sav-gift-choose{max-width:100%;padding:12px;border-radius:14px;background:#FFFCF5;border:1.5px dashed #E8D5AA;color:var(--s-ink2)}
#sl-panel-support .sl-sav-gift-choose-head{display:flex;align-items:center;font-size:13px;font-weight:800;color:var(--s-ink)}
#sl-panel-support .sl-sav-gv{background:none;border:0;border-bottom:1px solid #F2EBD9;border-radius:0;padding:6px 0}
#sl-panel-support .sl-sav-gv-ctrl{height:30px;border:1px solid #E3E3DE;border-radius:99px;background:#fff;gap:0}
#sl-panel-support .sl-sav-gv-btn,#sl-panel-support .sl-sav-gv-btn:hover{width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--s-ink);font-size:16px}
#sl-panel-support .sl-sav-gv-btn:disabled{color:#CCC;opacity:1}
#sl-panel-support .sl-sav-gift-choose-left{color:var(--s-gold-ink)}
#sl-panel-support .sl-sav-gift-choose-cta,#sl-panel-support .sl-sav-gift-choose-cta:hover{background:var(--s-blue);border-color:var(--s-blue);color:#fff;min-height:44px}
#sl-panel-support .sl-sav-gift-choose.is-done{display:flex;align-items:center;color:var(--s-ink);font-weight:700}
/* Attente de réponse (délai 24 h / en retard) et modification du message */
#sl-panel-support .sl-sav-waiting{background:none;background-image:none;padding:0;border-radius:0;color:var(--s-ink);gap:10px}
#sl-panel-support .sl-sav-sla-line{margin:0;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:0;color:var(--s-ink)}
#sl-panel-support .sl-sav-waiting-mail{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:var(--s-ink2)}
#sl-panel-support .sl-sav-slow{margin:0;padding:0;background:none;border:0;font-size:12.5px;line-height:1.5;color:#6B4A0E}
/* L9 — compte à rebours de la réponse (maquette `.sla`) : anneau à la place du sablier tant qu'une échéance est connue */
/* span.… : passe devant « .sl-sav-sla-box span » (bloc, marge) de la boîte de la liste */
#sl-panel-support span.sl-sav-ring{display:none;position:relative;width:46px;height:46px;margin:0}
#sl-panel-support .is-ring>span.sl-sav-ring{display:block}
#sl-panel-support .is-ring>:not(.sl-sav-ring){display:none}
#sl-panel-support .sl-sav-ring svg{display:block;transform:rotate(-90deg)}
#sl-panel-support .sl-sav-ring circle{fill:none;stroke:#E3EAFF;stroke-width:5}
#sl-panel-support .sl-sav-ring .sl-sav-ring-v{stroke:var(--s-blue);stroke-linecap:round;transition:stroke-dashoffset .4s}
/* Syne 700 à 10 px : le plus large des libellés (« sáb. », « mer. ») tient en 27 px dans les 33 px du cercle (en 800 à 11 px,
   « 18 h » touchait le trait et « mer. » le débordait : mesuré au banc, vu sur iPhone 17e le 15/10/2026) */
#sl-panel-support .sl-sav-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--s-blue-ink)}
#sl-panel-support .sl-sav-waiting .sl-sav-edit-btn,#sl-panel-support .sl-sav-waiting .sl-sav-edit-btn:hover,#sl-panel-support .sl-sav-waiting .sl-sav-edit-btn:focus{width:100%;min-height:44px;background:#fff;border-color:#E4E4DF;color:var(--s-ink)}
#sl-panel-support .sl-sav-edit{padding:12px;border-radius:14px;background:#fff;border:1px solid var(--s-line)}
#sl-panel-support .sl-sav-row{gap:8px}
#sl-panel-support .sl-sav-row .sl-sav-btn{flex:1}
#sl-panel-support .sl-sav-closed{padding:11px 12px;border-radius:12px;background:var(--s-amber-soft);border:0;color:var(--s-amber-ink);font-size:12px}
/* Répondre : champ + bouton rond « envoyer » */
#sl-panel-support .sl-sav-reply-row{display:flex;gap:8px;align-items:flex-end}
#sl-panel-support .sl-sav-reply-row .sl-sav-textarea{flex:1;min-height:46px;max-height:140px}
#sl-panel-support .sl-sav-sendb,#sl-panel-support .sl-sav-sendb:hover,#sl-panel-support .sl-sav-sendb:focus{width:46px;height:46px;min-height:0;padding:0;flex-shrink:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--s-blue);box-shadow:none}
#sl-panel-support .sl-sav-sendb:disabled{opacity:.5}
#sl-panel-support .sl-sav-sendb svg.spi{stroke:#fff}
/* Bandeau cadeau resté sous le hero (onglet Support coupé) : doré, plus de vert */
.sl-sav-gift-banner .sl-sav-gift-banner-icon{display:flex}
.sl-sav-gift-banner .sl-sav-gift-banner-text em{color:#9A6410}
/* Fiche « Qui est … ? » : le cœur en picto maison, l'étiquette en doré (plus de noir, décision 1) */
.sl-agent-sheet-facts li i svg.spi{display:block}
.sl-agent-sheet .sl-agent-sheet-tag{background:#E8A838;color:#1b1b1b}

/* ══ Ma carte enregistrée (4.163.0, Spliff_Loyalty_Club_Carte + slCard* de front.js) ══
   Carte du volet : logo + « Visa •••• 0013 » + « Expire fin 12/30 », Remplacer / Supprimer (confirmation sur place) ;
   sans carte, « Aucune carte enregistrée » + « Ajouter une carte ». Sous-vue « card » : formulaire Krypton REGISTER au style
   des champs du volet (repris du bloc « Formulaire carte PayZen (Krypton) » de la sheet du panier, spliff-minicart). */
#sl-drawer .slc-pc [hidden],#sl-drawer .slc-pc-view [hidden]{display:none !important}
#sl-drawer .slc-pc-on{display:flex;flex-direction:column;gap:12px}
#sl-drawer .slc-pc-row{display:flex;align-items:center;gap:12px;min-height:40px}
#sl-drawer .slc-pc-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:24px;border-radius:4px;overflow:hidden}
#sl-drawer .slc-pc-logo img{display:block;width:38px;height:24px;margin:0;border-radius:4px}
#sl-drawer .slc-pc-logo.is-generic{overflow:visible}
#sl-drawer .slc-pc-logo svg{display:block}
#sl-drawer .slc-pc-n{flex:1 1 auto;min-width:0;font:500 12px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#8b8b85}
#sl-drawer .slc-pc-n b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#1b1b1b}
#sl-drawer .slc-pc-n small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:#8b8b85}
#sl-drawer .slc-pc-btns{display:flex;gap:8px}
#sl-drawer .slc-pc-btns .slc-mbtn{flex:1 1 0;min-width:0;height:44px;touch-action:manipulation}
#sl-drawer .slc-mbtn.slc-pc-del,#sl-drawer .slc-mbtn.slc-pc-del:hover,#sl-drawer .slc-mbtn.slc-pc-del:focus{background:#FDEEEC;color:#B42318}
#sl-drawer .slc-mbtn.slc-pc-ghost,#sl-drawer .slc-mbtn.slc-pc-ghost:hover,#sl-drawer .slc-mbtn.slc-pc-ghost:focus{background:#fff;color:#1b1b1b;box-shadow:inset 0 0 0 1px #E2E2DC}
#sl-drawer .slc-mbtn.slc-pc-danger,#sl-drawer .slc-mbtn.slc-pc-danger:hover,#sl-drawer .slc-mbtn.slc-pc-danger:focus{background:#B42318;color:#fff}
#sl-drawer .slc-mbtn.is-busy{opacity:.55;cursor:progress}
#sl-drawer .slc-pc-confirm{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:#FFF7F6}
#sl-drawer .slc-pc-q{font:700 14px/1.3 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#1b1b1b}
#sl-drawer .slc-pc-q small{display:block;margin-top:3px;font-size:12px;font-weight:500;color:#8b8b85}
#sl-drawer .slc-pc .sl-form-msg{margin:0}
#sl-drawer .slc-pc-off .slc-mbtn{touch-action:manipulation}
/* Sous-vue « card » */
#sl-drawer .slc-pc-intro{display:flex;gap:8px;align-items:flex-start;margin:0;font:500 13px/1.45 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#5f5f59}
#sl-drawer .slc-pc-intro svg{flex-shrink:0;margin-top:1px}
#sl-drawer .slc-pc-form{position:relative;min-height:166px}
#sl-drawer .slc-pc-skel{display:none;flex-wrap:wrap;gap:8px}
#sl-drawer .slc-pc-skel span{flex:0 0 100%;height:48px;border-radius:12px;background:linear-gradient(90deg,#fff 0%,#ECECE8 50%,#fff 100%);background-size:200% 100%;animation:slc-pc-skel 1.2s linear infinite}
#sl-drawer .slc-pc-skel span.is-half{flex-basis:calc(50% - 4px)}
#sl-drawer .slc-pc-skel span.is-btn{height:46px;margin-top:4px;background:#5A8BFF;opacity:.3;animation:none}
@keyframes slc-pc-skel{from{background-position:200% 0}to{background-position:0 0}}
#sl-drawer .slc-pc-view.is-loading .slc-pc-skel{display:flex}
#sl-drawer .slc-pc-view.is-loading .slc-pc-kr{position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none}
#sl-drawer .slc-pc-retry{margin:0}
#sl-drawer .slc-pc-cancel,#sl-drawer .slc-pc-cancel:hover,#sl-drawer .slc-pc-cancel:focus{display:block;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;box-shadow:none;color:#5f5f59;font:600 14px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;text-transform:none;letter-spacing:0;cursor:pointer;touch-action:manipulation}
/* Formulaire Krypton : numéro sur une ligne, date | CVV dessous, un seul groupe blanc bordé comme les champs du volet.
   Numéro, date et CVV sont des iframes : leur texte copie le style calculé de .kr-input-field (16 px au moins : pas de
   zoom Safari), le cadre se règle sur .kr-field-element. */
#sl-paycard-kr .kr-embedded{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
#sl-paycard-kr .kr-card-header,#sl-paycard-kr .kr-label,#sl-paycard-kr .kr-help-button-wrapper,#sl-paycard-kr .kr-icon-wrapper-root,#sl-paycard-kr .kr-visibility-button{display:none !important}
#sl-paycard-kr .kr-field-element{position:relative !important;box-sizing:border-box !important;width:100% !important;height:48px !important;margin:0 !important;padding:0 !important;background:#fff !important;border:1.5px solid #E2E2DC !important;border-radius:0 !important;box-shadow:none !important;outline:none !important}
#sl-paycard-kr .kr-field-element.kr-pan{order:1;border-bottom-width:0 !important;border-radius:12px 12px 0 0 !important}
#sl-paycard-kr .kr-field-element.kr-expiry{order:2;width:50% !important;border-right-width:0 !important;border-radius:0 0 0 12px !important}
#sl-paycard-kr .kr-field-element.kr-security-code{order:3;width:50% !important;border-radius:0 0 12px 0 !important}
/* 4.175.0 — carte co-badgée (CB/Visa, CB/Mastercard) : Krypton ajoute « Vous pouvez payer avec la marque de votre choix »
   dans le champ numéro (48 px fixes) et un choix de marque à droite : le numéro débordait d'environ 14 px sur date | CVV, et
   le choix restait caché par .kr-icon-wrapper-root. Le champ grandit, le message s'aligne sur les champs, le choix redevient
   visible et cliquable. Carte non co-badgée : aucune option de marque, rien ne change. Sans :has() (Safari < 15.4), rendu d'avant. */
#sl-paycard-kr .kr-pan:has(.kr-card-brand-selector-option){height:auto !important;min-height:48px !important}
#sl-paycard-kr .kr-pan:has(.kr-card-brand-selector-option) .kr-field-wrapper{height:46px !important}
#sl-paycard-kr .kr-card-brand-selector-label-wrapper{justify-content:flex-start !important;padding:6px 14px 0 !important}
#sl-paycard-kr .kr-card-brand-selector-wrapper:has(.kr-card-brand-selector-option){display:flex !important}
#sl-paycard-kr .kr-card-holder-name,#sl-paycard-kr [field-name="cardHolderName"]{order:4;margin-top:8px !important;border-radius:12px !important}
#sl-paycard-kr.has-holder .kr-card-holder-name,#sl-paycard-kr.has-holder [field-name="cardHolderName"]{display:none !important}
#sl-paycard-kr .kr-field-wrapper{width:100% !important;height:100% !important;margin:0 !important;padding:0 14px !important;border:0 !important;border-radius:inherit !important;background:transparent !important;box-shadow:none !important;outline:none !important;display:flex !important;align-items:center !important}
#sl-paycard-kr .kr-field-component{flex:1 1 auto !important;height:100% !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;display:flex !important;align-items:center !important}
#sl-paycard-kr .kr-iframe-wrapper{width:100% !important}
#sl-paycard-kr .kr-input-field{font:500 16px 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;color:#1b1b1b !important;letter-spacing:0 !important}
#sl-paycard-kr .kr-field-element.kr-focus{border-color:#5A8BFF !important}
#sl-paycard-kr .kr-field-element.kr-error .kr-field-wrapper,#sl-paycard-kr .kr-field-element.kr-on-error .kr-field-wrapper{box-shadow:inset 0 0 0 2px #B42318 !important}
#sl-paycard-kr .kr-form-error{order:5;flex:0 0 100% !important;margin:8px 2px 0 !important;padding:0 !important;background:none !important;border:0 !important;font:500 13px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;color:#B42318 !important}
#sl-paycard-kr .kr-form-error span,#sl-paycard-kr .kr-form-error *{color:#B42318 !important;background:none !important}
#sl-paycard-kr .kr-payment-button{order:6;flex:0 0 100% !important;width:100% !important;min-height:46px !important;margin:14px 0 0 !important;border:0 !important;border-radius:12px !important;background:#5A8BFF !important;color:#fff !important;font:700 15px 'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;touch-action:manipulation}
#sl-paycard-kr .kr-payment-button *{color:#fff !important;text-transform:none !important}
/* 3D Secure : la fenêtre de la banque (position:fixed, montée dans le formulaire) a tout l'écran. Le tiroir est une
   modale centrée par transform sur tablette et ordinateur (le transform devient le repère du position:fixed) et coupe
   ce qui dépasse (overflow:hidden) : tant qu'elle est ouverte (slc-3ds, posé par _slCardWatch), plein écran, sans
   transform, ni arrondi, ni découpe. */
#sl-drawer.slc-3ds{top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;width:100% !important;max-width:none !important;height:100% !important;max-height:none !important;transform:none !important;border-radius:0 !important;overflow:visible !important;opacity:1 !important;transition:none !important}
#sl-drawer.slc-3ds .sl-drawer-header{border-radius:0 !important}
#sl-drawer.slc-3ds .sl-drawer-body,#sl-drawer.slc-3ds .sl-drawer-view{overflow:visible !important}
/* Fenêtre 3D Secure du vrai Krypton (relevé TEST du 15/10/2026) : montée dans body > .kr-popin-redirection-wrapper (z-index
   9999), donc SOUS le tiroir (100000) et son voile (99999) : le client voyait le bouton tourner, jamais sa banque. Au-dessus
   de tout. Flex en ligne forcé plus haut : Krypton passe .kr-embedded en colonne quand le titulaire réapparaît (CLIENT_308). */
.kr-popin-redirection-wrapper{z-index:2147483000 !important}

/* ══════ Complément à payer (SAV #2548, 4.186.0) ══════
   Le SAV a ajouté un article à une commande payée : la différence se règle dans la commande d'origine (carte de suivi,
   fiche). Bandeau ambre + bloc Spliff Lyra du complément, dont l'en-tête « Payer ma commande par carte » est masqué (le
   bandeau le dit déjà). Spécificité 0,2,0 et plus : le reset `.sl-club *` (0,1,0) remet padding et margin à zéro. */
.sl-complement.sl-complement{margin:0 0 14px;text-align:left}
.sl-complement .sl-complement__head{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--o-amber-soft,#FFF5E2);border:1px solid var(--o-amber-line,#F3DDAF);border-radius:12px}
.sl-complement .sl-complement__ic{flex-shrink:0;line-height:0;margin-top:1px}
.sl-complement .sl-complement__txt{min-width:0}
.sl-complement .sl-complement__title{margin:0;font-size:14px;line-height:1.35;font-weight:800;color:var(--o-ink,#1b1b1b);overflow-wrap:anywhere}
.sl-complement .sl-complement__title strong{font-weight:800;white-space:nowrap}
.sl-complement .sl-complement__sub{margin:3px 0 0;font-size:13px;line-height:1.45;font-weight:500;color:var(--o-ink2,#55554f)}
.sl-complement .spliff-lyra-pay.spliff-lyra-pay{margin:10px 0 0;padding:16px 14px 12px;border:1px solid var(--o-line,#ECECE8)}
.sl-complement .spliff-lyra-pay .spliff-lyra-pay__head{display:none}
.sl-complement .sl-order-pay-btn.sl-complement__pay{margin:12px auto 0}
#sl-order-modal .sl-complement.sl-complement{margin:0 0 16px}
/* Fiche : différence déjà réglée, une ligne discrète sous les totaux ; prix d'une ligne ajoutée par le SAV. */
.sl-od-complement-paid.sl-od-complement-paid{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:12px;line-height:1.4;font-weight:600;color:var(--o-ink2,#55554f)}
.sl-od-complement-paid .spi{flex-shrink:0}
.sl-od-item-price .sl-od-cpl{font-size:11.5px;font-weight:700;color:var(--o-ink2,#55554f);white-space:nowrap}
.sl-od-item-price .sl-od-cpl--due{color:var(--o-amber,#A16207)}