/* ===== Variables & Reset Global ===== */
:host {
--enviso-primary-color: #ae1808;
--enviso-secondary-color: #1a1a1a;
--border-light: rgba(174, 24, 8, 0.08);
--border-hover: rgba(174, 24, 8, 0.25);
--shadow-soft: 0 8px 24px rgba(174, 24, 8, 0.06);
--shadow-hover: 0 16px 40px rgba(174, 24, 8, 0.12);
--gradient-accent: linear-gradient(
135deg,
rgba(174, 24, 8, 0.05) 0%,
rgba(174, 24, 8, 0.02) 100%
);
font-family: 'Crimson Text', serif;
font-size: 16px;
}
:host header,
:host button {
font-family: 'Rocher Mistral', sans-serif;
}
/* =========================================================
Nettoyage UI Enviso + Masquage images
========================================================= */
:host .enviso-offer-meta-period,
:host .enviso-ticket-widget-offers-header,
:host .enviso-filter-bar,
:host .enviso-basket-item-description-extra,
:host button.enviso-btn.icon-only enviso-icon[name='info-squared'],
:host .enviso-product-image-wrapper,
:host img.enviso-product-image,
:host .enviso-basket-offer-image,
:host .enviso-basket-item-image-wrapper {
display: none !important;
}
/* =========================================================
Typo / Boutons (enviso-button + boutons classiques)
- enlever le gras
- augmenter la taille du texte
- agrandir les boutons icon-only
========================================================= */
/* Boutons classiques éventuels */
:host button,
:host .enviso-btn,
:host button.enviso-btn {
font-weight: 400 !important;
font-size: 25px !important;
}
/* Boutons Enviso (web component) */
:host(enviso-button) button {
font-weight: 400 !important;
font-size: 25px !important;
}
/* Boutons "icon-only" (panier / icônes seules) */
:host(enviso-button)[icon-only] {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
display: inline-flex !important;
}
:host(enviso-button)[icon-only] button {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 0 !important;
}
:host(enviso-button)[icon-only] svg,
:host(enviso-button)[icon-only] enviso-icon {
width: 26px !important;
height: 26px !important;
}
/* =========================================================
Prix : enlever le gras
========================================================= */
:host .enviso-price-full,
:host span.enviso-price-full {
font-weight: 400 !important;
}
/* =========================================================
🎨 NEUTRALISATION PREMIUM DU HOST ENVISO
Design épuré avec espacement optimal + largeur réduite
========================================================= */
:host(enviso-ticket-item) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 auto 20px auto !important;
display: block;
position: relative;
max-width: 700px;
}
:host(enviso-ticket-item)::before,
:host(enviso-ticket-item)::after {
content: none !important;
}
/* Effet de profondeur subtil au survol */
:host(enviso-ticket-item)::before {
content: '';
position: absolute;
inset: -2px;
background: var(--gradient-accent);
border-radius: 22px;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
:host(enviso-ticket-item):hover::before {
opacity: 1;
}
/* Conteneur principal avec espacement entre les cartes */
:host(enviso-ticket-widget) {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px 0;
}
/* =========================
✨ CARTES ULTRA-MODERNES
========================= */
:host(enviso-ticket-item) .enviso-ticket-item-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
width: 100%;
box-sizing: border-box;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
border: 1.5px solid var(--border-light) !important;
border-left: 4px solid var(--enviso-primary-color) !important;
border-radius: 20px;
padding: 24px 28px;
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
/* Effet de brillance subtil */
:host(enviso-ticket-item) .enviso-ticket-item-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.6s ease;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover::before {
left: 100%;
}
/* Animation de survol premium */
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover {
transform: translateY(-4px) scale(1.01);
border-color: var(--border-hover) !important;
border-left-width: 5px !important;
box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Badge "Premium" en coin optionnel */
:host(enviso-ticket-item) .enviso-ticket-item-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent rgba(174, 24, 8, 0.05) transparent transparent;
opacity: 0;
transition: opacity 0.3s ease;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover::after {
opacity: 1;
}
/* Section Info */
:host(enviso-ticket-item) .enviso-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1;
}
:host(enviso-ticket-item) .enviso-name {
color: var(--enviso-secondary-color);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
transition: color 0.3s ease;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover .enviso-name {
color: var(--enviso-primary-color);
}
:host(enviso-ticket-item) .enviso-price-full {
color: var(--enviso-secondary-color);
font-size: 1.5rem;
font-family: 'Rocher Mistral', sans-serif;
letter-spacing: -0.03em;
}
/* =========================================================
🎯 SÉLECTEUR MODERNE (NUD)
========================================================= */
:host(enviso-ticket-item) .enviso-amount {
margin-left: auto;
z-index: 1;
flex-shrink: 0;
}
:host(enviso-ticket-item) .enviso-nud {
background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
border: 1.5px solid rgba(174, 24, 8, 0.15) !important;
border-radius: 12px;
padding: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 40px;
max-width: 40px;
height: 70px;
}
:host(enviso-ticket-item) .enviso-nud:hover {
border-color: var(--enviso-primary-color) !important;
box-shadow: 0 4px 12px rgba(174, 24, 8, 0.12),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* Boutons + et - */
:host(enviso-ticket-item) .enviso-nud button {
background: transparent !important;
color: var(--enviso-primary-color) !important;
border: none !important;
border-radius: 10px;
width: 40px;
height: 40px;
min-width: 40px;
flex-shrink: 0;
padding: 0;
font-size: 1.4rem !important;
line-height: 1;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
}
:host(enviso-ticket-item) .enviso-nud button:hover {
background: rgba(174, 24, 8, 0.08) !important;
color: var(--enviso-primary-color) !important;
transform: scale(1.1);
}
:host(enviso-ticket-item) .enviso-nud button:active {
transform: scale(0.9);
background: rgba(174, 24, 8, 0.12) !important;
}
:host(enviso-ticket-item) .enviso-nud button:disabled {
opacity: 0.3;
cursor: not-allowed;
background: transparent !important;
color: #999 !important;
transform: none !important;
}
/* Compteur au centre */
:host(enviso-ticket-item) .enviso-nud .enviso-nud-value {
font-weight: 700;
color: var(--enviso-secondary-color);
font-size: 1.1rem;
font-family: 'Rocher Mistral', sans-serif;
padding: 0;
min-width: 24px;
text-align: center;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pulse-subtle {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
:host(enviso-ticket-item) .enviso-nud-value.changed {
animation: pulse-subtle 0.3s ease;
}
/* =========================================================
📱 RESPONSIVE MOBILE PREMIUM
========================================================= */
@media (max-width: 768px) {
:host(enviso-ticket-item) {
margin: 0 auto 32px auto !important;
max-width: 100%;
padding: 0 16px !important;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper {
padding: 20px 22px;
gap: 24px;
}
:host(enviso-ticket-item) .enviso-info {
flex: 1;
}
:host(enviso-ticket-item) .enviso-amount {
margin-left: auto;
flex-shrink: 0;
}
:host(enviso-ticket-item) .enviso-nud {
min-width: 40px;
max-width: 40px;
}
}
@media (max-width: 480px) {
:host(enviso-ticket-item) {
margin: 0 auto 24px auto !important;
padding: 0 12px !important;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper {
padding: 18px;
gap: 20px;
}
:host(enviso-ticket-item) .enviso-name {
font-size: 1.1rem;
}
:host(enviso-ticket-item) .enviso-price-full {
font-size: 1.35rem;
}
}
/* Reset Containers */
:host(enviso-ticket-selection),
:host(enviso-ticket-selection-step),
:host(enviso-ticket-widget) {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}