/* ==========================================================================
TAHITI AGENDA — V3
Feuille de style unique, mobile-first.
Palette : fond marine profond + accents turquoise / or.
========================================================================== */
/* --------------------------------------------------------------------------
1. RESET & BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
/* Typographie : dualité display (émotion / identité) + UI (information) */
--font-display: "Archivo", "Manrope", "Segoe UI", system-ui, sans-serif;
--font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
/* Couleurs de fond */
--navy: #071a2b;
--navy-2: #0b2238;
--navy-3: #102c46;
/* Variantes nocturnes très subtiles, pour la profondeur atmosphérique */
--petrol: #0a2c3f;
--navy-deep: #04121f;
/* Texte */
--white: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.74);
--text-muted: rgba(255, 255, 255, 0.52);
/* Accents identité Tahiti Agenda */
--turquoise: #19d3e6;
--turquoise-dark: #0fb2c4;
--turquoise-bright: #5ce8f5;
--gold: #ffd43b;
--gold-dark: #e6ba1f;
--gold-warm: #ffb84d;
--violet: #8b6fe0;
--pink: #e667a6;
/* Grain CSS (SVG inline, aucun fichier externe) — quasi invisible,
sert uniquement à casser l'effet "aplat de couleur unie". */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
/* Bordures / surfaces */
--border-soft: rgba(255, 255, 255, 0.08);
--border-softer: rgba(255, 255, 255, 0.06);
/* Ombres */
--shadow-card: 0 16px 40px -20px rgba(0, 0, 0, 0.65);
--shadow-card-hover: 0 24px 48px -18px rgba(0, 0, 0, 0.7);
--shadow-soft: 0 6px 20px -10px rgba(0, 0, 0, 0.5);
/* Rayons */
--radius-xl: 24px;
--radius-lg: 18px;
--radius-md: 14px;
--radius-sm: 10px;
--radius-pill: 999px;
/* Layout */
--container-max: 1200px;
--container-pad: 20px;
--header-h: 68px;
/* Timing */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--speed-fast: 0.18s;
--speed-med: 0.35s;
}
@media (min-width: 768px) {
:root {
--container-pad: 32px;
--header-h: 76px;
}
}
@media (min-width: 900px) {
:root {
/* Header un peu plus haut en desktop : le logo officiel y respire
(56px de haut) sans toucher les bords. */
--header-h: 88px;
}
}
html {
scroll-behavior: smooth;
/* PAS d'overflow-x ici : `overflow-x: hidden` force `overflow-y: auto`,
ce qui transforme html en conteneur de défilement et casse le
`position: sticky` du header. On confine le débordement sur
avec `clip`, qui lui ne crée pas de conteneur de défilement. */
}
body {
margin: 0;
width: 100%;
background: var(--navy);
color: var(--white);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* `clip` (et non `hidden`) : bloque le débordement horizontal sans
créer de conteneur de défilement — le header sticky reste fonctionnel. */
overflow-x: clip;
position: relative;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, p {
margin: 0;
}
/* Les titres portent l'identité : police display, tracking resserré. */
h1, h2 {
font-family: var(--font-display);
letter-spacing: -0.025em;
}
h3 {
font-family: var(--font-display);
letter-spacing: -0.015em;
}
button {
font-family: inherit;
cursor: pointer;
}
svg {
flex-shrink: 0;
}
/* Accessibilité : focus clavier toujours visible */
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--turquoise);
outline-offset: 3px;
border-radius: 4px;
}
/* Utilitaire accessibilité : visible pour les lecteurs d'écran uniquement */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Lien d'évitement */
.skip-link {
position: absolute;
top: -100px;
left: 12px;
background: var(--turquoise);
color: var(--navy);
font-weight: 700;
padding: 12px 18px;
border-radius: var(--radius-sm);
z-index: 1000;
transition: top var(--speed-fast) var(--ease);
}
.skip-link:focus {
top: 12px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
2. LAYOUT UTILITIES
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
padding-block: 56px;
scroll-margin-top: var(--header-h);
}
.section--alt {
background: linear-gradient(180deg, var(--navy-2), var(--navy));
}
.section--weekend {
background: var(--navy-2);
border-top: 1px solid var(--border-softer);
border-bottom: 1px solid var(--border-softer);
}
.section--instagram {
padding-block: 72px 80px;
}
/* Section qui suit directement un .page-header : évite le cumul des
espacements verticaux (le page-header a déjà sa propre marge basse). */
.section--after-header {
padding-top: 32px;
}
@media (min-width: 1024px) {
.section--after-header {
padding-top: 40px;
}
}
@media (min-width: 1024px) {
.section {
padding-block: 72px;
}
.section--instagram {
padding-block: 80px 88px;
}
}
.section-head {
max-width: 620px;
margin-bottom: 28px;
}
.section-head--center {
max-width: 560px;
margin-inline: auto;
text-align: center;
}
.section-head .eyebrow {
margin-bottom: 10px;
}
.section-head h2 {
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.section-head p {
color: var(--text-secondary);
font-size: 1rem;
}
.section-head-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.section-head-row .section-head {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.section-head {
margin-bottom: 36px;
}
.section-head-row {
margin-bottom: 36px;
}
.section-head-row .section-head {
margin-bottom: 0;
}
}
/* Kicker éditorial : au-dessus des titres de section et sur les page
headers des pages internes. Le hero de l'accueil n'en utilise plus
(le titre y démarre directement), mais cette règle sert ailleurs. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--turquoise-bright);
margin-bottom: 18px;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: linear-gradient(90deg, rgba(25, 211, 230, 0), var(--turquoise));
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 14px;
}
.badge--gold {
background: rgba(255, 212, 59, 0.12);
color: var(--gold);
border: 1px solid rgba(255, 212, 59, 0.25);
}
/* Lien "Voir tout ->" en bas des aperçus de l'accueil */
.link-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
font-weight: 800;
font-size: 0.94rem;
color: var(--turquoise);
transition: gap var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.link-more svg {
transition: transform var(--speed-fast) var(--ease);
}
.link-more:hover {
color: var(--gold);
gap: 12px;
}
/* --------------------------------------------------------------------------
1bis. PAGE HEADER (Agenda / Préventes / Happy Hours)
Version compacte du hero pour les pages internes : même identité,
sans reprendre le grand hero de l'accueil.
-------------------------------------------------------------------------- */
.page-header {
position: relative;
overflow: hidden;
padding-block: 44px 36px;
scroll-margin-top: var(--header-h);
border-bottom: 1px solid var(--border-softer);
}
.page-header-bg {
position: absolute;
inset: -20%;
background-image: url("assets/hero-bg.svg");
background-size: cover;
background-position: center;
opacity: 0.32;
}
.page-header-bg--agenda {
background-position: 20% 75%;
}
.page-header-bg--preventes {
background-position: 80% 25%;
}
.page-header-bg--happy-hours {
background-position: 50% 60%;
}
.page-header-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 15% 20%, rgba(7, 26, 43, 0.1), var(--navy) 82%);
}
.page-header .container {
position: relative;
z-index: 1;
}
.page-header h1 {
font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.page-header p {
color: var(--text-secondary);
max-width: 46ch;
}
@media (min-width: 1024px) {
.page-header {
padding-block: 72px 48px;
}
}
/* --------------------------------------------------------------------------
3. BOUTONS
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
border-radius: var(--radius-pill);
font-weight: 800;
font-size: 0.96rem;
border: none;
white-space: nowrap;
transition: transform var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.btn--primary {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: var(--navy);
box-shadow: 0 10px 24px -10px rgba(25, 211, 230, 0.55);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -10px rgba(25, 211, 230, 0.65);
}
.btn--gold {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--navy);
box-shadow: 0 10px 24px -10px rgba(255, 212, 59, 0.5);
}
.btn--gold:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -10px rgba(255, 212, 59, 0.6);
}
.btn--ghost {
background: rgba(255, 255, 255, 0.04);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn--ghost:hover {
border-color: var(--turquoise);
color: var(--turquoise);
transform: translateY(-2px);
}
.btn--block {
width: 100%;
}
/* --------------------------------------------------------------------------
4. HEADER & NAVIGATION
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 200;
height: var(--header-h);
display: flex;
align-items: center;
/* En haut de page : quasi transparent, le header appartient au hero.
Au scroll (.is-scrolled, posée par script.js) : fond + blur + filet. */
background: transparent;
transition: background var(--speed-med) var(--ease),
backdrop-filter var(--speed-med) var(--ease);
}
.site-header::after {
/* Filet lumineux dégradé, révélé uniquement au scroll. */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(25, 211, 230, 0.35) 25%,
rgba(255, 212, 59, 0.28) 70%,
transparent
);
opacity: 0;
transition: opacity var(--speed-med) var(--ease);
}
.site-header.is-scrolled {
background: rgba(7, 26, 43, 0.82);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
}
.site-header.is-scrolled::after {
opacity: 1;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 100%;
}
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.02em;
}
/* Emplacement du logo.
Le vrai logo Tahiti Agenda n'est pas carré (ratio ~1.12) : on fixe donc
sa HAUTEUR et on laisse la largeur suivre, sinon il serait recadré et
déformé. Le slot s'adapte à ce que contient le logo. */
.logo-mark-slot {
position: relative;
display: inline-flex;
align-items: center;
height: 44px;
flex-shrink: 0;
}
.logo-img {
height: 44px;
width: auto;
/* Pas de border-radius ni de recadrage : le PNG est déjà détouré,
il se pose directement sur le fond du header. */
}
@media (min-width: 900px) {
.logo-mark-slot,
.logo-img {
height: 56px;
}
/* Un peu d'air entre la marque et la navigation. */
.header-inner .logo {
margin-right: 20px;
}
}
/* Placeholder provisoire, en attendant le vrai logo :
pastille sombre + monogramme dégradé + fin liseré (plus sobre qu'un
aplat turquoise/or). Sera remplacé par assets/logo-tahiti-agenda.png. */
.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: linear-gradient(150deg, rgba(25, 211, 230, 0.16), rgba(255, 212, 59, 0.1)),
var(--navy-2);
border: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.01em;
background-clip: padding-box;
color: var(--turquoise-bright);
}
.logo-mark[hidden] {
display: none;
}
.logo-text {
white-space: nowrap;
}
.site-nav {
display: none;
align-items: center;
gap: 26px;
}
.site-nav ul {
display: flex;
gap: 24px;
}
.site-nav a {
position: relative;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-secondary);
padding-block: 6px;
transition: color var(--speed-fast) var(--ease);
}
/* État actif : petit point lumineux plutôt qu'un gros soulignement.
Plus discret, plus éditorial, moins "template SaaS". */
.site-nav a::after {
content: "";
position: absolute;
left: 50%;
bottom: -3px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: 50%;
background: var(--turquoise);
opacity: 0;
transform: scale(0.4);
transition: opacity var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.site-nav a:hover {
color: var(--white);
}
.site-nav a.is-current {
color: var(--white);
}
.site-nav a.is-current::after {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 10px rgba(25, 211, 230, 0.8);
}
/* Instagram : icône discrète, sans allure de bouton de formulaire. */
.btn-instagram {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.86rem;
font-weight: 600;
color: var(--text-muted);
padding-inline-start: 26px;
border-inline-start: 1px solid var(--border-soft);
transition: color var(--speed-fast) var(--ease);
}
.btn-instagram:hover {
color: var(--turquoise);
}
.btn-instagram svg {
opacity: 0.9;
}
/* Menu burger — mobile uniquement.
NOTE : cette règle de base doit rester AVANT la media query qui la
masque en desktop (à spécificité égale, la dernière règle l'emporte).
C'est ce qui faisait apparaître le burger sur desktop auparavant. */
.menu-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
background: transparent;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform var(--speed-med) var(--ease), opacity var(--speed-fast) var(--ease);
}
.menu-toggle.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Bascule desktop : nav visible, burger masqué.
Placée APRÈS les règles de base pour l'emporter correctement. */
@media (min-width: 900px) {
.site-nav {
display: flex;
}
.menu-toggle {
display: none;
}
}
/* Panneau mobile */
.mobile-nav {
position: fixed;
top: var(--header-h);
right: 0;
width: min(320px, 84vw);
height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h));
background: var(--navy-2);
border-left: 1px solid var(--border-soft);
padding: 28px 24px;
z-index: 199;
overflow-y: auto;
/* État fermé.
ATTENTION : ne PAS le pousser hors écran avec translateX(100%).
Ce panneau est en `position: fixed` — il échappe donc au
`overflow-x: clip` de — et un panneau de 320 px projeté au-delà
du bord droit rend toute la page défilable horizontalement, sur les
quatre pages. On le masque donc sur place : opacité, visibilité, et
un glissement de quelques pixels seulement. */
opacity: 0;
visibility: hidden;
/* Décalage VERTICAL : un décalage horizontal, même de 14 px, rendrait
de nouveau la page défilable latéralement. */
transform: translateY(-10px);
transition: opacity var(--speed-med) var(--ease),
transform var(--speed-med) var(--ease),
visibility 0s linear var(--speed-med);
}
.mobile-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity var(--speed-med) var(--ease),
transform var(--speed-med) var(--ease),
visibility 0s;
}
.mobile-nav ul {
display: flex;
flex-direction: column;
gap: 6px;
}
.mobile-nav a {
display: block;
padding: 14px 10px;
font-size: 1.05rem;
font-weight: 700;
border-radius: var(--radius-sm);
color: var(--white);
}
.mobile-nav a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--turquoise);
}
.mobile-nav a.is-current {
background: rgba(25, 211, 230, 0.1);
color: var(--turquoise);
}
.nav-scrim {
position: fixed;
inset: 0;
background: rgba(2, 10, 18, 0.6);
z-index: 198;
opacity: 0;
transition: opacity var(--speed-med) var(--ease);
}
.nav-scrim.is-visible {
opacity: 1;
}
@media (min-width: 900px) {
.mobile-nav,
.nav-scrim {
display: none !important;
}
}
/* ==========================================================================
5. STAGE — hero + "À ne pas manquer" partagent un seul décor
Le but : que le passage du hero à la première section ne se lise pas
comme "nouvelle section HTML" mais comme la continuité du même univers.
Le fond, le grain et les halos appartiennent au .stage, pas aux sections.
========================================================================== */
.stage {
position: relative;
isolation: isolate;
overflow: hidden;
/* Le dernier stop vaut exactement --navy-2, c'est-à-dire la couleur de
départ de la section Préventes (.section--alt) qui suit : la jonction
est donc invisible, sans calque de fondu supplémentaire. */
background: linear-gradient(
180deg,
var(--navy-deep) 0%,
#061d31 20%,
var(--petrol) 46%,
#08243a 72%,
var(--navy-2) 100%
);
}
/* Grain quasi imperceptible : casse l'aplat sans se voir. */
.stage::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
opacity: 0.035;
pointer-events: none;
z-index: 3;
}
/* Halos atmosphériques : ils traversent volontairement la frontière
hero / highlights, c'est ce qui crée la sensation de continuité. */
.stage-atmosphere {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.glow {
position: absolute;
border-radius: 50%;
/* Pas de filter: blur() — le radial-gradient est déjà diffus, et rester
sur transform/opacity garde l'animation composited (perf). */
will-change: transform;
}
.glow--turquoise {
top: -14%;
right: -6%;
width: min(760px, 82vw);
aspect-ratio: 1;
background: radial-gradient(
circle,
rgba(25, 211, 230, 0.3) 0%,
rgba(25, 211, 230, 0.11) 34%,
rgba(25, 211, 230, 0) 68%
);
animation: glow-drift-a 22s ease-in-out infinite alternate;
}
.glow--gold {
/* Positionné pile sur la couture hero → highlights. */
top: 46%;
left: -14%;
width: min(620px, 78vw);
aspect-ratio: 1;
background: radial-gradient(
circle,
rgba(255, 184, 77, 0.17) 0%,
rgba(255, 184, 77, 0.07) 36%,
rgba(255, 184, 77, 0) 70%
);
animation: glow-drift-b 27s ease-in-out infinite alternate;
}
.glow--violet {
bottom: 4%;
right: 8%;
width: min(460px, 66vw);
aspect-ratio: 1;
background: radial-gradient(
circle,
rgba(139, 111, 224, 0.14) 0%,
rgba(139, 111, 224, 0.05) 40%,
rgba(139, 111, 224, 0) 72%
);
animation: glow-drift-a 31s ease-in-out infinite alternate-reverse;
}
/* Rayons obliques très diffus : la lumière de scène de la maquette.
Purement CSS, aucun fichier image. */
.stage-ray {
position: absolute;
pointer-events: none;
transform-origin: top center;
}
.stage-ray--a {
top: -10%;
left: 46%;
width: 40vw;
height: 120%;
background: linear-gradient(
180deg,
rgba(120, 220, 235, 0.08),
rgba(120, 220, 235, 0)
);
transform: rotate(16deg);
}
.stage-ray--b {
top: -14%;
left: 66%;
width: 22vw;
height: 110%;
background: linear-gradient(
180deg,
rgba(255, 210, 130, 0.06),
rgba(255, 210, 130, 0)
);
transform: rotate(-11deg);
}
@keyframes glow-drift-a {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-4%, 5%, 0) scale(1.1); }
}
@keyframes glow-drift-b {
from { transform: translate3d(0, 0, 0) scale(1.05); }
to { transform: translate3d(5%, -4%, 0) scale(0.95); }
}
/* --------------------------------------------------------------------------
5b. HERO — composition « Editorial Nights »
Deux zones sur desktop : le discours à gauche, une pile d'affiches
événementielles à droite. Sur mobile, la même matière se réorganise
verticalement, les affiches devenant un carrousel glissable.
-------------------------------------------------------------------------- */
.hero {
position: relative;
z-index: 1;
padding-block: 26px 34px;
scroll-margin-top: var(--header-h);
}
/* L'accueil est volontairement une couverture : header + hero uniquement.
Sur desktop, le hero remplit exactement l'espace restant sous le header.
Sur mobile, son contenu peut dépasser naturellement et rester défilable. */
.home-page {
min-height: 100vh;
min-height: 100svh;
overflow-x: hidden;
}
.home-page #main,
.home-page .stage {
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
}
@media (min-width: 1024px) {
.home-page .hero {
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
display: flex;
align-items: center;
}
.home-page .hero-inner {
width: 100%;
}
}
.hero-inner {
position: relative;
display: grid;
gap: 24px;
}
.hero-copy {
position: relative;
z-index: 3;
}
.hero h1 {
font-size: clamp(2.6rem, 12.4vw, 4rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.04em;
margin-bottom: 18px;
/* Les coupures se font naturellement, sans
forcé : le texte reste
correct quelle que soit la largeur. */
max-width: 11ch;
}
/* Le mot "Tahiti" en dégradé cyan -> aqua -> jaune.
`color` est défini AVANT le clip : si background-clip: text n'est pas
pris en charge, le mot reste lisible en cyan plutôt qu'invisible. */
.hero h1 .accent {
color: var(--turquoise-bright);
background: linear-gradient(90deg, #24d7e5 0%, #55d6c6 48%, #f4d447 100%);
-webkit-background-clip: text;
background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero h1 .accent {
color: transparent;
}
}
/* Le point d'interrogation reste blanc, il n'appartient pas au mot. */
.hero-qmark {
color: var(--white);
}
.hero-subtitle {
font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1rem);
color: var(--text-secondary);
max-width: 34ch;
margin-bottom: 26px;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
min-height: 48px; /* zone tactile confortable */
font-size: 1rem;
}
/* --------------------------------------------------------------------------
5c. HERO — affiches
-------------------------------------------------------------------------- */
.hero-visual {
position: relative;
z-index: 2;
}
/* Mobile : carrousel natif. L'affiche suivante dépasse volontairement à
droite pour faire comprendre que la zone se fait glisser. */
.hero-posters {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Débord jusqu'aux bords de l'écran, en conservant la gouttière. */
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
padding-block: 4px 8px;
}
.hero-posters::-webkit-scrollbar {
display: none;
}
.hero-poster {
position: relative;
flex: 0 0 84%;
margin: 0;
scroll-snap-align: start;
/* 4:5 et non 2:3 : les affiches réelles arrivent en carré (format
Instagram) ou en bandeau. Le 4:5 n'en rogne que 20 % au lieu de 33 %,
tout en gardant une silhouette d'affiche portrait. Bonus : des cadres
moins hauts, donc un hero qui tient plus facilement à l'écran. */
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
/* Chaque affiche est un bouton : cliquable à la souris, atteignable au
clavier, et annoncée correctement par les lecteurs d'écran. */
.hero-poster__btn {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: default;
}
.hero-poster__btn:focus-visible {
outline: 3px solid var(--turquoise);
outline-offset: 4px;
border-radius: var(--radius-lg);
}
.hero-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Date et commune des affiches latérales, posées dans le bas de l'affiche.
Placées à l'intérieur du : elles suivent donc l'affiche où
qu'elle aille, sans calcul de position fragile. */
.hero-poster__meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 34px 16px 14px;
display: flex;
flex-direction: column;
gap: 1px;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
/* Voile sombre pour garantir la lisibilité quelle que soit l'affiche. */
background: linear-gradient(180deg, rgba(4, 14, 24, 0), rgba(4, 14, 24, 0.9));
}
.hero-poster__date {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
color: var(--white);
}
.hero-poster__place {
color: rgba(255, 255, 255, 0.66);
}
/* Sur l'affiche de devant, la puce flottante porte déjà la date et la
commune : sa légende intégrée ferait doublon. Valable à TOUTES les
tailles — en mobile aussi, la première affiche du carrousel est celle
que la puce décrit. */
.hero-poster.is-main .hero-poster__meta {
opacity: 0;
pointer-events: none;
}
/* Puce date + commune de l'affiche principale.
Sur mobile elle se pose dans le coin de la première affiche. */
.hero-chip {
position: absolute;
top: 14px;
left: calc(var(--container-pad) - var(--container-pad) + 14px);
z-index: 3;
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 9px 15px;
border-radius: var(--radius-md);
background: rgba(6, 22, 37, 0.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 0.82rem;
line-height: 1.25;
pointer-events: none;
}
.hero-chip[hidden] {
display: none;
}
.hero-chip__date {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--white);
}
.hero-chip__place {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Libellés des affiches latérales : réservés au desktop, où les affiches
sont posées côte à côte. En mobile ils n'auraient pas de place. */
.hero-posters-meta {
display: none;
}
/* Matrice de points : rappel graphique discret de la maquette. */
.hero-dots {
display: none;
position: absolute;
width: 62px;
height: 78px;
background-image: radial-gradient(rgba(255, 255, 255, 0.34) 1.4px, transparent 1.5px);
background-size: 16px 16px;
pointer-events: none;
}
/* Signature éditoriale en bas de composition (desktop uniquement). */
.hero-signature {
display: none;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1.7;
color: rgba(255, 255, 255, 0.38);
}
.hero-signature__rule {
display: inline-block;
width: 30px;
height: 1px;
margin-right: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.28);
}
/* ---- Tablette : le titre grandit, les affiches restent en carrousel
mais on en montre davantage. ---- */
@media (min-width: 700px) {
.hero {
padding-block: 36px 44px;
}
.hero h1 {
font-size: clamp(3.4rem, 7vw, 4.6rem);
max-width: 13ch;
}
.hero-subtitle {
max-width: 42ch;
}
.hero-actions {
flex-direction: row;
}
.hero-actions .btn {
width: auto;
min-width: 190px;
}
.hero-poster {
flex-basis: 42%;
}
}
/* ---- Desktop : deux zones, affiches superposées ---- */
@media (min-width: 1024px) {
.hero {
padding-block: 22px 34px;
}
.hero-inner {
grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
align-items: center;
gap: 24px;
/* Volontairement compact : une fenêtre de navigateur courante fait
650-700 px de haut, et la pile d'affiches doit y tenir en entier
sans que l'on ait à redimensionner la fenêtre. */
min-height: 478px;
}
.hero h1 {
font-size: clamp(3.9rem, 5.4vw, 5.6rem);
line-height: 0.95;
letter-spacing: -0.045em;
margin-bottom: 22px;
max-width: 9ch;
}
.hero-subtitle {
font-size: 1.08rem;
max-width: 30ch;
margin-bottom: 32px;
}
.hero-actions .btn {
min-width: 0;
padding: 15px 30px;
}
/* La pile d'affiches remplace le carrousel : plus de défilement, les
trois affiches se superposent comme sur la maquette. */
.hero-visual {
position: relative;
height: 100%;
min-height: 478px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-posters {
display: block;
position: absolute;
inset: 0;
overflow: visible;
margin: 0;
padding: 0;
scroll-snap-type: none;
}
.hero-poster {
position: absolute;
top: 50%;
/* 57% et non 50% : la pile est décalée vers la droite pour dégager
complètement la colonne de texte, et déborde un peu vers le bord
droit du viewport, comme sur la maquette. */
left: 57%;
flex: none;
/* Largeur IDENTIQUE pour les trois : c'est `scale()` qui grossit
l'affiche de devant. On n'anime ainsi que `transform`, ce qui rend
la rotation fluide — animer `width` provoquerait un recalcul de
mise en page à chaque image. */
width: 286px;
transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
/* Les affiches en retrait invitent au clic. */
.hero-poster:not(.is-main) .hero-poster__btn {
cursor: pointer;
}
/* Affiche principale : au centre, devant, légèrement plus grande. */
.hero-poster.is-main {
z-index: 3;
transform: translate(-50%, -50%) rotate(1.2deg) scale(1.12);
box-shadow: 0 46px 90px -34px rgba(0, 0, 0, 0.95);
border-color: rgba(255, 255, 255, 0.2);
}
/* Affiche de gauche : en retrait, légèrement plus basse et atténuée. */
.hero-poster.is-left {
z-index: 2;
transform: translate(calc(-50% - 188px), calc(-50% + 16px)) rotate(-4deg);
filter: brightness(0.9);
}
/* Affiche de droite : symétrique, elle peut déborder vers le bord. */
.hero-poster.is-right {
z-index: 1;
transform: translate(calc(-50% + 238px), calc(-50% + 22px)) rotate(4.5deg);
filter: brightness(0.88);
}
/* Au survol, seule l'affiche pointée s'éclaircit : on ne déplace plus
toute la pile, ce qui entrerait en conflit avec la rotation au clic. */
@media (hover: hover) {
.hero-poster:not(.is-main):hover {
filter: brightness(1.04);
}
}
/* Puce date : elle flotte au-dessus, à gauche de l'affiche principale. */
.hero-chip {
top: 8%;
left: 0;
z-index: 4;
padding: 11px 18px;
font-size: 0.9rem;
}
.hero-dots {
display: block;
top: 12%;
left: -4%;
}
.hero-signature {
display: block;
position: absolute;
right: 0;
bottom: -18px;
text-align: right;
/* Au-dessus des affiches : la composition étant volontairement
compacte, la signature effleure le coin de l'affiche de droite.
Elle se lit alors comme une surimpression assumée — d'où l'ombre
portée, qui garantit le contraste quelle que soit l'affiche. */
z-index: 4;
text-shadow: 0 2px 12px rgba(4, 14, 24, 0.95);
}
/* Cas où aucun événement n'est mis en avant : le hero reprend toute
la largeur plutôt que de laisser une colonne vide. */
.hero.has-no-posters .hero-inner {
grid-template-columns: 1fr;
min-height: 0;
}
.hero.has-no-posters .hero-visual,
.hero.has-no-posters .hero-signature {
display: none;
}
}
@media (min-width: 1280px) {
.hero-poster {
width: 308px;
}
.hero-poster.is-left {
transform: translate(calc(-50% - 204px), calc(-50% + 18px)) rotate(-4deg);
}
.hero-poster.is-right {
transform: translate(calc(-50% + 258px), calc(-50% + 24px)) rotate(4.5deg);
}
}
/* --------------------------------------------------------------------------
5c-bis. Entrée du hero
Apparition courte et décalée : titre, puis texte, puis boutons, puis
affiches. Neutralisée par prefers-reduced-motion (section 1).
-------------------------------------------------------------------------- */
@keyframes hero-rise {
from {
opacity: 0;
translate: 0 18px;
}
to {
opacity: 1;
translate: 0 0;
}
}
.hero h1,
.hero-subtitle,
.hero-actions,
.hero-visual {
animation: hero-rise 0.7s var(--ease) both;
}
.hero h1 {
animation-delay: 0.05s;
}
.hero-subtitle {
animation-delay: 0.16s;
}
.hero-actions {
animation-delay: 0.25s;
}
.hero-visual {
animation-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
.hero h1,
.hero-subtitle,
.hero-actions,
.hero-visual {
animation: none;
opacity: 1;
translate: none;
}
}
/* --------------------------------------------------------------------------
5d. "À NE PAS MANQUER" dans le stage
La section n'a pas de fond propre : elle laisse voir celui du .stage.
Une ligne lumineuse très fine marque la couture sans la fermer.
-------------------------------------------------------------------------- */
.section--highlights {
position: relative;
z-index: 1;
background: transparent;
/* Le hero fournit déjà l'air au-dessus : pas de double espacement. */
padding-top: 8px;
padding-bottom: 46px;
}
/* Le kicker "SORTIES DU MOMENT" porte déjà son propre trait lumineux
(.eyebrow::before) : pas de second filet au-dessus, qui faisait doublon. */
/* Pas de calque de fondu en bas du stage : son dégradé se termine déjà
exactement sur --navy, la couleur du body. La jonction avec la section
Préventes est donc invisible par construction, sans calque qui
viendrait grisailler le lien "Voir tout l'agenda". */
@media (min-width: 1024px) {
.section--highlights {
padding-top: 16px;
}
}
/* --------------------------------------------------------------------------
6. AGENDA COMPACT + FILTRES
-------------------------------------------------------------------------- */
.agenda-page {
background:
radial-gradient(circle at 78% 8%, rgba(25, 211, 230, 0.08), transparent 30rem),
var(--navy);
}
.agenda-section {
padding-block: 28px 56px;
}
.agenda-heading {
margin-bottom: 18px;
}
.agenda-heading h1 {
font-size: clamp(2.35rem, 1.9rem + 2vw, 3.35rem);
font-weight: 800;
line-height: 1;
margin-bottom: 10px;
}
.agenda-heading__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 14px;
color: var(--text-secondary);
font-size: 0.93rem;
}
.agenda-count {
color: var(--turquoise);
font-weight: 700;
}
.agenda-count::before {
content: "";
display: none;
width: 1px;
height: 22px;
margin-right: 14px;
vertical-align: middle;
background: var(--border-soft);
}
.filters {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.filters--agenda {
gap: 12px;
margin-bottom: 22px;
}
.filter-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
/* Fondu discret sur les bords pour indiquer que la liste défile */
mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 28px), transparent 100%);
}
.filter-row::-webkit-scrollbar {
display: none;
}
.chip {
flex-shrink: 0;
padding: 9px 18px;
border-radius: var(--radius-pill);
background: var(--navy-3);
border: 1px solid var(--border-soft);
color: var(--text-secondary);
font-size: 0.86rem;
font-weight: 700;
transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.chip:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.2);
}
.chip.is-active {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: var(--navy);
border-color: transparent;
}
.filter-row--dates {
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
padding-bottom: 2px;
mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.filter-row--dates .chip {
min-height: 46px;
}
.filter-selects {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.filter-select {
display: grid;
gap: 2px;
min-width: 0;
padding: 9px 12px 10px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: rgba(16, 44, 70, 0.58);
}
.filter-select > span {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 700;
}
.filter-select select {
width: 100%;
min-height: 28px;
padding: 0 24px 0 0;
border: 0;
outline: 0;
color: var(--white);
background: transparent;
font: inherit;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
}
.filter-select:focus-within {
border-color: var(--turquoise);
box-shadow: 0 0 0 2px rgba(25, 211, 230, 0.12);
}
@media (min-width: 700px) {
.agenda-heading__meta {
font-size: 1rem;
}
.agenda-count::before {
display: inline-block;
}
}
@media (min-width: 1024px) {
.agenda-section {
padding-block: 34px 72px;
}
.agenda-heading {
margin-bottom: 20px;
}
.filters--agenda {
display: grid;
grid-template-columns: minmax(500px, 1.35fr) minmax(420px, 1fr);
align-items: stretch;
gap: 0;
padding: 12px;
margin-bottom: 22px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: rgba(11, 34, 56, 0.7);
}
.filter-row--dates {
margin: 0;
padding: 0 18px 0 0;
overflow: visible;
mask-image: none;
-webkit-mask-image: none;
gap: 0;
}
.filter-row--dates .chip {
flex: 1 1 auto;
border-radius: 0;
border-right-width: 0;
}
.filter-row--dates .chip:first-child {
border-radius: 10px 0 0 10px;
}
.filter-row--dates .chip:last-child {
border-radius: 0 10px 10px 0;
border-right-width: 1px;
}
.filter-selects {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding-left: 18px;
border-left: 1px solid var(--border-soft);
}
.filter-select {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 7px 12px;
}
.filter-select > span {
font-size: 0.78rem;
}
}
.empty-state {
text-align: center;
color: var(--text-muted);
padding-block: 40px;
font-size: 0.95rem;
}
/* --------------------------------------------------------------------------
7. CARTES — helpers communs (media / hover)
-------------------------------------------------------------------------- */
.card-media {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--navy-3), var(--navy-2));
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--speed-med) var(--ease);
}
.badge-date {
position: absolute;
top: 12px;
left: 12px;
background: rgba(7, 26, 43, 0.72);
backdrop-filter: blur(6px);
color: var(--white);
font-size: 0.78rem;
font-weight: 800;
padding: 6px 12px;
border-radius: var(--radius-sm);
text-transform: capitalize;
}
.badge-early {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--navy);
font-size: 0.72rem;
font-weight: 800;
padding: 6px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* --------------------------------------------------------------------------
8. À NE PAS MANQUER (highlights)
-------------------------------------------------------------------------- */
.highlights-track {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
margin: 0 calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
scrollbar-width: none;
}
.highlights-track::-webkit-scrollbar {
display: none;
}
.highlights-track .event-card {
flex: 0 0 82%;
scroll-snap-align: start;
}
@media (min-width: 640px) {
.highlights-track .event-card {
flex-basis: 48%;
}
}
@media (min-width: 1024px) {
.highlights-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow: visible;
margin: 0;
padding-inline: 0;
}
.highlights-track .event-card {
flex-basis: auto;
}
}
@media (min-width: 1280px) {
.highlights-track {
grid-template-columns: repeat(4, 1fr);
}
}
/* --------------------------------------------------------------------------
9. EVENT CARD (agenda + highlights)
-------------------------------------------------------------------------- */
.event-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 700px) {
.event-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.event-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.event-card {
background: var(--navy-2);
border: 1px solid var(--border-softer);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
transition: transform var(--speed-med) var(--ease), box-shadow var(--speed-med) var(--ease);
}
/* L'état caché/révélé est géré par le système .reveal (section 6b),
posé sur la carte par script.js. */
@media (hover: hover) {
.event-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
.event-card:hover .card-media img {
transform: scale(1.05);
}
}
.event-card .card-media {
aspect-ratio: 16 / 11;
}
.event-card__body {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.event-card__category {
display: inline-flex;
align-self: flex-start;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(25, 211, 230, 0.12);
color: var(--turquoise);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.event-card__title {
font-size: 1.12rem;
font-weight: 800;
line-height: 1.3;
}
.event-card__meta {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--text-secondary);
font-size: 0.88rem;
}
.event-card__meta li {
display: flex;
align-items: center;
gap: 8px;
}
.event-card__meta svg {
color: var(--text-muted);
}
.event-card__footer {
margin-top: auto;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-top: 1px solid var(--border-softer);
}
.event-card__price {
font-size: 0.86rem;
font-weight: 700;
color: var(--gold);
}
.event-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.86rem;
font-weight: 800;
color: var(--white);
transition: gap var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.event-card__link:hover {
color: var(--turquoise);
gap: 10px;
}
.event-card__link.is-disabled {
color: var(--text-muted);
cursor: default;
text-decoration: none;
}
/* --------------------------------------------------------------------------
10. PRÉVENTES
-------------------------------------------------------------------------- */
.presales-page {
min-height: calc(100svh - var(--header-h));
}
.presales-section {
padding-block: 26px 42px;
}
.presales-heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.presales-heading h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 1.75rem + 1vw, 2.75rem);
line-height: 1.08;
letter-spacing: -0.025em;
margin-bottom: 6px;
}
.presales-heading p {
color: var(--text-secondary);
font-size: 0.94rem;
}
.presales-count {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 7px 13px;
border: 1px solid rgba(25, 211, 230, 0.18);
border-radius: var(--radius-sm);
background: rgba(25, 211, 230, 0.08);
color: var(--turquoise);
font-size: 0.8rem;
font-weight: 700;
}
.presales-count::before {
content: "";
width: 8px;
height: 8px;
margin-right: 8px;
border: 2px solid currentColor;
border-radius: 50%;
}
.presales-scroll-hint {
display: flex;
align-items: center;
gap: 8px;
margin: 20px 0 12px;
color: var(--text-muted);
font-size: 0.8rem;
}
.presales-scroll-hint > span {
color: var(--turquoise);
}
.presale-carousel-shell {
position: relative;
}
.presale-carousel {
display: flex;
gap: 18px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--container-pad);
padding: 4px var(--container-pad) 12px;
margin-inline: calc(var(--container-pad) * -1);
scrollbar-width: none;
cursor: grab;
-webkit-overflow-scrolling: touch;
}
.presale-carousel::-webkit-scrollbar {
display: none;
}
.presale-carousel:focus-visible {
outline: 2px solid var(--turquoise);
outline-offset: 5px;
border-radius: var(--radius-sm);
}
.presale-carousel.is-dragging {
cursor: grabbing;
user-select: none;
scroll-snap-type: none;
}
.presale-card {
flex: 0 0 min(76vw, 286px);
scroll-snap-align: start;
background: var(--navy-2);
border: 1px solid rgba(25, 211, 230, 0.28);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
transition: transform var(--speed-med) var(--ease), box-shadow var(--speed-med) var(--ease);
}
@media (hover: hover) {
.presale-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
}
.presale-card:hover .presale-card__poster img {
transform: scale(1.025);
}
}
.presale-card .card-media {
aspect-ratio: 3 / 4;
}
.presale-card__poster {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--turquoise);
cursor: pointer;
}
.presale-card__poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--speed-med) var(--ease);
}
.presale-card__poster:focus-visible {
outline: 3px solid var(--gold);
outline-offset: -3px;
}
.presale-card__body {
padding: 13px 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.presale-card__title {
font-size: 1rem;
font-weight: 800;
line-height: 1.25;
margin-bottom: 2px;
}
.presale-card__meta {
display: flex;
align-items: center;
gap: 7px;
color: var(--text-secondary);
font-size: 0.76rem;
line-height: 1.35;
}
.presale-card__meta svg {
flex: 0 0 auto;
color: var(--turquoise);
}
.presale-card__price {
font-weight: 800;
color: var(--gold);
font-size: 0.9rem;
margin: 2px 0 4px;
}
.presale-card__reserve {
min-height: 42px;
margin-top: auto;
padding: 10px 18px;
border-radius: var(--radius-sm);
font-size: 0.88rem;
}
.presale-card__reserve.is-disabled {
opacity: 0.58;
cursor: default;
pointer-events: none;
box-shadow: none;
}
/* Sur téléphone, une carte complète doit rester visible sans devoir descendre
jusqu'au bouton. L'affiche est donc légèrement recadrée et les informations
essentielles sont resserrées, sans modifier la version ordinateur. */
@media (max-width: 699px) {
.presales-section {
padding-block: 16px 28px;
}
.presales-heading {
gap: 8px;
}
.presales-heading h1 {
font-size: 1.85rem;
margin-bottom: 2px;
}
.presales-heading p {
font-size: 0.82rem;
}
.presales-count {
min-height: 30px;
padding: 5px 10px;
font-size: 0.72rem;
}
.presales-scroll-hint {
margin: 9px 0 7px;
font-size: 0.7rem;
}
.presale-carousel {
gap: 12px;
padding-bottom: 6px;
}
.presale-card {
flex-basis: clamp(200px, 58vw, 224px);
}
.presale-card .card-media {
aspect-ratio: 4 / 5;
}
.presale-card__poster img {
object-position: center top;
}
.presale-card__body {
padding: 8px 9px 9px;
gap: 2px;
}
.presale-card__title {
display: -webkit-box;
overflow: hidden;
min-height: 2.4em;
margin-bottom: 1px;
font-size: 0.78rem;
line-height: 1.2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.presale-card__meta {
gap: 5px;
font-size: 0.64rem;
line-height: 1.25;
}
.presale-card__meta svg {
width: 13px;
height: 13px;
}
.presale-card__price {
display: -webkit-box;
overflow: hidden;
margin: 1px 0 2px;
font-size: 0.72rem;
line-height: 1.25;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.presale-card__reserve {
width: 88%;
min-height: 30px;
align-self: center;
padding: 5px 8px;
border-radius: 8px;
font-size: 0.68rem;
}
.fine-print {
margin-top: 6px;
font-size: 0.64rem;
}
}
.carousel-arrow {
position: absolute;
top: 46%;
z-index: 4;
display: none;
place-items: center;
width: 46px;
height: 46px;
padding: 0 0 5px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
background: rgba(7, 26, 43, 0.9);
color: var(--white);
font-size: 2rem;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(7px);
transition: opacity var(--speed-fast), border-color var(--speed-fast), color var(--speed-fast);
}
.carousel-arrow:hover {
border-color: var(--turquoise);
color: var(--turquoise);
}
.carousel-arrow:disabled,
.carousel-arrow.is-hidden {
opacity: 0;
pointer-events: none;
}
.carousel-arrow--prev {
left: -58px;
}
.carousel-arrow--next {
right: -58px;
}
.fine-print {
margin-top: 14px;
text-align: left;
color: var(--text-muted);
font-size: 0.72rem;
}
@media (min-width: 700px) {
.presales-section {
padding-block: 38px 54px;
}
.presales-heading {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.presale-carousel {
gap: 20px;
padding-inline: 0;
margin-inline: 0;
scroll-padding-inline: 0;
}
.presale-card {
flex-basis: 270px;
}
}
/* Les ordinateurs portables ont souvent une grande largeur mais seulement
650 à 760 px de hauteur utile. Dans ce cas, on compacte toute la zone pour
que l'affiche, le prix et le bouton restent visibles sans descendre. */
@media (min-width: 700px) and (max-height: 820px) {
.presales-section {
padding-block: 12px 18px;
}
.presales-heading h1 {
font-size: 1.8rem;
margin-bottom: 2px;
}
.presales-heading p {
font-size: 0.76rem;
}
.presales-count {
min-height: 32px;
padding: 5px 11px;
font-size: 0.74rem;
}
.presales-scroll-hint {
margin: 5px 0 5px;
font-size: 0.68rem;
}
.presale-carousel {
gap: 14px;
padding-bottom: 4px;
}
.presale-card {
flex-basis: clamp(172px, calc((100svh - 330px) * 0.6), 205px);
}
.presale-card .card-media {
aspect-ratio: 4 / 5;
}
.presale-card__body {
padding: 7px 9px 8px;
gap: 2px;
}
.presale-card__title {
display: -webkit-box;
overflow: hidden;
font-size: 0.8rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-bottom: 1px;
}
.presale-card__meta {
gap: 5px;
font-size: 0.63rem;
}
.presale-card__meta svg {
width: 13px;
height: 13px;
}
.presale-card__price {
display: -webkit-box;
overflow: hidden;
font-size: 0.72rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin: 1px 0 2px;
}
.presale-card__reserve {
min-height: 31px;
padding: 6px 12px;
font-size: 0.72rem;
}
.fine-print {
margin-top: 4px;
font-size: 0.66rem;
}
}
@media (min-width: 1320px) {
.carousel-arrow {
display: grid;
}
}
/* Visionneuse plein écran des affiches. */
body.viewer-open {
overflow: hidden;
}
.poster-viewer[hidden] {
display: none;
}
.poster-viewer {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 12px;
}
.poster-viewer__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 9, 16, 0.94);
backdrop-filter: blur(12px);
}
.poster-viewer__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 1040px);
height: min(94svh, 900px);
overflow: hidden;
border: 1px solid rgba(25, 211, 230, 0.26);
border-radius: var(--radius-lg);
background: var(--navy-deep);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72);
}
.poster-viewer__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 58px;
padding: 9px 10px 9px 16px;
border-bottom: 1px solid var(--border-soft);
}
.poster-viewer__topbar h2 {
overflow: hidden;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.poster-viewer__actions {
display: flex;
align-items: center;
gap: 6px;
}
.poster-viewer__actions button {
display: grid;
place-items: center;
min-width: 38px;
height: 38px;
padding: 0 9px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 9px;
background: rgba(255, 255, 255, 0.05);
color: var(--white);
font: inherit;
cursor: pointer;
}
.poster-viewer__actions button:hover {
border-color: var(--turquoise);
color: var(--turquoise);
}
.poster-viewer__close {
margin-left: 4px;
font-size: 1.5rem !important;
}
.poster-viewer__stage {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
display: grid;
place-items: center;
touch-action: none;
cursor: grab;
background:
radial-gradient(circle at 50% 42%, rgba(25, 211, 230, 0.08), transparent 45%),
#020b13;
}
.poster-viewer__stage:active {
cursor: grabbing;
}
.poster-viewer__stage img {
width: auto;
height: 100%;
max-width: 100%;
object-fit: contain;
transform-origin: center;
will-change: transform;
user-select: none;
-webkit-user-drag: none;
}
.poster-viewer__help {
padding: 8px 12px;
border-top: 1px solid var(--border-soft);
color: var(--text-muted);
font-size: 0.7rem;
text-align: center;
}
@media (max-width: 560px) {
.poster-viewer {
padding: 0;
}
.poster-viewer__panel {
width: 100%;
height: 100svh;
border: 0;
border-radius: 0;
}
.poster-viewer__topbar h2 {
max-width: 110px;
}
.poster-viewer__actions {
gap: 4px;
}
.poster-viewer__actions button {
min-width: 34px;
height: 36px;
padding-inline: 7px;
}
}
/* --------------------------------------------------------------------------
11. HAPPY HOURS
-------------------------------------------------------------------------- */
.happyhours-page {
min-height: calc(100svh - var(--header-h));
background:
radial-gradient(circle at 82% 8%, rgba(25, 211, 230, 0.07), transparent 30rem),
var(--navy);
}
.happyhours-section {
padding-block: 26px 54px;
}
.happyhours-heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 13px;
}
.happyhours-heading h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 1.75rem + 1vw, 2.75rem);
line-height: 1.08;
letter-spacing: -0.025em;
margin-bottom: 6px;
}
.happyhours-heading p {
color: var(--text-secondary);
font-size: 0.94rem;
}
.happyhours-count {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 7px 13px;
border: 1px solid rgba(25, 211, 230, 0.18);
border-radius: var(--radius-sm);
background: rgba(25, 211, 230, 0.08);
color: var(--turquoise);
font-size: 0.8rem;
font-weight: 700;
}
.happyhours-count::before {
content: "";
width: 8px;
height: 8px;
margin-right: 8px;
border: 2px solid currentColor;
border-radius: 50%;
}
.filters--happyhours {
margin: 20px 0 20px;
}
.filters--happyhours .filter-row {
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
}
.filters--happyhours .chip {
min-height: 40px;
padding: 8px 17px;
}
.happyhour-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 768px) {
.happyhour-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.happyhour-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.hh-card {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--navy-3);
border: 1px solid var(--border-softer);
border-radius: var(--radius-md);
padding: 14px;
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: transform var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease);
}
@media (hover: hover) {
.hh-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 212, 59, 0.3);
}
}
.hh-card__thumb {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--navy-2);
}
.hh-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hh-card__body {
flex: 1;
min-width: 0;
}
.hh-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.hh-card__top h3 {
font-size: 1rem;
font-weight: 800;
}
.hh-card__city {
flex-shrink: 0;
font-size: 0.72rem;
font-weight: 700;
color: var(--turquoise);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.hh-card__badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 5px 8px;
}
.hh-card__status {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 22px;
padding: 3px 7px;
border: 1px solid currentColor;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.035);
color: var(--text-muted);
font-size: 0.61rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.hh-card__status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}
.hh-card__status.is-active {
color: #43db8f;
background: rgba(67, 219, 143, 0.08);
}
.hh-card__status.is-ending {
color: #ffad42;
background: rgba(255, 173, 66, 0.09);
}
.hh-card__status.is-ended {
color: #ff6577;
background: rgba(255, 101, 119, 0.08);
}
.hh-card__status.is-upcoming,
.hh-card__status.is-offday,
.hh-card__status.is-unknown {
color: rgba(255, 255, 255, 0.48);
}
@media (prefers-reduced-motion: no-preference) {
.hh-card__status.is-active .hh-card__status-dot {
animation: hh-status-pulse 2.2s ease-out infinite;
}
}
@keyframes hh-status-pulse {
0%, 45% { box-shadow: 0 0 0 3px rgba(67, 219, 143, 0.13); }
70% { box-shadow: 0 0 0 6px rgba(67, 219, 143, 0); }
100% { box-shadow: 0 0 0 3px rgba(67, 219, 143, 0.13); }
}
.hh-card__hours {
font-size: 0.86rem;
color: var(--gold);
font-weight: 700;
margin-bottom: 3px;
}
.hh-card__offer {
font-size: 0.86rem;
color: var(--text-secondary);
margin-bottom: 8px;
}
.hh-card__schedules {
display: grid;
gap: 8px;
margin: 7px 0 10px;
}
.hh-card__schedule {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hh-card__schedule:first-child {
padding-top: 0;
border-top: 0;
}
.hh-card__schedule-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.hh-card__schedule .hh-card__hours,
.hh-card__schedule .hh-card__offer {
margin-bottom: 3px;
}
.hh-card__schedule .hh-card__status {
flex-shrink: 0;
}
.hh-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 800;
color: var(--white);
transition: color var(--speed-fast) var(--ease);
}
.hh-card__cta:hover {
color: var(--turquoise);
}
.happyhours-page .hh-card {
background: rgba(16, 44, 70, 0.62);
border-color: rgba(255, 255, 255, 0.08);
}
@media (min-width: 700px) {
.happyhours-section {
padding-block: 38px 58px;
}
.happyhours-heading {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.filters--happyhours {
margin: 18px 0 20px;
}
.filters--happyhours .filter-row {
margin-inline: 0;
padding-inline: 0;
mask-image: none;
-webkit-mask-image: none;
}
}
@media (min-width: 700px) and (max-height: 760px) {
.happyhours-section {
padding-block: 18px 38px;
}
.happyhours-heading h1 {
font-size: 2rem;
margin-bottom: 2px;
}
.happyhours-heading p {
font-size: 0.82rem;
}
.happyhours-count {
min-height: 32px;
padding: 5px 11px;
font-size: 0.74rem;
}
.filters--happyhours {
margin: 12px 0 14px;
}
.filters--happyhours .chip {
min-height: 36px;
padding: 6px 15px;
font-size: 0.78rem;
}
.happyhour-grid {
gap: 11px;
}
.happyhours-page .hh-card {
padding: 11px;
}
}
/* --------------------------------------------------------------------------
12. CE WEEK-END (éditorial)
-------------------------------------------------------------------------- */
.weekend-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.weekend-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.weekend-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-card);
transition: transform var(--speed-med) var(--ease), box-shadow var(--speed-med) var(--ease);
}
@media (hover: hover) {
.weekend-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
.weekend-card:hover img {
transform: scale(1.06);
}
}
.weekend-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--speed-med) var(--ease);
}
.weekend-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 26, 43, 0) 30%, rgba(7, 26, 43, 0.95) 92%);
}
.weekend-card__body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
z-index: 1;
}
.weekend-card__body h3 {
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 6px;
}
.weekend-card__body p {
color: var(--text-secondary);
font-size: 0.88rem;
margin-bottom: 10px;
}
.weekend-card__body a {
font-weight: 800;
font-size: 0.88rem;
color: var(--gold);
}
.weekend-card__body a:hover {
color: var(--turquoise);
}
/* --------------------------------------------------------------------------
13. INSTAGRAM
-------------------------------------------------------------------------- */
.instagram-inner .section-head {
margin-bottom: 32px;
}
.instagram-inner .section-head p {
margin-block: 10px 20px;
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 640px;
margin-inline: auto;
}
.instagram-tile {
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-softer);
}
.instagram-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--speed-med) var(--ease);
}
@media (hover: hover) {
.instagram-tile:hover img {
transform: scale(1.08);
}
}
/* --------------------------------------------------------------------------
14. FOOTER
-------------------------------------------------------------------------- */
.site-footer {
background: var(--navy-3);
border-top: 1px solid var(--border-softer);
padding-block: 40px;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.footer-brand p {
color: var(--text-muted);
font-size: 0.88rem;
margin-top: 8px;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.footer-nav a {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
transition: color var(--speed-fast) var(--ease);
}
.footer-nav a:hover {
color: var(--turquoise);
}
.footer-copy {
color: var(--text-muted);
font-size: 0.82rem;
}
@media (min-width: 768px) {
.footer-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* --------------------------------------------------------------------------
15. APPARITIONS AU SCROLL — variantes
Trois nuances au lieu d'un seul fade+translate appliqué partout.
Le décalage entre cartes passe par --reveal-delay, posé par script.js.
IMPORTANT : on anime les propriétés indépendantes translate / scale,
PAS transform. Les cartes utilisent déjà transform pour leur hover ;
les deux systèmes cohabitent ainsi sans s'écraser l'un l'autre.
Ce bloc est placé après les cartes volontairement.
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transition: opacity 0.65s var(--ease), translate 0.65s var(--ease),
scale 0.65s var(--ease);
transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
opacity: 1;
translate: none;
scale: 1;
}
/* Titres et blocs éditoriaux : montée courte, sans mise à l'échelle. */
.reveal--head {
translate: 0 16px;
}
/* Cartes : montée + très léger rapprochement. */
.reveal--card {
translate: 0 24px;
scale: 0.985;
}
/* Éléments secondaires (liens "voir tout", vignettes) : fondu discret. */
.reveal--soft {
translate: 0 8px;
}
/* --------------------------------------------------------------------------
16. RESPONSIVE FINE-TUNING
-------------------------------------------------------------------------- */
@media (max-width: 420px) {
.hero h1 {
letter-spacing: -0.01em;
}
.btn {
padding: 13px 22px;
font-size: 0.92rem;
}
/* Le réglage général des boutons mobiles ci-dessus ne doit pas regonfler
le bouton Réserver des petites cartes de prévente. */
.presale-card .presale-card__reserve {
width: 88%;
min-height: 30px;
padding: 5px 8px;
border-radius: 8px;
font-size: 0.68rem;
}
}