/* Angemont Tunnel - v1.5.9
- Logo + gros titre centrés (logo à gauche du titre)
- Sous-titre "Sélectionnez votre date" centré (étape 1)
- Bouton "Continuer" gros en bas à droite
- Police et tailles fixes pour indépendance du thème
*/
/* =====================================================================
CORRECTION URGENTE MODAL MOBILE - DOIT ÊTRE EN PREMIER
===================================================================== */
/* FORCER la largeur de la modal sur mobile - RÈGLE ULTRA-PRIORITAIRE */
@media (max-width: 768px) {
#angemont-tunnel #at-session-modal,
#at-session-modal {
width: 70% !important;
max-width: 340px !important;
min-width: 260px !important;
}
}
@media (max-width: 640px) {
#angemont-tunnel #at-session-modal,
#at-session-modal {
width: 75% !important;
max-width: 320px !important;
min-width: 240px !important;
}
}
@media (max-width: 480px) {
#angemont-tunnel #at-session-modal,
#at-session-modal {
width: 80% !important;
max-width: 300px !important;
min-width: 220px !important;
}
}
@media (max-width: 360px) {
#angemont-tunnel #at-session-modal,
#at-session-modal {
width: 85% !important;
max-width: 280px !important;
min-width: 200px !important;
}
}
/* ===== RÉINITIALISATION COMPLÈTE DES POLICES ===== */
/* Forcer une police cohérente sur tout le tunnel */
#angemont-tunnel,
#angemont-tunnel *,
#angemont-tunnel *::before,
#angemont-tunnel *::after {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-size: inherit !important;
line-height: 1.5 !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
word-spacing: normal !important;
}
/* Réinitialisation spécifique pour les éléments de texte */
#angemont-tunnel h1,
#angemont-tunnel h2,
#angemont-tunnel h3,
#angemont-tunnel h4,
#angemont-tunnel h5,
#angemont-tunnel h6,
#angemont-tunnel p,
#angemont-tunnel span,
#angemont-tunnel div,
#angemont-tunnel a,
#angemont-tunnel button,
#angemont-tunnel input,
#angemont-tunnel select,
#angemont-tunnel textarea,
#angemont-tunnel label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
word-spacing: normal !important;
}
/* Masquage de sécurité (headers/footers des thèmes) */
body.angemont-tunnel-page header,
body.angemont-tunnel-page [role="banner"],
body.angemont-tunnel-page .site-header,
body.angemont-tunnel-page #masthead,
body.angemont-tunnel-page .elementor-location-header,
body.angemont-tunnel-page .et-l--header,
body.angemont-tunnel-page .fl-page-header-wrap,
body.angemont-tunnel-page .ast-mobile-header-wrap,
body.angemont-tunnel-page .wp-site-blocks>header,
body.angemont-tunnel-page .wp-site-blocks>.wp-block-template-part[area="header"],
body.angemont-tunnel-page .wp-site-blocks>.wp-block-template-part[aria-label*="header" i],
body.angemont-tunnel-page footer,
body.angemont-tunnel-page [role="contentinfo"],
body.angemont-tunnel-page .site-footer,
body.angemont-tunnel-page #colophon,
body.angemont-tunnel-page .elementor-location-footer,
body.angemont-tunnel-page .et-l--footer,
body.angemont-tunnel-page .fl-page-footer-wrap,
body.angemont-tunnel-page .ast-footer-wrap,
body.angemont-tunnel-page .wp-site-blocks>footer,
body.angemont-tunnel-page .wp-site-blocks>.wp-block-template-part[area="footer"],
body.angemont-tunnel-page .wp-site-blocks>.wp-block-template-part[aria-label*="footer" i],
body.angemont-tunnel-page .entry-footer,
body.angemont-tunnel-page .site-info,
body.angemont-tunnel-page .copyright,
body.angemont-tunnel-page .credits {
display: none !important;
}
body.angemont-tunnel-page,
body.angemont-tunnel-page .site,
body.angemont-tunnel-page .site-content,
body.angemont-tunnel-page .wp-site-blocks,
body.angemont-tunnel-page .entry-content,
body.angemont-tunnel-page #content {
margin: 0 !important;
padding: 0 !important;
}
body.angemont-tunnel-page {
background: #0b0b0b;
overflow-x: hidden;
}
/* === Layout global === */
#angemont-tunnel.at-fullscreen {
min-height: 100dvh;
background: #0b0b0b;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
position: relative;
overflow: hidden;
/* grille: 1re ligne = logo + titre (centrés), 2e = contenu */
display: grid;
grid-template-columns: auto auto;
grid-template-areas:
"logo title"
"content content";
column-gap: 16px;
row-gap: 8px;
justify-content: center;
align-items: center;
}
/* Sélecteur de langue (style) */
#angemont-tunnel .at-lang-switcher {
position: fixed;
top: 12px;
right: 12px;
z-index: 1000;
background: rgba(15, 15, 15, .55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 12px;
padding: 6px 14px 6px 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .28)
}
#angemont-tunnel .at-lang-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
color: #f7f7f7;
border: none;
outline: none;
font-weight: 600;
letter-spacing: .2px;
padding: 8px 34px 8px 10px;
border-radius: 10px;
position: relative;
min-width: 140px
}
#angemont-tunnel .at-lang-select option {
color: #111;
background: #fff
}
#angemont-tunnel .at-lang-select:focus {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .35)
}
#angemont-tunnel .at-lang-switcher {
position: fixed
}
#angemont-tunnel .at-lang-switcher:after {
content: "\25BE";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #fff;
opacity: .9;
pointer-events: none
}
/* Neutraliser les wrappers du thème */
body.angemont-tunnel-page :where(.site, .site-content, .content-area, #primary, #main,
.entry-content, .post-inner, .hentry,
.container, .container-fluid, .wrap,
.page, .page-content, #content,
.wp-site-blocks, .wp-block-group, .wp-block-cover__inner-container, .alignwide, .alignfull,
.elementor, .elementor-container, .elementor-section, .elementor-section-wrap,
.et_pb_section, .et_pb_row, .et_pb_column,
.fl-builder-content, .fl-row-content-wrap,
.ast-container, .ast-plain-container,
.inside-article, .inside-article > *) {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
clip-path: none !important;
overflow: visible !important;
}
body.angemont-tunnel-page .entry-content>* {
max-width: none !important;
}
/* ===== NEUTRALISATION COMPLÈTE DES POLICES DU THÈME ===== */
/* Empêcher le thème d'influencer les polices du tunnel */
body.angemont-tunnel-page,
body.angemont-tunnel-page *,
body.angemont-tunnel-page *::before,
body.angemont-tunnel-page *::after {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
text-decoration: inherit !important;
text-transform: inherit !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
}
/* Override spécifique pour les éléments qui pourraient être affectés par le thème */
body.angemont-tunnel-page h1,
body.angemont-tunnel-page h2,
body.angemont-tunnel-page h3,
body.angemont-tunnel-page h4,
body.angemont-tunnel-page h5,
body.angemont-tunnel-page h6,
body.angemont-tunnel-page p,
body.angemont-tunnel-page span,
body.angemont-tunnel-page div,
body.angemont-tunnel-page a,
body.angemont-tunnel-page button,
body.angemont-tunnel-page input,
body.angemont-tunnel-page select,
body.angemont-tunnel-page textarea,
body.angemont-tunnel-page label,
body.angemont-tunnel-page .ui-datepicker,
body.angemont-tunnel-page .ui-datepicker * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}
/* === Fond vidéo === */
#angemont-tunnel .at-bg {
position: fixed;
inset: 0;
z-index: 0;
}
#angemont-tunnel .at-bg-video {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.05) contrast(1.05) brightness(.6);
}
#angemont-tunnel .at-bg-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(1200px 600px at 50% 10%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .7)),
linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
}
/* ===== TAILLES DE POLICE FIXES ===== */
/* Titre principal */
#angemont-tunnel .at-hero-title {
font-size: 3rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* Sous-titre */
#angemont-tunnel .at-subtitle {
font-size: 1.375rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: 0.01em !important;
}
/* Bandeau date fixe (pré-sélection) */
#angemont-tunnel .at-fixed-date-banner {
margin-top: 8px;
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
border-radius: 6px;
padding: 8px 12px;
display: inline-block;
font-weight: 600;
}
#angemont-tunnel .at-fixed-date-banner .at-fixed-date {
margin-right: 6px;
}
/* Titres d'étapes */
#angemont-tunnel .at-step h3,
#angemont-tunnel .at-calendar-header h3 {
font-size: 1.5rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
/* Texte de contenu */
#angemont-tunnel .at-step p,
#angemont-tunnel .at-step div:not(.at-card) {
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* Boutons */
#angemont-tunnel .at-btn {
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.02em !important;
}
/* Cartes de produits */
#angemont-tunnel .at-card .at-formula-title,
#angemont-tunnel .at-card .at-option-title {
font-size: 1.125rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
#angemont-tunnel .at-card .at-price {
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
/* Calendrier */
#angemont-tunnel .ui-datepicker {
font-size: 0.875rem !important;
}
#angemont-tunnel .ui-datepicker .ui-datepicker-header {
font-size: 1rem !important;
font-weight: 600 !important;
}
/* Style pour les emojis des thèmes dans le calendrier */
#angemont-tunnel .ui-datepicker td a.ui-state-default {
position: relative !important; /* Nécessaire pour positionner l'emoji en absolu */
}
#angemont-tunnel .ui-datepicker td a.ui-state-default .theme-emoji {
position: absolute !important;
top: 2px !important;
right: 2px !important;
font-size: 18px !important;
z-index: 1000 !important;
line-height: 1 !important;
pointer-events: none !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
display: block !important;
width: auto !important;
height: auto !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
#angemont-tunnel .ui-datepicker td a {
font-size: 0.875rem !important;
font-weight: 500 !important;
}
/* Légende */
#angemont-tunnel .at-calendar-key__label {
font-size: 0.75rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
/* Labels et inputs */
#angemont-tunnel label,
#angemont-tunnel input,
#angemont-tunnel select,
#angemont-tunnel textarea {
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* Modales et popups */
#angemont-tunnel #at-session-modal h3 {
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
#angemont-tunnel #at-session-modal p {
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
#angemont-tunnel .at-pill {
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
/* Barre de progression */
#angemont-tunnel .at-progress-step-label {
font-size: 0.75rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
/* Récapitulatif */
#angemont-tunnel .at-summary-label {
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
#angemont-tunnel .at-summary-value {
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
/* Informations de capacité */
#angemont-tunnel .at-calendar-info {
font-size: 0.75rem !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
/* Override spécifique pour jQuery UI Datepicker */
#angemont-tunnel .ui-datepicker,
#angemont-tunnel .ui-datepicker * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}
#angemont-tunnel .ui-datepicker .ui-datepicker-title {
font-size: 1rem !important;
font-weight: 600 !important;
}
#angemont-tunnel .ui-datepicker .ui-datepicker-calendar th {
font-size: 0.75rem !important;
font-weight: 600 !important;
width: 14.28% !important;
height: 30px !important;
text-align: center !important;
vertical-align: middle !important;
}
#angemont-tunnel .ui-datepicker .ui-datepicker-calendar td {
width: 14.28% !important;
height: 50px !important;
padding: 2px !important;
text-align: center !important;
vertical-align: middle !important;
}
#angemont-tunnel .ui-datepicker .ui-datepicker-calendar td a,
#angemont-tunnel .ui-datepicker .ui-datepicker-calendar td span {
font-size: 0.875rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
min-height: 46px !important;
border-radius: 8px !important;
}
/* Forcer le centrage pour tous les spans (dates fermées) */
#angemont-tunnel .ui-datepicker td span.ui-state-default {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* ===== RÈGLES RESPONSIVE POUR LES POLICES ===== */
/* Mobile - ajustement des tailles */
@media (max-width: 768px) {
#angemont-tunnel .at-hero-title {
font-size: 2.5rem !important;
}
#angemont-tunnel .at-subtitle {
font-size: 1.25rem !important;
}
#angemont-tunnel .at-step h3,
#angemont-tunnel .at-calendar-header h3 {
font-size: 1.25rem !important;
}
#angemont-tunnel .at-card .at-formula-title,
#angemont-tunnel .at-card .at-option-title {
font-size: 1rem !important;
}
#angemont-tunnel .at-card .at-price {
font-size: 1.125rem !important;
}
#angemont-tunnel .at-btn {
font-size: 0.875rem !important;
}
#angemont-tunnel .ui-datepicker {
font-size: 0.75rem !important;
}
#angemont-tunnel .ui-datepicker td a {
font-size: 0.75rem !important;
}
}
/* Très petit écran */
@media (max-width: 480px) {
#angemont-tunnel .at-hero-title {
font-size: 2rem !important;
}
#angemont-tunnel .at-subtitle {
font-size: 1rem !important;
}
#angemont-tunnel .at-step h3,
#angemont-tunnel .at-calendar-header h3 {
font-size: 1.125rem !important;
}
#angemont-tunnel .at-card .at-formula-title,
#angemont-tunnel .at-card .at-option-title {
font-size: 0.875rem !important;
}
#angemont-tunnel .at-card .at-price {
font-size: 1rem !important;
}
#angemont-tunnel .at-btn {
font-size: 0.75rem !important;
}
}
/* === Logo + Gros titre (centrés) === */
#angemont-tunnel .at-header {
grid-area: logo;
position: static !important;
z-index: 2;
padding: 0;
margin: 0;
align-self: center;
justify-self: end;
}
#angemont-tunnel .at-header img,
#angemont-tunnel .at-header .at-logo {
height: clamp(76px, 9vw, 120px);
width: auto;
object-fit: contain;
filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .55));
transition: transform .25s ease;
}
#angemont-tunnel .at-header img:hover {
transform: scale(1.02);
}
#angemont-tunnel .at-hero {
grid-area: title;
z-index: 2;
align-self: center;
justify-self: start;
width: max-content;
}
#angemont-tunnel .at-hero-title {
font-size: clamp(32px, 4.5vw + 8px, 56px);
line-height: 1.05;
text-align: center;
margin: 0;
font-weight: 800;
letter-spacing: .5px;
background: linear-gradient(90deg, #f7e7a9, #d4af37, #f7e7a9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .55));
}
/* === Contenu principal === */
#angemont-tunnel .at-container {
grid-area: content;
max-width: 1600px;
margin: 0 auto;
padding: 12px 24px 24px;
width: 100%;
position: relative;
z-index: 2;
}
#angemont-tunnel .at-steps {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
/* Étapes */
#angemont-tunnel .at-step {
display: none;
}
#angemont-tunnel .at-step.is-active {
display: block;
animation: fadeIn .3s ease;
}
#angemont-tunnel .at-step-hero {
align-items: center;
justify-content: center;
min-height: min(68vh, 720px);
}
#angemont-tunnel .at-step-hero.is-active {
display: flex;
}
/* ===== Étape 1 : sous-titre centré ===== */
#angemont-tunnel .step-1 .at-title {
text-align: center;
margin: 0 auto 16px;
max-width: min(92vw, 900px);
}
/* === Carte calendrier === */
#angemont-tunnel .at-hero-card {
width: clamp(720px, 60vw, 960px);
margin-left: auto;
margin-right: auto;
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
border: 1px solid rgba(212, 175, 55, .3);
border-radius: 20px;
padding: 22px;
box-shadow: 0 10px 42px rgba(0, 0, 0, .55);
backdrop-filter: blur(5px);
overflow: visible;
}
#angemont-tunnel .at-actions-center {
justify-content: center;
}
/* === Datepicker (XL) === */
#angemont-tunnel .at-datepicker-xl .ui-datepicker {
background: #0f0f0f;
border: 1px solid rgba(212, 175, 55, .35);
color: #eee;
padding: 16px 16px 8px 16px;
border-radius: 14px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
overflow: visible;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker-calendar thead th {
color: #f7e7a9;
font-weight: 700;
padding: 6px 0;
}
#angemont-tunnel .at-datepicker-xl td {
padding: 6px;
}
#angemont-tunnel .at-datepicker-xl .ui-state-default {
display: block;
width: 100%;
height: 56px;
margin: 0;
background: #0b0b0b;
border: none;
color: #eee;
border-radius: 12px;
line-height: 56px;
text-align: center;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #0b0b0b;
border: none;
color: #f7e7a9;
border-radius: 12px;
padding: 10px 54px;
font-weight: 800;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-title {
margin: 0 auto;
font-weight: 900;
letter-spacing: .4px;
text-transform: none;
}
/* Précédent / Suivant */
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker .ui-datepicker-next,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #0b0b0b;
border: 1px solid rgba(212, 175, 55, .35);
color: #f7e7a9;
padding: 6px 12px;
border-radius: 999px;
line-height: 1;
font-weight: 800;
cursor: pointer;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev {
left: 10px;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next {
right: 10px;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev .ui-icon,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next .ui-icon {
display: none;
}
#angemont-tunnel .at-datepicker-xl .ui-state-active,
#angemont-tunnel .at-datepicker-xl .ui-state-hover {
background: #d4af37;
color: #0b0b0b;
}
/* === Étapes suivantes (cartes) === */
#angemont-tunnel .at-step[data-step="2"],
#angemont-tunnel .at-step[data-step="3"],
#angemont-tunnel .at-step[data-step="4"] {
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
border: 1px solid rgba(212, 175, 55, .25);
border-radius: 20px;
padding: 22px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
backdrop-filter: blur(4px);
margin-top: 18px;
}
#angemont-tunnel .at-title {
color: #f2d48a;
font-size: 28px;
margin: 0 0 6px;
font-weight: 800;
letter-spacing: .5px;
}
#angemont-tunnel .at-subtitle {
color: #ececec;
margin: 0 0 18px;
opacity: .9;
}
/* === Actions (boutons) — "Retour/Continuer" en bas à droite, design validé === */
#angemont-tunnel .at-actions {
position: fixed;
bottom: max(20px, env(safe-area-inset-bottom));
right: max(20px, env(safe-area-inset-right));
left: auto;
z-index: 50;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 640px) {
#angemont-tunnel .at-actions {
bottom: max(16px, env(safe-area-inset-bottom));
right: max(16px, env(safe-area-inset-right));
gap: 10px;
}
}
/* ===========================================================
BOUTONS SUPER STYLÉS - DESIGN DORÉ PREMIUM
=========================================================== */
#angemont-tunnel .at-btn {
position: relative;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(20, 20, 20, 0.9) 50%,
rgba(0, 0, 0, 0.8) 100%);
border: 2px solid transparent;
background-clip: padding-box;
-webkit-background-clip: padding-box;
color: #f7e7a9;
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 1px;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px rgba(212, 175, 55, 0.3);
min-width: 170px;
}
/* Effet de bordure dorée animée */
#angemont-tunnel .at-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
padding: 2px;
background: linear-gradient(45deg,
#d4af37, #f7e7a9, #d4af37, #b8860b, #d4af37);
background-size: 300% 300%;
animation: goldShimmer 3s ease-in-out infinite;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
z-index: -1;
}
/* Animation du shimmer doré */
@keyframes goldShimmer {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Effet de brillance au survol */
#angemont-tunnel .at-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%);
transform: translateX(-100%) translateY(-100%) rotate(45deg);
transition: transform 0.6s ease;
z-index: 1;
}
#angemont-tunnel .at-btn:hover::after {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
/* Hover effect */
#angemont-tunnel .at-btn:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.15) 50%,
rgba(212, 175, 55, 0.2) 100%);
transform: translateY(-2px);
box-shadow:
0 12px 40px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(212, 175, 55, 0.6);
}
/* Bouton primaire (Continuer) - Style doré premium */
#angemont-tunnel .at-btn.at-primary {
background: linear-gradient(135deg,
#d4af37 0%,
#f7e7a9 25%,
#d4af37 50%,
#b8860b 75%,
#d4af37 100%);
background-size: 200% 200%;
animation: goldPulse 2s ease-in-out infinite;
color: #1a1a1a;
font-weight: 700;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
/* Animation de pulsation dorée */
@keyframes goldPulse {
0%,
100% {
background-position: 0% 50%;
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
50% {
background-position: 100% 50%;
box-shadow:
0 12px 40px rgba(212, 175, 55, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 0 30px rgba(212, 175, 55, 0.5);
}
}
/* Hover pour le bouton primaire */
#angemont-tunnel .at-btn.at-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 16px 48px rgba(212, 175, 55, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 40px rgba(212, 175, 55, 0.7);
}
/* Effet de particules dorées au clic */
#angemont-tunnel .at-btn.at-primary:active {
transform: translateY(-1px) scale(0.98);
animation: goldParticles 0.6s ease-out;
}
@keyframes goldParticles {
0% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
25% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 -10px 20px rgba(212, 175, 55, 0.4),
10px 0 20px rgba(212, 175, 55, 0.4),
-10px 0 20px rgba(212, 175, 55, 0.4);
}
50% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 -15px 30px rgba(212, 175, 55, 0.3),
15px 0 30px rgba(212, 175, 55, 0.3),
-15px 0 30px rgba(212, 175, 55, 0.3);
}
100% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
}
/* Effet de focus pour l'accessibilité */
#angemont-tunnel .at-btn:focus,
#angemont-tunnel .at-btn.at-primary:focus {
outline: none;
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 0 0 3px rgba(212, 175, 55, 0.5);
}
/* Animation d'apparition des boutons */
#angemont-tunnel .at-btn {
animation: buttonAppear 0.8s ease-out;
}
@keyframes buttonAppear {
0% {
opacity: 0;
transform: translateY(20px) scale(0.9);
}
50% {
opacity: 0.7;
transform: translateY(-5px) scale(1.05);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ===========================================================
ÉTAT DE CHARGEMENT DES BOUTONS
=========================================================== */
/* Bouton en état de chargement */
#angemont-tunnel .at-btn.is-loading {
position: relative;
pointer-events: none;
opacity: 0.8;
cursor: not-allowed;
}
/* Spinner de chargement */
#angemont-tunnel .at-btn.is-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: buttonSpinner 1s linear infinite;
z-index: 2;
}
/* Animation du spinner */
@keyframes buttonSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Masquer le texte pendant le chargement */
#angemont-tunnel .at-btn.is-loading {
color: transparent !important;
}
/* Bouton primaire en chargement - garder la couleur dorée */
#angemont-tunnel .at-btn.at-primary.is-loading::before {
border-top-color: #1a1a1a;
}
/* Effet de pulsation pendant le chargement */
#angemont-tunnel .at-btn.is-loading {
animation: loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
0%,
100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.02);
}
}
/* Overlay de chargement pour l'écran complet */
#angemont-loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
flex-direction: column;
}
.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(212, 175, 55, 0.3);
border-top: 4px solid #d4af37;
border-radius: 50%;
animation: loadingSpinner 1s linear infinite;
}
@keyframes loadingSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
color: #f7e7a9;
font-size: 18px;
font-weight: 600;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
/* === Grille formules === */
#angemont-tunnel .at-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
#angemont-tunnel [data-step="2"] .at-grid {
max-width: 1100px;
margin: 0 auto;
}
/* Centrer les formules si il n'y en a que 2 verticales */
#angemont-tunnel [data-step="2"] .at-grid.at-grid-2-formulas {
grid-template-columns: repeat(2, minmax(300px, 350px));
max-width: 750px !important;
margin-left: auto !important;
margin-right: auto !important;
width: auto;
display: grid;
gap: 18px;
justify-content: center;
}
@media (max-width: 768px) {
#angemont-tunnel [data-step="2"] .at-grid.at-grid-2-formulas {
grid-template-columns: 1fr;
max-width: 100%;
}
}
/* === Grille options (étape 3) - Layout adaptatif selon le nombre === */
#angemont-tunnel [data-step="3"] .at-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
}
/* 1 option : centrée */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-1-option {
grid-template-columns: 1fr;
max-width: 400px;
justify-content: center;
}
/* 2 options : 2 colonnes égales */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-2-options {
grid-template-columns: 1fr 1fr;
max-width: 800px;
justify-content: center;
}
/* 3 options : 3 colonnes égales */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-3-options {
grid-template-columns: 1fr 1fr 1fr;
max-width: 1200px;
justify-content: center;
}
/* === Cartes formules === */
#angemont-tunnel .at-card {
display: flex;
flex-direction: column;
background: rgba(17, 17, 17, .72);
border: 1px solid rgba(212, 175, 55, .28);
border-radius: 18px;
overflow: hidden;
min-height: 340px;
position: relative;
box-shadow: 0 6px 26px rgba(0, 0, 0, .4);
backdrop-filter: blur(6px) saturate(1.06);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#angemont-tunnel .at-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
border-color: rgba(212, 175, 55, .45);
background: rgba(17, 17, 17, .78);
}
#angemont-tunnel .at-card .at-card-body {
padding: 16px 16px 8px;
color: #eee;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
#angemont-tunnel .at-card .at-radio-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 900;
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing: .35px;
text-transform: uppercase;
text-align: center;
}
#angemont-tunnel .at-card .at-radio-row input[type="radio"] {
appearance: auto;
-webkit-appearance: auto;
accent-color: #d4af37;
transform: scale(1.1);
}
#angemont-tunnel .at-formula-title {
background: linear-gradient(90deg, #f7e7a9, #d4af37, #f7e7a9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .45));
}
#angemont-tunnel .at-formula .at-price,
#angemont-tunnel .at-card.at-formula .at-price {
text-align: center;
font-size: 20px;
font-weight: 900;
margin: 2px auto 6px;
color: #eee;
text-shadow: 0 0 12px rgba(212, 175, 55, .2);
}
#angemont-tunnel .at-card .at-desc {
color: #ddd;
opacity: .98;
font-size: 13.5px;
line-height: 1.10 !important;
letter-spacing: .01em;
text-align: center !important;
}
#angemont-tunnel .at-card .at-desc * {
line-height: 1.10 !important;
text-align: center !important;
}
/* Override pour les éléments course-group : centrer le contenu */
#angemont-tunnel .at-card .at-desc .course-group {
text-align: center !important;
}
/* Styles pour la structure course-group (parsing des descriptions) - EXACTEMENT comme formulas-display.css */
#angemont-tunnel .at-card .at-desc .course-group {
position: relative !important;
margin: 0 !important;
}
/* Petite ligne de séparation subtile entre les plats */
#angemont-tunnel .at-card .at-desc .course-group:not(:last-child)::after {
content: '' !important;
display: block !important;
width: 40px !important;
height: 1px !important;
background: rgba(255,255,255,0.1) !important;
margin: 15px auto 0 !important;
}
#angemont-tunnel .at-card .at-desc .course-label {
text-transform: uppercase !important;
font-size: 0.7rem !important;
color: #F3E5AB !important;
letter-spacing: 2px !important;
margin-bottom: 8px !important;
display: block !important;
font-weight: 600 !important;
opacity: 0.8 !important;
font-family: 'Montserrat', sans-serif !important;
text-align: center !important;
}
#angemont-tunnel .at-card .at-desc .course-item {
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: #e0e0e0 !important;
font-family: 'Montserrat', sans-serif !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
#angemont-tunnel .at-card .at-desc .course-item em {
font-family: 'Playfair Display', serif !important;
font-size: 0.9rem !important;
color: #a0a0a0 !important;
font-style: italic !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
#angemont-tunnel .at-card .at-desc .option-text {
color: #D4AF37 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
margin-top: 5px !important;
font-family: 'Montserrat', sans-serif !important;
text-align: center !important;
}
/* Styles pour les éléments em spéciaux (titre de section) - seulement si pas dans course-group */
#angemont-tunnel .at-card .at-desc em:first-child:not(.course-item em) {
display: block;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
font-size: 13.5px;
letter-spacing: .07em;
color: #f7e7a9;
opacity: .95;
margin: 4px 0 3px !important;
}
/* Styles pour le texte en gras et italique dans le contenu - seulement si pas dans course-group */
#angemont-tunnel .at-card .at-desc strong:not(.course-item strong),
#angemont-tunnel .at-card .at-desc b:not(.course-item b) {
color: #f7e7a9 !important;
font-weight: 800 !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, .3) !important;
}
#angemont-tunnel .at-card .at-desc em:not(:first-child):not(.course-item em),
#angemont-tunnel .at-card .at-desc i:not(.course-item i) {
color: #f7e7a9 !important;
font-style: italic !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, .3) !important;
}
#angemont-tunnel .at-card .at-desc p {
margin: .10em 0 !important;
}
#angemont-tunnel .at-card .at-desc ul {
margin: .08em 0 !important;
padding: 0 !important;
list-style-position: inside;
}
#angemont-tunnel .at-card .at-desc li {
margin: .08em 0 !important;
}
#angemont-tunnel .at-card .at-desc li::marker {
color: #d4af37;
}
#angemont-tunnel .at-card .at-card-footer {
margin-top: auto;
padding: 12px 16px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px dashed rgba(212, 175, 55, .25);
}
#angemont-tunnel .at-card .at-card-footer label {
color: #f7e7a9;
font-weight: 700;
}
#angemont-tunnel .at-qty {
display: flex;
align-items: center;
gap: 8px;
}
#angemont-tunnel .at-qty input {
width: 88px;
background: #0b0b0b;
color: #fff;
border: 1px solid rgba(212, 175, 55, .35);
border-radius: 10px;
padding: 6px 8px;
text-align: center;
}
#angemont-tunnel .at-qty .at-plus,
#angemont-tunnel .at-qty .at-minus {
background: rgba(212, 175, 55, .16);
border: 1px solid rgba(212, 175, 55, .45);
color: #f7e7a9;
width: 34px;
height: 34px;
border-radius: 10px;
cursor: pointer;
font-weight: 800;
}
#angemont-tunnel .at-qty .at-plus:hover,
#angemont-tunnel .at-qty .at-minus:hover {
background: rgba(212, 175, 55, .24);
}
/* === État désactivé === */
#angemont-tunnel .at-card.is-disabled {
position: relative;
opacity: .55;
pointer-events: none;
filter: saturate(.8) contrast(.9) grayscale(.1);
}
#angemont-tunnel .at-card.is-disabled .at-locked-note {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
background: rgba(15, 15, 15, .75);
border: 1px solid rgba(212, 175, 55, .5);
color: #f7e7a9;
font-weight: 800;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
padding: 10px 14px;
border-radius: 999px;
backdrop-filter: blur(4px) saturate(1.05);
box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2) inset;
white-space: nowrap;
}
#angemont-tunnel .at-card.is-disabled::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(320px 220px at 50% 50%, rgba(0, 0, 0, .45), transparent 70%);
pointer-events: none;
z-index: 2;
}
#angemont-tunnel .at-card.is-disabled .at-locked-note::before {
content: "🔒";
margin-right: 8px;
}
/* ===========================================================
PAGE RÉCAPITULATIF MODERNE ET ÉLÉGANTE
=========================================================== */
/* En-tête de la page récapitulatif */
#angemont-tunnel .at-summary-header {
text-align: center;
margin-bottom: 40px;
padding: 0 20px;
}
#angemont-tunnel .at-summary-header .at-subtitle {
color: #b8b8b8;
font-size: 16px;
margin-top: 8px;
font-weight: 400;
}
/* Container principal */
#angemont-tunnel .at-summary-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-bottom: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Carte principale de résumé */
#angemont-tunnel .at-summary-card {
background: linear-gradient(135deg,
rgba(14, 14, 14, 0.95) 0%,
rgba(20, 20, 20, 0.98) 100%);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
/* En-tête de la carte */
#angemont-tunnel .at-summary-header-card {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.15) 0%,
rgba(247, 231, 169, 0.1) 100%);
padding: 25px 30px;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
align-items: center;
gap: 15px;
}
#angemont-tunnel .at-summary-icon {
font-size: 32px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #d4af37, #f7e7a9);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
#angemont-tunnel .at-summary-header-card h3 {
color: #f7e7a9;
font-size: 20px;
font-weight: 600;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Contenu de la carte */
#angemont-tunnel .at-summary-content {
padding: 30px;
}
#angemont-tunnel .at-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
transition: all 0.3s ease;
}
#angemont-tunnel .at-summary-item:last-child {
border-bottom: none;
}
#angemont-tunnel .at-summary-item:hover {
background: rgba(212, 175, 55, 0.05);
margin: 0 -20px;
padding: 20px;
border-radius: 12px;
}
#angemont-tunnel .at-summary-label {
display: flex;
align-items: center;
gap: 12px;
color: #e0e0e0;
font-weight: 500;
font-size: 15px;
}
#angemont-tunnel .at-summary-icon-small {
font-size: 18px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 175, 55, 0.2);
border-radius: 8px;
}
#angemont-tunnel .at-summary-value {
color: #f7e7a9;
font-weight: 600;
font-size: 16px;
text-align: right;
max-width: 60%;
}
/* Section thème dans le récapitulatif */
#angemont-tunnel .at-summary-theme {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(247, 231, 169, 0.05));
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 8px;
padding: 12px 16px;
margin: 8px 0;
/* Temporaire pour debug */
display: block !important;
}
#angemont-tunnel .at-summary-theme .at-summary-label {
color: #d4af37;
font-weight: 700;
}
#angemont-tunnel .at-summary-theme .at-summary-value {
color: #d4af37;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#angemont-tunnel .at-summary-options .at-summary-value {
text-align: left;
max-width: 100%;
}
/* Styles pour les options */
#angemont-tunnel .option-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: rgba(212, 175, 55, 0.1);
border-radius: 8px;
margin-bottom: 6px;
border: 1px solid rgba(212, 175, 55, 0.2);
}
#angemont-tunnel .option-item:last-child {
margin-bottom: 0;
}
#angemont-tunnel .option-item.no-options {
background: rgba(100, 100, 100, 0.1);
border-color: rgba(100, 100, 100, 0.2);
color: #888;
font-style: italic;
justify-content: center;
}
#angemont-tunnel .option-name {
color: #e0e0e0;
font-weight: 500;
}
#angemont-tunnel .option-qty {
color: #d4af37;
font-weight: 600;
font-size: 14px;
}
/* Carte de prix */
#angemont-tunnel .at-price-card {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
border: 2px solid rgba(212, 175, 55, 0.4);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow:
0 15px 40px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
position: sticky;
top: 20px;
}
#angemont-tunnel .at-price-header {
background: linear-gradient(135deg, #d4af37, #f7e7a9);
padding: 20px 25px;
text-align: center;
}
#angemont-tunnel .at-price-header h3 {
color: #1a1a1a;
font-size: 18px;
font-weight: 700;
margin: 0;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}
#angemont-tunnel .at-price-content {
padding: 25px;
}
#angemont-tunnel .at-price-breakdown {
display: flex;
flex-direction: column;
gap: 15px;
}
#angemont-tunnel .at-price-item {
display: flex;
justify-content: space-between;
align-items: center;
color: #e0e0e0;
font-size: 14px;
}
#angemont-tunnel .at-price-separator {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 175, 55, 0.5) 50%,
transparent 100%);
margin: 10px 0;
}
#angemont-tunnel .at-price-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-top: 2px solid rgba(212, 175, 55, 0.3);
margin-top: 10px;
}
#angemont-tunnel .at-price-total span:first-child {
color: #f7e7a9;
font-weight: 600;
font-size: 16px;
}
#angemont-tunnel .at-total-amount {
color: #d4af37;
font-weight: 700;
font-size: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Informations supplémentaires */
#angemont-tunnel .at-summary-info {
background: rgba(14, 14, 14, 0.8);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 16px;
padding: 20px 25px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
gap: 12px;
}
#angemont-tunnel .at-info-item {
display: flex;
align-items: center;
gap: 12px;
color: #b8b8b8;
font-size: 14px;
}
#angemont-tunnel .at-info-icon {
font-size: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 175, 55, 0.2);
border-radius: 6px;
}
/* Icônes des boutons */
#angemont-tunnel .at-btn-icon {
margin-right: 8px;
font-size: 16px;
}
/* Responsive */
@media (max-width: 768px) {
#angemont-tunnel .at-summary-container {
grid-template-columns: 1fr;
gap: 20px;
}
#angemont-tunnel .at-summary-header-card {
padding: 20px;
}
#angemont-tunnel .at-summary-content {
padding: 20px;
}
#angemont-tunnel .at-price-content {
padding: 20px;
}
#angemont-tunnel .at-summary-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#angemont-tunnel .at-summary-value {
text-align: left;
max-width: 100%;
}
}
/* ===========================================================
ÉTAPE 1 - SÉLECTION DE DATE MODERNE
=========================================================== */
/* Container du calendrier */
#angemont-tunnel .at-calendar-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
#angemont-tunnel .at-calendar-card {
background: linear-gradient(135deg,
rgba(14, 14, 14, 0.95) 0%,
rgba(20, 20, 20, 0.98) 100%);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 24px;
padding: 0;
overflow: hidden;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
animation: calendarAppear 0.8s ease-out;
}
@keyframes calendarAppear {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* En-tête du calendrier */
#angemont-tunnel .at-calendar-header {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.15) 0%,
rgba(247, 231, 169, 0.1) 100%);
padding: 25px 30px;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
position: relative;
}
#angemont-tunnel .at-calendar-header h3 {
color: #f7e7a9;
font-size: 20px;
font-weight: 600;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#angemont-tunnel .at-calendar-info {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
#angemont-tunnel .at-calendar-info .at-info-item {
display: flex;
align-items: center;
gap: 8px;
color: #e0e0e0;
font-size: 14px;
font-weight: 500;
}
#angemont-tunnel .at-calendar-info .at-info-icon {
font-size: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 175, 55, 0.2);
border-radius: 6px;
}
/* Responsive design pour la légende */
@media (max-width: 768px) {
#angemont-tunnel .at-legend-content {
grid-template-columns: 1fr;
gap: 20px;
}
#angemont-tunnel .at-legend-header {
padding: 20px;
}
#angemont-tunnel .at-legend-header h3 {
font-size: 20px;
}
#angemont-tunnel .at-legend-section {
padding: 20px;
}
#angemont-tunnel .at-legend-item {
padding: 12px 15px;
gap: 15px;
}
#angemont-tunnel .at-legend-dot {
width: 20px;
height: 20px;
}
#angemont-tunnel .at-legend-dot .at-dot-inner {
width: 10px;
height: 10px;
}
/* S'assurer que la légende reste en dessous sur mobile */
#angemont-tunnel .at-calendar-legend {
margin-top: 20px;
order: 2 !important;
}
}
/* Forcer l'affichage de la légende sur tous les écrans */
@media (max-width: 480px) {
#angemont-tunnel .at-calendar-legend {
margin-top: 15px;
order: 2 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
clear: both !important;
}
}
/* Styles ultra spécifiques pour forcer la position */
@media (max-width: 768px) {
#angemont-tunnel .step-1 .at-calendar-legend {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
margin-top: 20px !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 769px) {
#angemont-tunnel .step-1 .at-calendar-legend {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
margin-top: 30px !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Modal de sélection de créneau modernisée */
#angemont-tunnel #at-session-modal {
background: linear-gradient(135deg,
rgba(14, 14, 14, 0.98) 0%,
rgba(20, 20, 20, 0.99) 100%);
border: 2px solid rgba(212, 175, 55, 0.4);
border-radius: 20px;
padding: 0;
max-width: 500px;
width: 90%;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Styles mobiles spécifiques pour la modal - FORCER une largeur compacte */
@media (max-width: 768px) {
#angemont-tunnel #at-session-modal {
width: 60% !important;
max-width: 280px !important;
margin: 20px auto !important;
}
}
@media (max-width: 640px) {
#angemont-tunnel #at-session-modal {
width: 65% !important;
max-width: 260px !important;
margin: 20px auto !important;
}
}
@media (max-width: 480px) {
#angemont-tunnel #at-session-modal {
width: 70% !important;
max-width: 240px !important;
margin: 15px auto !important;
}
}
@media (max-width: 360px) {
#angemont-tunnel #at-session-modal {
width: 80% !important;
max-width: 220px !important;
margin: 10px auto !important;
}
}
/* Pop-up: lisibilité sur créneaux à thème (neutraliser effets flashy) */
#angemont-tunnel #at-session-modal .at-pill.has-theme {
background: linear-gradient(135deg, rgba(40, 40, 40, 0.6) 0%, rgba(30, 30, 30, 0.6) 100%) !important;
border-color: rgba(212, 175, 55, 0.25) !important;
transform: none !important;
box-shadow: none !important;
}
#angemont-tunnel #at-session-modal .at-pill.has-theme::before {
display: none !important;
}
#angemont-tunnel #at-session-modal .at-pill.has-theme:hover {
background: linear-gradient(135deg, rgba(40, 40, 40, 0.6) 0%, rgba(30, 30, 30, 0.6) 100%) !important;
border-color: rgba(212, 175, 55, 0.25) !important;
transform: none !important;
box-shadow: none !important;
}
#angemont-tunnel #at-session-modal .at-pill.has-theme .at-pill-title {
color: #f0f0f0 !important;
}
#angemont-tunnel #at-session-modal .at-pill.has-theme .at-pill-time {
color: #b8b8b8 !important;
}
#angemont-tunnel #at-session-modal .at-pill.has-theme .theme-info {
margin-top: 4px;
font-size: 12px;
color: #cfcfcf;
opacity: 0.95;
}
@keyframes modalSlideIn {
0% {
opacity: 0;
transform: translateY(-50px) scale(0.8) rotateX(10deg);
}
50% {
opacity: 0.8;
transform: translateY(-10px) scale(1.02) rotateX(2deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
}
}
#angemont-tunnel .at-modal-header {
background: linear-gradient(135deg, #d4af37, #f7e7a9);
padding: 25px 30px;
text-align: center;
border-radius: 18px 18px 0 0;
}
#angemont-tunnel .at-modal-icon {
font-size: 32px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26, 26, 26, 0.2);
border-radius: 12px;
margin: 0 auto 15px;
}
#angemont-tunnel .at-modal-header h3 {
color: #1a1a1a;
font-size: 20px;
font-weight: 700;
margin: 0 0 8px 0;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}
#angemont-tunnel .at-modal-subtitle {
color: #2a2a2a;
font-size: 14px;
margin: 0;
font-weight: 500;
}
/* Sélection de créneaux */
#angemont-tunnel .at-slot-selection {
padding: 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
#angemont-tunnel .at-pill {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
#angemont-tunnel .at-pill::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
transition: left 0.6s ease;
}
#angemont-tunnel .at-pill:hover::before {
left: 100%;
}
#angemont-tunnel .at-pill:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.1) 100%);
border-color: rgba(212, 175, 55, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}
#angemont-tunnel .at-pill.selected {
background: linear-gradient(135deg, #d4af37, #f7e7a9);
border-color: #d4af37;
color: #1a1a1a;
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
#angemont-tunnel .at-pill-icon {
font-size: 24px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 175, 55, 0.2);
border-radius: 10px;
flex-shrink: 0;
}
#angemont-tunnel .at-pill.selected .at-pill-icon {
background: rgba(26, 26, 26, 0.2);
}
#angemont-tunnel .at-pill-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
#angemont-tunnel .at-pill-title {
font-size: 16px;
font-weight: 600;
color: #f7e7a9;
}
#angemont-tunnel .at-pill.selected .at-pill-title {
color: #1a1a1a;
}
#angemont-tunnel .at-pill-time {
font-size: 14px;
color: #b8b8b8;
font-weight: 500;
}
#angemont-tunnel .at-pill.selected .at-pill-time {
color: #2a2a2a;
}
#angemont-tunnel .at-pill .at-dot {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
}
#angemont-tunnel .at-pill.selected .at-dot {
border-color: #1a1a1a;
}
/* États des pills */
#angemont-tunnel .at-pill.is-disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(135deg,
rgba(100, 100, 100, 0.1) 0%,
rgba(120, 120, 120, 0.05) 100%);
border-color: rgba(100, 100, 100, 0.2);
}
#angemont-tunnel .at-pill.is-disabled:hover {
transform: none;
box-shadow: none;
}
#angemont-tunnel .at-pill.is-disabled .at-pill-title,
#angemont-tunnel .at-pill.is-disabled .at-pill-time {
color: #888;
}
/* Animation de capacité dans les pills */
#angemont-tunnel .at-pill .capacity-info {
font-size: 12px;
color: #b8b8b8;
margin-top: 4px;
font-weight: 500;
}
#angemont-tunnel .at-pill .capacity-info.full {
color: #ff6b6b;
font-weight: 600;
}
#angemont-tunnel .at-pill .capacity-info.available {
color: #51cf66;
font-weight: 600;
}
/* Styles pour l'affichage de disponibilité dans le récapitulatif */
.at-summary-availability .availability-value.available {
color: #28a745;
font-weight: 600;
}
.at-summary-availability .availability-value.full {
color: #dc3545;
font-weight: 600;
}
/* Actions de la modal */
#angemont-tunnel .at-modal-actions {
padding: 20px 30px 30px;
text-align: center;
}
/* Bouton secondaire */
#angemont-tunnel .at-btn-secondary {
background: linear-gradient(135deg,
rgba(100, 100, 100, 0.8) 0%,
rgba(120, 120, 120, 0.9) 100%);
border: 2px solid rgba(150, 150, 150, 0.3);
color: #e0e0e0;
padding: 12px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#angemont-tunnel .at-btn-secondary:hover {
background: linear-gradient(135deg,
rgba(120, 120, 120, 0.9) 0%,
rgba(140, 140, 140, 1) 100%);
border-color: rgba(150, 150, 150, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Responsive pour l'étape 1 */
@media (max-width: 768px) {
#angemont-tunnel .at-calendar-header {
flex-direction: column;
text-align: center;
gap: 20px;
position: relative;
}
#angemont-tunnel .at-calendar-info {
justify-content: center;
}
/* Encart de sélection responsive */
#angemont-tunnel .at-selection-display {
position: absolute;
top: calc(50% + 85px);
right: 20px;
transform: translateY(-50%);
max-width: 100%;
margin: 0;
padding: 12px 20px;
}
#angemont-tunnel .at-selection-content {
justify-content: center;
}
#angemont-tunnel .at-selection-text {
text-align: center;
}
/* Légende responsive tablet - styles supprimés, gérés par la nouvelle légende */
#angemont-tunnel .at-legend-items {
gap: 8px;
}
#angemont-tunnel .at-legend-item {
font-size: 12px;
gap: 10px;
}
#angemont-tunnel .at-slot-selection {
padding: 20px;
}
#angemont-tunnel .at-pill {
padding: 15px;
}
}
/* ===========================================================
ÉTAPES 2 & 3 - FORMULES ET OPTIONS MODERNES
=========================================================== */
/* Styles pour les cartes de formules et options */
#angemont-tunnel .at-card {
background: linear-gradient(135deg,
rgba(14, 14, 14, 0.95) 0%,
rgba(20, 20, 20, 0.98) 100%);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(212, 175, 55, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
animation: cardAppear 0.6s ease-out;
}
@keyframes cardAppear {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#angemont-tunnel .at-card:hover {
border-color: rgba(212, 175, 55, 0.4);
transform: translateY(-5px);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#angemont-tunnel .at-card.selected {
border-color: rgba(212, 175, 55, 0.6);
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
transform: translateY(-3px);
box-shadow:
0 20px 50px rgba(212, 175, 55, 0.2),
0 0 0 1px rgba(212, 175, 55, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Corps des cartes */
#angemont-tunnel .at-card-body {
padding: 25px;
position: relative;
}
/* Titre des formules */
#angemont-tunnel .at-formula-title {
color: #f7e7a9;
font-size: 18px;
font-weight: 600;
margin: 0 0 15px 0;
line-height: 1.3;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Prix */
#angemont-tunnel .at-price {
color: #d4af37;
font-size: 20px;
font-weight: 700;
margin: 0 0 15px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Description */
#angemont-tunnel .at-desc {
color: #b8b8b8;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px 0;
}
#angemont-tunnel .at-desc p {
margin: 0 0 10px 0;
}
#angemont-tunnel .at-desc p:last-child {
margin-bottom: 0;
}
/* Styles pour le texte en gras et italique dans les descriptions */
#angemont-tunnel .at-desc strong,
#angemont-tunnel .at-desc b {
color: #f7e7a9 !important;
font-weight: 800 !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, 0.3) !important;
}
#angemont-tunnel .at-desc em:not(:first-child) {
color: #f7e7a9 !important;
font-style: italic !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, 0.3) !important;
}
#angemont-tunnel .at-desc i {
color: #f7e7a9 !important;
font-style: italic !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, 0.3) !important;
}
/* Ligne radio */
#angemont-tunnel .at-radio-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
#angemont-tunnel .at-radio-row input[type="radio"] {
width: 20px;
height: 20px;
accent-color: #d4af37;
cursor: pointer;
}
/* Contrôles de quantité */
/* Sélecteurs de quantité principaux - Avec boutons + et - */
#angemont-tunnel .at-qty {
display: flex;
align-items: center;
gap: 15px;
margin-top: 15px;
flex-wrap: nowrap;
}
#angemont-tunnel .at-qty-label {
color: #e0e0e0;
font-size: 14px;
font-weight: 500;
min-width: 140px;
flex-shrink: 0;
}
#angemont-tunnel .at-qty-controls {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Boutons + et - restaurés */
#angemont-tunnel .at-minus,
#angemont-tunnel .at-plus {
width: 32px;
height: 32px;
border: 1px solid rgba(212, 175, 55, 0.3);
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
color: #f7e7a9;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
}
#angemont-tunnel .at-minus:hover,
#angemont-tunnel .at-plus:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.1) 100%);
border-color: rgba(212, 175, 55, 0.5);
transform: scale(1.1);
}
/* Input principal - Supprimer les spinners natifs */
#angemont-tunnel .at-qty-input {
width: 60px;
height: 32px;
text-align: center;
border: 1px solid rgba(212, 175, 55, 0.3);
background: rgba(0, 0, 0, 0.3);
color: #f7e7a9;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
/* Supprimer les spinners natifs */
-moz-appearance: textfield;
}
/* Supprimer les spinners sur WebKit (Chrome, Safari) */
#angemont-tunnel .at-qty-input::-webkit-outer-spin-button,
#angemont-tunnel .at-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#angemont-tunnel .at-qty-input:focus {
outline: none;
border-color: rgba(212, 175, 55, 0.6);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
/* Supplément poisson - SOUS le titre avec boutons + et - */
#angemont-tunnel .at-supp-row {
margin-top: 15px;
padding: 15px;
background: rgba(212, 175, 55, 0.05);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
#angemont-tunnel .at-supp-label {
color: #e0e0e0;
font-size: 14px;
font-weight: 500;
width: 100%;
text-align: left;
}
#angemont-tunnel .at-qty-supp {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
}
/* Boutons +/- pour supplément poisson */
#angemont-tunnel .at-supp-minus,
#angemont-tunnel .at-supp-plus {
width: 32px;
height: 32px;
border: 1px solid rgba(212, 175, 55, 0.3);
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
color: #f7e7a9;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
}
#angemont-tunnel .at-supp-minus:hover,
#angemont-tunnel .at-supp-plus:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.1) 100%);
border-color: rgba(212, 175, 55, 0.5);
transform: scale(1.1);
}
/* Input de supplément - Supprimer les spinners natifs */
#angemont-tunnel .at-supp-input {
width: 60px;
height: 32px;
text-align: center;
border: 1px solid rgba(212, 175, 55, 0.3);
background: rgba(0, 0, 0, 0.3);
color: #f7e7a9;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
/* Supprimer les spinners natifs */
-moz-appearance: textfield;
}
/* Supprimer les spinners sur WebKit pour l'input supplément */
#angemont-tunnel .at-supp-input::-webkit-outer-spin-button,
#angemont-tunnel .at-supp-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#angemont-tunnel .at-supp-input:focus {
outline: none;
border-color: rgba(212, 175, 55, 0.6);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
/* Carte spectacle seul */
#angemont-tunnel .at-formula--spectacle {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
border: 2px solid rgba(212, 175, 55, 0.4);
}
#angemont-tunnel .at-spectacle-row {
display: grid;
grid-template-columns: minmax(220px, auto) 140px 1fr max-content;
align-items: center;
gap: 20px;
}
#angemont-tunnel .at-formula--spectacle .at-radio-row {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
#angemont-tunnel .at-formula--spectacle .at-price {
margin: 0;
white-space: nowrap;
font-size: 18px;
}
#angemont-tunnel .at-formula--spectacle .at-desc {
margin: 0;
font-size: 13px;
}
#angemont-tunnel .at-formula--spectacle .at-desc p {
margin: 0;
}
#angemont-tunnel .at-formula--spectacle .at-qty {
margin-left: auto;
white-space: nowrap;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
#angemont-tunnel .at-formula--spectacle .at-qty-label {
margin-right: 0;
font-size: 12px;
}
#angemont-tunnel .at-formula--spectacle .at-qty-controls {
display: flex;
align-items: center;
gap: 6px;
}
#angemont-tunnel .at-formula--spectacle .at-qty-input {
width: 50px;
height: 28px;
font-size: 12px;
}
#angemont-tunnel .at-formula--spectacle .at-minus,
#angemont-tunnel .at-formula--spectacle .at-plus {
width: 28px;
height: 28px;
font-size: 14px;
}
/* Options - styles spécifiques */
#angemont-tunnel .at-option {
position: relative;
}
#angemont-tunnel .at-option .at-media {
margin-bottom: 15px;
border-radius: 12px;
overflow: hidden;
}
#angemont-tunnel .at-option .at-media img {
width: 100%;
height: auto;
border-radius: 12px;
transition: transform 0.3s ease;
}
#angemont-tunnel .at-option:hover .at-media img {
transform: scale(1.05);
}
#angemont-tunnel .at-option-title {
color: #f7e7a9;
font-size: 16px;
font-weight: 600;
margin: 0 0 10px 0;
}
#angemont-tunnel .at-option-price {
color: #d4af37;
font-size: 16px;
font-weight: 600;
margin: 0 0 10px 0;
}
#angemont-tunnel .at-option-desc {
color: #b8b8b8;
font-size: 13px;
line-height: 1.4;
margin: 0 0 15px 0;
}
/* Pied de carte */
#angemont-tunnel .at-card-footer {
padding: 20px 25px;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(212, 175, 55, 0.1);
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}
/* Responsive pour les cartes */
@media (max-width: 980px) {
#angemont-tunnel .at-spectacle-row {
grid-template-columns: 1fr;
gap: 15px;
}
#angemont-tunnel .at-formula--spectacle .at-qty {
margin-left: 0;
align-items: flex-start;
}
#angemont-tunnel .at-card-body {
padding: 20px;
}
#angemont-tunnel .at-card-footer {
padding: 15px 20px;
}
}
@media (max-width: 768px) {
#angemont-tunnel .at-card {
margin-bottom: 20px;
}
/* Supplément poisson en colonne sur mobile - sous le nombre de personnes */
#angemont-tunnel .at-card.at-supp-visible .at-supp-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
order: 3;
/* Placer après le nombre de personnes */
width: 100%;
margin-top: 12px;
}
}
/* ===========================================================
ANIMATIONS ET TRANSITIONS ENTRE ÉTAPES
=========================================================== */
/* Animation d'apparition des étapes */
#angemont-tunnel .at-step {
opacity: 0;
transform: translateX(50px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#angemont-tunnel .at-step.is-active {
opacity: 1;
transform: translateX(0);
}
#angemont-tunnel .at-step.is-exiting {
opacity: 0;
transform: translateX(-50px);
}
/* Animation des cartes avec délai échelonné */
#angemont-tunnel .at-card:nth-child(1) {
animation-delay: 0.1s;
}
#angemont-tunnel .at-card:nth-child(2) {
animation-delay: 0.2s;
}
#angemont-tunnel .at-card:nth-child(3) {
animation-delay: 0.3s;
}
#angemont-tunnel .at-card:nth-child(4) {
animation-delay: 0.4s;
}
#angemont-tunnel .at-card:nth-child(5) {
animation-delay: 0.5s;
}
#angemont-tunnel .at-card:nth-child(6) {
animation-delay: 0.6s;
}
/* Animation de chargement pour les boutons */
#angemont-tunnel .at-btn.is-loading {
position: relative;
pointer-events: none;
opacity: 0.8;
cursor: not-allowed;
}
#angemont-tunnel .at-btn.is-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: buttonSpinner 1s linear infinite;
z-index: 2;
}
@keyframes buttonSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#angemont-tunnel .at-btn.is-loading {
color: transparent !important;
}
#angemont-tunnel .at-btn.at-primary.is-loading::before {
border-top-color: #1a1a1a;
}
/* Animation de particules dorées au clic */
#angemont-tunnel .at-btn.at-primary:active {
animation: goldParticles 0.6s ease-out;
}
@keyframes goldParticles {
0% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
25% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 -10px 20px rgba(212, 175, 55, 0.4),
10px 0 20px rgba(212, 175, 55, 0.4),
-10px 0 20px rgba(212, 175, 55, 0.4);
}
50% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 -15px 30px rgba(212, 175, 55, 0.3),
15px 0 30px rgba(212, 175, 55, 0.3),
-15px 0 30px rgba(212, 175, 55, 0.3);
}
100% {
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3);
}
}
/* Animation de shimmer pour les cartes */
#angemont-tunnel .at-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
transition: left 0.6s ease;
z-index: 1;
pointer-events: none;
}
#angemont-tunnel .at-card:hover::before {
left: 100%;
}
/* Animation de rebond pour les contrôles de quantité */
#angemont-tunnel .at-minus:active,
#angemont-tunnel .at-plus:active,
#angemont-tunnel .at-supp-minus:active,
#angemont-tunnel .at-supp-plus:active {
animation: buttonBounce 0.3s ease;
}
@keyframes buttonBounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
}
/* Animation de validation pour les sélections */
#angemont-tunnel .at-card.selected {
animation: selectionPulse 0.6s ease-out;
}
@keyframes selectionPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
/* Animation de glissement pour les modales */
#angemont-tunnel #at-session-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
/* au-dessus de tout */
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
/* (Revert) Styles globaux retirés, on conserve le ciblage sous #angemont-tunnel */
#angemont-tunnel #at-session-overlay.is-active {
opacity: 1;
visibility: visible;
}
#angemont-tunnel #at-session-overlay.is-active #at-session-modal {
animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#angemont-tunnel #at-session-overlay.is-closing #at-session-modal {
animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Quand l'overlay est ouvert, neutraliser le scroll et tout transform parent gênant */
body.at-overlay-open {
overflow: hidden !important;
}
body.at-overlay-open #angemont-tunnel {
transform: none !important;
perspective: none !important;
}
@keyframes modalSlideOut {
0% {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
}
100% {
opacity: 0;
transform: translateY(-30px) scale(0.9) rotateX(-5deg);
}
}
/* Animation de fade pour les éléments qui apparaissent */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation de slide pour les transitions d'étapes */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOutLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-30px);
}
}
/* Animation de scale pour les éléments interactifs */
#angemont-tunnel .at-pill:active {
animation: pillPress 0.2s ease;
}
@keyframes pillPress {
0% {
transform: scale(1);
}
50% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
/* Animation de glow pour les éléments sélectionnés */
#angemont-tunnel .at-card.selected,
#angemont-tunnel .at-pill.selected {
animation: selectedGlow 2s ease-in-out infinite;
}
@keyframes selectedGlow {
0%,
100% {
box-shadow:
0 20px 50px rgba(212, 175, 55, 0.2),
0 0 0 1px rgba(212, 175, 55, 0.5);
}
50% {
box-shadow:
0 25px 60px rgba(212, 175, 55, 0.3),
0 0 0 1px rgba(212, 175, 55, 0.7);
}
}
/* ===========================================================
BARRE DE PROGRESSION MODERNE
=========================================================== */
#angemont-tunnel .at-progress-container {
position: relative;
z-index: 10;
margin: 30px auto 0;
max-width: 800px;
padding: 0 20px;
}
#angemont-tunnel .at-progress-bar {
position: relative;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(20, 20, 20, 0.9) 100%);
border: 2px solid transparent;
border-radius: 25px;
padding: 25px 35px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
animation: progressBarAppear 0.8s ease-out;
position: relative;
overflow: hidden;
}
#angemont-tunnel .at-progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(247, 231, 169, 0.05) 100%);
border-radius: 25px;
z-index: -1;
}
@keyframes progressBarAppear {
0% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#angemont-tunnel .at-progress-steps {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}
#angemont-tunnel .at-progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
#angemont-tunnel .at-progress-step-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(60, 60, 60, 0.4) 0%,
rgba(80, 80, 80, 0.3) 100%);
border: 2px solid rgba(120, 120, 120, 0.4);
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 3;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#angemont-tunnel .at-progress-step-icon svg {
width: 22px;
height: 22px;
stroke: #b8b8b8;
transition: all 0.3s ease;
}
#angemont-tunnel .at-progress-step-label {
color: #b8b8b8;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
transition: all 0.4s ease;
min-width: 60px;
}
/* États de la barre de progression */
#angemont-tunnel .at-progress-step.completed .at-progress-step-icon {
background: linear-gradient(135deg, #d4af37, #f7e7a9);
border-color: #d4af37;
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
animation: stepCompleted 0.6s ease-out;
}
#angemont-tunnel .at-progress-step.completed .at-progress-step-icon svg {
stroke: #1a1a1a;
}
@keyframes stepCompleted {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#angemont-tunnel .at-progress-step.completed .at-progress-step-label {
color: #f7e7a9;
font-weight: 700;
}
#angemont-tunnel .at-progress-step.active .at-progress-step-icon {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.9) 0%,
rgba(247, 231, 169, 0.7) 100%);
border-color: #d4af37;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
animation: stepActive 2s ease-in-out infinite;
}
#angemont-tunnel .at-progress-step.active .at-progress-step-icon svg {
stroke: #1a1a1a;
}
@keyframes stepActive {
0%,
100% {
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
transform: scale(1);
}
50% {
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.7);
transform: scale(1.05);
}
}
#angemont-tunnel .at-progress-step.active .at-progress-step-label {
color: #d4af37;
font-weight: 700;
}
#angemont-tunnel .at-progress-step:hover:not(.completed):not(.active) .at-progress-step-icon {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.1) 100%);
border-color: rgba(212, 175, 55, 0.4);
transform: scale(1.1);
}
#angemont-tunnel .at-progress-step:hover:not(.completed):not(.active) .at-progress-step-label {
color: #e0e0e0;
}
/* Ligne de progression */
#angemont-tunnel .at-progress-line {
position: absolute;
top: 50%;
left: 12.5%;
right: 12.5%;
height: 4px;
background: linear-gradient(90deg,
rgba(60, 60, 60, 0.4) 0%,
rgba(80, 80, 80, 0.3) 50%,
rgba(60, 60, 60, 0.4) 100%);
border-radius: 4px;
transform: translateY(-50%);
z-index: 1;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
#angemont-tunnel .at-progress-fill {
height: 100%;
background: linear-gradient(90deg,
#d4af37 0%,
#f7e7a9 30%,
#d4af37 70%,
#f7e7a9 100%);
background-size: 300% 100%;
border-radius: 4px;
width: 0%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
animation: progressShimmer 3s ease-in-out infinite;
box-shadow:
0 0 15px rgba(212, 175, 55, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
}
#angemont-tunnel .at-progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
border-radius: 4px;
animation: progressGlow 2s ease-in-out infinite;
}
@keyframes progressShimmer {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes progressGlow {
0%,
100% {
opacity: 0.3;
transform: translateX(-100%);
}
50% {
opacity: 0.6;
transform: translateX(100%);
}
}
/* Responsive pour la barre de progression */
@media (max-width: 768px) {
#angemont-tunnel .at-progress-container {
margin: 20px auto 0;
padding: 0 15px;
}
#angemont-tunnel .at-progress-bar {
padding: 15px 15px;
}
#angemont-tunnel .at-progress-step-icon {
width: 45px;
height: 45px;
}
#angemont-tunnel .at-progress-step-icon svg {
width: 18px;
height: 18px;
}
#angemont-tunnel .at-progress-step-label {
font-size: 10px;
min-width: 50px;
}
#angemont-tunnel .at-progress-line {
left: 10%;
right: 10%;
height: 2px;
}
}
@media (max-width: 480px) {
#angemont-tunnel .at-progress-steps {
gap: 10px;
}
#angemont-tunnel .at-progress-step-icon {
width: 40px;
height: 40px;
}
#angemont-tunnel .at-progress-step-icon svg {
width: 16px;
height: 16px;
}
#angemont-tunnel .at-progress-step-label {
font-size: 9px;
min-width: 40px;
}
/* Légende responsive mobile - styles supprimés, gérés par la nouvelle légende */
}
/* Codes couleur planning */
:root {
--at-violet: #7c3aed;
--at-gold: #d4af37;
--at-violet-soft: rgba(124, 58, 237, .4);
--at-gold-soft: rgba(212, 175, 55, .4);
}
#angemont-tunnel .at-datepicker-xl .slot-lunch a.ui-state-default,
#angemont-tunnel .at-datepicker-xl .slot-lunch a.ui-state-active {
background: var(--at-violet-soft);
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3);
}
#angemont-tunnel .at-datepicker-xl .slot-dinner a.ui-state-default,
#angemont-tunnel .at-datepicker-xl .slot-dinner a.ui-state-active {
background: var(--at-gold-soft);
box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .3);
}
#angemont-tunnel .at-datepicker-xl .slot-both a.ui-state-default,
#angemont-tunnel .at-datepicker-xl .slot-both a.ui-state-active {
background: linear-gradient(135deg, var(--at-violet-soft) 0 50%, var(--at-gold-soft) 50% 100%);
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3), inset 0 0 0 1px rgba(212, 175, 55, .3);
}
#angemont-tunnel .at-datepicker-xl .slot-closed a.ui-state-default {
opacity: .35;
filter: saturate(.6);
}
#angemont-tunnel .at-datepicker-xl td a.ui-state-hover {
filter: brightness(1.08);
}
#angemont-tunnel .at-datepicker-xl td a.ui-state-active {
position: relative;
}
#angemont-tunnel .at-datepicker-xl td a.ui-state-active::after {
content: "";
position: absolute;
inset: 2px;
border: 3px solid var(--at-gold);
border-radius: 12px;
pointer-events: none;
z-index: 2;
}
/* Sélection: dates à thème (assurer le contour jaune au-dessus de l'anneau vert) */
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-active {
position: relative;
}
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-active::after {
content: "";
position: absolute;
inset: 2px;
border: 3px solid var(--at-gold);
border-radius: 12px;
pointer-events: none;
z-index: 2;
}
/* Remplacer l'anneau vert par un anneau jaune quand la date à thème est sélectionnée */
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-active,
#angemont-tunnel .ui-datepicker td a.slot-theme.ui-state-active {
box-shadow: none !important;
}
/* Sélecteur supplémentaire: jQuery UI marque aussi le | sélectionné */
#angemont-tunnel .ui-datepicker td.ui-datepicker-current-day.slot-theme a,
#angemont-tunnel .ui-datepicker td.ui-datepicker-current-day a.slot-theme {
box-shadow: none !important;
}
/* Ancienne légende - désactivée */
#angemont-tunnel .at-legend {
display: none !important;
}
#angemont-tunnel .at-chip {
display: none !important;
}
/* FORCER L'AFFICHAGE DE LA NOUVELLE LÉGENDE - RÈGLE ULTRA SPÉCIFIQUE */
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
transform: none !important;
filter: none !important;
pointer-events: auto !important;
margin-top: 30px !important;
clear: both !important;
}
#angemont-tunnel .at-dot.violet {
background: var(--at-violet);
}
#angemont-tunnel .at-dot.gold {
background: var(--at-gold);
}
#angemont-tunnel .at-dot.both {
background: linear-gradient(135deg, var(--at-violet) 0 50%, var(--at-gold) 50% 100%);
}
#angemont-tunnel .at-open-hours {
margin-top: 8px;
text-align: center;
color: #ddd;
font-size: 12.5px;
opacity: .92;
}
#angemont-tunnel .at-open-hours strong {
color: #f7e7a9;
font-weight: 800;
}
/* Sélecteur Midi/Soir */
#angemont-tunnel .at-service {
margin-top: 14px;
display: none;
}
#angemont-tunnel .at-service.is-visible {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#angemont-tunnel .at-service .at-pill {
cursor: pointer;
user-select: none;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .15);
background: rgba(0, 0, 0, .35);
color: #f7f7f7;
}
#angemont-tunnel .at-service .at-pill[data-slot="lunch"] {
box-shadow: 0 0 0 2px rgba(124, 58, 237, .35) inset;
}
#angemont-tunnel .at-service .at-pill[data-slot="dinner"] {
box-shadow: 0 0 0 2px rgba(212, 175, 55, .35) inset;
}
#angemont-tunnel .at-service .at-pill.is-active {
background: #d4af37;
color: #0b0b0b;
border-color: #d4af37;
box-shadow: none;
}
/* Flèches rondes */
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: #0b0b0b;
border: 1px solid rgba(212, 175, 55, .5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev {
left: 10px;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next {
right: 10px;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev .ui-icon,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next .ui-icon {
display: none;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev:before,
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next:before {
content: "";
display: block;
width: 10px;
height: 10px;
border-right: 2px solid #f7e7a9;
border-bottom: 2px solid #f7e7a9;
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-prev:before {
transform: rotate(135deg);
}
#angemont-tunnel .at-datepicker-xl .ui-datepicker .ui-datepicker-next:before {
transform: rotate(-45deg);
}
/* Bouton "Continuer" désactivé */
#angemont-tunnel .at-btn.is-disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: auto;
filter: grayscale(.2);
}
#angemont-tunnel .at-btn.is-disabled:hover {
background: inherit;
}
/* Z-index contenu > overlay vidéo */
#angemont-tunnel .at-bg,
#angemont-tunnel .at-bg-video {
z-index: 0;
}
#angemont-tunnel .at-bg-overlay {
z-index: 1;
}
#angemont-tunnel .at-hero,
#angemont-tunnel .at-container {
position: relative;
z-index: 2;
}
/* ===========================================================
DOCK CONTAINER (le JS déplace les .at-actions de chaque étape ici)
=========================================================== */
#angemont-tunnel #at-actions-dock {
position: fixed;
bottom: max(20px, env(safe-area-inset-bottom));
right: max(20px, env(safe-area-inset-right));
z-index: 49;
/* juste sous .at-actions (z-index:50) */
width: 0;
height: 0;
/* pas d'impact sur le layout */
pointer-events: none;
/* les clics passent aux boutons enfants */
}
#angemont-tunnel #at-actions-dock .at-actions {
pointer-events: auto;
/* clics réactivés sur les boutons */
}
@media (max-width: 640px) {
#angemont-tunnel #at-actions-dock {
bottom: max(16px, env(safe-area-inset-bottom));
right: max(16px, env(safe-area-inset-right));
}
}
/* ===========================================================
Harmonisation des boutons d'action (toutes étapes + dock)
Application du style premium doré
=========================================================== */
#angemont-tunnel .at-actions .at-btn,
#angemont-tunnel .at-actions .button,
#angemont-tunnel .at-actions .js-next-step,
#angemont-tunnel .at-actions .at-btn-next,
#at-actions-dock .at-actions .at-btn,
#at-actions-dock .at-actions .button,
#at-actions-dock .at-actions .js-next-step,
#at-actions-dock .at-actions .at-btn-next {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(20, 20, 20, 0.9) 50%,
rgba(0, 0, 0, 0.8) 100%) !important;
border: 2px solid transparent !important;
background-clip: padding-box !important;
color: #f7e7a9 !important;
border-radius: 12px !important;
padding: 16px 32px !important;
min-width: 170px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
font-size: 16px !important;
line-height: 1 !important;
text-transform: uppercase !important;
overflow: hidden !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px rgba(212, 175, 55, 0.3) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-webkit-appearance: none !important;
}
/* Effet de bordure dorée animée pour les boutons d'action */
#angemont-tunnel .at-actions .at-btn::before,
#angemont-tunnel .at-actions .button::before,
#angemont-tunnel .at-actions .js-next-step::before,
#angemont-tunnel .at-actions .at-btn-next::before,
#at-actions-dock .at-actions .at-btn::before,
#at-actions-dock .at-actions .button::before,
#at-actions-dock .at-actions .js-next-step::before,
#at-actions-dock .at-actions .at-btn-next::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
border-radius: 12px !important;
padding: 2px !important;
background: linear-gradient(45deg,
#d4af37, #f7e7a9, #d4af37, #b8860b, #d4af37) !important;
background-size: 300% 300% !important;
animation: goldShimmer 3s ease-in-out infinite !important;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
mask-composite: exclude !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
z-index: -1 !important;
}
/* Effet de brillance au survol pour les boutons d'action */
#angemont-tunnel .at-actions .at-btn::after,
#angemont-tunnel .at-actions .button::after,
#angemont-tunnel .at-actions .js-next-step::after,
#angemont-tunnel .at-actions .at-btn-next::after,
#at-actions-dock .at-actions .at-btn::after,
#at-actions-dock .at-actions .button::after,
#at-actions-dock .at-actions .js-next-step::after,
#at-actions-dock .at-actions .at-btn-next::after {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%) !important;
transform: translateX(-100%) translateY(-100%) rotate(45deg) !important;
transition: transform 0.6s ease !important;
z-index: 1 !important;
}
#angemont-tunnel .at-actions .at-btn:hover::after,
#angemont-tunnel .at-actions .button:hover::after,
#angemont-tunnel .at-actions .js-next-step:hover::after,
#angemont-tunnel .at-actions .at-btn-next:hover::after,
#at-actions-dock .at-actions .at-btn:hover::after,
#at-actions-dock .at-actions .button:hover::after,
#at-actions-dock .at-actions .js-next-step:hover::after,
#at-actions-dock .at-actions .at-btn-next:hover::after {
transform: translateX(100%) translateY(100%) rotate(45deg) !important;
}
/* Hover effect pour les boutons d'action */
#angemont-tunnel .at-actions .at-btn:hover,
#angemont-tunnel .at-actions .button:hover,
#angemont-tunnel .at-actions .js-next-step:hover,
#angemont-tunnel .at-actions .at-btn-next:hover,
#at-actions-dock .at-actions .at-btn:hover,
#at-actions-dock .at-actions .button:hover,
#at-actions-dock .at-actions .js-next-step:hover,
#at-actions-dock .at-actions .at-btn-next:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.15) 50%,
rgba(212, 175, 55, 0.2) 100%) !important;
transform: translateY(-2px) !important;
box-shadow:
0 12px 40px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(212, 175, 55, 0.6) !important;
}
/* Style "primaire" (Continuer) - Premium doré */
#angemont-tunnel .at-actions .at-primary,
#angemont-tunnel .at-actions .js-next-step,
#angemont-tunnel .at-actions .at-btn-next,
#at-actions-dock .at-actions .at-primary,
#at-actions-dock .at-actions .js-next-step,
#at-actions-dock .at-actions .at-btn-next {
background: linear-gradient(135deg,
#d4af37 0%,
#f7e7a9 25%,
#d4af37 50%,
#b8860b 75%,
#d4af37 100%) !important;
background-size: 200% 200% !important;
animation: goldPulse 2s ease-in-out infinite !important;
color: #1a1a1a !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3) !important;
}
/* Hover pour le bouton primaire dans les actions */
#angemont-tunnel .at-actions .at-primary:hover,
#angemont-tunnel .at-actions .js-next-step:hover,
#angemont-tunnel .at-actions .at-btn-next:hover,
#at-actions-dock .at-actions .at-primary:hover,
#at-actions-dock .at-actions .js-next-step:hover,
#at-actions-dock .at-actions .at-btn-next:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow:
0 16px 48px rgba(212, 175, 55, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 40px rgba(212, 175, 55, 0.7) !important;
}
/* Effet de particules dorées au clic pour les boutons d'action */
#angemont-tunnel .at-actions .at-primary:active,
#angemont-tunnel .at-actions .js-next-step:active,
#angemont-tunnel .at-actions .at-btn-next:active,
#at-actions-dock .at-actions .at-primary:active,
#at-actions-dock .at-actions .js-next-step:active,
#at-actions-dock .at-actions .at-btn-next:active {
transform: translateY(-1px) scale(0.98) !important;
animation: goldParticles 0.6s ease-out !important;
}
/* Effet de focus pour l'accessibilité des boutons d'action */
#angemont-tunnel .at-actions .at-btn:focus,
#angemont-tunnel .at-actions .at-primary:focus,
#angemont-tunnel .at-actions .js-next-step:focus,
#angemont-tunnel .at-actions .at-btn-next:focus,
#at-actions-dock .at-actions .at-btn:focus,
#at-actions-dock .at-actions .at-primary:focus,
#at-actions-dock .at-actions .js-next-step:focus,
#at-actions-dock .at-actions .at-btn-next:focus {
outline: none !important;
box-shadow:
0 8px 32px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(212, 175, 55, 0.3),
0 0 0 3px rgba(212, 175, 55, 0.5) !important;
}
/* Animation d'apparition pour les boutons d'action */
#angemont-tunnel .at-actions .at-btn,
#angemont-tunnel .at-actions .button,
#angemont-tunnel .at-actions .js-next-step,
#angemont-tunnel .at-actions .at-btn-next,
#at-actions-dock .at-actions .at-btn,
#at-actions-dock .at-actions .button,
#at-actions-dock .at-actions .js-next-step,
#at-actions-dock .at-actions .at-btn-next {
animation: buttonAppear 0.8s ease-out !important;
}
/* État désactivé */
#angemont-tunnel .at-actions .at-btn.is-disabled,
#angemont-tunnel .at-actions .button.is-disabled,
#angemont-tunnel .at-actions .js-next-step.is-disabled,
#angemont-tunnel .at-actions .at-btn-next.is-disabled,
#at-actions-dock .at-actions .at-btn.is-disabled,
#at-actions-dock .at-actions .button.is-disabled,
#at-actions-dock .at-actions .js-next-step.is-disabled,
#at-actions-dock .at-actions .at-btn-next.is-disabled,
#angemont-tunnel .at-actions .at-btn[disabled],
#angemont-tunnel .at-actions .button[disabled],
#angemont-tunnel .at-actions .js-next-step[disabled],
#angemont-tunnel .at-actions .at-btn-next[disabled],
#at-actions-dock .at-actions .at-btn[disabled],
#at-actions-dock .at-actions .button[disabled],
#at-actions-dock .at-actions .js-next-step[disabled],
#at-actions-dock .at-actions .at-btn-next[disabled] {
opacity: .5 !important;
filter: grayscale(.2) !important;
cursor: not-allowed !important;
}
/* Bouton "Retour" (secondaire) - Style premium avec bordure dorée */
#angemont-tunnel .at-actions .js-prev-step,
#at-actions-dock .at-actions .js-prev-step {
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(20, 20, 20, 0.9) 50%,
rgba(0, 0, 0, 0.8) 100%) !important;
color: #f7e7a9 !important;
border: 2px solid transparent !important;
background-clip: padding-box !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px rgba(212, 175, 55, 0.3) !important;
}
/* Effet de bordure dorée pour le bouton Retour */
#angemont-tunnel .at-actions .js-prev-step::before,
#at-actions-dock .at-actions .js-prev-step::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
border-radius: 12px !important;
padding: 2px !important;
background: linear-gradient(45deg,
#d4af37, #f7e7a9, #d4af37, #b8860b, #d4af37) !important;
background-size: 300% 300% !important;
animation: goldShimmer 3s ease-in-out infinite !important;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
mask-composite: exclude !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
z-index: -1 !important;
}
/* Hover pour le bouton Retour */
#angemont-tunnel .at-actions .js-prev-step:hover,
#at-actions-dock .at-actions .js-prev-step:hover {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.2) 0%,
rgba(247, 231, 169, 0.15) 50%,
rgba(212, 175, 55, 0.2) 100%) !important;
transform: translateY(-2px) !important;
box-shadow:
0 12px 40px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(212, 175, 55, 0.6) !important;
}
/* ---- Options : image au-dessus + centrage ---- */
#angemont-tunnel .at-option .at-card-body {
align-items: center;
text-align: center;
}
#angemont-tunnel .at-option .at-media {
width: 100%;
display: flex;
justify-content: center;
margin: 6px 0 12px;
}
#angemont-tunnel .at-option .at-media img.at-product-img {
display: block;
width: clamp(140px, 28vw, 220px);
height: auto;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
object-fit: cover;
}
#angemont-tunnel .at-option .at-option-title {
margin-top: 4px;
}
#angemont-tunnel .at-option .at-option-price {
margin: 4px 0 6px;
}
/* Supprimer le libellé visible, garder accessibilité (sr-only) */
#angemont-tunnel .sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Ajuster un peu le footer et le sélecteur */
#angemont-tunnel .at-option .at-card-footer {
justify-content: center;
border-top: 1px dashed rgba(212, 175, 55, .18);
}
#angemont-tunnel .at-option .at-qty input {
width: 88px;
}
/* Ligne "supplément poisson" sous la quantité principale (étape 2) */
#angemont-tunnel .at-formula .at-supp-row {
margin-top: 8px;
border-top: 1px dashed rgba(212, 175, 55, .18);
padding-top: 10px;
}
#angemont-tunnel .at-formula .at-supp-row label {
color: #f7e7a9;
font-weight: 700;
}
#angemont-tunnel .at-formula .at-supp-input {
width: 88px;
background: #0b0b0b;
color: #fff;
border: 1px solid rgba(212, 175, 55, .35);
border-radius: 10px;
text-align: center;
padding: 6px 8px;
}
#angemont-tunnel .at-formula .at-supp-plus,
#angemont-tunnel .at-formula .at-supp-minus {
background: rgba(212, 175, 55, .16);
border: 1px solid rgba(212, 175, 55, .45);
color: #f7e7a9;
width: 34px;
height: 34px;
border-radius: 10px;
font-weight: 800;
}
#angemont-tunnel .at-formula .at-supp-plus:hover,
#angemont-tunnel .at-formula .at-supp-minus:hover {
background: rgba(212, 175, 55, .24);
}
/* Masquer la ligne "supplément poisson" tant que qty = 0 */
#angemont-tunnel .at-formula .at-supp-row {
display: none;
}
/* Afficher le supplément quand la carte est marquée visible (PC et Mobile) */
/* Logique: afficher si nombre de personnes >= 1, sinon masquer */
#angemont-tunnel .step-2 .at-card.at-supp-visible .at-supp-row {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* S'assurer que le supplément reste masqué si pas de quantité (tous écrans) */
#angemont-tunnel .step-2 .at-card:not(.at-supp-visible) .at-supp-row {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* === Sélecteur de langue du tunnel ===
*/
#angemont-tunnel .at-lang-switcher {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
}
#angemont-tunnel .at-lang-select {
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(212, 175, 55, 0.4);
color: #f7e7a9;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(10px);
text-align: center;
text-align-last: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f7e7a9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 28px;
}
#angemont-tunnel .at-lang-select:hover {
border-color: rgba(212, 175, 55, 0.6);
background: rgba(0, 0, 0, 0.85);
}
#angemont-tunnel .at-lang-select option {
background: #0a0a0a;
color: #f7e7a9;
}
/* ================================
MOBILE (≤640px) — layout compact
Logo centré + agrandi, titre dessous,
sous-titre, (pills), calendrier,
Légende SOUS le calendrier.
================================ */
@media (max-width:640px) {
/* Réduire le sélecteur de langue sur mobile */
#angemont-tunnel .at-lang-switcher {
position: absolute !important;
top: 10px !important;
right: 10px !important;
max-width: 60px !important;
}
#angemont-tunnel .at-lang-select {
max-width: 60px !important;
min-width: 50px !important;
font-size: 12px !important;
padding: 4px 20px 4px 6px !important;
height: 32px !important;
background-position: right 4px center !important;
text-align: center !important;
text-align-last: center !important;
}
/* Visibilité stricte des étapes (évite que l’étape 1 reste affichée) */
#angemont-tunnel .at-step {
display: none !important;
}
#angemont-tunnel .at-step.is-active {
display: block !important;
}
/* Étape 1 en flex seulement quand active (pour l’ordre) */
#angemont-tunnel .step-1.is-active {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Grille globale : une seule colonne */
#angemont-tunnel.at-fullscreen {
grid-template-columns: 1fr !important;
grid-template-areas:
"logo"
"title"
"content" !important;
justify-items: center !important;
align-items: start !important;
row-gap: 6px !important;
}
/* Logo bien visible et centré */
#angemont-tunnel .at-header {
justify-self: center !important;
margin: 10px 0 0 !important;
}
#angemont-tunnel .at-header img,
#angemont-tunnel .at-header .at-logo {
height: 150px !important;
/* ↑ plus grand */
width: auto !important;
}
/* Titre centré juste sous le logo */
#angemont-tunnel .at-hero {
justify-self: center !important;
width: 100% !important;
margin: 2px 0 0 !important;
text-align: center !important;
}
#angemont-tunnel .at-hero-title {
display: block !important;
width: 100% !important;
max-width: 92% !important;
margin: 0 auto !important;
text-align: center !important;
font-size: clamp(26px, 6.6vw, 32px) !important;
line-height: 1.16 !important;
}
/* Étape 1 : ordre visuel + espacements serrés */
.step-1 .at-title {
order: 2 !important;
width: 100% !important;
max-width: 92% !important;
text-align: center !important;
font-size: 20px !important;
margin: 8px auto 6px !important;
}
/* Boutons Midi/Soir (si affichés) */
.step-1 .at-service {
order: 3 !important;
display: none !important;
}
.step-1 .at-service.is-visible {
display: flex !important;
width: 100% !important;
max-width: 92% !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 auto 8px !important;
}
/* Carte calendrier — compacte */
.step-1 .at-hero-card {
order: 4 !important;
width: 100% !important;
max-width: 340px !important;
/* ↓ un peu plus petit */
margin: 0 auto !important;
padding: 12px !important;
border-radius: 14px !important;
}
.at-datepicker-xl .ui-datepicker {
width: 100% !important;
padding: 10px !important;
}
.at-datepicker-xl .ui-datepicker .ui-datepicker-header {
padding: 8px 40px !important;
}
.at-datepicker-xl .ui-datepicker-calendar thead th {
font-size: 12px !important;
padding: 4px 0 !important;
}
.at-datepicker-xl td {
padding: 3px !important;
}
.at-datepicker-xl .ui-state-default {
height: 36px !important;
line-height: 36px !important;
font-size: 13px !important;
border-radius: 10px !important;
}
.at-datepicker-xl .ui-datepicker .ui-datepicker-prev,
.at-datepicker-xl .ui-datepicker .ui-datepicker-next {
width: 30px !important;
height: 30px !important;
}
/* Ancienne légende - désactivée */
.angemont-planning .at-legend,
.angemont-planning .legend,
.angemont-planning [class*="legend"] {
display: none !important;
}
.step-1 .at-open-hours {
order: 6 !important;
font-size: 11.5px !important;
margin: 4px auto 0 !important;
text-align: center !important;
}
/* Conteneur : réserve pour le bouton flottant */
#angemont-tunnel .at-container {
padding-left: 12px !important;
padding-right: 12px !important;
padding-bottom: 96px !important;
}
/* Dock boutons (Continuer / Retour) */
#angemont-tunnel #at-actions-dock {
bottom: max(12px, env(safe-area-inset-bottom)) !important;
right: max(12px, env(safe-area-inset-right)) !important;
}
#angemont-tunnel .at-actions .at-btn,
#angemont-tunnel .at-actions .button,
#angemont-tunnel .at-actions .js-next-step,
#angemont-tunnel .at-actions .at-btn-next {
min-width: 140px !important;
padding: 14px 20px !important;
font-size: 15px !important;
border-radius: 10px !important;
}
/* Étapes 2/3/4 : cartes en 1 colonne et contrôles compacts */
#angemont-tunnel .at-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* Options (étape 3) : Layout adaptatif sur mobile aussi */
#angemont-tunnel [data-step="3"] .at-grid {
gap: 12px !important;
}
/* 1 option mobile : 1 colonne */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-1-option {
grid-template-columns: 1fr !important;
max-width: 300px !important;
}
/* 2 options mobile : 2 colonnes égales */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-2-options {
grid-template-columns: 1fr 1fr !important;
max-width: 600px !important;
}
/* 3+ options mobile : 2 par ligne */
#angemont-tunnel [data-step="3"] .at-grid.at-grid-3-options,
#angemont-tunnel [data-step="3"] .at-grid:not(.at-grid-1-option):not(.at-grid-2-options):not(.at-grid-3-options) {
grid-template-columns: repeat(2, 1fr) !important;
max-width: 600px !important;
}
#angemont-tunnel .at-card {
min-height: unset !important;
}
#angemont-tunnel .at-card .at-card-body {
padding: 14px 14px 8px !important;
}
#angemont-tunnel .at-qty input,
#angemont-tunnel .at-formula .at-supp-input {
width: 72px !important;
}
#angemont-tunnel .at-qty .at-plus,
#angemont-tunnel .at-qty .at-minus,
#angemont-tunnel .at-formula .at-supp-plus,
#angemont-tunnel .at-formula .at-supp-minus {
width: 32px !important;
height: 32px !important;
}
#angemont-tunnel .at-option .at-media img.at-product-img {
width: clamp(140px, 64vw, 200px) !important;
}
}
/* ===== Angemont Tunnel additions: complete states & legend placement ===== */
:root {
--at-red: #dc3545;
--at-red-soft: rgba(220, 53, 69, .4);
}
/* ===== Dates complètes ===== */
/* Toutes les règles de couleurs des dates complètes sont maintenant dans calendar-colors.css */
/* Pastilles de légende supplémentaires */
#angemont-tunnel .at-dot.red {
background: var(--at-red) !important;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}
#angemont-tunnel .at-dot.both-full-lunch {
background: linear-gradient(135deg, var(--at-red) 0 50%, var(--at-gold) 50% 100%) !important;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3), 0 0 0 2px rgba(212, 175, 55, 0.3);
}
#angemont-tunnel .at-dot.both-full-dinner {
background: linear-gradient(135deg, var(--at-violet) 0 50%, var(--at-red) 50% 100%) !important;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3), 0 0 0 2px rgba(220, 53, 69, 0.3);
}
#angemont-tunnel .at-dot.theme {
background: #39b36e !important;
box-shadow: 0 0 0 2px rgba(57, 179, 110, 0.3);
}
/* Mobile : placer la légende SOUS le calendrier (ciblage exact du markup) */
@media (max-width:640px) {
/* Ancienne légende - désactivée */
#angemont-tunnel .at-legend .at-chip {
display: none !important;
}
#angemont-tunnel .at-legend .at-dot {
display: none !important;
}
#angemont-tunnel .step-1 .at-open-hours {
order: 6 !important;
font-size: 11.5px !important;
margin: 4px auto 0 !important;
text-align: center !important;
}
/* Nouvelle légende - toujours visible */
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 15px auto 0;
padding: 15px;
}
}
/* Écrans moyens (entre 480px et 640px) */
@media (max-width: 640px) and (min-width: 481px) {
/* Ancienne légende - désactivée */
#angemont-tunnel .at-legend .at-chip {
display: none !important;
}
#angemont-tunnel .at-legend .at-dot {
display: none !important;
}
/* Nouvelle légende - toujours visible */
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 20px !important;
}
}
/* Très petits écrans (moins de 480px) */
@media (max-width: 480px) {
/* Ancienne légende - désactivée */
#angemont-tunnel .at-legend .at-chip {
display: none !important;
}
#angemont-tunnel .at-legend .at-dot {
display: none !important;
}
/* Texte des heures plus petit */
#angemont-tunnel .step-1 .at-open-hours {
font-size: 10px !important;
}
/* Nouvelle légende - toujours visible */
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 12px;
}
}
/* === Légende SOUS le calendrier sur PC (sans rien casser ailleurs) === */
@media (min-width:641px) {
#angemont-tunnel .step-1 .at-hero-card {
display: flex;
/* on impose un flux vertical dans la carte calendrier */
flex-direction: column;
align-items: center;
}
#angemont-tunnel .step-1 .at-hero-card .at-datepicker {
order: 1;
}
/* Ancienne légende - désactivée */
#angemont-tunnel .step-1 .at-legend {
display: none !important;
}
#angemont-tunnel .step-1 .at-open-hours {
order: 3;
}
/* Nouvelle légende - toujours visible */
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 20px !important;
}
}
/* Pastille "Midi (soir complet)" = violet → rouge */
:root {
--at-red: #dc3545;
}
#angemont-tunnel .at-dot.both-full-dinner {
background: linear-gradient(135deg, var(--at-violet) 0 50%, var(--at-red) 50% 100%);
}
/* --- PATCH pastille "Midi (soir complet)" (violet → rouge) --- */
:root {
--at-red: #dc3545;
}
/* au cas où non défini */
#angemont-tunnel .at-dot.red,
#angemont-tunnel .at-dot.both-full-lunch,
#angemont-tunnel .at-dot.both-full-dinner {
display: inline-block;
/* garantit largeur/hauteur sur */
width: 12px;
height: 12px;
/* même taille que tes autres pastilles */
border-radius: 50%;
}
#angemont-tunnel .at-dot.red {
background: var(--at-red) !important;
}
#angemont-tunnel .at-dot.both-full-lunch {
/* Soir ouvert + Midi complet => Rouge → Or */
background: linear-gradient(135deg, var(--at-red) 0 50%, var(--at-gold) 50% 100%) !important;
}
#angemont-tunnel .at-dot.both-full-dinner {
/* Midi ouvert + Soir complet => Violet → Rouge */
background: linear-gradient(135deg, var(--at-violet) 0 50%, var(--at-red) 50% 100%) !important;
}
/* ===== Styles pour l'affichage de disponibilité ===== */
#angemont-tunnel .step-4 .availability-value.available {
color: #39b36e;
font-weight: 600;
}
#angemont-tunnel .step-4 .availability-value.warning {
color: #f39c12;
font-weight: 600;
}
#angemont-tunnel .step-4 .availability-value.full {
color: #e74c3c;
font-weight: 600;
}
#angemont-tunnel .step-4 .at-btn-next.disabled {
opacity: 0.5;
cursor: not-allowed;
background: #95a5a6 !important;
border-color: #95a5a6 !important;
}
#angemont-tunnel .step-4 .at-btn-next.disabled:hover {
background: #95a5a6 !important;
border-color: #95a5a6 !important;
transform: none !important;
}
/* ===== Popup d'avertissement de capacité ===== */
.angt-capacity-warning-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.angt-capacity-warning-overlay.angt-capacity-warning-show {
opacity: 1;
}
.angt-capacity-warning-popup {
background: white;
border-radius: 16px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.angt-capacity-warning-overlay.angt-capacity-warning-show .angt-capacity-warning-popup {
transform: scale(1) translateY(0);
}
.angt-capacity-warning-header {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 20px;
border-radius: 16px 16px 0 0;
display: flex;
align-items: center;
gap: 12px;
}
.angt-capacity-warning-icon {
font-size: 24px;
}
.angt-capacity-warning-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.angt-capacity-warning-content {
padding: 24px;
line-height: 1.6;
}
.angt-capacity-warning-content p {
margin: 0 0 16px 0;
color: #333;
}
.angt-capacity-warning-content p:last-of-type {
margin-bottom: 16px;
}
.angt-capacity-warning-content ul {
margin: 16px 0;
padding-left: 20px;
}
.angt-capacity-warning-content li {
margin: 8px 0;
color: #555;
}
.angt-capacity-warning-footer {
padding: 20px 24px;
border-top: 1px solid #eee;
text-align: center;
}
.angt-capacity-warning-btn {
background: linear-gradient(135deg, #d4af37, #b8941f);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
}
.angt-capacity-warning-btn:hover {
background: linear-gradient(135deg, #b8941f, #a0851a);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.angt-capacity-warning-popup {
width: 95%;
margin: 20px;
}
.angt-capacity-warning-header {
padding: 16px;
}
.angt-capacity-warning-content {
padding: 20px;
}
.angt-capacity-warning-footer {
padding: 16px 20px;
}
}
/* ===== Dates à thème (vert) ===== */
/* Le Datepicker applique la classe sur | , donc on cible les deux cas (td et a) par robustesse */
#angemont-tunnel .ui-datepicker td.slot-theme a,
#angemont-tunnel .ui-datepicker td a.slot-theme {
position: relative;
border-radius: 12px !important;
/* Même arrondi que les autres cases */
/* anneau vert qui reste visible même si on a des dégradés rouge "complet" en fond */
box-shadow: inset 0 0 0 2px #39b36e;
}
#angemont-tunnel .ui-datepicker td.slot-theme a:hover,
#angemont-tunnel .ui-datepicker td a.slot-theme:hover {
box-shadow: inset 0 0 0 3px #2e9159;
}
/* Supprimer complètement le petit point sur les dates à thème (sélectionnées ou non) */
#angemont-tunnel .ui-datepicker td.slot-theme a::after,
#angemont-tunnel .ui-datepicker td a.slot-theme::after {
content: none !important;
}
/* ===== Dates multi-formules (orange) ===== */
/* Le Datepicker applique la classe sur | , donc on cible les deux cas (td et a) par robustesse */
/* Styles pour les dates multi-formules - RETIRÉ (pas d'affichage visuel dans le calendrier) */
/* Les formules multiples sont toujours autorisées mais sans indication visuelle */
display: block !important;
padding: .2em !important;
/* cohérent avec jQuery UI */
border-radius: 12px !important;
/* Même arrondi que les autres cases */
box-shadow: inset 0 0 0 2px #ff8c42 !important;
}
/* Pastille de légende "date à thème" (si tu utilises .at-dot.theme / .at-dot.green) */
#angemont-tunnel .at-dot.theme,
#angemont-tunnel .at-dot.green {
background-color: #39b36e;
}
/* Pastille de légende "date multi-formules" */
/* Style multi-formula retiré - pas d'affichage visuel */
/* #angemont-tunnel .at-dot.multi-formula {
background-color: #ff8c42;
box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.3);
} */
/* ====== Dates à thème (vert) — affichage robuste ====== */
/* jQuery UI met la classe sur | (et parfois directement sur ), on gère les deux */
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-default,
#angemont-tunnel .ui-datepicker td a.slot-theme.ui-state-default {
border-radius: 12px !important;
/* Même arrondi que les autres cases */
/* anneau vert visible même si un fond (complet) rouge ou autre est appliqué */
box-shadow: inset 0 0 0 2px #39b36e !important;
}
/* (Revert) — garder le comportement du calendrier par défaut; réglages de lisibilité pris en charge dans la pop-up uniquement */
/* Hover/focus un peu plus marqué */
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-default:hover,
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-default:focus,
#angemont-tunnel .ui-datepicker td a.slot-theme.ui-state-default:hover {
box-shadow: inset 0 0 0 3px #2e9159 !important;
}
/* Si le jour est rendu en (non sélectionnable), on force le rendu bloc pour voir l'anneau */
#angemont-tunnel .ui-datepicker td.slot-theme span {
display: block !important;
padding: .2em !important;
/* cohérent avec jQuery UI */
border-radius: 12px !important;
/* Même arrondi que les autres cases */
}
/* Pastille de légende (si utilisée) */
#angemont-tunnel .at-dot.theme,
#angemont-tunnel .at-dot.green {
background-color: #39b36e;
}
/* ===== RÈGLE ULTRA SPÉCIFIQUE POUR FORCER L'AFFICHAGE DE LA LÉGENDE ===== */
/* Cette règle doit être la dernière pour surcharger tous les autres styles */
#angemont-tunnel .step-1 .at-calendar-legend,
#angemont-tunnel .at-calendar-legend {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
clear: both !important;
margin-top: 30px !important;
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 1200px !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
filter: none !important;
pointer-events: auto !important;
z-index: 10 !important;
order: 2 !important;
/* Debug temporaire - bordure rouge pour voir la légende */
border: 2px solid red !important;
background: rgba(255, 0, 0, 0.1) !important;
}
/* Forcer l'affichage sur tous les écrans */
@media (max-width: 768px) {
#angemont-tunnel .step-1 .at-calendar-legend,
#angemont-tunnel .at-calendar-legend {
margin-top: 20px !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
#angemont-tunnel .step-1 .at-calendar-legend,
#angemont-tunnel .at-calendar-legend {
margin-top: 15px !important;
max-width: 100% !important;
}
}
/* ===== Nouvelle légende sous le calendrier (clean override) ===== */
#angemont-tunnel .at-calendar-key {
margin: 16px auto 0;
max-width: 900px;
padding: 12px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(14, 14, 14, .9), rgba(20, 20, 20, .96));
border: 1px solid rgba(212, 175, 55, .22);
box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(212, 175, 55, .08) inset;
backdrop-filter: blur(6px);
}
#angemont-tunnel .at-calendar-key__title {
color: #f7e7a9;
font-weight: 800;
font-size: 13px;
letter-spacing: .4px;
margin: 0 0 10px;
text-transform: uppercase;
opacity: .95;
text-align: center;
}
/* Règles dupliquées supprimées - gérées plus haut */
#angemont-tunnel .at-calendar-key__dot {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .10);
flex: 0 0 14px;
margin-right: 8px;
}
#angemont-tunnel .at-calendar-key__dot--lunch {
background: var(--at-violet, #7c3aed) !important;
box-shadow: 0 0 0 2px rgba(124, 58, 237, .45) !important;
}
#angemont-tunnel .at-calendar-key__dot--dinner {
background: #f0c84b !important;
box-shadow: 0 0 0 2px rgba(212, 175, 55, .65) !important;
}
#angemont-tunnel .at-calendar-key__dot--both {
background: linear-gradient(135deg, var(--at-violet, #7c3aed) 0 50%, var(--at-gold, #d4af37) 50% 100%);
}
#angemont-tunnel .at-calendar-key__dot--theme {
background: #39b36e;
}
#angemont-tunnel .at-calendar-key__dot--full {
background: var(--at-red, #dc3545);
}
#angemont-tunnel .at-calendar-key__label {
white-space: nowrap;
}
@media (max-width:640px) {
#angemont-tunnel .at-calendar-key {
max-width: 92%;
margin-top: 12px;
padding: 10px 12px;
}
#angemont-tunnel .at-calendar-key__list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 4px !important;
overflow-x: auto !important;
justify-content: flex-start !important;
}
#angemont-tunnel .at-calendar-key__item {
font-size: 9px;
padding: 4px 6px;
white-space: nowrap;
flex-shrink: 0 !important;
}
#angemont-tunnel .at-calendar-key__dot {
width: 6px !important;
height: 6px !important;
}
}
/* ===== CORRECTIONS PERDUES ===== */
/* Neutraliser les bordures blanches du datepicker */
#angemont-tunnel .at-datepicker-xl table,
#angemont-tunnel .at-datepicker-xl thead,
#angemont-tunnel .at-datepicker-xl tbody,
#angemont-tunnel .at-datepicker-xl tr,
#angemont-tunnel .at-datepicker-xl th,
#angemont-tunnel .at-datepicker-xl td,
#angemont-tunnel .at-datepicker-xl .ui-widget-content {
background: transparent !important;
border: none !important;
}
/* Restaurer les couleurs des dates */
#angemont-tunnel .at-datepicker-xl .slot-lunch a.ui-state-default {
background: var(--at-violet-soft);
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .45);
color: #fff !important;
}
#angemont-tunnel .at-datepicker-xl .slot-dinner a.ui-state-default {
background: var(--at-gold-soft);
box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .45);
color: #fff !important;
}
#angemont-tunnel .at-datepicker-xl .slot-both a.ui-state-default {
background: linear-gradient(135deg, var(--at-violet-soft) 0 50%, var(--at-gold-soft) 50% 100%);
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .45), inset 0 0 0 1px rgba(212, 175, 55, .45);
color: #fff !important;
}
/* Style élégant pour les dates passées (fermées à la réservation) */
#angemont-tunnel .at-datepicker-xl .slot-past-closed a.ui-state-default,
#angemont-tunnel .at-datepicker .slot-past-closed a.ui-state-default,
#angemont-tunnel .slot-past-closed a.ui-state-default,
#angemont-tunnel .slot-past-closed a,
#angemont-tunnel .slot-past-closed,
.slot-past-closed a.ui-state-default,
.slot-past-closed a {
opacity: 0.5 !important;
background: #666 !important;
color: #ccc !important;
cursor: not-allowed !important;
text-decoration: line-through !important;
border-radius: 4px !important;
box-shadow: none !important;
font-weight: normal !important;
border: 1px solid #555 !important;
transition: all 0.2s ease !important;
position: relative !important;
}
/* Effet de survol désactivé pour les dates passées */
#angemont-tunnel .at-datepicker-xl .slot-past-closed a.ui-state-default:hover,
#angemont-tunnel .at-datepicker .slot-past-closed a.ui-state-default:hover,
.slot-past-closed a.ui-state-default:hover,
.slot-past-closed a:hover {
opacity: 0.5 !important;
background: #666 !important;
color: #ccc !important;
transform: none !important;
box-shadow: none !important;
}
/* Rétrocompatibilité avec l'ancien style slot-past-open */
#angemont-tunnel .at-datepicker-xl .slot-past-open a.ui-state-default,
#angemont-tunnel .at-datepicker .slot-past-open a.ui-state-default,
#angemont-tunnel .slot-past-open a.ui-state-default,
#angemont-tunnel .slot-past-open a,
#angemont-tunnel .slot-past-open,
.slot-past-open a.ui-state-default,
.slot-past-open a {
opacity: 0.5 !important;
background: #666 !important;
color: #ccc !important;
cursor: not-allowed !important;
text-decoration: line-through !important;
border-radius: 4px !important;
box-shadow: none !important;
font-weight: normal !important;
border: 1px solid #555 !important;
transition: all 0.2s ease !important;
position: relative !important;
}
#angemont-tunnel .at-datepicker-xl .slot-past-open a.ui-state-default:hover,
#angemont-tunnel .at-datepicker .slot-past-open a.ui-state-default:hover,
.slot-past-open a.ui-state-default:hover,
.slot-past-open a:hover {
opacity: 0.5 !important;
background: #666 !important;
color: #ccc !important;
transform: none !important;
box-shadow: none !important;
}
/* Style alternatif plus subtil si le premier fonctionne */
#angemont-tunnel .at-datepicker-xl .slot-past a.ui-state-default.working {
opacity: .7 !important;
background: #ccc !important;
color: #666 !important;
cursor: not-allowed !important;
text-decoration: line-through;
box-shadow: inset 0 0 0 1px #999 !important;
}
/* Forcer le texte des descriptions en blanc */
#angemont-tunnel .at-card .at-desc,
#angemont-tunnel .at-card .at-desc * {
color: #ddd !important;
}
#angemont-tunnel .at-card .at-desc em:first-child,
#angemont-tunnel .at-card .at-desc strong,
#angemont-tunnel .at-card .at-desc b,
#angemont-tunnel .at-card .at-desc em:not(:first-child),
#angemont-tunnel .at-card .at-desc i {
color: var(--at-gold-color, #f7e7a9) !important;
}
/* Dates complètes - gérées par calendar-colors.css */
/* Affichage de la sélection */
#angemont-tunnel .at-selection-display {
max-width: 300px;
margin: 0;
padding: 10px 16px;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.15) 0%,
rgba(247, 231, 169, 0.08) 100%);
border: 2px solid rgba(212, 175, 55, 0.4);
border-radius: 8px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
position: absolute;
top: calc(50% + 180px);
right: 30px;
transform: translateY(-50%);
}
#angemont-tunnel .at-selection-content {
display: flex;
align-items: center;
gap: 8px;
}
#angemont-tunnel .at-selection-icon {
font-size: 16px;
opacity: 0.8;
}
#angemont-tunnel .at-selection-text {
flex: 1;
text-align: left;
}
#angemont-tunnel .at-selection-date {
font-size: 14px;
font-weight: 700;
color: #f7e7a9;
margin-bottom: 2px;
line-height: 1.2;
}
#angemont-tunnel .at-selection-slot {
font-size: 12px;
font-weight: 500;
color: #e8e8e8;
opacity: 0.9;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
/* Style pour les créneaux multiples */
#angemont-tunnel .at-selection-slot.at-slot-multiple {
font-weight: 600;
color: #f7e7a9;
}
#angemont-tunnel .at-selection-slot.at-slot-multiple::before {
content: '🕐';
font-size: 12px;
opacity: 0.7;
margin-right: 4px;
}
/* Style pour la partie thème dans le créneau */
#angemont-tunnel .at-selection-slot.at-slot-theme {
font-weight: 600;
color: #f7e7a9;
}
#angemont-tunnel .at-selection-slot.at-slot-theme::after {
content: '🎭';
font-size: 12px;
opacity: 0.8;
margin-left: 4px;
}
/* Styles pour les détails des formules multiples - Thème noir et or */
#angemont-tunnel .at-formulas-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
#angemont-tunnel .at-formula-detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 8px;
font-size: 15px;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
#angemont-tunnel .at-formula-detail-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 215, 0, 0.4);
transform: translateY(-1px);
}
#angemont-tunnel .at-formula-detail-item:last-child {
margin-bottom: 0;
}
#angemont-tunnel .at-formula-detail-name {
font-weight: 600;
color: #ffffff;
flex: 1;
margin-right: 12px;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#angemont-tunnel .at-formula-detail-qty {
font-weight: 700;
color: #000000;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
min-width: 40px;
text-align: center;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
border: 1px solid rgba(255, 215, 0, 0.5);
}
/* Design de la légende - plus compact et élégant sur PC */
#angemont-tunnel .at-calendar-key {
max-width: 800px;
margin: 0 auto 20px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
}
/* ===== Couverture robuste jQuery UI ===== */
/* Toutes les règles de couleurs des dates complètes sont maintenant dans calendar-colors.css */
#angemont-tunnel .at-calendar-key__list {
display: flex;
flex-wrap: nowrap;
gap: 8px 12px;
justify-content: center;
align-items: center;
overflow-x: auto;
padding: 4px 0;
}
/* Grouper visuellement les deux derniers éléments (thème + complet) */
#angemont-tunnel .at-calendar-key__item:nth-last-child(-n+2) {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(212, 175, 55, 0.15);
position: relative;
}
/* Ajouter un petit séparateur visuel avant le groupe thème+complet */
#angemont-tunnel .at-calendar-key__item:nth-last-child(2)::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background: rgba(212, 175, 55, 0.2);
}
#angemont-tunnel .at-calendar-key__item {
display: flex;
align-items: center;
gap: 6px;
color: #e8e8e8;
font-size: 11px;
font-weight: 500;
padding: 3px 6px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(212, 175, 55, 0.08);
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
/* ===== ENCADRÉ DE RAPPEL D'ADRESSE ===== */
#angemont-tunnel .at-address-reminder {
background: rgba(76, 175, 80, 0.08);
border-left: 4px solid #4CAF50;
border-radius: 8px;
padding: 16px 20px;
margin: 24px 0;
display: flex;
align-items: flex-start;
gap: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(76, 175, 80, 0.15);
transition: all 0.3s ease;
}
#angemont-tunnel .at-address-reminder:hover {
background: rgba(76, 175, 80, 0.12);
border-left-color: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}
#angemont-tunnel .at-address-icon {
font-size: 20px;
color: #4CAF50;
flex-shrink: 0;
margin-top: 2px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
#angemont-tunnel .at-address-content {
flex: 1;
min-width: 0;
}
#angemont-tunnel .at-address-content strong {
display: block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#angemont-tunnel .at-address-content p {
color: #e8e8e8;
font-size: 14px;
line-height: 1.5;
margin: 0;
white-space: pre-line;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Responsive mobile pour l'encadré d'adresse */
@media (max-width: 768px) {
#angemont-tunnel .at-address-reminder {
padding: 12px 16px;
margin: 16px 0;
gap: 10px;
}
#angemont-tunnel .at-address-icon {
font-size: 18px;
}
#angemont-tunnel .at-address-content strong {
font-size: 15px;
margin-bottom: 6px;
}
#angemont-tunnel .at-address-content p {
font-size: 13px;
line-height: 1.4;
}
}
@media (max-width: 480px) {
#angemont-tunnel .at-address-reminder {
padding: 10px 12px;
margin: 12px 0;
gap: 8px;
}
#angemont-tunnel .at-address-icon {
font-size: 16px;
}
#angemont-tunnel .at-address-content strong {
font-size: 14px;
}
#angemont-tunnel .at-address-content p {
font-size: 12px;
}
}
#angemont-tunnel .at-calendar-key__item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(212, 175, 55, 0.2);
}
#angemont-tunnel .at-calendar-key__dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex: 0 0 8px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#angemont-tunnel .at-calendar-key__dot--lunch {
background: var(--at-violet, #7c3aed) !important;
box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.4) !important;
}
#angemont-tunnel .at-calendar-key__dot--dinner {
background: #f0c84b !important;
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.5) !important;
}
#angemont-tunnel .at-calendar-key__dot--both {
background: linear-gradient(135deg, var(--at-violet, #7c3aed) 0 50%, var(--at-gold, #d4af37) 50% 100%);
}
#angemont-tunnel .at-calendar-key__dot--theme {
background: #39b36e;
}
#angemont-tunnel .at-calendar-key__dot--full {
background: var(--at-red, #dc3545);
}
#angemont-tunnel .at-calendar-key__label {
white-space: nowrap;
font-size: 11px;
letter-spacing: 0.3px;
}
/* =====================================================================
Sélection créneau (calendrier) : mise en avant très visible
Objectif: toujours voir clairement le créneau sélectionné
===================================================================== */
#angemont-tunnel .at-slot-btn.at-slot-selected {
position: relative;
z-index: 3;
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 1px;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.12),
0 10px 25px rgba(0, 0, 0, 0.35);
}
#angemont-tunnel .at-slot-btn.at-slot-selected.at-slot-lunch {
background: rgba(167, 139, 250, 0.95) !important; /* violet-400 */
border-color: rgba(167, 139, 250, 0.95) !important;
color: #fff !important;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.14),
0 0 18px rgba(139, 92, 246, 0.55),
0 10px 25px rgba(0, 0, 0, 0.35);
}
#angemont-tunnel .at-slot-btn.at-slot-selected.at-slot-dinner {
background: rgba(252, 211, 77, 0.95) !important; /* amber-300 */
border-color: rgba(252, 211, 77, 0.95) !important;
color: #000 !important;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.14),
0 0 18px rgba(251, 191, 36, 0.45),
0 10px 25px rgba(0, 0, 0, 0.35);
}
/* ===== COULEURS DU CALENDRIER ===== */
/* Toutes les règles de couleurs du calendrier ont été déplacées vers calendar-colors.css */
/* Ce fichier ne contient plus que les styles de base du tunnel */
/* =====================================================================
MODE "FOCUS" CALENDRIER (plein écran pleine page au scroll) - ÉTAPE 1
===================================================================== */
body.at-calendar-focus {
overflow: hidden !important;
overscroll-behavior: contain;
}
#angemont-calendar-root.at-calendar-focus-root {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
background: rgba(5, 5, 5, 0.96) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: auto !important;
padding: 12px !important;
opacity: 0;
transform: scale(0.98);
transition: transform 180ms ease, opacity 180ms ease;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root {
opacity: 1;
transform: scale(1);
}
/* Éviter que le contenu interne "min-h-screen" force un surplus */
#angemont-calendar-root.at-calendar-focus-root .min-h-screen {
min-height: 100% !important;
}
/* =======================
FIT AU VIEWPORT (FOCUS)
Objectif: voir 1 mois complet sans scroll
======================= */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root {
overflow: hidden !important; /* pas de scroll dans le mode focus */
/* Réserver de l'espace pour la barre récap (îlot) en bas */
padding: calc(6px + env(safe-area-inset-top, 0px)) 6px calc(6px + env(safe-area-inset-bottom, 0px)) 6px !important;
}
/* Sur mobile: permettre le scroll du calendrier en mode focus */
@media (max-width: 767px) {
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root {
overflow: auto !important; /* permettre le scroll sur mobile */
-webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root #at-calendar-mobile {
overflow: visible !important;
height: auto !important;
min-height: 100vh !important;
}
}
/* Header plus compact dans le focus */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-calendar-header {
margin-bottom: 4px !important;
gap: 10px !important;
}
/* Compacter le bloc unifié (sélecteur mois/année + flèches) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-month-nav {
padding: 6px 8px !important;
gap: 8px !important;
border-radius: 22px !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-month-display {
padding: 6px 10px !important;
gap: 10px !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-month-nav .at-month-arrow {
width: 34px !important;
height: 34px !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-month-nav .at-month-arrow svg {
width: 16px !important;
height: 16px !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-month-picker {
margin-top: 6px !important;
}
/* Masquer le sélecteur de langue pendant le focus (évite les chevauchements + gain de place) */
body.at-calendar-focus #angemont-tunnel .at-lang-switcher {
display: none !important;
}
/* Masquer le bouton "Retour à l'accueil" pendant le focus (évite conflit avec la croix) */
body.at-calendar-focus #angemont-tunnel .at-back-home {
display: none !important;
}
/* Cacher le bouton "Découvrir les formules" en focus (gain de hauteur) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-calendar-header a {
display: none !important;
}
/* Réduire le bloc mois/année en focus */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-calendar-header h2 {
font-size: clamp(1.85rem, 3.3vh, 2.65rem) !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-calendar-header p {
font-size: clamp(0.95rem, 1.6vh, 1.25rem) !important;
}
/* Layout: faire "rentrer" le mois complet dans la hauteur */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root #at-calendar-desktop {
padding: 0 !important;
height: 100% !important;
}
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root #at-calendar-desktop > .max-w-6xl {
max-width: none !important;
margin: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Grille: colonnes fluides + cellules plus basses */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .calendar-grid-pc {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 0 !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
/* 1 ligne entêtes jours + semaines (JS ajuste dynamiquement 4-6) */
grid-template-rows: 18px repeat(5, minmax(0, 1fr)) !important;
/* Hauteur définie => les "fr" répartissent correctement l'espace */
height: calc(
100dvh
- var(--at-focus-header-h, 0px)
- var(--at-focus-island-h, 0px)
- 16px
) !important;
}
/* Les 7 premiers éléments de la grille = entêtes jours (Lun..Dim) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .calendar-grid-pc > div:nth-child(-n+7) {
padding-bottom: 0 !important;
font-size: 11px !important;
}
/* Cellules jours (à partir du 8e) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .calendar-grid-pc > div:nth-child(n+8) {
min-height: 0 !important;
padding: 8px !important;
overflow: hidden !important;
}
/* Titre jour dans les cartes (réduit légèrement) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .calendar-grid-pc > div:nth-child(n+8) span {
font-size: 0.9rem !important;
}
/* Légende masquée en mode focus (gain de hauteur) */
body.at-calendar-focus #angemont-calendar-root.at-calendar-focus-root .at-calendar-legend {
display: none !important;
}
/* Barre de validation (step 1) : encore plus compacte en focus pour gagner de la hauteur */
body.at-calendar-focus #at-calendar-validation-island {
bottom: 6px !important;
transform: scale(0.88);
transform-origin: bottom center;
}
/* Bouton fermer: déplacer pour éviter le coin du sélecteur de langue */
body.at-calendar-focus #at-calendar-focus-close {
top: calc(6px + env(safe-area-inset-top, 0px));
left: 6px;
right: auto;
}
/* Bouton fermer */
#at-calendar-focus-close {
position: fixed;
top: 12px;
right: 12px;
z-index: 1000000;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(20, 20, 20, 0.75);
color: #fff;
font-size: 26px;
line-height: 36px;
text-align: center;
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body:not(.at-calendar-focus) #at-calendar-focus-close {
display: none;
} |