:host {
--primary: #C9A84C;
--primary-dark: #a8872e;
--primary-a10: rgba(201, 168, 76, 0.10);
--primary-a20: rgba(201, 168, 76, 0.20);
--primary-a50: rgba(201, 168, 76, 0.50);
--ink: #1a1a1a;
--surface: #ffffff;
--surface-alt: #fafafa;
--muted: #f5f5f5;
--disabled: #cccccc;
--shadow: 0 4px 20px rgba(0,0,0,0.06);
--shadow-hover: 0 12px 36px rgba(0,0,0,0.11);
--radius: 16px;
--radius-sm: 10px;
--transition: all 0.25s ease;
--enviso-primary-color: var(--primary);
--enviso-secondary-color: var(--ink);
font-family: 'Crimson Text', Georgia, serif;
font-size: 16px;
color: var(--ink);
}
:host header,
:host button,
:host .enviso-name,
:host .enviso-calendar-header,
:host .enviso-calendar-controls button { font-family: 'Rocher Mistral', sans-serif; }
:host .enviso-title.enviso-time-selection-step-header {
font-family: 'Rocher Mistral', sans-serif;
font-size: 2rem !important;
font-weight: 400 !important;
}
/* --- MASQUAGES GÉNÉRAUX --- */
:host .enviso-ticket-widget-offers-header,
:host .enviso-filter-bar,
: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,
:host .timeslots,
:host .enviso-timeslot-description,
:host .enviso-timeslots-container,
:host button.enviso-btn:has(enviso-icon[name="date-to"]),
:host .enviso-basket-header .enviso-btn:not(.icon-left),
:host .enviso-checkout-header .enviso-btn { display: none !important; }
:host [data-testid="enviso-cross-sell-items-title"],
:host .enviso-cross-sell__title { display: none !important; }
:host .enviso-ticket-widget-cross-sell-header,
:host .enviso-carousel-items { display: none !important; }
/* --- LAYOUT WIDGET --- */
:host(enviso-ticket-widget) {
display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
-webkit-box-orient: vertical !important; -webkit-box-direction: normal !important;
-ms-flex-direction: column !important; flex-direction: column !important;
width: 100% !important; gap: 16px; padding: 24px 0;
}
:host(enviso-ticket-widget) > div,
:host(enviso-ticket-widget) .enviso-ticket-widget-offers,
:host(enviso-ticket-widget) .enviso-ticket-widget-offers-list,
:host(enviso-ticket-widget) .enviso-tickets-list,
:host(enviso-ticket-widget) [class*="offers"],
:host(enviso-ticket-widget) [class*="tickets-list"],
:host(enviso-ticket-widget) [class*="ticket-list"] {
display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
-webkit-box-orient: vertical !important; -webkit-box-direction: normal !important;
-ms-flex-direction: column !important; flex-direction: column !important;
width: 100% !important;
grid-template-columns: none !important;
grid-auto-flow: unset !important;
-webkit-columns: unset !important; -moz-columns: unset !important; columns: unset !important;
}
:host(enviso-ticket-selection),
:host(enviso-ticket-selection-step),
:host(enviso-ticket-widget) {
background: transparent !important;
-webkit-box-shadow: none !important; box-shadow: none !important; border: 0 !important;
}
/* --- CARTES TICKETS --- */
:host(enviso-ticket-item) {
display: block !important; width: 100% !important; max-width: 100% !important;
margin: 0 0 12px !important; padding: 0 !important;
background: transparent !important; border: none !important;
}
:host(enviso-ticket-item)::before,
:host(enviso-ticket-item)::after { content: none !important; }
:host(enviso-ticket-item) .enviso-ticket-item-wrapper {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-ms-flex-direction: row; flex-direction: row;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
gap: 24px; width: 100%; max-width: 700px;
margin-left: auto !important; margin-right: auto !important;
-webkit-box-sizing: border-box; box-sizing: border-box;
background: -webkit-linear-gradient(315deg, #ffffff 0%, #fafafa 100%) !important;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
border: 1.5px solid var(--primary-a20) !important;
border-left: 5px solid var(--primary) !important;
border-radius: var(--radius); padding: 22px 26px;
-webkit-box-shadow: var(--shadow); box-shadow: var(--shadow);
-webkit-transition: var(--transition); transition: var(--transition);
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover {
-webkit-transform: translateY(-3px); transform: translateY(-3px);
border-color: var(--primary-a50) !important; border-left-color: var(--primary-dark) !important;
-webkit-box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
}
:host(enviso-ticket-item) .enviso-info {
-webkit-box-flex: 1; -ms-flex: 1; flex: 1;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal;
-ms-flex-direction: column; flex-direction: column; gap: 6px; min-width: 0;
}
:host(enviso-ticket-item) .enviso-name {
font-size: 1.4rem; font-weight: 400; line-height: 1.3; color: var(--ink);
word-break: break-word; -webkit-transition: color 0.2s ease; transition: color 0.2s ease;
}
:host(enviso-ticket-item) .enviso-ticket-item-wrapper:hover .enviso-name { color: var(--primary-dark); }
:host(enviso-ticket-item) .enviso-price-full { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
:host(enviso-ticket-item) .enviso-amount { -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto; z-index: 1; }
/* --- STEPPER +/- --- */
:host(enviso-ticket-item) .enviso-nud {
background: -webkit-linear-gradient(315deg, #ffffff, #f4f4f4) !important;
background: linear-gradient(145deg, #ffffff, #f4f4f4) !important;
border: 1.5px solid var(--primary-a20) !important; border-radius: var(--radius-sm); padding: 4px;
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
gap: 2px; width: 44px; height: 72px;
}
:host(enviso-ticket-item) .enviso-nud button {
background: transparent !important; color: var(--ink) !important; border: none !important;
width: 44px; height: 32px; padding: 0; font-size: 1.2rem !important; cursor: pointer;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
border-radius: 6px;
-webkit-transition: background 0.2s ease, -webkit-transform 0.15s ease;
transition: background 0.2s ease, transform 0.15s ease;
}
:host(enviso-ticket-item) .enviso-nud button:hover { background: var(--primary-a10) !important; -webkit-transform: scale(1.1); transform: scale(1.1); }
:host(enviso-ticket-item) .enviso-nud .enviso-nud-value {
font-weight: 700; font-size: 1rem; text-align: center; min-width: 20px;
height: 32px;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
/* --- BOUTONS GLOBAUX --- */
:host button, :host .enviso-btn, :host button.enviso-btn, :host(enviso-button) button {
font-family: 'Rocher Mistral', sans-serif; font-weight: 400 !important;
font-size: clamp(18px, 2.5vw, 26px) !important; border-radius: var(--radius-sm);
-webkit-transition: var(--transition); transition: var(--transition);
}
:host(enviso-button)[icon-only] {
width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important;
display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
}
:host(enviso-button)[icon-only] button { width: 48px !important; height: 48px !important; padding: 0 !important; }
:host(enviso-button)[icon-only] svg, :host(enviso-button)[icon-only] enviso-icon { width: 24px !important; height: 24px !important; }
:host .enviso-basket-summary .enviso-btn-primary,
:host .enviso-btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--surface) !important; }
:host .enviso-btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
/* --- CALENDRIER --- */
:host .enviso-day:not([aria-disabled='true']):not(.enviso-selected) {
color: var(--ink) !important; background-color: var(--surface) !important;
border: 1px solid var(--primary-a20) !important; -webkit-transition: var(--transition); transition: var(--transition);
}
:host .enviso-day:not([aria-disabled='true']):not(.enviso-selected):hover { background-color: var(--primary-a10) !important; border-color: var(--primary) !important; cursor: pointer; }
:host .enviso-day.enviso-selected, :host .enviso-day[aria-selected='true'] {
background-color: var(--primary) !important; border-color: var(--primary) !important;
color: var(--surface) !important; font-weight: 700;
-webkit-box-shadow: 0 2px 8px rgba(201,168,76,0.2); box-shadow: 0 2px 8px rgba(201,168,76,0.2);
}
:host .enviso-day[aria-disabled='true'] { background-color: var(--muted) !important; color: var(--disabled) !important; border: 1px solid #eeeeee !important; pointer-events: none; }
:host .enviso-calendar-header, :host .enviso-calendar-controls button { color: var(--ink) !important; }
/* --- PANIER --- */
:host(enviso-basket-item) .enviso-basket-item-wrapper { border-left-color: var(--primary) !important; border-color: var(--primary-a20) !important; border-radius: var(--radius-sm); }
:host .enviso-basket-navigation, :host .enviso-basket-actions, :host .enviso-checkout-actions {
-webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
gap: 24px !important; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
:host .enviso-basket-offer-description-amount { font-family: 'Rocher Mistral', sans-serif; font-weight: 400; font-size: 1.2rem; }
/* =============================================
RESPONSIVE — 640px
============================================= */
@media (max-width: 640px) {
:host(enviso-ticket-item) .enviso-ticket-item-wrapper {
-webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important;
-ms-flex-direction: row !important; flex-direction: row !important;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
padding: 16px; gap: 14px; border-radius: 12px;
max-width: 100%; margin-left: 16px !important; margin-right: 16px !important;
}
:host(enviso-ticket-item) .enviso-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; gap: 5px; }
:host(enviso-ticket-item) .enviso-name { font-size: 1.2rem; font-weight: 400; }
:host(enviso-ticket-item) .enviso-price-full { font-size: 1.05rem; display: block !important; }
:host(enviso-ticket-item) .enviso-amount { -ms-flex-negative: 0; flex-shrink: 0; margin-left: 0; }
:host(enviso-ticket-item) .enviso-nud {
-webkit-box-orient: vertical !important; -webkit-box-direction: normal !important;
-ms-flex-direction: column !important; flex-direction: column !important;
width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 80px !important;
padding: 4px; gap: 0; background: #ffffff !important;
border: 1.5px solid rgba(201,168,76,0.2) !important; border-radius: 10px;
}
:host(enviso-ticket-item) .enviso-nud button { width: 44px !important; height: 32px !important; font-size: 1.2rem !important; color: var(--ink) !important; border-radius: 6px; }
:host(enviso-ticket-item) .enviso-nud .enviso-nud-value { min-width: 44px; font-size: 1rem; font-weight: 700; text-align: center; height: 32px; }
:host(enviso-basket-item), :host .enviso-basket-item-wrapper, :host .enviso-basket-summary {
width: 100% !important; max-width: 100% !important;
-webkit-box-sizing: border-box !important; box-sizing: border-box !important; margin: 0 !important;
}
:host(enviso-basket-item) .enviso-basket-item-wrapper { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
}