Opening hours
Excluding holidays
holidays
Excluding holidays
Monday
Closed
Tuesday
Closed
Wednesday
11:00 a.m. – 8:00 p.m.
Thursday
Closed
Friday
12:00 p.m. – 1:00 a.m.
Saturday
11:00 a.m. – 1:00 a.m.
Sunday
11:00 a.m. – 10:00 p.m.
School Breaks
Monday
11:00 a.m. – 11:00 p.m.
Tuesday
11:00 a.m. – 11:00 p.m.
Wednesday
11:00 a.m. – 11:00 p.m.
Thursday
11:00 a.m. – 11:00 p.m.
Friday
11:00 a.m. – 1:00 a.m.
Saturday
11:00 a.m. – 1:00 a.m.
Sunday
12:00 p.m. – 11:00 p.m.
/* =========================================================
RESET + POLICE TW CENT MT
========================================================= */
.pa-hours,
.pa-hours *,
.pa-hours div,
.pa-hours span,
.pa-hours button,
.pa-hours h2,
.pa-hours h3 {
box-sizing: border-box;
font-family:
"TW Cent MT",
sans-serif !important;
}
/* =========================================================
CONTENEUR PRINCIPAL
========================================================= */
.pa-hours {
width: 100%;
max-width: 1400px;
margin: 0 auto;
color: #FCEDDF;
font-family:
"TW Cent MT",
sans-serif !important;
}
/* =========================================================
EN-TÊTE
========================================================= */
.pa-hours-top {
text-align: center;
margin-bottom: 44px;
font-family:
"TW Cent MT",
sans-serif !important;
}
/* =========================================================
TITRE PRINCIPAL : HORAIRES
========================================================= */
.pa-hours .pa-hours-main-title,
.pa-hours .pa-hours-top h2 {
display: block !important;
margin: 0 0 28px !important;
padding: 0 !important;
color: #FCEDDF !important;
/* POLICE FORCÉE */
font-family:
"TW Cent MT",
sans-serif !important;
font-size: 56px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
}
/* =========================================================
ZONE DU SWITCH
========================================================= */
.pa-hours-toggle-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
/* =========================================================
TEXTES HORS VACANCES / VACANCES
========================================================= */
.pa-hours-label {
appearance: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
font-family:
"TW Cent MT",
sans-serif !important;
font-size: 22px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color:
rgba(
252,
237,
223,
.45
) !important;
cursor: pointer;
transition:
color .25s ease,
transform .25s ease;
}
.pa-hours-label:hover {
transform:
translateY(-1px);
}
/* TEXTE ACTIF */
.pa-hours-label.active {
color:
#FCEDDF !important;
}
/* =========================================================
SWITCH
========================================================= */
.pa-hours-toggle {
position: relative;
display: block;
flex: 0 0 auto;
width: 90px;
height: 46px;
margin: 0 !important;
padding: 5px !important;
border: 0 !important;
outline: 0 !important;
border-radius:
100px !important;
/*
* Orange = vacances
*/
background:
#F29449 !important;
cursor: pointer;
box-shadow:
0 8px 22px
rgba(0, 0, 0, .18);
transition:
background .3s ease,
transform .2s ease;
}
.pa-hours-toggle:hover {
transform:
scale(1.03);
}
/* =========================================================
BOULE BLANCHE DU SWITCH
========================================================= */
.pa-hours-toggle-dot {
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
background:
#FCEDDF;
/*
* Position droite =
* vacances
*/
transform:
translateX(44px);
box-shadow:
0 3px 10px
rgba(0, 0, 0, .25);
transition:
transform
.3s
cubic-bezier(
.4,
0,
.2,
1
);
}
/* =========================================================
HORS VACANCES ACTIF
========================================================= */
.pa-hours.school-mode
.pa-hours-toggle {
background:
#39BACF !important;
}
.pa-hours.school-mode
.pa-hours-toggle-dot {
transform:
translateX(0);
}
/* =========================================================
CARTE PRINCIPALE
========================================================= */
.pa-hours-card {
position: relative;
display: grid;
grid-template-columns:
1fr 1fr;
width: 100%;
min-height: 520px;
overflow: hidden;
border-radius: 42px;
border:
1px solid
rgba(
252,
237,
223,
.12
);
box-shadow:
0 28px 70px
rgba(0, 0, 0, .14);
}
/* =========================================================
PANNEAUX
========================================================= */
.pa-hours-panel {
position: relative;
min-width: 0;
padding:
58px
65px;
overflow: hidden;
transition:
opacity .3s ease,
filter .3s ease;
}
/* =========================================================
PANNEAU HORS VACANCES
========================================================= */
.pa-hours-panel-school {
color:
#FCEDDF;
background:
radial-gradient(
circle at bottom left,
rgba(
57,
186,
207,
.10
),
transparent 40%
),
#251A38;
}
/* =========================================================
PANNEAU VACANCES
========================================================= */
.pa-hours-panel-holidays {
color:
#251A38;
background:
#FCEDDF;
}
/* =========================================================
COURBE ENTRE LES PANNEAUX
========================================================= */
.pa-hours-panel-holidays::before {
content: "";
position: absolute;
z-index: 0;
width: 120px;
height: 125%;
left: -60px;
top: -12%;
border-radius: 50%;
background:
#FCEDDF;
}
/* =========================================================
CONTENU DES PANNEAUX
========================================================= */
.pa-hours-panel-inner {
position: relative;
z-index: 2;
}
/* =========================================================
TITRES PANNEAUX
========================================================= */
.pa-hours
.pa-hours-panel
h3 {
margin:
0 0 13px !important;
padding:
0 !important;
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
38px !important;
font-style:
normal !important;
font-weight:
700 !important;
line-height:
1 !important;
letter-spacing:
0 !important;
text-transform:
none !important;
}
/* TITRE HORS VACANCES */
.pa-hours-panel-school h3 {
color:
#FCEDDF !important;
}
/* TITRE VACANCES */
.pa-hours-panel-holidays h3 {
color:
#251A38 !important;
}
/* =========================================================
PETITES BARRES COLORÉES
========================================================= */
.pa-title-line {
width: 65px;
height: 7px;
margin-bottom:
40px;
border-radius:
100px;
}
/* BLEU */
.pa-title-line-cyan {
background:
#39BACF;
}
/* ORANGE */
.pa-title-line-orange {
background:
#F29449;
}
/* =========================================================
LISTE DES HORAIRES
========================================================= */
.pa-hours-list {
width: 100%;
}
/* =========================================================
UNE LIGNE
========================================================= */
.pa-hours-row {
display: flex;
align-items: center;
width: 100%;
margin-bottom:
22px;
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
18px !important;
font-style:
normal !important;
font-weight:
400 !important;
line-height:
1.3 !important;
letter-spacing:
0 !important;
}
.pa-hours-row:last-child {
margin-bottom: 0;
}
/* =========================================================
JOUR
========================================================= */
.pa-day {
flex:
0 0 auto;
white-space:
nowrap;
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
18px !important;
font-weight:
400 !important;
line-height:
1.3 !important;
}
/* =========================================================
HEURE
========================================================= */
.pa-time {
flex:
0 0 auto;
white-space:
nowrap;
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
18px !important;
font-weight:
400 !important;
line-height:
1.3 !important;
}
/* =========================================================
FERMÉ
========================================================= */
.pa-time.closed {
color:
#E63358 !important;
font-weight:
700 !important;
}
/* =========================================================
POINTILLÉS
========================================================= */
.pa-dots {
flex: 1;
min-width:
25px;
height:
2px;
margin:
0 14px;
opacity:
.44;
background-image:
radial-gradient(
circle,
currentColor 1.2px,
transparent 1.5px
);
background-size:
8px 2px;
background-repeat:
repeat-x;
background-position:
center;
}
/* POINTILLÉS CLAIRS */
.pa-hours-panel-school
.pa-dots {
color:
#FCEDDF;
}
/* POINTILLÉS FONCÉS */
.pa-hours-panel-holidays
.pa-dots {
color:
#251A38;
}
/* =========================================================
DÉCORATIONS
========================================================= */
.pa-decoration {
position: absolute;
z-index: 1;
pointer-events: none;
}
/* =========================================================
DÉCORATION BLEUE
========================================================= */
.pa-decoration-cyan {
width: 380px;
height: 240px;
left: -110px;
bottom: -125px;
border-radius:
50%;
background:
radial-gradient(
ellipse at center,
rgba(
57,
186,
207,
.18
),
rgba(
57,
186,
207,
.03
) 65%,
transparent 66%
);
}
/* =========================================================
DÉCORATION ORANGE
========================================================= */
.pa-decoration-orange {
width: 270px;
height: 230px;
right: -75px;
top: -105px;
border-radius:
40%;
background:
rgba(
242,
148,
73,
.11
);
transform:
rotate(18deg);
}
/* =========================================================
ÉTAT DESKTOP :
HORS VACANCES ACTIF
========================================================= */
.pa-hours.school-mode
.pa-hours-panel-school {
opacity: 1;
filter: none;
}
.pa-hours.school-mode
.pa-hours-panel-holidays {
opacity: .42;
filter:
saturate(.55);
}
/* =========================================================
ÉTAT DESKTOP :
VACANCES ACTIF
========================================================= */
.pa-hours:not(.school-mode)
.pa-hours-panel-school {
opacity: .42;
filter:
saturate(.60);
}
.pa-hours:not(.school-mode)
.pa-hours-panel-holidays {
opacity: 1;
filter: none;
}
/* =========================================================
TABLETTE
========================================================= */
@media (max-width: 1024px) {
/* TITRE */
.pa-hours
.pa-hours-main-title,
.pa-hours
.pa-hours-top
h2 {
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
46px !important;
}
/* CARTE */
.pa-hours-card {
grid-template-columns:
1fr;
min-height:
auto;
border-radius:
32px;
}
/* PANNEAU */
.pa-hours-panel {
padding:
48px
45px;
}
/* RETRAIT COURBE */
.pa-hours-panel-holidays::before {
display:
none;
}
/* MASQUER LES 2 PAR DÉFAUT */
.pa-hours-panel {
display:
none;
}
/* HORS VACANCES */
.pa-hours.school-mode
.pa-hours-panel-school {
display:
block;
opacity:
1;
filter:
none;
}
/* VACANCES */
.pa-hours:not(.school-mode)
.pa-hours-panel-holidays {
display:
block;
opacity:
1;
filter:
none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
/* EN-TÊTE */
.pa-hours-top {
margin-bottom:
32px;
}
/* TITRE HORAIRES */
.pa-hours
.pa-hours-main-title,
.pa-hours
.pa-hours-top
h2 {
margin-bottom:
23px !important;
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
40px !important;
font-weight:
700 !important;
}
/* SWITCH */
.pa-hours-toggle-wrap {
gap:
12px;
}
.pa-hours-label {
font-size:
17px !important;
}
.pa-hours-toggle {
width:
72px;
height:
38px;
padding:
4px !important;
}
.pa-hours-toggle-dot {
width:
30px;
height:
30px;
transform:
translateX(34px);
}
.pa-hours.school-mode
.pa-hours-toggle-dot {
transform:
translateX(0);
}
/* CARTE */
.pa-hours-card {
border-radius:
28px;
}
/* PANNEAU */
.pa-hours-panel {
padding:
38px
25px;
}
/* TITRES PANNEAUX */
.pa-hours
.pa-hours-panel
h3 {
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
32px !important;
}
/* TRAIT */
.pa-title-line {
width:
55px;
height:
6px;
margin-bottom:
30px;
}
/* LIGNES */
.pa-hours-row {
margin-bottom:
18px;
font-size:
18px !important;
}
.pa-day,
.pa-time {
font-size:
18px !important;
}
/* POINTILLÉS */
.pa-dots {
margin:
0 9px;
background-size:
7px 2px;
}
}
/* =========================================================
PETITS MOBILES
========================================================= */
@media (max-width: 480px) {
/* SWITCH */
.pa-hours-toggle-wrap {
display:
grid;
grid-template-columns:
1fr
auto
1fr;
width:
100%;
}
.pa-hours-label-school {
text-align:
right;
}
.pa-hours-label-holidays {
text-align:
left;
}
.pa-hours-label {
font-size:
16px !important;
}
/* PANNEAU */
.pa-hours-panel {
padding:
34px
18px;
}
/* TEXTE */
.pa-hours-row,
.pa-day,
.pa-time {
font-family:
"TW Cent MT",
sans-serif !important;
font-size:
17px !important;
}
/* POINTILLÉS */
.pa-dots {
margin-left:
7px;
margin-right:
7px;
}
}
document.addEventListener(
"DOMContentLoaded",
function () {
document
.querySelectorAll(".pa-hours")
.forEach(function (widget) {
/*
* ÉLÉMENTS
*/
const toggle =
widget.querySelector(
".pa-hours-toggle"
);
const schoolLabel =
widget.querySelector(
".pa-hours-label-school"
);
const holidaysLabel =
widget.querySelector(
".pa-hours-label-holidays"
);
/*
* CHANGEMENT DE MODE
*/
function setMode(mode) {
const schoolMode =
mode === "school";
/*
* CLASSE PRINCIPALE
*/
widget.classList.toggle(
"school-mode",
schoolMode
);
/*
* TEXTE HORS VACANCES
*/
schoolLabel.classList.toggle(
"active",
schoolMode
);
/*
* TEXTE VACANCES
*/
holidaysLabel.classList.toggle(
"active",
!schoolMode
);
/*
* ACCESSIBILITÉ
*/
toggle.setAttribute(
"aria-pressed",
schoolMode
? "true"
: "false"
);
}
/*
* CLIC SUR LE SWITCH
*/
toggle.addEventListener(
"click",
function () {
const isSchool =
widget.classList.contains(
"school-mode"
);
setMode(
isSchool
? "holidays"
: "school"
);
}
);
/*
* CLIC SUR
* "HORS VACANCES"
*/
schoolLabel.addEventListener(
"click",
function () {
setMode("school");
}
);
/*
* CLIC SUR
* "VACANCES"
*/
holidaysLabel.addEventListener(
"click",
function () {
setMode("holidays");
}
);
/*
* ==========================================
* MODE AFFICHÉ PAR DÉFAUT
* ==========================================
*
* HORS VACANCES
*
*/
setMode("school");
});
}
);
