/* ==========================================================================
RÔLES DE TEXTE — source unique, parent et sous-sites
Les titres avaient leur échelle ; le texte courant n'en avait pas. On
trouvait donc cinq tailles de paragraphe — 16, 18, 21, 23 et 27 px — sans
qu'aucune ne corresponde à un rôle nommé. Deux paragraphes voisins ne se
composaient pas pareil, et personne ne savait dire lequel avait raison.
Sept rôles, un par usage réel. Comme pour les titres, la règle est : plus
aucune déclaration font-size sur du texte hors de ce bloc. Un paragraphe
qui doit paraître autrement change de classe.
========================================================================== */
.lead {
font-size: var(--fs-lead);
line-height: var(--lh-3);
}
/* Texte mis en avant : citations, chapô de carte, titre de barre fixe. */
.texte-fort {
font-size: var(--fs-7);
line-height: var(--lh-3);
}
/* Texte long : articles et pages de contenu, où le confort de lecture prime
sur la densité. */
.texte-long {
font-size: var(--fs-6);
line-height: var(--lh-4);
}
.body,
.texte {
font-size: var(--fs-5);
line-height: var(--lh-4);
}
/* Texte secondaire : pieds de page, mentions sous un champ. */
.texte-second {
font-size: var(--fs-4);
line-height: var(--lh-3);
}
/* Libellés et boutons. */
.texte-libelle {
font-size: var(--fs-3);
line-height: var(--lh-2);
}
/* Mentions légales, crédits, poids de fichier. */
.texte-mention {
font-size: var(--fs-1);
line-height: var(--lh-2);
}
/* ============================================================================
CIRQUE PHÉNIX — feuille de style du thème
----------------------------------------------------------------------------
SOMMAIRE (Cmd+F sur « § n » pour sauter à une section)
§ 1 Variables, remise à zéro, base
§ 2 Rôles typographiques
§ 3 Boutons
§ 4 Navigation et barre utilitaire
§ 5 Grain et placeholders
§ 6 Hero
§ 7 Sections génériques
§ 8 Animations de révélation
§ 9 Adaptatif
§ 10 Compléments WordPress (menus, contenu, menu mobile)
§ 11 Barre utilitaire au-dessus du menu
§ 12 Bande de réservation pleine largeur
§ 13 Accueil Grand Public
§ 14 Bouton de réservation plein doré
§ 15 Toile Gutenberg (modèle pleine largeur)
§ 16 Champ date et calendrier
§ 17 Hero 85vh, contenu aligné à gauche
§ 18 Ajustements de sections
§ 19 Effet de survol unifié des boutons
§ 20 Barre de réservation fixe
§ 21 Chapiteau : bloc de chiffres
§ 22 Accessibilité
§ 23 Fil d'Ariane
§ 24 Calendrier de réservation (template-reservation.php)
§ 25 à 36 Compléments (séances, fonds, galerie, filets…)
§ 37 Landing (pages de conversion publicitaire)
§ 38 Réseaux sociaux
§ 39 Avis Google sur les landings
CONVENTIONS
- Couleurs, polices et espacements : uniquement via les variables du § 1.
- Aucun !important sauf dans prefers-reduced-motion et les réinitialisations
de styles injectés par WordPress.
- Les surcharges de section se préfixent par leur identifiant (#chapiteau…)
plutôt que par un !important.
============================================================================ */
/*
Theme Name: Cirque Phénix
Theme URI: https://www.cirquephenix.com/
Author: Edgar Tessier
Author URI: https://www.edgar-tessier.fr
Description: Theme sur-mesure du Cirque Phenix - direction luxe (noir, blanc, cuivre), page d'accueil emotionnelle et adaptable par audience. Titres en Trajan (substitut Cinzel), textes en Barlow Semi Condensed, accents Cormorant Garamond.
Version: 3.46.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cirque-phenix
*/
/* Barlow Semi Condensed — hébergé en local (RGPD + performance) */
@font-face {
font-family: "Barlow Semi Condensed";
src: url("assets/fonts/barlow-semicondensed-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow Semi Condensed";
src: url("assets/fonts/barlow-semicondensed-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow Semi Condensed";
src: url("assets/fonts/barlow-semicondensed-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow Semi Condensed";
src: url("assets/fonts/barlow-semicondensed-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ==== § 1 — VARIABLES, REMISE À ZÉRO, BASE ==== */
:root {
--black: #111111;
--white: #ffffff;
--copper: #85684a;
--beige: #f0e9da;
--copper-lt: #b79a72;
--copper-dim: rgba(133, 104, 74, 0.3);
--paper: #fcfbf9;
--ink: #141210;
--ink-soft: #4a443c;
--night: #0d0c0b;
--night-2: #161311;
--font-display: "Barlow Semi Condensed", system-ui, sans-serif;
--font-accent: "Barlow Semi Condensed", system-ui, sans-serif;
--font-body: "Barlow Semi Condensed", system-ui, sans-serif;
/* Police des GRANDS titres, h1 et h2 seulement.
Séparée de --font-display, qui habille aussi les chiffres, les noms de
villes et les titres de cartes — tous en casse normale. Une police de
capitales comme Trajan y transformerait « Pack Famille » en « PACK
FAMILLE ». Ce jeton permet de changer les deux niveaux les plus hauts
sans toucher au reste. */
--font-titre: var(--font-display);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Filets cuivre */
--copper-hair: rgba(133, 104, 74, 0.22);
--copper-hair-strong: rgba(133, 104, 74, 0.45);
/* Échelle d'espacement — une seule source pour tout le rythme vertical.
Toute nouvelle marge doit piocher ici plutôt qu'inventer une valeur. */
/* ---------------------------------------------------------------------
ÉCHELLE TYPOGRAPHIQUE
Avant leur introduction, cette feuille comptait 54 tailles de police
distinctes, 17 interlignages et 22 interlettrages, pour 334 déclarations
toutes écrites en dur.
Les 31 tailles fluides étaient chacune employées UNE seule fois — dont
clamp(19px, 2vw, 23px) et clamp(19px, 1.55vw, 23px), mêmes bornes,
pentes différentes. Autant dire trente et une échelles parallèles.
Un rapport constant entre les pas est ce qui fait qu'une page « tombe
juste » sans qu'on sache dire pourquoi. Il n'y en avait aucun.
Pour modifier l'ensemble : ici, une seule fois.
--------------------------------------------------------------------- */
/* Tailles fixes — texte courant, mentions, libellés. */
--fs-1: 10px;
--fs-2: 11.5px;
--fs-3: 13px;
--fs-4: 14.5px;
--fs-5: 16px;
--fs-6: 18px;
--fs-7: 21px;
--fs-8: 26px;
/* Tailles fluides — six niveaux de titre, l'accroche, les sous-titres. */
--fs-d1: clamp(70px, 11vw, 170px);
--fs-h1: clamp(40px, 7vw, 96px);
--fs-h2: clamp(34px, 5vw, 66px);
--fs-h3: clamp(26px, 3.6vw, 48px);
--fs-h4: clamp(24px, 2.8vw, 38px);
--fs-h5: clamp(21px, 2.3vw, 29px);
--fs-h6: clamp(18px, 1.9vw, 23px);
--fs-lead: clamp(19px, 2.2vw, 27px);
--fs-sub: clamp(17px, 1.5vw, 21px);
--fs-micro: clamp(13px, 1.2vw, 16px);
--fs-nano: clamp(9.5px, 0.9vw, 11.5px);
/* Interlignages, du plus serré au plus aéré. */
/* Sous 1 : réservé au très grand affichage, où l'interligne normal
ouvrirait un gouffre entre deux lignes de 170 px. */
--lh-serre: 0.78;
--lh-0: 1;
--lh-1: 1.15;
--lh-2: 1.3;
--lh-3: 1.45;
--lh-4: 1.6;
--lh-5: 1.75;
/* Au-delà : mentions légales et paragraphes en tout petit corps, où l'œil
a besoin de plus d'air pour retrouver la ligne suivante. */
--lh-large: 1.9;
/* Interlettrages. Les valeurs hautes sont réservées aux petites capitales,
qui ont besoin d'air pour rester lisibles. */
--ls-0: 0.02em;
--ls-1: 0.05em;
--ls-2: 0.1em;
--ls-3: 0.14em;
--ls-4: 0.18em;
--ls-5: 0.24em;
/* ---------------------------------------------------------------------
ÉCHELLE D'ESPACEMENT
Avant son introduction, la feuille employait 56 valeurs distinctes de
marge et de rembourrage : 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28,
30, 32, 34, 36, 38, 40… sans aucun pas commun. Deux sections voisines ne
respiraient donc jamais pareil, et le rythme vertical de la page ne
s'installait nulle part.
Seize pas, de 2 à 168 px. Pas de 2 px dans le bas — ce sont de vrais
micro-ajustements, un filet, l'alignement d'une icône — puis une
progression d'environ 1,25, le même rapport que la typographie. C'est ce
rapport partagé qui fait qu'un texte et l'air autour de lui semblent
appartenir au même système.
--------------------------------------------------------------------- */
--e-1: 2px;
--e-2: 4px;
--e-3: 6px;
--e-4: 8px;
--e-5: 12px;
--e-6: 16px;
--e-7: 20px;
--e-8: 26px;
--e-9: 32px;
--e-10: 40px;
--e-11: 52px;
--e-12: 64px;
--e-13: 80px;
--e-14: 100px;
--e-15: 124px;
--e-16: 168px;
/* Pas fluides — l'air entre les sections et à l'intérieur de chacune.
Il en existait 56 variantes, chacune employée une ou deux fois :
clamp(48px, 8vh, 90px), clamp(48px, 7vh, 86px), clamp(48px, 8vw, 90px)…
trois façons d'écrire le même souffle, qui n'en donnaient jamais deux
identiques. C'est la première cause d'un rythme vertical qui ne
s'installe pas.
Six pas, du resserrement d'une carte au grand blanc entre deux sections.
Le levier « Densité verticale » du Personnalisateur agit sur eux. */
--ef-1: clamp(14px, 1.8vw, 24px);
--ef-2: clamp(20px, 2.6vw, 36px);
--ef-3: clamp(28px, 4vw, 56px);
--ef-4: clamp(40px, 6vh, 80px);
--ef-5: clamp(64px, 9vh, 120px);
--ef-6: clamp(88px, 13vh, 168px);
/* Les trois mêmes pas, calés sur la LARGEUR de fenêtre.
Les trois précédents emploient vh : c'est juste pour un rembourrage de
section, qui doit respirer avec la hauteur de l'écran. Appliqué à une
gouttière entre deux colonnes, c'est un contresens — la largeur d'un
blanc se mettait à dépendre de la hauteur de la fenêtre, et une même
page s'écartait différemment selon qu'on la regardait sur un écran large
ou sur un portable posé à l'horizontale.
Trente-six emplois horizontaux étaient dans ce cas. */
/* La famille horizontale s'arrêtait au pas 4. Une règle appelant --efh-3
produisait donc une valeur invalide, silencieusement ignorée : le gap du
carrousel valait zéro et les cartes se touchaient. Une variable qui
n'existe pas ne casse rien — elle annule, ce qui est pire à trouver. */
--efh-1: clamp(14px, 1.8vw, 24px);
--efh-2: clamp(20px, 2.6vw, 36px);
--efh-3: clamp(28px, 4vw, 56px);
--efh-4: clamp(40px, 6vw, 80px);
--efh-5: clamp(64px, 9vw, 120px);
--efh-6: clamp(88px, 13vw, 168px);
/* Largeur du bloc de contenu. Le Personnalisateur la remplace ; les règles
qui doivent s'y caler — la largeur d'une carte de carrousel — la lisent
ici plutôt que de la recopier. */
--cp-largeur: 1240px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection {
background: var(--copper);
color: #fff;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p {
margin: 0;
}
.vh {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* ==== § 2 — RÔLES TYPOGRAPHIQUES ==== */
.eyebrow {
display: block;
font-family: var(--font-body);
font-weight: 600;
/* Casse normale, comme les entrées du méga-menu.
Les capitales imposaient de lire lettre à lettre : elles n'ont pas de
hampes ni de jambages, donc pas de silhouette de mot — l'œil doit
déchiffrer au lieu de reconnaître. Sur un sur-titre de 11,5 px, c'est
une charge pour une ligne qui ne fait qu'annoncer. */
text-transform: none;
/* 0,14 em et non 0,24. À 11,5 px, 0,24 em fait 2,8 px entre chaque lettre —
plus large qu'un caractère de texte courant. Le mot cessait d'être une
forme : on lisait N-O-S-O-F-F-R-E-S. 0,14 em aère sans disloquer. */
/* 0,05 em au lieu de 0,14. L'interlettrage large est une correction pour
les capitales, qui se cognent sans lui ; en bas-de-casse il disloque le
mot. */
letter-spacing: var(--ls-1);
/* 13 px au lieu de 11,5. À corps égal, un mot en bas-de-casse paraît plus
petit qu'en capitales — la hauteur d'œil vaut environ 70 % de la
capitale. Un cran rétablit la présence. */
font-size: var(--fs-3);
color: var(--copper);
/* Le sur-titre portait un filet, dont la marge haute l'écartait du titre.
Le filet parti, les deux lignes se touchaient : la marge basse reprend
cet espace à son compte. */
margin-inline: 0;
}
/* Barre horizontale automatique sous chaque eye-brow, partout — y compris
dans les pages Gutenberg (paragraphe de classe « eyebrow »). */
/* Filet du sur-titre.
Conservé partout où le sur-titre est seul — le bandeau d'accueil, par
exemple, qui n'a pas de titre de section. Le retirer d'un bloc l'aurait
privé de son seul repère graphique.
Dans un chapeau de section, en revanche, il descend sous le titre : voir la
règle suivante. */
/* Dans un chapeau de section, le filet passe SOUS LE TITRE.
Sous le sur-titre, il séparait deux éléments qui vont ensemble : la petite
ligne en capitales annonce le titre, elle ne s'en distingue pas. Sous le
titre, il ferme le chapeau et sépare enfin quelque chose — l'annonce du
contenu.
Il passe de 2 à 3 px et de 48 à 64 : plus bas dans la page, sous un texte
plus grand, un trait fin se lit comme un accident. */
.sec-head .eyebrow {
/* 20 px et non 10.
Le sur-titre portait un filet, dont la marge haute l'écartait du titre.
Ce filet est passé sous le titre, et les deux lignes se sont retrouvées
à se toucher : la valeur d'origine ne tenait compte que de l'épaisseur
du trait, pas de l'air qu'il occupait. */
}
/* ==========================================================================
ÉCHELLE DES TITRES — source unique, parent et sous-sites
Six niveaux, définis une fois. Les BALISES portent l'échelle, les classes
.h1 à .h6 permettent de composer un titre à un niveau différent de sa
balise — un H2 de section qui doit paraître plus petit garde son rang
sémantique et prend la classe .h3.
Avant cela, chaque section fixait la taille de ses propres titres : neuf
règles côté site principal, dix côté sous-sites, avec quatre valeurs
différentes pour un simple h3 selon la section où il se trouvait. Deux
cartes voisines n'avaient pas des titres de même taille.
Règle de travail : plus aucune déclaration font-size sur un titre en
dehors de ce bloc. Une section qui a besoin d'un autre niveau change de
classe, elle ne change pas de taille.
========================================================================== */
h1,
.h1 {
font-family: var(--font-titre);
font-weight: 500;
letter-spacing: var(--ls-1);
line-height: var(--lh-0);
font-size: var(--fs-h1);
text-transform: uppercase;
}
h2,
.h2 {
font-family: var(--font-titre);
font-weight: 500;
letter-spacing: var(--ls-1);
line-height: var(--lh-1);
font-size: var(--fs-h3);
text-transform: uppercase;
}
h3,
.h3 {
font-family: var(--font-accent);
font-weight: 500;
font-size: var(--fs-h5);
line-height: var(--lh-1);
letter-spacing: var(--ls-0);
}
h4,
.h4 {
font-family: var(--font-accent);
font-weight: 500;
font-size: var(--fs-h6);
line-height: var(--lh-2);
letter-spacing: var(--ls-0);
}
h5,
.h5 {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-sub);
line-height: var(--lh-2);
letter-spacing: var(--ls-0);
}
h6,
.h6 {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-5);
line-height: var(--lh-2);
letter-spacing: var(--ls-1);
text-transform: uppercase;
}
/* Titre de page intérieure : un cran sous le bandeau d'accueil, qui reste le
seul à occuper l'écran entier. */
.h1-page,
.cpp-pagehero h1 {
font-size: var(--fs-h2); /* charte-ok: titre de page intérieure, un cran sous le bandeau d’accueil */
}
.lead {
font-family: var(--font-accent);
font-weight: 400;
font-size: var(--fs-lead);
line-height: var(--lh-3);
}
/* L'italique a été retiré du thème : en capitales fines sur photo sombre, il
coûtait en lisibilité ce qu'il apportait en élégance — et l'accroche du
bandeau est la première phrase que lit un visiteur. La classe subsiste et
porte désormais la seule graisse, pour que le balisage n'ait pas à changer
dans les gabarits. */
.lead.i {
font-weight: 300;
}
.body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-5);
line-height: var(--lh-5);
color: var(--ink-soft);
}
.body.serif {
font-family: var(--font-accent);
font-weight: 400;
font-size: var(--fs-7);
line-height: var(--lh-4);
color: var(--ink-soft);
}
/* copper hairline flourish */
/* Filet sous le sur-titre. Rythme unique sur tout le site :
8 px entre le sur-titre et le filet (ils forment un bloc solidaire),
20 px entre le filet et le titre. Voir --e-4 et --e-7 dans l'échelle. */
.rule {
display: block;
width: 54px;
height: 1px;
background: var(--copper);
opacity: 0.9;
margin: 0 0 var(--e-7);
}
.rule.c {
margin-left: auto;
margin-right: auto;
}
/* ==== § 3 — BOUTONS ==== */
.btn {
display: inline-flex;
align-items: center;
gap: var(--e-5);
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-3);
padding: var(--e-6) var(--e-9);
border: 1px solid var(--copper);
color: var(--copper);
background: transparent;
cursor: pointer;
transition: 0.5s var(--ease);
position: relative;
overflow: hidden;
}
.btn > * {
position: relative;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background: var(--copper);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
z-index: 0;
}
.btn:hover {
color: #fff;
}
.btn:hover::before {
transform: scaleX(1);
}
.btn.on-dark {
color: var(--copper-lt);
border-color: rgba(183, 154, 114, 0.55);
}
.btn.on-dark:hover {
color: var(--night);
}
.btn.on-dark::before {
background: var(--copper-lt);
}
.arrow {
display: inline-flex;
align-items: center;
gap: var(--e-4);
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-2);
color: var(--copper);
cursor: pointer;
padding-bottom: var(--e-2);
position: relative;
width: max-content;
}
.arrow::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: var(--copper);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
}
.arrow:hover::after {
transform: scaleX(1);
}
.arrow .ln {
width: 26px;
height: 1px;
background: var(--copper);
transition: width 0.4s var(--ease);
}
.arrow:hover .ln {
width: 40px;
}
/* ==== § 4 — NAVIGATION ==== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
gap: var(--e-8);
padding: var(--e-7) var(--ef-3);
transition:
background 0.5s var(--ease),
padding 0.5s var(--ease),
border-color 0.5s;
border-bottom: 1px solid transparent;
}
.nav.solid,
.nav.has-open {
background: rgba(13, 12, 11, 0.86);
backdrop-filter: blur(10px);
padding-top: var(--e-6);
padding-bottom: var(--e-6);
border-color: rgba(183, 154, 114, 0.16);
}
/* Voile sombre sur la page quand un panneau du menu est ouvert : il fait
ressortir le panneau et concentre l'attention. Posé sous la barre (z-index
50) et sous le panneau, au-dessus du reste de la page. */
.cp-mega-overlay {
position: fixed;
inset: 0;
background: rgba(13, 12, 11, 0.55);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s var(--ease),
visibility 0.3s var(--ease);
z-index: 40;
pointer-events: none;
}
.nav.has-open ~ .cp-mega-overlay,
body.cp-mega-open .cp-mega-overlay {
opacity: 1;
visibility: visible;
}
.nav .logo {
/* 56 px. Le logo est une signature manuscrite, très fine : les déliés se
ferment bien avant que le mot ne paraisse petit, et c'est le seul élément
de l'en-tête qui ne se relit pas — on le reconnaît ou non. */
height: 56px;
width: auto;
opacity: 0.96;
transition: height 0.5s var(--ease);
}
.nav.solid .logo {
/* En-tête compacté au défilement : même proportion de réduction qu'avant,
appliquée à la nouvelle taille. */
height: 48px;
}
.nav .links {
display: flex;
gap: var(--e-9);
margin: 0 auto;
}
.nav .links a {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-1);
/* 13 px et non 11,5. En capitales espacées de 0,14 em, 11,5 px tombe sous
le seuil de confort : la navigation est le premier élément qu'on lit, et
le seul qu'on relit à chaque page. */
font-size: var(--fs-5);
color: rgba(255, 255, 255, 0.82);
position: relative;
padding: var(--e-3) 0;
}
.nav .links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: var(--copper);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease);
}
.nav .links a:hover::after {
transform: scaleX(1);
}
/* La rubrique dont le panneau est ouvert garde son soulignement. */
.nav .cp-nav-item.is-open > a::after {
transform: scaleX(1);
}
/* Les liens d'un panneau ne reprennent pas le soulignement des rubriques :
il se dessinerait en bas de leur boîte, donc sous le bouton « Découvrir ». */
.nav .cp-mega a::after,
.nav .cp-mega a:hover::after {
content: none;
display: none;
}
/* Le bouton du menu reprend le balayage de survol des boutons .btn :
un aplat cuivre qui se déploie de la gauche, plutôt qu'un simple
changement de fond. Il reste plein au repos — c'est l'action
principale du site, elle ne doit pas s'effacer derrière un contour. */
.nav .navcta {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-1);
font-size: var(--fs-5);
color: var(--night);
background: var(--copper-lt);
border: 1px solid var(--copper-lt);
padding: var(--e-5) var(--e-7);
transition:
color 0.5s var(--ease),
border-color 0.5s var(--ease);
}
.nav .navcta > * {
position: relative;
z-index: 1;
}
.nav .navcta::before {
content: "";
position: absolute;
inset: 0;
background: var(--copper);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
z-index: 0;
}
.nav .navcta:hover,
.nav .navcta:focus-visible {
color: #fff;
border-color: var(--copper);
}
.nav .navcta:hover::before,
.nav .navcta:focus-visible::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.nav .navcta::before {
transition: none;
}
}
.nav .burger {
display: none;
flex-direction: column;
gap: var(--e-2);
margin-left: auto;
}
.nav .burger span {
width: 26px;
height: 1.5px;
background: #fff;
}
/* ==== § 5 — GRAIN ET PLACEHOLDERS ==== */
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.plate {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #1c1813, #26201a 45%, #14110d);
}
.plate::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
80% 90% at 30% 15%,
rgba(133, 104, 74, 0.34),
transparent 60%
);
}
.plate.frame {
outline: 1px solid rgba(183, 154, 114, 0.28);
outline-offset: -10px;
}
.plate .cap {
position: absolute;
left: 18px;
bottom: 16px;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-1);
color: rgba(255, 255, 255, 0.66);
z-index: 2;
}
/* ==== § 6 — HERO ==== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: var(--e-16) var(--ef-3) var(--e-14);
background: var(--night);
}
.hero .bg {
position: absolute;
inset: 0;
background:
radial-gradient(
120% 78% at 50% -6%,
rgba(133, 104, 74, 0.3),
transparent 55%
),
radial-gradient(
90% 120% at 50% 128%,
rgba(133, 104, 74, 0.1),
transparent 60%
),
linear-gradient(#0d0c0b, #161311 70%, #0d0c0b);
}
.hero .spot {
position: absolute;
top: -30%;
left: 50%;
width: 70vw;
height: 70vw;
transform: translateX(-50%);
background: radial-gradient(
circle,
rgba(133, 104, 74, 0.16),
transparent 62%
);
animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
from {
transform: translateX(-54%) translateY(-4%);
}
to {
transform: translateX(-46%) translateY(3%);
}
}
.hero .inner {
position: relative;
z-index: 2;
max-width: 960px;
display: flex;
flex-direction: column;
align-items: center;
}
.hero .mark {
height: clamp(58px, 9vw, 104px);
width: auto;
margin-bottom: var(--e-9);
}
.hero .h1 {
color: #fff;
margin: var(--e-4) 0 0;
}
.hero .lead {
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin-inline: auto;
}
.hero .eyebrow {
color: var(--copper-lt);
}
.scrollcue {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e-4);
color: rgba(255, 255, 255, 0.45);
}
.scrollcue .line {
width: 1px;
height: 46px;
background: linear-gradient(rgba(183, 154, 114, 0.7), transparent);
animation: cue 2.4s ease-in-out infinite;
}
.scrollcue span {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-5);
font-size: var(--fs-1);
}
@keyframes cue {
0%,
100% {
transform: scaleY(0.4);
opacity: 0.4;
transform-origin: top;
}
50% {
transform: scaleY(1);
opacity: 1;
transform-origin: top;
}
}
/* ==== § 7 — SECTIONS GÉNÉRIQUES ==== */
section {
position: relative;
}
.sec {
padding: var(--ef-6) var(--ef-3);
}
.container {
max-width: 1240px;
margin: 0 auto;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.center .rule {
margin: 0 0 var(--e-7);
}
.sec-head .eyebrow {
display: block;
}
/* manifesto */
.manifesto {
text-align: center;
}
.manifesto .h2 {
max-width: 16ch;
margin-inline: auto;
}
.manifesto .body.serif {
max-width: 56ch;
margin-inline: auto;
}
/* feature split */
.split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--efh-4);
align-items: center;
}
/* Les colonnes de grille ont min-width:auto par défaut, ce qui les empêche
de rétrécir sous la largeur de leur contenu et provoque un débordement
horizontal sur mobile. On les autorise à rétrécir. */
.split > * {
min-width: 0;
}
.split.rev .media {
order: 2;
}
.split .media {
aspect-ratio: 4/5;
height: 100%;
min-height: 420px;
}
.split .txt .eyebrow {
display: block;
}
.split .txt .h3 {
color: var(--copper);
}
/* grandeur (dark) */
.grandeur {
background: var(--night);
color: #fff;
overflow: hidden;
}
.grandeur .bg {
position: absolute;
inset: 0;
background: radial-gradient(
60% 120% at 50% 0%,
rgba(133, 104, 74, 0.14),
transparent 60%
);
}
.grandeur .container {
position: relative;
}
.grandeur .eyebrow {
color: var(--copper-lt);
}
/* Sans ces règles, .h2 garde sa couleur d'encre et disparaît sur le fond nuit.
C'est ce qui rendait « Phénix s'engage » illisible. */
.grandeur .h1-page,
.grandeur .h2,
.grandeur .h3 {
color: #fff;
}
.grandeur .body,
.grandeur .tag {
color: rgba(233, 226, 214, 0.82);
}
.grandeur .rule {
background: var(--copper-lt);
}
.figs {
display: flex;
justify-content: center;
gap: var(--efh-5);
flex-wrap: wrap;
margin: var(--e-10) 0 var(--e-9);
}
.fig .n {
font-family: var(--font-display);
font-weight: 500;
color: var(--copper-lt);
font-size: var(--fs-h2);
line-height: var(--lh-0);
letter-spacing: var(--ls-0);
}
.fig .l {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-2);
color: rgba(255, 255, 255, 0.6);
margin-top: var(--e-5);
max-width: 16ch;
margin-left: auto;
margin-right: auto;
}
.grandeur .tag {
font-family: var(--font-accent);
font-weight: 300;
/* 21 px et non 29. --fs-h5 est la taille d'un titre de niveau 3 : appliquée
à un chapô, elle le faisait lire comme un titre, et donnait à cette
section un texte plus gros que partout ailleurs. */
font-size: var(--fs-7);
color: rgba(255, 255, 255, 0.85);
}
/* gallery */
.gallery .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-2);
margin-top: var(--e-11);
}
.gcard .media {
aspect-ratio: 3/4;
margin-bottom: var(--e-7);
}
.gcard .body {
font-size: var(--fs-5);
}
/* final cta (dark) */
.final {
background: var(--night);
color: #fff;
text-align: center;
overflow: hidden;
}
.final .bg {
position: absolute;
inset: 0;
background:
radial-gradient(
80% 120% at 50% 120%,
rgba(133, 104, 74, 0.22),
transparent 60%
),
radial-gradient(70% 90% at 50% 0%, rgba(133, 104, 74, 0.1), transparent 55%);
}
.final .container {
position: relative;
}
.final .h2 {
color: #fff;
max-width: 18ch;
margin-inline: auto;
}
.final .h3 {
color: #fff;
}
.final .body,
.final .tag {
color: rgba(233, 226, 214, 0.82);
}
.final .rule {
background: var(--copper-lt);
}
.final .eyebrow {
color: var(--copper-lt);
display: block;
}
/* footer */
.foot {
background: #0a0908;
color: rgba(255, 255, 255, 0.55);
padding: var(--ef-5) var(--ef-3) var(--e-11);
}
.foot .top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--e-10);
align-items: start;
border-bottom: 1px solid rgba(183, 154, 114, 0.18);
padding-bottom: var(--e-11);
}
.foot .brandcol .logo {
height: 44px;
width: auto;
margin-bottom: var(--e-7);
}
.foot .brandcol p {
font-family: var(--font-accent);
font-weight: 300;
font-size: var(--fs-5);
color: rgba(255, 255, 255, 0.6);
max-width: 34ch;
line-height: var(--lh-3);
}
.foot .col b {
display: block;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-2);
color: var(--copper-lt);
margin-bottom: var(--e-6);
}
.foot .col a {
display: block;
font-family: var(--font-body);
font-size: var(--fs-4);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--e-5);
transition: 0.3s;
}
.foot .col a:hover {
color: #fff;
}
.foot .bottom {
display: flex;
justify-content: space-between;
gap: var(--e-7);
flex-wrap: wrap;
margin-top: var(--e-9);
font-family: var(--font-body);
font-size: var(--fs-2);
letter-spacing: var(--ls-1);
color: rgba(255, 255, 255, 0.4);
}
/* ==== § 8 — ANIMATIONS DE RÉVÉLATION ==== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 1s var(--ease),
transform 1s var(--ease);
}
.reveal.in {
opacity: 1;
transform: none;
}
.reveal.d1 {
transition-delay: 0.12s;
}
.reveal.d2 {
transition-delay: 0.24s;
}
/* ==== § 9 — ADAPTATIF ==== */
@media (max-width: 900px) {
.nav .links {
display: none;
}
.nav .navcta {
display: none;
}
.nav .burger {
display: flex;
}
.split {
grid-template-columns: 1fr;
gap: var(--e-9);
}
.split.rev .media {
order: 0;
}
.split .media {
min-height: 340px;
aspect-ratio: 16/11;
width: 100%;
max-width: 100%;
}
.gallery .grid {
grid-template-columns: 1fr;
gap: var(--e-8);
}
.gcard .media {
aspect-ratio: 16/11;
}
.foot .top {
grid-template-columns: 1fr 1fr;
gap: var(--e-9);
}
}
@media (max-width: 560px) {
.foot .top {
grid-template-columns: 1fr;
}
.figs {
gap: var(--e-8);
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important; /* légitime : respecte prefers-reduced-motion */
}
.reveal {
opacity: 1;
transform: none;
transition: none;
}
html {
scroll-behavior: auto;
}
}
/* ============================================================
§ 10 — COMPLÉMENTS WORDPRESS (menus, listes, menu mobile, contenu)
============================================================ */
.nav .links {
display: flex;
gap: var(--e-9);
margin: 0 auto;
padding: 0;
list-style: none;
align-items: center;
}
.nav .links li {
list-style: none;
margin: 0;
}
.nav .brandlink {
display: inline-flex;
align-items: center;
}
.admin-bar .nav {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .nav {
top: 46px;
}
}
/* Menu mobile */
@media (max-width: 900px) {
.nav .links {
position: fixed;
inset: 0;
background: rgba(10, 9, 8, 0.97);
backdrop-filter: blur(6px);
flex-direction: column;
justify-content: center;
gap: var(--e-4);
margin: 0;
padding: var(--e-13) var(--e-9);
transform: translateY(-100%);
transition: transform 0.5s var(--ease);
z-index: -1;
}
.nav.open .links {
transform: none;
}
.nav .links a {
font-size: var(--fs-7);
letter-spacing: var(--ls-3);
padding: var(--e-5) 0;
}
.nav .burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav .burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav .burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.nav .burger span {
transition: 0.35s var(--ease);
}
}
/* Menu de pied de page (wp_nav_menu) */
.foot .cp-footlist {
list-style: none;
margin: 0;
padding: 0;
}
.foot .cp-footlist li {
list-style: none;
margin: 0;
}
.foot .cp-footlist a {
display: block;
font-family: var(--font-body);
font-size: var(--fs-4);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--e-5);
transition: 0.3s;
}
.foot .cp-footlist a:hover {
color: #fff;
}
/* Contenu de page / articles */
.cp-page,
.cp-postlist {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.cp-content {
color: var(--ink-soft);
}
.cp-content h2 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--ls-1);
font-size: var(--fs-h4); /* charte-ok: un titre d’article vaut un niveau 3 */
margin: var(--e-10) 0 var(--e-6);
color: var(--ink);
}
.cp-content h3 {
font-family: var(--font-accent);
margin-inline: 0;
color: var(--copper);
}
.cp-content p {
margin: 0 0 var(--e-7);
}
.cp-content a {
color: var(--copper);
text-decoration: underline;
text-underline-offset: 3px;
}
.cp-content img {
margin: var(--e-8) 0;
}
.cp-content blockquote {
border-left: 2px solid var(--copper);
margin: var(--e-8) 0;
padding: var(--e-3) 0 var(--e-3) var(--e-8);
font-family: var(--font-accent);
font-size: var(--fs-7);
color: var(--ink);
}
.cp-post {
padding: var(--e-10) 0;
border-bottom: 1px solid var(--copper-dim);
}
.cp-post .h3 a {
color: var(--ink);
transition: 0.3s;
}
.cp-post .h3 a:hover {
color: var(--copper);
}
.cp-pagination {
margin-top: var(--e-11);
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-2);
font-size: var(--fs-3);
}
.cp-pagination a,
.cp-pagination .current {
padding: var(--e-4) var(--e-5);
color: var(--ink);
}
.cp-pagination .current {
color: var(--copper);
border-bottom: 1px solid var(--copper);
}
/* ============================================================
§ 11 — BARRE UTILITAIRE AU-DESSUS DU MENU
============================================================ */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: #0a0908;
border-bottom: 1px solid rgba(183, 154, 114, 0.16);
}
.admin-bar .topbar {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .topbar {
top: 46px;
}
}
.topbar-inner {
display: flex;
align-items: center;
gap: var(--e-7);
height: 40px;
padding: 0 var(--ef-3);
}
.tb-lead {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-5);
font-size: var(--fs-1);
color: rgba(255, 255, 255, 0.34);
font-weight: 600;
}
.tb-links {
display: flex;
gap: var(--e-8);
margin-left: auto;
list-style: none;
padding: 0;
}
.tb-links li {
list-style: none;
margin: 0;
}
.tb-links a {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-1);
/* Un cran sous le menu principal : la barre utilitaire est un second
niveau, elle ne doit pas peser autant. L'interlettrage suit celui du
menu — à 0,14 em, Barlow Semi Condensed se disloque : cette police est
déjà étroite, l'espacer la fait lire lettre à lettre. */
font-size: var(--fs-3);
color: rgba(255, 255, 255, 0.6);
padding: var(--e-5) 0;
position: relative;
transition: 0.3s;
}
.tb-links a:hover,
.tb-links .current-menu-item > a {
color: var(--copper-lt);
}
/* Le menu principal descend sous la barre */
.nav {
top: 40px;
}
.admin-bar .nav {
top: 72px;
} /* 32 (admin) + 40 (topbar) */
@media (max-width: 782px) {
.admin-bar .nav {
top: 86px;
}
}
/* Sur mobile : barre masquée, menu principal en haut */
@media (max-width: 900px) {
.topbar {
display: none;
}
.nav {
top: 0;
}
.admin-bar .nav {
top: 46px;
}
}
/* ============================================================
§ 12 — BANDE DE RÉSERVATION PLEINE LARGEUR
Reprend le design system : nuit + cuivre, Cinzel/Cormorant/Barlow
============================================================ */
.btn.solid {
background: var(--copper-lt);
border-color: var(--copper-lt);
color: var(--night);
}
.btn.solid::before {
background: #fff;
}
.btn.solid:hover {
color: var(--night);
}
.book {
background: var(--night);
color: #fff;
overflow: hidden;
padding: var(--ef-4) var(--ef-3);
}
.book .bg {
position: absolute;
inset: 0;
background:
radial-gradient(
70% 150% at 12% 0%,
rgba(133, 104, 74, 0.2),
transparent 60%
),
radial-gradient(
60% 130% at 100% 100%,
rgba(133, 104, 74, 0.12),
transparent 60%
);
}
.book .container {
position: relative;
max-width: 1360px;
}
.book .book-head {
display: flex;
flex-direction: column;
gap: var(--e-5);
margin-bottom: var(--e-9);
max-width: 56ch;
}
.book .book-head .eyebrow {
color: var(--copper-lt);
}
.book .book-head .h2 {
color: #fff;
font-size: var(--fs-h4); /* charte-ok: idem, contraint par la hauteur du bloc */
margin: 0;
}
.book .book-head .note {
font-family: var(--font-accent);
font-weight: 300;
font-size: var(--fs-sub);
line-height: var(--lh-3);
color: rgba(255, 255, 255, 0.72);
}
/* Formulaire : occupe 100% de la largeur, une seule barre horizontale */
.book form {
display: grid;
grid-template-columns: repeat(3, 1fr) minmax(200px, auto);
gap: var(--e-6);
width: 100%;
align-items: end;
}
.book .field {
display: flex;
flex-direction: column;
gap: var(--e-4);
min-width: 0;
}
.book .field label {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-1);
color: rgba(255, 255, 255, 0.55);
}
.book .field select {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: rgba(255, 255, 255, 0.02);
color: #fff;
border: 1px solid rgba(183, 154, 114, 0.42);
border-radius: 0;
padding: var(--e-6) var(--e-10) var(--e-6) var(--e-6);
font-family: var(--font-body);
font-size: var(--fs-4);
letter-spacing: var(--ls-0);
cursor: pointer;
transition:
border-color 0.35s var(--ease),
background 0.35s var(--ease);
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 d='M1 1l5 5 5-5' fill='none' stroke='%23B79A72' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.book .field select:hover {
border-color: var(--copper-lt);
}
.book .field select:focus {
outline: none;
border-color: var(--copper-lt);
background: rgba(255, 255, 255, 0.045);
}
.book .field select option {
color: #141210;
}
.book .submit .btn {
width: 100%;
justify-content: center;
min-height: 54px;
}
@media (max-width: 900px) {
.book form {
grid-template-columns: 1fr 1fr;
gap: var(--e-6);
}
.book .submit {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.book form {
grid-template-columns: 1fr;
}
}
/* ============================================================
§ 13 — ACCUEIL GRAND PUBLIC
(réutilise les tokens du design system)
============================================================ */
/* Hero vidéo */
.hero-video {
background: var(--night);
justify-content: flex-start; /* colle le bloc à gauche */
align-items: flex-end; /* … et en bas */
text-align: left;
padding-bottom: var(--ef-4);
}
.hero-video .bgvid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-video .scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
rgba(10, 9, 8, 0.42),
rgba(10, 9, 8, 0.66) 58%,
rgba(10, 9, 8, 0.84)
),
radial-gradient(
70% 60% at 50% 26%,
rgba(133, 104, 74, 0.14),
transparent 62%
);
}
.hero-video .inner {
z-index: 2;
max-width: 852px;
align-items: flex-start;
text-align: left;
margin: 0;
width: 100%;
}
.hero-video .lead {
text-align: left;
margin-left: 0;
margin-right: 0;
max-width: none;
}
/* Réservation posée sur la vidéo */
.hero .book-bar {
width: 100%;
margin-top: var(--e-10);
background: rgba(10, 9, 8, 0.4);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border: 1px solid rgba(183, 154, 114, 0.34);
padding: var(--e-7) var(--ef-1);
}
.hero .book-bar form {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--e-5);
align-items: end;
text-align: left;
}
.hero .book-bar .field {
display: flex;
flex-direction: column;
gap: var(--e-4);
min-width: 0;
}
.hero .book-bar .field label {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-1);
color: rgba(255, 255, 255, 0.62);
}
.hero .book-bar .field select {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: rgba(10, 9, 8, 0.34);
color: #fff;
border: 1px solid rgba(183, 154, 114, 0.42);
border-radius: 0;
padding: var(--e-5) var(--e-10) var(--e-5) var(--e-6);
font-family: var(--font-body);
font-size: var(--fs-4);
letter-spacing: var(--ls-0);
cursor: pointer;
transition:
border-color 0.35s var(--ease),
background 0.35s var(--ease);
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 d='M1 1l5 5 5-5' fill='none' stroke='%23B79A72' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
.hero .book-bar .field select:hover,
.hero .book-bar .field select:focus {
border-color: var(--copper-lt);
outline: none;
background-color: rgba(10, 9, 8, 0.5);
}
.hero .book-bar .field select option {
color: #141210;
}
.hero .book-bar .submit .btn {
width: 100%;
justify-content: center;
min-height: 52px;
}
@media (max-width: 900px) {
.hero .book-bar form {
grid-template-columns: 1fr 1fr;
gap: var(--e-5);
}
.hero .book-bar .submit {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.hero .book-bar form {
grid-template-columns: 1fr;
}
}
/* Présentation : sous-titre h3 sous le h2 */
/* Offres grand public (façon zoobeauval) */
.offers .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-2);
margin-top: var(--e-11);
}
.ocard .media {
aspect-ratio: 4/3;
margin-bottom: var(--e-7);
}
.ocard .h3 {
color: var(--ink);
}
@media (max-width: 900px) {
.offers .grid {
grid-template-columns: 1fr;
gap: var(--e-9);
}
.ocard .media {
aspect-ratio: 16/10;
}
}
/* Galerie photos (fond sombre) */
.gallery.grandeur {
color: #fff;
}
.gallery .gg {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-1);
margin-top: var(--e-11);
}
.gallery .ph {
aspect-ratio: 3/4;
}
@media (max-width: 900px) {
.gallery .gg {
grid-template-columns: 1fr 1fr;
gap: var(--e-5);
}
}
@media (max-width: 560px) {
.gallery .gg {
grid-template-columns: 1fr;
}
}
/* Avis */
.avis .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-2);
margin-top: var(--e-11);
}
.acard {
margin: 0;
padding: var(--e-9) var(--e-9);
border: 1px solid var(--copper-dim);
background: var(--white);
display: flex;
flex-direction: column;
gap: var(--e-6);
}
.acard .stars {
color: var(--copper);
/* En pixels, hors échelle : il ne s'agit pas d'espacer du texte mais des
étoiles, dont l'écart ne doit pas suivre le corps de la police. */
letter-spacing: 3px; /* charte-ok: espace des étoiles, pas du texte */
font-size: var(--fs-4);
}
.acard .q {
font-family: var(--font-accent);
font-weight: 400;
font-size: var(--fs-7);
line-height: var(--lh-3);
color: var(--ink);
}
.acard footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--e-1);
}
.acard footer b {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-2);
font-size: var(--fs-2);
color: var(--ink);
}
.acard footer span {
font-family: var(--font-body);
font-size: var(--fs-3);
color: var(--copper);
}
@media (max-width: 900px) {
.avis .grid {
grid-template-columns: 1fr;
gap: var(--e-7);
}
}
/* Lieu : chiffres sur fond clair */
.stats {
display: flex;
gap: var(--ef-3);
margin: var(--e-8) 0 var(--e-9);
flex-wrap: wrap;
}
.stat b {
display: block;
font-family: var(--font-display);
font-weight: 500;
color: var(--copper);
font-size: var(--fs-h4);
line-height: var(--lh-0);
letter-spacing: var(--ls-0);
}
.stat span {
display: block;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-1);
color: var(--ink-soft);
margin-top: var(--e-4);
}
/* Actualités */
.news .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-2);
margin-top: var(--e-11);
}
.ncard {
display: flex;
flex-direction: column;
}
.ncard .media {
aspect-ratio: 16/10;
margin-bottom: var(--e-7);
display: block;
overflow: hidden;
}
.ncard .media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ncard .date {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-1);
color: var(--copper);
margin-bottom: var(--e-4);
}
.ncard .h3 a {
color: var(--ink);
transition: 0.3s;
}
.ncard .h3 a:hover {
color: var(--copper);
}
@media (max-width: 900px) {
.news .grid {
grid-template-columns: 1fr;
gap: var(--e-9);
}
}
/* ============================================================
§ 13b — Ajustements : affiche, menu réduit, débordement mobile
============================================================ */
/* Affiche du spectacle (présentation).
L'affiche était une ![]()
nue avec un contour tracé sur son bord : elle
n'avait donc pas le filet en retrait des autres médias du site. Elle est
désormais enveloppée dans une , qui fournit le
cadre et le survol comme partout ailleurs. */
.split .poster-fig {
position: relative;
display: block;
margin: 0;
overflow: hidden;
background: var(--night);
}
.split .poster {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s var(--ease);
}
.split .poster-fig:hover .poster {
transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) {
.split .poster {
transition: none;
}
.split .poster-fig:hover .poster {
transform: none;
}
}
/* Overflow masqué en mobile (pas de défilement horizontal) */
@media (max-width: 900px) {
html,
body {
overflow-x: hidden;
max-width: 100%;
}
.hero .book-bar {
max-width: 100%;
}
.container,
.sec {
max-width: 100%;
}
}
/* ============================================================
§ 14 — BOUTON DE RÉSERVATION PLEIN DORÉ
============================================================ */
.btn-reserve {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-3);
line-height: var(--lh-0);
color: var(--night);
text-decoration: none;
cursor: pointer;
border: 0;
border-radius: 0;
padding: var(--e-6) var(--e-9);
background: var(--copper-lt);
transition:
background 0.4s var(--ease),
transform 0.35s var(--ease),
box-shadow 0.4s var(--ease);
}
.btn-reserve:hover {
background: #cbb083;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.btn-reserve:active {
transform: translateY(0);
}
.btn-reserve:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Dans la barre de réservation : pleine largeur, hauteur alignée sur les champs */
.hero .book-bar .submit .btn-reserve {
width: 100%;
min-height: 50px;
padding: 0 var(--e-8);
}
.book .submit .btn-reserve {
width: 100%;
min-height: 54px;
padding: 0 var(--e-8);
}
@media (max-width: 900px) {
.hero .book-bar .submit .btn-reserve {
min-height: 52px;
}
}
/* Photos de sections uploadées (Customizer) */
.gallery .gg img.ph {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
border: 1px solid rgba(183, 154, 114, 0.18);
}
.ocard img.media {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
margin-bottom: var(--e-7);
border: 1px solid rgba(183, 154, 114, 0.18);
}
.split img.media {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
border: 1px solid rgba(183, 154, 114, 0.22);
background: var(--night);
}
@media (max-width: 900px) {
.ocard img.media {
aspect-ratio: 16/10;
}
}
/* ============================================================
§ 15 — TOILE GUTENBERG
============================================================ */
.cp-canvas {
padding-top: var(--ef-6);
padding-bottom: var(--ef-5);
}
.cp-canvas > * {
max-width: var(--wp--style--global--content-size, 760px);
margin-left: auto;
margin-right: auto;
padding-left: var(--ef-3);
padding-right: var(--ef-3);
}
.cp-canvas > .alignwide {
max-width: var(--wp--style--global--wide-size, 1240px);
}
.cp-canvas > .alignfull {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.cp-canvas > * + * {
margin-top: var(--ef-2);
}
/* Confort de lecture des blocs texte */
.cp-canvas p {
font-size: var(--fs-5);
line-height: var(--lh-5);
color: var(--ink-soft);
}
.cp-canvas .wp-block-button__link {
padding: var(--e-6) var(--e-9);
}
/* ============================================================
§ 16 — CHAMP DATE ET CALENDRIER
============================================================ */
.field-date {
position: relative;
}
.cp-datefield {
appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-5);
background: rgba(10, 9, 8, 0.34);
color: #fff;
border: 1px solid rgba(183, 154, 114, 0.42);
border-radius: 0;
padding: var(--e-5) var(--e-6);
font-family: var(--font-body);
font-size: var(--fs-4);
letter-spacing: var(--ls-0);
cursor: pointer;
text-align: left;
transition:
border-color 0.35s var(--ease),
background 0.35s var(--ease);
}
.cp-datefield:hover,
.cp-datefield[aria-expanded="true"] {
border-color: var(--copper-lt);
background: rgba(10, 9, 8, 0.5);
}
.cp-datefield svg {
color: var(--copper-lt);
flex: none;
}
.cp-datefield [data-cp-datetext] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-datefield:not(.has-value) [data-cp-datetext] {
color: rgba(255, 255, 255, 0.6);
}
.hero .book-bar select:disabled {
opacity: 0.55;
cursor: default;
}
.cp-cal {
position: absolute;
left: 0;
bottom: calc(100% + 10px);
z-index: 60;
width: 300px;
max-width: 86vw;
background: var(--paper);
color: var(--ink);
border: 1px solid rgba(183, 154, 114, 0.5);
padding: var(--e-6) var(--e-6) var(--e-6);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
text-align: left;
}
.cp-cal[hidden] {
display: none;
}
.cp-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--e-5);
}
.cp-cal-title {
font-family: var(--font-body);
font-weight: 600;
text-transform: capitalize;
letter-spacing: var(--ls-1);
font-size: var(--fs-4);
color: var(--ink);
}
.cp-cal-arrow {
width: 30px;
height: 30px;
border: 1px solid rgba(133, 104, 74, 0.35);
background: transparent;
color: var(--copper);
font-size: var(--fs-5);
line-height: var(--lh-0);
cursor: pointer;
border-radius: 0;
transition: 0.3s var(--ease);
}
.cp-cal-arrow:hover:not([disabled]) {
background: var(--copper-lt);
color: var(--night);
border-color: var(--copper-lt);
}
.cp-cal-arrow[disabled] {
opacity: 0.3;
cursor: default;
}
.cp-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--e-1);
}
.cp-cal-dow {
text-align: center;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-1);
font-size: var(--fs-1);
color: var(--copper);
padding: var(--e-2) 0 var(--e-4);
}
.cp-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--fs-3);
border: 0;
background: transparent;
color: #c3bcae;
border-radius: 0;
padding: 0;
}
.cp-day.is-empty {
visibility: hidden;
}
.cp-day.is-off {
color: #cfc9bd;
}
.cp-day.is-open {
color: var(--ink);
cursor: pointer;
position: relative;
}
.cp-day.is-open:hover {
background: #efe9de;
}
.cp-day.is-open::after {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--copper);
}
.cp-day.is-selected {
background: var(--copper-lt);
color: var(--night);
}
.cp-day.is-selected::after {
display: none;
}
@media (max-width: 560px) {
.cp-cal {
left: 50%;
transform: translateX(-50%);
}
}
/* ============================================================
§ 17 — HERO 85VH, CONTENU ALIGNÉ À GAUCHE
============================================================ */
.hero-video {
min-height: 95vh;
}
.hero-video .scrollcue {
display: none;
}
/* Bouton FAQ au-dessus de la réservation */
.cp-faq {
display: inline-flex;
align-items: center;
gap: var(--e-4);
align-self: center;
margin: var(--e-8) 0 0;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-2);
color: #fff;
text-decoration: none;
transition: 0.3s var(--ease);
align-self: flex-start;
}
.cp-faq:hover {
color: var(--copper-lt);
}
.cp-faq-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(183, 154, 114, 0.6);
color: var(--copper-lt);
font-size: var(--fs-3);
font-weight: 600;
line-height: var(--lh-0);
}
.cp-faq:hover .cp-faq-q {
background: var(--copper-lt);
color: var(--night);
border-color: var(--copper-lt);
}
/* Champs + bouton de réservation : même hauteur, épuré */
.hero .book-bar .field select {
height: 48px;
padding-top: 0;
padding-bottom: 0;
}
.hero .book-bar .cp-datefield {
height: 48px;
padding-top: 0;
padding-bottom: 0;
}
.hero .book-bar .submit .btn-reserve {
height: 48px;
min-height: 0;
padding: 0 var(--e-8);
font-size: var(--fs-2);
letter-spacing: var(--ls-3);
}
/* Offres façon Arlette Gruss : rangée de 5 cartes sous le hero */
.offers .grid.offers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-1);
margin-top: var(--e-11);
}
.offers .grid.offers-grid .ocard .media {
aspect-ratio: 3/4;
margin-bottom: var(--e-6);
}
.offers .grid.offers-grid .ocard .body {
font-size: var(--fs-3);
line-height: var(--lh-4);
}
@media (max-width: 1100px) {
.offers .grid.offers-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.offers .grid.offers-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.offers .grid.offers-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
§ 18 — AJUSTEMENTS DE SECTIONS
============================================================ */
/* FAQ collée aux champs : on réduit l'écart au-dessus de la barre */
.hero .book-bar {
margin-top: var(--e-5);
}
/* Couleurs par section (design system) : blanc cassé (défaut) · beige clair · foncé (grandeur/final) */
.sec.beige {
background: var(--beige);
}
/* Section Ensemble (groupes) : 3 encarts */
.ensemble-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ef-2);
margin-top: var(--e-11);
}
.ensemble-grid .ocard .media {
aspect-ratio: 4/3;
margin-bottom: var(--e-7);
}
.ensemble-grid .ocard .h3 {
color: var(--ink);
}
@media (max-width: 860px) {
.ensemble-grid {
grid-template-columns: 1fr;
gap: var(--e-8);
}
}
/* Hero grand public : contenu collé en bas à gauche */
.hero.hero-video {
display: flex;
align-items: flex-end; /* colle le contenu en bas */
justify-content: flex-start; /* … à gauche */
text-align: left;
padding-top: var(--ef-5); /* dégage le haut, sous le menu */
padding-bottom: var(--ef-4); /* petit espace en bas */
}
.hero.hero-video .inner {
margin: 0; /* annule le centrage automatique */
width: 100%;
align-items: flex-start;
text-align: left;
}
/* Page Réservation (modèle « Réservation — séances + billetterie ») */
.cp-resa {
padding-top: var(--ef-6);
padding-bottom: var(--ef-5);
}
.cp-resa .resa-intro {
max-width: 680px;
margin: var(--e-8) auto 0;
text-align: center;
}
/* Ancres : décalage sous le menu fixe */
:target {
scroll-margin-top: 120px;
}
/* ===== Contenu aligné à gauche sur tout le site =====
Une seule exception, déclarée explicitement plus bas : #experience. */
.center,
.sec-head.center,
.container.center,
.grandeur .center,
.grandeur .sec-head {
align-items: flex-start;
text-align: left;
}
.center .tag,
.sec .center .tag {
margin-left: 0;
margin-right: 0;
}
/* Sections pleine largeur : elles se touchent, plus de bande de fond entre elles */
.cp-canvas > .alignfull {
margin-top: 0;
margin-bottom: 0;
}
/* Le contenu pleine largeur commence sous le menu, sans bande blanche */
.cp-canvas {
padding-top: 0;
}
.cp-canvas > .alignfull {
margin-top: 0;
margin-bottom: 0;
}
.cp-canvas {
padding-top: 0;
padding-bottom: 0;
}
.cp-canvas > .alignfull {
margin-top: 0;
margin-bottom: 0;
}
.topbar .tb-lead {
display: none;
}
@media (max-width: 900px) {
/* Le hero s'adapte à son contenu sur mobile : plus rien n'est coupé */
.hero.hero-video {
min-height: auto;
}
/* Le bloc de réservation s'empile proprement */
.hero .book-bar {
display: block;
width: 100%;
max-width: 100%;
}
.hero .book-bar form {
display: grid;
grid-template-columns: 1fr;
gap: var(--e-5);
}
.hero .book-bar .submit {
grid-column: 1 / -1;
}
.hero .book-bar .submit .btn-reserve {
width: 100%;
}
}
/* Galerie en mosaïque : 1 grande + 4 petites */
.gallery .gg {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--e-4);
height: clamp(380px, 52vw, 640px);
}
.gallery .gg > * {
width: 100%;
height: 100%;
aspect-ratio: auto;
min-height: 0;
}
.gallery .gg > :first-child {
grid-row: 1 / span 2;
}
.gallery .gg .ph-fig .ph.plate {
height: 100%;
} /* la grande occupe les 2 rangées à gauche */
.gallery .gg img.ph,
.gallery .gg .ph {
object-fit: cover;
}
/* ---- Légendes des photos ----
Incrustées en bas de chaque vignette : la mosaïque impose des cellules
de hauteur fixe, une légende posée dessous les ferait déborder.
Le voile dégradé garantit la lisibilité quelle que soit la photo. */
.gallery .gg .ph-fig {
position: relative;
margin: 0;
overflow: hidden;
}
.gallery .gg .ph-fig .ph {
width: 100%;
height: 100%;
display: block;
}
.gallery .gg-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--e-9) var(--e-6) var(--e-5);
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-2);
color: #fff;
background: linear-gradient(
to top,
rgba(13, 12, 11, 0.78),
rgba(13, 12, 11, 0) 100%
);
pointer-events: none;
}
@media (max-width: 560px) {
.gallery .gg-cap {
font-size: var(--fs-1);
letter-spacing: var(--ls-3);
padding: var(--e-8) var(--e-5) var(--e-5);
}
}
/* Sur mobile : la grande passe en haut, les petites en 2 colonnes */
@media (max-width: 700px) {
.gallery .gg {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
height: auto;
}
.gallery .gg > * {
aspect-ratio: 1;
height: auto;
}
.gallery .gg > :first-child {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 16/10;
}
}
.gallery.grandeur .sec-head .h2,
.gallery.grandeur .sec-head .eyebrow {
color: #fff;
}
.gallery.grandeur .sec-head .eyebrow {
color: var(--copper-lt);
}
/* Pré-footer global, centré, sur toutes les pages */
.cp-prefooter .cp-prefooter-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cp-prefooter .rule {
background: var(--copper-lt);
}
.cp-prefooter .h2 {
margin-inline: 0;
}
.cp-prefooter .cp-prefooter-sub {
max-width: 60ch;
margin: 0 auto var(--e-9);
color: rgba(233, 226, 214, 0.7);
font-family: var(--font-body);
}
.cp-prefooter .btn-reserve {
align-self: center;
}
/* Barre partenaires / presse (logos couleur, même hauteur) */
.cp-partners {
background: #fcfbf9;
padding: var(--ef-3) 0;
}
.cp-partners-label {
text-align: center;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-5);
font-size: var(--fs-2);
color: var(--copper);
margin-bottom: var(--e-8);
}
.cp-partners-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ef-3);
}
.cp-partners-row a {
display: inline-flex;
align-items: center;
}
.cp-partners-row img {
height: 36px;
width: auto;
max-width: 150px;
object-fit: contain;
opacity: 0.92;
transition: opacity 0.3s ease;
}
.cp-partners-row a:hover img {
opacity: 1;
}
@media (max-width: 600px) {
.cp-partners-row {
gap: var(--e-7);
}
.cp-partners-row img {
height: 26px;
}
}
/* Bandeau newsletter */
.cp-news-signup {
background: var(--paper);
color: var(--ink);
padding: var(--ef-4) 0;
}
.cp-news-inner {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--ef-2);
align-items: center;
text-align: center;
}
.cp-news-form {
width: 100%;
}
.cp-news-text {
text-align: center;
}
.cp-news-signup .eyebrow {
color: var(--copper);
}
.cp-news-signup .h2 {
color: var(--ink);
margin-inline: 0;
}
.cp-news-sub {
color: var(--ink-soft);
margin-bottom: 0;
}
/* ==== § 19 — EFFET DE SURVOL UNIFIÉ DES BOUTONS ==== */
.btn-reserve,
.wp-block-button__link {
position: relative;
overflow: hidden;
isolation: isolate; /* le bouton crée son propre plan : le remplissage ne peut plus glisser dessous */
background: transparent;
border: 1px solid var(--copper);
color: var(--copper);
border-radius: 0;
transition: color 0.5s var(--ease);
/* légitimes : neutralisent les styles injectés par WordPress sur core/button */
box-shadow: none !important;
transform: none !important;
}
.btn-reserve::before,
.wp-block-button__link::before {
content: "";
position: absolute;
inset: 0;
background: var(--copper);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
/* -1 place le remplissage derrière le texte. C'est sans risque grâce à
isolation:isolate plus haut : il ne peut pas glisser sous la section. */
z-index: -1;
}
.btn-reserve:hover,
.wp-block-button__link:hover {
color: #fff;
background: transparent;
}
.btn-reserve:hover::before,
.wp-block-button__link:hover::before {
transform: scaleX(1);
}
.btn-reserve > * {
position: relative;
z-index: 1;
}
/* Sur fond nuit, le bouton reprend le cuivre clair : le cuivre foncé
descendrait sous le seuil de contraste. */
.grandeur .btn-reserve,
.final .btn-reserve,
.cp-prefooter .btn-reserve {
border-color: rgba(183, 154, 114, 0.55);
color: var(--copper-lt);
}
.grandeur .btn-reserve::before,
.final .btn-reserve::before,
.cp-prefooter .btn-reserve::before {
background: var(--copper-lt);
}
.grandeur .btn-reserve:hover,
.final .btn-reserve:hover,
.cp-prefooter .btn-reserve:hover {
color: var(--night);
border-color: var(--copper-lt);
}
/* Les boutons Gutenberg n'avaient pas cette variante : posés sur une section
sombre, ils gardaient un texte blanc sur cuivre foncé au survol, à la
limite du lisible. Ils suivent désormais la même règle que les boutons du
thème. La classe .has-night-background-color couvre les sections composées
en blocs, qui n'ont ni .grandeur ni .final. */
.grandeur .wp-block-button__link,
.final .wp-block-button__link,
.has-night-background-color .wp-block-button__link {
border-color: rgba(183, 154, 114, 0.55);
color: var(--copper-lt);
}
.grandeur .wp-block-button__link::before,
.final .wp-block-button__link::before,
.has-night-background-color .wp-block-button__link::before {
background: var(--copper-lt);
}
.grandeur .wp-block-button__link:hover,
.final .wp-block-button__link:hover,
.has-night-background-color .wp-block-button__link:hover {
color: var(--night);
border-color: var(--copper-lt);
}
/* Section « Prêt à vivre l'expérience » : contenu recentré */
#experience .center {
align-items: center;
text-align: center;
}
/* Carte actu entièrement cliquable */
.news .ncard {
position: relative;
}
.news .ncard .cp-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.news .ncard:hover .h3 {
color: var(--copper);
}
.news .ncard .ncard-cta {
margin-top: var(--e-5);
color: var(--copper);
}
/* ===== Article seul (single.php) ===== */
.cp-single {
padding-top: var(--ef-6);
padding-bottom: var(--ef-5);
}
.cp-single .container {
max-width: 1260px;
}
.cp-single-head {
margin-bottom: var(--e-8);
}
.cp-single-head .eyebrow {
color: var(--copper);
}
.cp-single-media {
max-width: 1040px;
margin: 0 auto var(--e-10);
padding: 0 var(--ef-3);
}
.cp-single-media img {
width: 100%;
height: auto;
display: block;
}
.cp-single-content > * {
margin-bottom: 1.1em;
}
.cp-single-content p,
.cp-single-content li {
/* 16 px comme le reste du site. Le pas de 18 ne servait que deux fois, et
deux pixels d'écart ne se lisent pas comme une intention : ils se lisent
comme un oubli. Le confort de lecture d'un article vient de l'interlignage
et de la largeur de colonne, pas de deux pixels de corps. */
font-size: var(--fs-5);
line-height: var(--lh-5);
color: var(--ink-soft);
}
.cp-single-content ul {
padding-left: 1.2em;
}
.cp-single-foot {
margin-top: var(--e-10);
}
/* ==== § 20 — BARRE DE RÉSERVATION FIXE ==== */
.cp-stickybar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: rgba(13, 12, 11, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(183, 154, 114, 0.45);
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cp-stickybar.on {
transform: translateY(0);
}
.cp-stickybar-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-6);
padding: var(--e-5) var(--ef-2);
}
.cp-stickybar .btn-reserve {
flex-shrink: 0;
}
@media (max-width: 560px) {
.cp-stickybar-inner {
padding: var(--e-4) var(--e-6);
}
}
.cp-stickyform {
display: flex;
align-items: flex-end;
gap: var(--e-5);
flex-wrap: wrap;
}
.cp-stickyform .sb-field {
display: flex;
flex-direction: column;
gap: var(--e-3);
min-width: 200px;
}
.cp-stickyform .sb-label {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-5);
font-size: var(--fs-1);
color: #e9e2d6;
}
.cp-stickyform select {
appearance: none;
-webkit-appearance: none;
background: transparent
url("data:image/svg+xml;utf8,")
no-repeat right 14px center;
border: 1px solid rgba(183, 154, 114, 0.55);
border-radius: 0;
color: #fff;
font-family: var(--font-body);
font-size: var(--fs-4);
padding: var(--e-5) var(--e-10) var(--e-5) var(--e-5);
cursor: pointer;
}
.cp-stickyform select:focus {
outline: none;
border-color: #e6cf97;
}
.cp-stickyform select option {
background: #141210;
color: #fff;
}
.cp-stickyform select:disabled {
opacity: 0.5;
cursor: default;
}
@media (max-width: 900px) {
.cp-stickybar-inner {
flex-wrap: wrap;
}
.cp-stickyform {
width: 100%;
}
.cp-stickyform .sb-field {
flex: 1;
min-width: 140px;
}
.cp-stickyform .btn-reserve {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* Barre fixe façon Cirque du Soleil : titre + badge + champs pleine largeur */
.cp-stickybar-inner {
flex-direction: column;
align-items: stretch;
gap: var(--e-5);
padding: var(--e-5) var(--ef-2) var(--e-6);
}
.cp-stickybar-head {
display: flex;
flex-direction: column;
gap: var(--e-3);
}
.sb-title {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-1);
font-size: var(--fs-7);
color: var(--copper-lt);
line-height: var(--lh-1);
}
.sb-meta {
display: flex;
align-items: center;
gap: var(--e-5);
}
.sb-badge {
display: inline-block;
background: #e6cf97;
color: #0d0c0b;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-2);
padding: var(--e-1) var(--e-5);
border-radius: 0px;
}
.sb-place {
font-family: var(--font-body);
font-size: var(--fs-3);
color: rgba(233, 226, 214, 0.75);
}
.cp-stickyform {
display: flex;
align-items: flex-end;
gap: var(--e-5);
width: 100%;
}
.cp-stickyform .sb-field {
flex: 1;
min-width: 0;
}
.cp-stickyform .btn-reserve {
flex: 0 0 auto;
}
/* Champ date (bouton) */
.sb-datewrap {
position: relative;
}
.sb-datebtn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
background: transparent;
border: 1px solid rgba(183, 154, 114, 0.55);
border-radius: 0;
color: rgba(233, 226, 214, 0.85);
font-family: var(--font-body);
font-size: var(--fs-4);
padding: var(--e-5) var(--e-5);
cursor: pointer;
text-align: left;
}
.sb-datebtn:focus {
outline: none;
border-color: #e6cf97;
}
.sb-datebtn.has-value #cp-sb-datetxt {
color: #fff;
}
/* Calendrier (s'ouvre vers le haut) */
.sb-cal {
position: absolute;
bottom: calc(100% + 10px);
left: 0;
z-index: 70;
background: #141210;
border: 1px solid rgba(183, 154, 114, 0.55);
padding: var(--e-5);
min-width: 300px;
box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.28);
}
.sb-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--e-4);
}
.sb-cal-head span {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-2);
color: #e9e2d6;
}
.sb-cal-head button {
background: transparent;
border: 1px solid rgba(183, 154, 114, 0.45);
border-radius: 0;
color: #b79a72;
font-size: var(--fs-5);
line-height: var(--lh-0);
padding: var(--e-2) var(--e-4);
cursor: pointer;
}
.sb-cal-head button:hover {
background: rgba(183, 154, 114, 0.12);
}
.sb-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--e-2);
}
.sb-cal-grid .dow {
font-family: var(--font-body);
font-size: var(--fs-1);
text-transform: uppercase;
letter-spacing: var(--ls-2);
color: rgba(233, 226, 214, 0.5);
text-align: center;
padding: var(--e-2) 0;
}
.sb-cal-grid button {
background: transparent;
border: 0;
border-radius: 0;
color: #e9e2d6;
font-family: var(--font-body);
font-size: var(--fs-3);
padding: var(--e-4) 0;
cursor: pointer;
}
.sb-cal-grid button:disabled {
color: rgba(233, 226, 214, 0.22);
cursor: default;
}
.sb-cal-grid button:not(:disabled):hover {
background: rgba(183, 154, 114, 0.18);
}
.sb-cal-grid button.sel {
background: #b79a72;
color: #0d0c0b;
font-weight: 600;
}
@media (max-width: 760px) {
.cp-stickyform {
flex-wrap: wrap;
}
.cp-stickyform .sb-field {
flex: 1 1 46%;
}
.cp-stickyform .btn-reserve {
width: 100%;
justify-content: center;
text-align: center;
}
.sb-cal {
left: 0;
right: 0;
min-width: 0;
}
}
/* Barre fixe : sous-titre du spectacle + bouton à la même hauteur que les champs */
.sb-title .sb-sub {
font-weight: 500;
letter-spacing: var(--ls-1);
/* Relatif au titre qui précède, et non à l'échelle : le sous-titre doit
rester proportionné quel que soit le corps du titre. */
font-size: 0.72em; /* charte-ok: relatif au titre qui précède, pas à l échelle */
color: rgba(233, 226, 214, 0.75);
text-transform: none;
}
.cp-stickyform .btn-reserve {
height: 48px;
display: inline-flex;
align-items: center;
padding: 0 var(--e-9);
}
/* Barre fixe : hauteur STRICTEMENT identique pour Date, Séance et le bouton */
.cp-stickyform {
--sb-h: 56px;
}
.cp-stickyform .sb-datebtn,
.cp-stickyform select,
.cp-stickyform .btn-reserve {
/* légitimes : alignent trois éléments de formulaire dont la hauteur native
est imposée par le navigateur (select) — sans cela la barre se décale. */
box-sizing: border-box;
height: var(--sb-h) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: inline-flex;
align-items: center;
}
.cp-stickyform .sb-datebtn {
width: 100%;
justify-content: space-between;
}
.cp-stickyform select {
width: 100%;
}
.cp-stickyform .btn-reserve {
padding-left: var(--e-9);
padding-right: var(--e-9);
}
/* Croix alignée sur le bord droit du contenu (au-dessus du bouton Réserver) */
.cp-stickybar-inner {
position: relative;
}
/* « Masquer » : bouton explicite, aligné à droite du contenu */
.cp-stickybar .sb-min {
position: absolute;
top: 10px;
right: clamp(18px, 4vw, 32px);
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--e-3);
background: transparent;
border: 1px solid rgba(183, 154, 114, 0.45);
border-radius: 0;
color: var(--copper-lt);
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-1);
padding: var(--e-3) var(--e-5);
transition:
background 0.3s ease,
color 0.3s ease;
}
.cp-stickybar .sb-min:hover {
background: rgba(183, 154, 114, 0.14);
}
/* Bouton de réouverture (barre repliée) */
/* L'attribut hidden doit l'emporter : sans cette règle, position:fixed
peut réafficher le bouton alors qu'il devrait rester masqué. */
.cp-sb-reopen[hidden] {
display: none !important;
}
.cp-sb-reopen {
position: fixed;
bottom: 0;
right: clamp(18px, 4vw, 32px);
z-index: 59;
display: inline-flex;
align-items: center;
gap: var(--e-4);
background: #b79a72;
border: 0;
border-radius: 0;
cursor: pointer;
color: #0d0c0b;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-2);
padding: var(--e-5) var(--e-7);
/* Ombre discrète : elle doit détacher le bouton du contenu,
pas assombrir le bas de la page. */
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.14);
}
.cp-sb-reopen:hover {
background: var(--copper);
}
/* Section Lieu : trait sous l'eyebrow + lien secondaire plus présent + rythme */
#chapiteau .rule {
margin: var(--e-3) 0 var(--e-8);
display: block;
}
#chapiteau .arrow {
margin-top: var(--e-9);
font-weight: 600;
letter-spacing: var(--ls-4);
color: var(--copper);
}
#chapiteau .arrow .ln {
width: 34px;
background: var(--copper);
}
#chapiteau .arrow:hover {
color: var(--ink);
}
#chapiteau .arrow:hover .ln {
width: 56px;
}
/* Section Lieu : cadre paysage (photo entière, sans recadrage) */
#chapiteau .split .media,
#chapiteau .split .cp-media-link .media {
aspect-ratio: 3/2;
height: auto;
min-height: 0;
width: 100%;
object-fit: cover;
display: block;
}
/* Section Lieu : image cliquable vers la visite 360° + overlay */
#chapiteau .cp-media-link {
position: relative;
display: block;
overflow: hidden;
}
#chapiteau .cp-media-link .media {
width: 100%;
transition: transform 0.6s var(--ease);
}
#chapiteau .cp-media-link:hover .media {
transform: scale(1.025);
}
#chapiteau .media-overlay {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: var(--e-4);
white-space: nowrap;
background: rgba(13, 12, 11, 0.86);
border: 1px solid rgba(183, 154, 114, 0.6);
color: #e9e2d6;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-2);
padding: var(--e-5) var(--e-7);
transition:
background 0.35s ease,
color 0.35s ease,
border-color 0.35s ease;
}
#chapiteau .cp-media-link:hover .media-overlay {
background: var(--copper-lt);
border-color: var(--copper-lt);
color: var(--night);
}
@media (max-width: 640px) {
#chapiteau .media-overlay {
font-size: var(--fs-1);
padding: var(--e-4) var(--e-5);
bottom: 14px;
}
}
/* Section Lieu : le lien-image prend la place du média (image à droite) */
#chapiteau .split.rev > .cp-media-link {
order: 2;
width: 100%;
}
@media (max-width: 900px) {
#chapiteau .split.rev > .cp-media-link {
order: 0;
}
}
/* ============================================================
#chapiteau .txt dl.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: var(--e-12) 0 0;
padding: var(--e-9) 0;
border-top: 1px solid var(--copper-hair);
border-bottom: 1px solid var(--copper-hair);
}
#chapiteau .txt dl.stats dd {
margin: 0;
}
#chapiteau .txt .stat {
min-width: 0;
padding-left: var(--ef-1);
border-left: 1px solid var(--copper-hair);
}
#chapiteau .txt .stat:first-child {
padding-left: 0;
border-left: 0;
}
#chapiteau .txt .stat b {
display: block;
font-size: var(--fs-h4);
line-height: var(--lh-0);
white-space: nowrap;
}
#chapiteau .txt .stat span {
display: block;
font-size: var(--fs-nano);
letter-spacing: var(--ls-2);
margin-top: var(--e-4);
}
#chapiteau .txt .arrow {
margin-top: var(--e-11);
}
#chapiteau .txt .h2 {
line-height: var(--lh-1);
max-width: 15ch;
text-wrap: balance;
}
@media (max-width: 900px) {
#chapiteau .txt .h2 {
max-width: none;
}
}
/* Filet cuivre en retrait sur la photo — le geste « Opéra de Paris ». */
#chapiteau .cp-media-link::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(252, 251, 249, 0.28);
pointer-events: none;
}
/* ============================================================
§ 22 — ACCESSIBILITÉ
Lien d'évitement et anneau de focus visible au clavier.
============================================================ */
.cp-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: var(--night);
color: var(--copper-lt);
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-4);
font-size: var(--fs-2);
padding: var(--e-5) var(--e-7);
border: 1px solid var(--copper-lt);
text-decoration: none;
}
.cp-skip:focus {
left: 12px;
top: 12px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--copper-lt);
outline-offset: 3px;
}
.nav :where(a, button):focus-visible,
.topbar a:focus-visible,
.foot a:focus-visible,
.cp-stickybar :where(a, button, select):focus-visible {
outline-color: var(--copper-lt);
}
/* ============================================================
§ 23 — FIL D'ARIANE
============================================================ */
.cp-breadcrumb {
font-family: var(--font-body);
font-size: var(--fs-3);
letter-spacing: var(--ls-1);
color: var(--ink-soft);
margin: 0 0 var(--e-6);
}
.cp-breadcrumb a {
color: var(--copper);
text-decoration: none;
}
.cp-breadcrumb a:hover {
text-decoration: underline;
}
.cp-breadcrumb .sep {
margin: 0 var(--e-4);
color: var(--copper-hair-strong);
}
.sec.dark .cp-breadcrumb,
.hero .cp-breadcrumb {
color: rgba(233, 226, 214, 0.7);
}
.sec.dark .cp-breadcrumb a,
.hero .cp-breadcrumb a {
color: var(--copper-lt);
}
/* ============================================================
§ 24 — CALENDRIER DE RÉSERVATION (template-reservation.php)
Grille mensuelle en (données réellement tabulaires :
jours × jours de la semaine), repli en liste verticale sous 760 px.
============================================================ */
.cp-resa {
padding: var(--ef-6) 0 var(--ef-6);
}
.cp-resa .resa-intro {
max-width: 62ch;
margin: var(--e-9) 0 0;
}
.cp-cal-legend {
display: flex;
flex-wrap: wrap;
gap: var(--e-4) var(--e-8);
font-family: var(--font-body);
font-size: var(--fs-2);
letter-spacing: var(--ls-2);
text-transform: uppercase;
color: var(--copper);
margin: var(--e-11) 0 0;
}
.cp-cal-legend .is-full-key {
display: inline-flex;
align-items: center;
gap: var(--e-4);
color: var(--ink-soft);
}
.cp-cal-legend .is-full-key::before {
content: "";
width: 22px;
height: 12px;
border: 1px solid var(--copper-hair);
background: repeating-linear-gradient(
-45deg,
transparent 0 3px,
rgba(74, 68, 60, 0.16) 3px 5px
);
}
/* ---- Navigation entre mois ----
Sans JavaScript, les mois restent empilés et les flèches masquées :
la page fonctionne dans tous les cas. */
.cp-calm {
margin-top: var(--e-12);
}
.cp-calnav.is-js .cp-calm {
margin-top: var(--e-11);
}
.cp-calm-arrows {
display: none;
}
.cp-calnav.is-js .cp-calm-arrows {
display: flex;
align-items: center;
gap: var(--e-3);
}
.cp-calm-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e-7);
flex-wrap: wrap;
margin-bottom: var(--e-7);
}
.cp-calm-arrow {
appearance: none;
background: transparent;
border: 1px solid var(--copper-hair-strong);
border-radius: 0;
color: var(--copper);
font-family: var(--font-body);
font-size: var(--fs-7);
line-height: var(--lh-0);
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.3s var(--ease),
color 0.3s var(--ease),
border-color 0.3s var(--ease);
}
.cp-calm-arrow:hover:not([disabled]) {
background: var(--copper);
border-color: var(--copper);
color: var(--paper);
}
.cp-calm-arrow[disabled] {
opacity: 0.3;
cursor: default;
}
.cp-calm-count {
font-family: var(--font-body);
font-size: var(--fs-2);
text-transform: uppercase;
letter-spacing: var(--ls-3);
color: var(--ink-soft);
min-width: 62px;
text-align: center;
}
/* ---- Titre de mois ---- */
.cp-calm-title {
font-family: var(--font-display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--ls-1);
font-size: var(--fs-h4);
line-height: var(--lh-1);
color: var(--ink);
margin: 0;
}
.cp-calm-title span {
color: var(--copper);
font-weight: 400;
}
/* ---- Grille ---- */
.cp-calm-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.cp-calm-table th {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-3);
font-size: var(--fs-1);
color: var(--ink-soft);
text-align: left;
padding: 0 0 var(--e-5) var(--e-5);
}
.cp-calm-table th abbr {
text-decoration: none;
border: 0;
}
.cp-calm-table td {
vertical-align: top;
border: 1px solid var(--copper-hair);
padding: var(--e-5) var(--e-5) var(--e-5);
height: 128px;
}
.cp-calm-table td.is-void {
border-color: transparent;
background: none;
}
.cp-calm-table td.is-empty {
background: rgba(133, 104, 74, 0.03);
}
.cp-calm-table td.is-empty .d {
color: rgba(74, 68, 60, 0.35);
}
.cp-calm-table .d {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-5);
line-height: var(--lh-0);
color: var(--ink);
margin-bottom: var(--e-4);
}
.cp-calm-table .d-full {
display: none; /* visible uniquement en mode liste (mobile) */
}
/* ---- Créneaux ---- */
.cp-calm-table .slots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--e-3);
}
.slot {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: var(--e-1) var(--e-4);
padding: var(--e-4) var(--e-4);
border: 1px solid var(--copper-hair-strong);
text-decoration: none;
font-family: var(--font-body);
color: var(--ink);
transition:
background 0.3s var(--ease),
color 0.3s var(--ease),
border-color 0.3s var(--ease);
}
.slot .p {
justify-self: end;
}
.slot .t {
font-weight: 600;
font-size: var(--fs-3);
letter-spacing: var(--ls-1);
}
.slot .p {
font-size: var(--fs-2);
letter-spacing: var(--ls-1);
color: var(--copper);
white-space: nowrap;
}
.slot:hover,
.slot:focus-visible {
background: var(--copper);
border-color: var(--copper);
color: var(--paper);
}
.slot:hover .p,
.slot:focus-visible .p {
color: var(--paper);
}
/* ---- Dernières places ----
Filet cuivre à gauche plus une mention sur sa propre ligne.
Pas de rouge : il jurerait avec la palette et se lirait comme une erreur. */
.slot.is-last {
border-left: 3px solid var(--copper);
padding-left: var(--e-4);
}
.slot .alert {
grid-column: 1 / -1;
font-size: var(--fs-1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-2);
color: var(--copper);
line-height: var(--lh-1);
margin-top: var(--e-1);
}
.slot.is-last:hover .alert,
.slot.is-last:focus-visible .alert {
color: var(--paper);
}
.slot.is-last:hover,
.slot.is-last:focus-visible {
border-left-color: var(--copper);
}
.cp-cal-legend .is-last-key {
display: inline-flex;
align-items: center;
gap: var(--e-4);
}
.cp-cal-legend .is-last-key::before {
content: "";
width: 22px;
height: 12px;
border: 1px solid var(--copper-hair);
border-left: 3px solid var(--copper);
}
/* ---- Séances complètes ----
Pas de lien : une case complète ne doit pas être cliquable, sinon
elle envoie l'utilisateur sur une billetterie qui lui dira non. */
.slot.is-full {
cursor: default;
border-color: var(--copper-hair);
color: rgba(74, 68, 60, 0.7);
background: repeating-linear-gradient(
-45deg,
transparent 0 4px,
rgba(74, 68, 60, 0.06) 4px 7px
);
}
.slot.is-full .t {
text-decoration: line-through;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.slot.is-full .p {
color: rgba(74, 68, 60, 0.7);
font-weight: 600;
}
/* Jour dont toutes les séances sont complètes : le numéro s'atténue,
pour que le regard file vers les jours encore disponibles. */
.cp-calm-table td.is-full-day .d {
color: rgba(74, 68, 60, 0.5);
}
/* ---- Repli en liste sous 760 px ----
La table devient une pile de jours ; les cases vides et hors mois
disparaissent, l'en-tête aussi (le jour complet est réaffiché). */
@media (max-width: 760px) {
.cp-calm-table,
.cp-calm-table tbody,
.cp-calm-table tr,
.cp-calm-table td {
display: block;
width: auto;
height: auto;
}
.cp-calm-table thead {
display: none;
}
.cp-calm-table td.is-void,
.cp-calm-table td.is-empty {
display: none;
}
.cp-calm-table td.has-seances {
border: 0;
border-bottom: 1px solid var(--copper-hair);
padding: var(--e-6) 0;
}
.cp-calm-table .d {
font-size: var(--fs-4);
text-transform: uppercase;
letter-spacing: var(--ls-2);
margin-bottom: var(--e-5);
}
.cp-calm-table .d-num {
display: none;
}
.cp-calm-table .d-full {
display: inline;
}
.cp-calm-table .slots {
flex-direction: row;
flex-wrap: wrap;
gap: var(--e-4);
}
.slot {
flex-direction: column;
align-items: flex-start;
gap: var(--e-1);
min-width: 92px;
padding: var(--e-4) var(--e-5);
}
.cp-calm-head {
align-items: center;
}
.cp-calm-arrow {
width: 44px;
height: 44px; /* cible tactile de 44 px, minimum recommandé */
}
}
/* ============================================================
§ 25 — ÉTATS DES SÉANCES DANS LES FORMULAIRES DE RÉSERVATION
Champ du hero (.cp-cal) et barre fixe (.sb-cal).
Règle : on montre l'état, on ne masque jamais la séance.
============================================================ */
/* ---- Jour entièrement complet ----
Le numéro est barré : l'information passe même sans distinction de couleur. */
.cp-day.is-open.is-full,
.sb-cal-grid button.is-full {
color: rgba(74, 68, 60, 0.45);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.sb-cal-grid button.is-full {
color: rgba(233, 226, 214, 0.4);
}
/* ---- Jour avec au moins une séance en fin de stock ----
Un point cuivre sous le chiffre, discret mais repérable. */
.cp-day.is-open.has-last,
.sb-cal-grid button.has-last {
position: relative;
}
.cp-day.is-open.has-last::after,
.sb-cal-grid button.has-last::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--copper);
}
.sb-cal-grid button.has-last::after {
background: var(--copper-lt);
}
.cp-day.is-open.has-last.is-selected::after,
.sb-cal-grid button.has-last.sel::after {
background: currentColor;
}
/* ---- Séance complète dans la liste déroulante ----
Les navigateurs grisent déjà une