/* ===== Centre de notifications — Cloudy Vape ===== */

/* Cloche (accueil) */
.cv-notif-bell{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:90000;width:44px;height:44px;border:none;border-radius:50%;background-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:23px 23px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cv-notif-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#FBB830;color:#232551;font:800 12px/20px Poppins,sans-serif;text-align:center;border:2px solid #232551;box-sizing:border-box}
.cv-notif-badge[hidden]{display:none}
@keyframes cvBellSwing{0%,55%,100%{transform:rotate(0)}10%,30%{transform:rotate(13deg)}20%,40%{transform:rotate(-13deg)}}
.cv-notif-bell.has-unread{animation:cvBellSwing 1.8s ease-in-out 1s infinite;transform-origin:50% 18%}

/* Panneau plein ecran */
.cv-notif-sheet{position:fixed;inset:0;z-index:100070;visibility:hidden;pointer-events:none}
.cv-notif-sheet.cv-notif-open{visibility:visible;pointer-events:auto}
.cv-notif-overlay{position:absolute;inset:0;background:rgba(8,9,28,.55);opacity:0;transition:opacity .3s ease}
.cv-notif-sheet.cv-notif-open .cv-notif-overlay{opacity:1}
.cv-notif-panel{position:absolute;left:0;right:0;top:0;bottom:0;background:#232551;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.cv-notif-sheet.cv-notif-open .cv-notif-panel{transform:translateY(0)}
.cv-notif-head{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 16px) 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.cv-notif-head-title{color:#fff;font:800 20px/1 Poppins,sans-serif}
.cv-notif-close{width:38px;height:38px;border:none;border-radius:50%;background-color:#FBB830;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232551' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px;cursor:pointer}
.cv-notif-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(env(safe-area-inset-bottom) + 20px)}
.cv-notif-list::-webkit-scrollbar{width:0;height:0}

/* Carte notification */
.cv-notif-item{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;background:#2b2c5e;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;margin:0 0 10px;text-decoration:none;cursor:pointer;box-sizing:border-box}
.cv-notif-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background-repeat:no-repeat;background-position:center;background-size:22px 22px}
.cv-notif-ic-promo{background-color:rgba(251,184,48,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBB830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L3 13V3h10l7.59 7.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E")}
.cv-notif-ic-new{background-color:rgba(125,220,174,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ddcae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.8L18.7 9 14 11l-2 5-2-5L5.3 9 10 7.8z'/%3E%3C/svg%3E")}
.cv-notif-ic-order{background-color:rgba(143,182,255,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='11' rx='1'/%3E%3Cpath d='M14 9h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='1.6'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.6'/%3E%3C/svg%3E")}
.cv-notif-ic-info{background-color:rgba(255,143,179,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8fb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E")}
.cv-notif-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.cv-notif-title{color:#fff;font:700 15px/1.25 Poppins,sans-serif}
.cv-notif-text{color:#c8c9e6;font:400 13px/1.4 Poppins,sans-serif}
.cv-notif-date{color:#8a8cb8;font:600 11px/1 Poppins,sans-serif;margin-top:2px}
.cv-notif-empty{color:#c8c9e6;text-align:center;padding:54px 20px;font:500 15px/1.5 Poppins,sans-serif}

/* Bloc Mon compte */
.cv-notif-account{display:flex;align-items:center;gap:14px;background:#2b2c5e;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 16px;margin:0 0 18px;text-decoration:none}
.cv-notif-account-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background-color:rgba(251,184,48,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBB830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:23px 23px}
.cv-notif-account-tx{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.cv-notif-account-tx strong{color:#fff;font:700 15px/1.2 Poppins,sans-serif}
.cv-notif-account-tx small{color:#c8c9e6;font:400 12.5px/1.35 Poppins,sans-serif}
.cv-notif-account-arrow{color:#FBB830;font-size:24px;font-weight:700;line-height:1}
.cv-notif-account-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#FBB830;color:#232551;font:800 12px/20px Poppins,sans-serif;text-align:center}