*/
.page-hero--photo + .stack { background: var(--fond-sous-hero, #0C170F); }
/* le bandeau reste dans le flux et se fait recouvrir comme le reste */
.ticker { position: relative; }
@media (prefers-reduced-motion: reduce) {
.stick { position: relative; top: auto; }
}
@media (max-width: 700px) {
/* sur petit écran l'empilement mange trop de hauteur utile */
.stick { position: relative; top: auto; border-radius: 20px 20px 0 0; }
}
.section--light { background: var(--ivoire); color: var(--encre); }
.section--tint { background: var(--ivoire-chaud); color: var(--encre); }
.section--dark {
/* même dégradé que les cartes journée : le noir plat est abandonné */
background: linear-gradient(168deg, #12291D 0%, #0A140E 78%);
color: rgba(237,231,218,0.80);
}
/* bande basse, juste pour les chiffres */
.section--band {
padding: clamp(46px, 5vw, 76px) 0;
background: var(--vert-fonce);
position: relative; /* sinon elle se peint sous le panneau collant précédent */
z-index: 1;
}
.section--band .stats { margin-top: 0; }
/* Prolongement direct du hero : même vert, même halo de lumière centré */
.section--halo {
color: rgba(255,255,255,0.82);
background:
radial-gradient(ellipse 78% 62% at 50% 42%, #1C6A44 0%, rgba(28,106,68,0) 68%),
var(--vert-fonce);
}
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 6vw; }
.sec-head {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(28px, 5vw, 80px);
align-items: start;
padding-top: 26px;
border-top: 1px solid rgba(19, 42, 30, 0.16);
}
.section--dark .sec-head, .section--halo .sec-head { border-top-color: rgba(255,255,255,0.18); }
.sec-head__i {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
color: var(--bronze);
display: block;
margin-bottom: 18px;
}
.section--dark .sec-head__i { color: var(--or-sombre); }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; gap: 22px; } }
/* variante sans colonne de droite : le chapô passe sous le titre */
.sec-head--solo { grid-template-columns: 1fr; }
.lede--wide { max-width: none; margin-top: 24px; }
/* Lettrine : signature typographique de mise en page magazine */
.lede--drop::first-letter {
float: left;
font-family: 'Cinzel', serif;
font-size: 3.4em;
line-height: 0.82;
padding: 0.06em 0.12em 0 0;
color: var(--vert-fonce);
}
.eyebrow {
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: 20px;
}
.section--dark .eyebrow { color: var(--or-sombre); }
/* ── CHARTE DE TITRE ──────────────────────────────────────────
Un seul dispositif pour tous les titres du site :
capitales Cinzel · lignes masquées qui montent en décalé ·
dernière ligne en contour · filet or qui se déploie dessous. */
.t__rule {
display: block;
height: 1px;
width: 0;
margin-top: 26px;
background: var(--brique);
transition: width 1.1s var(--ease-out) 0.5s;
}
.section--dark .t__rule { background: var(--or-sombre); }
.t.in .t__rule { width: clamp(90px, 13vw, 180px); }
.t {
--t-color: var(--vert-fonce);
--t-flash: var(--brique);
--t-halo: rgba(158, 75, 22, 0.45);
--t-accent: var(--brique);
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: clamp(2.4rem, 6.4vw, 5.2rem);
line-height: 0.94;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--vert-fonce);
margin-bottom: 26px;
}
.section--dark .t {
--t-color: var(--or);
--t-flash: #FFFFFF;
--t-halo: rgba(251, 242, 168, 0.55);
--t-accent: var(--or-sombre);
color: var(--or);
}
/* chaque ligne est une fenêtre ; le padding évite que les accents
et les jambages soient rognés par le masque */
.t__l {
display: block;
overflow: hidden;
padding: 0.08em 0.03em;
margin: -0.08em -0.03em;
}
.t__l > span { display: block; }
/* Les mots ne se coupent jamais : chaque mot est un bloc insécable
qui contient ses lettres. */
.t__w { display: inline-block; white-space: nowrap; }
/* Garde-fou des titres sur petit ecran : voir assets/js/socle.js.
Les titres .t sont decoupes lettre par lettre en inline-block par le
JS du site. Autoriser le retour a la ligne dans un mot ne produit donc
jamais une cesure propre : ca coupe entre deux lettres, au hasard
(« L'ETABLISSEMEN / T »). On garde donc nowrap, un mot n'est jamais
brise, et c'est la TAILLE du titre qui s'ajuste, par mesure, quand un
mot ne tient pas dans sa colonne.
Pourquoi par mesure plutot qu'avec un clamp plus bas : un clamp
rapetisserait tous les titres de toutes les pages, y compris les
centaines qui tiennent deja. La mesure ne touche que ceux qui debordent.
Constate avec « INCONTOURNABLE » (14 signes) et « L'ETABLISSEMENT »
(15 signes) ; l'accueil n'a aucun mot assez long et reste intact. */
/* UNE seule taille de H2 sur tout le site. L'ancienne valeur montait a
83 px en pleine largeur et retombait a 49 px dans la colonne collante :
deux titres de meme niveau n'avaient pas le meme poids. */
.t { font-size: var(--t-fit, clamp(1.9rem, 3.9vw, 3.5rem)); }
/* Le H1 passe au-dessus des H2 : il etait plus petit qu'eux. */
.page-hero .t { font-size: var(--t-fit, clamp(2.4rem, 5.2vw, 4.7rem)); }
/* Chaque lettre monte de sous la ligne, en décalé */
.t__c {
display: inline-block;
font-style: normal;
transform: translateY(112%);
opacity: 0;
/* la lettre monte ET s'allume : elle arrive incandescente,
puis retombe sur la couleur du titre. La cascade fait courir
une onde de lumière à travers le mot. */
color: var(--t-flash);
text-shadow: 0 0 26px var(--t-halo), 0 0 8px var(--t-halo);
transition: transform 0.85s var(--ease-out),
opacity 0.45s ease,
color 1.1s ease,
text-shadow 1.1s ease;
transition-delay: calc(var(--i) * 34ms);
will-change: transform;
}
.t.in .t__c {
transform: none;
opacity: 1;
color: var(--t-color);
text-shadow: 0 0 0 transparent;
}
/* ligne d'accent : elle se pose sur la couleur chaude au lieu du vert */
.t.in .t__l--a .t__c { color: var(--t-accent); }
@media (prefers-reduced-motion: reduce) {
.t__c { transform: none; opacity: 1; color: var(--t-color); text-shadow: none; transition: none; }
}
/* Repli si le script ne tourne pas : le titre reste lisible */
.t:not(.split) .t__l > span { transform: none; }
/* le titre pilote sa propre entrée : pas de fondu global qui écraserait
l'effet de fenêtre */
.t.reveal { opacity: 1; transform: none; }
.h2 {
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: clamp(2rem, 5.2vw, 4.1rem);
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--vert-fonce);
margin-bottom: 28px;
}
.section--dark .h2 { color: var(--or); }
.lede {
font-size: clamp(1rem, 1.5vw, 1.12rem);
line-height: 1.85;
color: var(--encre-douce);
max-width: none;
}
.lede + .lede { margin-top: 18px; }
.section--dark .lede { color: rgba(255,255,255,0.74); }
/* --- Intro sur deux colonnes : texte + carrousel animations --- */
.intro-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: clamp(34px, 4.5vw, 72px);
align-items: start;
}
.promo {
position: relative;
width: 100%;
max-width: 430px;
margin-left: auto;
/* légèrement de travers : l'affiche est un objet posé sur la page,
pas une image de marque : ça désamorce son graphisme criard */
transform: rotate(-1.6deg);
transition: transform 0.5s var(--ease-out);
}
.promo:hover { transform: rotate(0deg); }
/* aucune ombre ni fond : seuls les pixels de l'affiche se voient */
/* Le bouton du bandeau des soirees. C'est le `.btn-ghost` du socle,
repris tel quel pour que l'appel a l'action ait le meme poids que
partout ailleurs : c'etait auparavant un lien souligne en petites
capitales, que personne ne voyait dans un encart deja charge.
Seuls la marge et la largeur changent ici : dans un encart de 430 px,
le bouton prend toute la laize, ce qui en fait le point d'arrivee
naturel du regard apres l'affiche. */
.promo__cta {
margin-top: 18px;
width: 100%;
justify-content: center;
}
.promo__stage { background: transparent; box-shadow: none; }
.promo__eyebrow {
font-family: var(--mono);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze);
}
.promo__stage {
position: relative;
aspect-ratio: 1000 / 1400; /* ratio réel des affiches */
border-radius: 0;
overflow: hidden;
background: transparent;
}
.promo__slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.03);
transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
pointer-events: none;
}
.promo__slide.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
.promo__stage:hover .promo__slide.is-on { transform: scale(1.02); }
/* La photo est en 1er plan du background, le dégradé sert de repli :
tant que le visuel n'est pas fourni, on voit le dégradé, pas une image cassée. */
.promo__img {
position: absolute;
inset: 0;
/* Pas de dégradé de repli : les affiches ont leurs propres angles arrondis
transparents, et le vert se voyait au travers. Transparent = on lit le
fond de la bande, quelle que soit sa couleur. */
background-image: var(--img, none);
background-color: transparent;
background-size: cover;
background-position: center;
}
/* Commandes */
.promo__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 16px;
}
.promo__dots { display: flex; gap: 0; margin-left: -6px; }
.promo__dot {
width: 26px;
height: 2px;
border: none;
/* la barrette reste fine, la zone cliquable est étendue par le padding */
padding: 15px 6px;
background-clip: content-box;
box-sizing: content-box;
cursor: pointer;
background-color: rgba(19,42,30,0.20);
transition: background-color 0.2s ease;
}
.promo__dot.is-on { background-color: var(--brique); }
.promo__dot:hover { background-color: rgba(19,42,30,0.45); }
.promo__arrows { display: flex; gap: 8px; }
.promo__nav {
width: 42px; height: 42px;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid rgba(19,42,30,0.2);
background: transparent;
color: var(--encre);
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.16s var(--ease-out);
}
.promo__nav:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--ivoire); }
.promo__nav:active { transform: scale(0.93); }
@media (max-width: 900px) {
.intro-grid { grid-template-columns: 1fr; gap: 38px; }
.promo { margin: 0 auto; max-width: 380px; }
}
/* --- Chiffres clés --- */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 64px;
background: rgba(19, 42, 30, 0.14); /* fait office de filets */
border-top: 1px solid rgba(19, 42, 30, 0.14);
border-bottom: 1px solid rgba(19, 42, 30, 0.14);
}
.stat { background: var(--ivoire); padding: 30px 20px; text-align: center; }
.stat__n {
font-family: 'Cinzel', serif;
font-variant-numeric: tabular-nums;
font-size: clamp(1.6rem, 3.2vw, 2.35rem);
color: var(--vert-fonce);
line-height: 1;
}
.stat__l {
margin-top: 10px;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--encre-douce);
}
/* Chiffres posés sur le vert */
.section--halo .stats,
.section--dark .stats {
background: rgba(255,255,255,0.16);
border-top-color: rgba(255,255,255,0.16);
border-bottom-color: rgba(255,255,255,0.16);
}
.section--halo .stat,
.section--dark .stat { background: var(--vert-fonce); }
.section--halo .stat__n,
.section--dark .stat__n { color: var(--or); }
.section--halo .stat__l,
.section--dark .stat__l { color: rgba(255,255,255,0.55); }
.section--halo .h2 { color: var(--or); }
.section--halo .eyebrow { color: var(--or-sombre); }
.section--halo .lede { color: rgba(255,255,255,0.76); }
/* --- Les deux journées ---------------------------------------
Cartes sombres posées sur le sable : c'est ce qui permet de
reprendre les badges du hero à l'identique, l'or et le crème
n'ayant aucun contraste sur du blanc. */
.days {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin-top: clamp(40px, 5vw, 66px);
}
.day {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 34px 32px 30px;
border-radius: 10px;
background: linear-gradient(168deg, #12291D 0%, #0A140E 68%);
border: 1px solid rgba(237, 231, 218, 0.12);
transition: border-color 0.3s ease, transform 0.35s var(--ease-out),
box-shadow 0.35s ease;
}
.day:hover {
transform: translateY(-5px);
border-color: rgba(237, 231, 218, 0.26);
box-shadow: 0 22px 50px rgba(8, 16, 11, 0.35);
}
/* halo d'accent en haut de carte, propre à chaque journée */
.day::before {
content: '';
position: absolute;
top: -55%; left: 50%;
width: 120%; height: 100%;
transform: translateX(-50%);
pointer-events: none;
opacity: 0.5;
transition: opacity 0.35s ease;
}
.day:hover::before { opacity: 0.85; }
.day--mixte::before {
background: radial-gradient(closest-side, rgba(251,242,168,0.20), transparent 72%);
}
.day--masculin::before {
background: radial-gradient(closest-side, rgba(245,240,232,0.16), transparent 72%);
}
.day > * { position: relative; z-index: 1; }
.day__title {
font-family: 'Cinzel', serif;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
line-height: 1.1;
color: #FFFFFF;
margin: 18px 0 6px;
}
.day__sub {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(237, 231, 218, 0.45);
}
.day__rows { margin: 26px 0 0; }
.day__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid rgba(237, 231, 218, 0.1);
font-size: 0.95rem;
}
.day__row:first-child { border-top: 1px solid rgba(237, 231, 218, 0.1); }
.day__row span:first-child { color: rgba(237, 231, 218, 0.62); }
.day__row span:last-child {
color: #FFFFFF;
font-family: var(--mono);
font-size: 0.88rem;
font-variant-numeric: tabular-nums;
}
.day__plus {
margin-top: 20px;
font-size: 0.84rem;
line-height: 1.7;
color: rgba(237, 231, 218, 0.5);
}
.day__foot { margin-top: auto; padding-top: 28px; }
.day__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: 15px 22px;
border-radius: 999px;
border: 1px solid;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
}
.day__cta svg { flex: none; transition: transform 0.28s var(--ease-out); }
.day__cta:hover svg { transform: translateX(4px); }
.day__cta:active { transform: scale(0.985); }
/* charte : l'or pour la Mixte, le crème pour le 100% Masculin */
.day--mixte .day__cta { color: var(--or); border-color: rgba(251,242,168,0.45); }
.day--mixte .day__cta:hover { background: var(--or); color: #0A140E; border-color: var(--or); }
.day--masculin .day__cta { color: var(--creme); border-color: rgba(245,240,232,0.42); }
.day--masculin .day__cta:hover { background: var(--creme); color: #0A140E; border-color: var(--creme); }
@media (max-width: 760px) { .days { grid-template-columns: 1fr; } }
.note {
margin-top: 30px;
max-width: 78ch;
font-size: 0.8rem;
line-height: 1.75;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.48);
}
.section--light .note, .section--tint .note { color: var(--encre-douce); }
/* --- Galerie en ruban continu ---------------------------------
L'ancienne version s'arrêtait sur la dernière image : on ne
comprenait pas si c'était fini ou cassé. La bande boucle
maintenant sans fin, et se met en pause au survol. */
.gal {
margin-top: clamp(40px, 5vw, 72px);
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
overflow: hidden;
/* les bords s'estompent : la bande vient de nulle part et y retourne */
-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.gal__rail {
display: flex;
gap: 16px;
width: max-content;
padding: 4px 8px 6px;
animation: rubanGal 58s linear infinite;
}
.gal:hover .gal__rail { animation-play-state: paused; }
@keyframes rubanGal { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.gal { overflow-x: auto; }
.gal__rail { animation: none; }
}
.gal__it {
position: relative;
flex: 0 0 clamp(230px, 26vw, 360px);
aspect-ratio: 4 / 5;
border-radius: 8px;
overflow: hidden;
background-image: var(--img);
background-size: cover;
background-position: center;
transition: transform 0.55s var(--ease-out);
}
.gal__it::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(5,9,6,0.85), rgba(5,9,6,0) 58%);
transition: opacity 0.4s ease;
}
.gal:hover .gal__it { transform: scale(0.965); }
.gal .gal__it:hover { transform: scale(1.02); }
.gal .gal__it:hover::after { opacity: 0.6; }
.gal__n, .gal__t {
position: absolute;
z-index: 2;
font-family: var(--mono);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.gal__n { top: 15px; left: 17px; font-size: 0.56rem; color: rgba(237,231,218,0.5); }
.gal__t { left: 17px; bottom: 16px; font-size: 0.71rem; color: var(--papier); }
/* Équipements restants : des jetons, plus une fiche technique */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.tags span {
padding: 8px 14px;
border: 1px solid rgba(237,231,218,0.18);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.06em;
color: rgba(237,231,218,0.66);
}
/* --- Emplacements photo (à remplacer par les vrais visuels) --- */
.shots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 56px;
}
.shot {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 5px;
overflow: hidden;
/* dès qu'un --img est renseigné, il recouvre le dégradé d'attente */
background-image: var(--img, none),
linear-gradient(155deg, #17573A 0%, #0D3D26 60%, #071A0E 100%);
background-size: cover, cover;
background-position: center, center;
transition: transform 0.6s var(--ease-out);
}
.shots:hover .shot { transform: scale(0.985); }
.shots .shot:hover { transform: scale(1.015); }
.shot__l {
position: absolute;
left: 14px; bottom: 12px;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
}
.shot__wait {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(251,242,168,0.42);
}
@media (max-width: 700px) {
.shots { grid-template-columns: 1fr 1fr; }
}
.shots__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.shots__foot .note { margin-top: 26px; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 26px;
padding: 14px 22px;
border: 1px solid var(--encre);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--encre);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
}
.btn-ghost svg { transition: transform 0.28s var(--ease-out); }
.btn-ghost:hover { background: var(--encre); color: var(--ivoire); }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-ghost:active { transform: scale(0.985); }
/* variante appuyée : le lien vers la galerie doit se voir */
.section--dark a.btn-ghost--fort {
background: var(--or);
border-color: var(--or);
color: #0A140E;
padding: 16px 26px;
font-size: 0.68rem;
}
.section--dark a.btn-ghost--fort:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0A140E; }
/* --- Bandeau cinétique : respiration entre deux sections --- */
.ticker {
overflow: hidden;
background: var(--vert-fonce);
border-top: 1px solid rgba(251,242,168,0.14);
border-bottom: 1px solid rgba(251,242,168,0.14);
/* 30 px et non 22 : le panneau collant qui suit peint 30 px de fond
par-dessus le bas du bandeau. En dessous, les lettres se faisaient
raboter. */
padding: 30px 0;
user-select: none;
}
.ticker__track {
display: flex;
width: max-content;
animation: defile 42s linear infinite;
}
.ticker__track > span {
display: flex;
align-items: center;
gap: clamp(28px, 4vw, 56px);
padding-right: clamp(28px, 4vw, 56px);
font-family: 'Cinzel', serif;
font-size: clamp(1.1rem, 2.4vw, 1.9rem);
letter-spacing: 0.06em;
color: rgba(251, 242, 168, 0.5);
white-space: nowrap;
}
.ticker__track b { font-weight: 400; }
.ticker__track i {
font-style: normal;
font-size: 0.5em;
color: rgba(251, 242, 168, 0.35);
}
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
/* --- Installations --- */
.equip { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 52px; }
.equip__h {
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
padding-bottom: 14px;
border-bottom: 1px solid rgba(19,42,30,0.16);
}
.equip__list { list-style: none; }
.equip__list li {
padding: 12px 0;
font-size: 0.94rem;
color: var(--encre);
border-bottom: 1px solid rgba(19,42,30,0.09);
}
.equip__list em { font-style: normal; color: var(--encre-douce); font-size: 0.84rem; }
/* --- Accès --- */
.access { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; margin-top: 48px; align-items: start; }
.access ol { margin: 0 0 0 18px; color: rgba(255,255,255,0.74); line-height: 1.9; font-size: 0.95rem; }
.access ol li { padding: 3px 0; }
.card-contact {
border: 1px solid rgba(255,255,255,0.16);
border-radius: 4px;
padding: 30px 28px;
background: rgba(255,255,255,0.035);
}
.card-contact dt {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-sombre);
margin-bottom: 6px;
}
/* Icône optionnelle devant le libellé (voir acces-contact/) : suit la
couleur du texte, currentColor, rien à accorder en plus. */
.card-contact dt svg { flex: 0 0 auto; opacity: 0.85; color: currentColor; }
.card-contact dd { margin: 0 0 22px; color: #FFFFFF; font-size: 0.98rem; line-height: 1.7; }
.card-contact dd:last-child { margin-bottom: 0; }
.card-contact a:hover { color: var(--or); }
/* ── Déclinaison sombre ─────────────────────────────────────── */
.section--dark .sec-head__i { color: var(--or-sombre); }
.section--dark .lede { color: rgba(237,231,218,0.72); }
.section--dark .lede--drop::first-letter { color: var(--or); }
.section--dark .note { color: rgba(237,231,218,0.42); }
.section--dark .equip__h { color: var(--or-sombre); border-bottom-color: rgba(237,231,218,0.18); }
.section--dark .equip__list li{ color: var(--papier); border-bottom-color: rgba(237,231,218,0.10); }
.section--dark .equip__list em{ color: rgba(237,231,218,0.45); }
.section--dark .btn-ghost { border-color: rgba(237,231,218,0.4); color: var(--papier); }
.section--dark .btn-ghost:hover { background: var(--or); color: var(--nuit); border-color: var(--or); }
.section--dark .promo__eyebrow { color: var(--or-sombre); }
.section--dark .promo__dot { background-color: rgba(237,231,218,0.24); }
.section--dark .promo__dot.is-on { background-color: var(--or); }
.section--dark .promo__nav { border-color: rgba(237,231,218,0.3); color: var(--papier); }
.section--dark .promo__nav:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
/* Variante claire du bloc Accès */
.section--light .access ol,
.section--tint .access ol { color: var(--encre-douce); }
.section--light .card-contact,
.section--tint .card-contact {
border-color: rgba(19,42,30,0.16);
background: rgba(255,255,255,0.6);
}
.section--light .card-contact dt,
.section--tint .card-contact dt { color: var(--bronze); }
.section--light .card-contact dd,
.section--tint .card-contact dd { color: var(--encre); }
.section--light .card-contact a:hover,
.section--tint .card-contact a:hover { color: var(--bronze); }
/* --- Bloc d'urgence (page Prévention) -----------------------------
Deux blocs côte à côte sur fond vert, pour un numéro utile et une
consigne d'urgence : gros numéro de téléphone, note courte. */
.urgence {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 44px;
padding: clamp(28px, 4vw, 48px);
border-radius: 18px;
background: linear-gradient(165deg, var(--vert-fonce) 0%, var(--vert-nuit) 100%);
color: var(--papier);
}
.urgence__bloc { display: flex; flex-direction: column; gap: 10px; }
.urgence__k {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-sombre);
}
.urgence__tel {
display: block;
font-family: var(--titre);
font-size: clamp(1.6rem, 3vw, 2.1rem);
color: var(--or);
line-height: 1.2;
}
.urgence__tel:hover { color: #FFFFFF; }
.urgence__bloc p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(237,231,218,0.72); }
@media (max-width: 700px) {
.urgence { grid-template-columns: 1fr; }
}
/* Titre de partie, centre, pose entre les dix regles et le texte long du
reglement. Ce n'est pas un titre de section (`.t`) : il n'ouvre pas une
section vitrine, il annonce le document lui-meme. D'ou le monospace des
etiquettes plutot que le serif des titres, et les deux filets qui
l'isolent de ce qui precede et de ce qui suit. */
.ri-titre {
max-width: 720px;
/* de l'air au-dessus : le titre suit l'encart d'avertissement, et les
deux se touchaient presque. */
margin: clamp(44px, 6vw, 72px) 0 clamp(34px, 5vw, 54px);
padding: clamp(18px, 2.6vw, 26px) 0;
border-top: 1px solid rgba(19, 42, 30, 0.16);
border-bottom: 1px solid rgba(19, 42, 30, 0.16);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
text-align: center;
color: var(--bronze);
}
/* En tete de section, le titre n'a plus d'encart au-dessus duquel se
degager : la grande marge haute devient un trou. Sans plafond de
largeur, ses filets s'alignent sur le bord des cartes au lieu de
s'arreter au milieu. Declaree APRES .ri-titre : a specificite egale,
c'est l'ordre qui tranche. */
.ri-titre--haut {
/* il suit le chapo et precede les cartes : un ecart egal des deux
cotes, plus serre que la version de bas de page */
margin-top: clamp(30px, 3.4vw, 44px);
margin-bottom: clamp(30px, 3.4vw, 44px);
max-width: none;
}
/* --- Texte long (pages Mentions légales, Règlement intérieur) ----
Un document juridique se lit en continu, pas en cartes ni en
panneaux empilés : une seule colonne étroite pour le confort de
lecture, des intertitres sobres plutôt que le grand titre animé
des sections vitrine. */
.legal { max-width: 720px; }
/* L'ecart entre deux etages du bas de page. 52 px ne suffisaient plus
une fois l'encart terracotta pose juste au-dessus : son fond colore
touchait presque le titre suivant. */
.legal__bloc { margin-top: clamp(58px, 6.5vw, 88px); }
.legal__bloc:first-child { margin-top: 0; }
.legal h2 {
font-family: var(--titre);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 600;
color: var(--encre);
margin: 0 0 16px;
}
.section--dark .legal h2 { color: var(--papier); }
.legal p { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.75; color: var(--encre-douce); }
.legal p:last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; font-size: 0.98rem; line-height: 1.7; color: var(--encre-douce); }
.legal li:last-child { margin-bottom: 0; }
.legal a { color: var(--brique); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--vert-fonce); }
.legal .card-contact { margin: 20px 0 8px; }
.legal .card-contact dt { margin-bottom: 4px; }
.legal .card-contact dd { margin-bottom: 16px; font-size: 0.92rem; }
/* --- Encart d'avis (page Règlement intérieur) ---------------------
Une consigne qui doit se voir sans quitter la charte : pas de
rouge ni de jaune, le terracotta du site sur un fond à peine
teinté et un filet à gauche, comme un post-it sobre. */
.avis {
margin: 28px 0;
padding: 22px 26px;
border-left: 3px solid var(--brique);
border-radius: 4px;
background: rgba(192, 90, 37, 0.07);
}
/* Variante large : l'encart ne vit pas dans la colonne etroite `.legal`
mais en pleine laize, sous les dix regles. Plusieurs paragraphes, donc
un peu plus d'air, et le meme filet terracotta qui signale l'avis. */
.avis--large {
/* meme laize que `.ri-titre` et `.legal` : les trois blocs qui se
suivent doivent s'aligner sur la meme colonne, sinon les filets
du titre depassent de l'encart et l'ensemble parait de travers. */
max-width: 720px;
margin: clamp(40px, 5vw, 60px) 0 0;
padding: clamp(24px, 3vw, 32px) clamp(24px, 3.4vw, 36px);
}
/* Quand l'encart suit un titre d'etage, sa grande marge haute fait
double emploi avec celle du titre : les deux se cumulaient et
l'avertissement flottait loin de ce qu'il annonce. */
.avis--suite { margin-top: clamp(18px, 2vw, 24px); }
.avis--large p { margin: 0; }
.avis--large p + p { margin-top: 0.9em; }
/* le `
` de l'encart ne recevait rien : il vit hors de `.corps` */
.avis strong { font-weight: 600; color: var(--encre); }
.avis__k {
display: block;
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brique-lue);
margin-bottom: 10px;
}
.avis p { margin: 0 0 10px; font-size: 0.94rem; line-height: 1.7; color: var(--encre-douce); }
.avis p:last-child { margin-bottom: 0; }
/* --- Formulaire de contact (page Accès & Contact) ----------------
Un seul formulaire sur tout le site : pas la peine de le poser dans
le socle pour le réutiliser ailleurs, mais il vit ici quand même,
à côté de .card-contact, pour que la charte du composant reste au
même endroit que le reste de la page qui l'utilise.
Deux blocs côte à côte : le formulaire (clair) et une aide (sombre,
le vert du site), pour qui préfère décrocher son téléphone plutôt
que d'écrire. */
.form-contact {
display: grid;
grid-template-columns: 1.5fr 1fr;
margin-top: 44px;
background: var(--ivoire-chaud);
border: 1px solid rgba(19, 42, 30, 0.14);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(19, 42, 30, 0.1);
}
.form-contact__corps {
display: grid;
gap: 22px;
padding: clamp(26px, 4vw, 44px);
}
.form-grille {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.form-champ { display: flex; flex-direction: column; gap: 8px; }
.form-champ--large { grid-column: 1 / -1; }
.form-champ > span {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bronze);
}
.form-champ b { color: var(--brique-lue); font-weight: 500; }
.form-champ input,
.form-champ select,
.form-champ textarea {
font-family: var(--lecture);
font-size: 0.96rem;
color: var(--encre);
background: var(--ivoire);
border: 1px solid rgba(19, 42, 30, 0.22);
border-radius: 8px;
padding: 12px 14px;
min-height: 46px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-champ textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-champ input:focus,
.form-champ select:focus,
.form-champ textarea:focus {
outline: none;
border-color: var(--brique-lue);
box-shadow: 0 0 0 3px rgba(160, 72, 26, 0.12);
}
/* Flèche dessinée à la main : la flèche par défaut du navigateur ne se
teinte jamais avec le reste de la charte. */
.form-champ select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6A62' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 38px;
cursor: pointer;
}
/* Piège à robots : un champ que seule une machine remplit. Caché
visuellement (pas en display:none, que certains robots ignorent),
jamais atteignable au clavier ni lu par un lecteur d'écran. */
.form-piege {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.form-rgpd {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.84rem;
color: var(--encre-douce);
line-height: 1.6;
}
.form-rgpd input { margin-top: 5px; }
.form-rgpd a { color: var(--brique-lue); border-bottom: 1px solid rgba(160,72,26,0.35); }
.form-rgpd a:hover { border-bottom-color: var(--brique-lue); }
.form-envoyer {
justify-self: start;
margin-top: 2px;
background: var(--vert-fonce);
border-color: var(--vert-fonce);
color: var(--papier);
box-shadow: 0 10px 24px rgba(13, 61, 38, 0.28);
}
.form-envoyer:hover { background: var(--brique-lue); border-color: var(--brique-lue); }
.form-envoyer[disabled] { opacity: 0.55; pointer-events: none; }
.form-etat {
margin: 0;
font-size: 0.9rem;
padding: 13px 16px;
border-radius: 8px;
}
.form-etat[data-etat="ok"] { background: rgba(13,61,38,0.1); color: var(--vert-fonce); }
.form-etat[data-etat="erreur"] { background: rgba(160,72,26,0.1); color: var(--brique-lue); }
/* Le panneau d'aide : meme degrade que le hero et l'entete du
dashboard, pour que le vert du site revienne ici aussi. */
.form-contact__aide {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: clamp(26px, 4vw, 44px);
background: linear-gradient(165deg, var(--vert-fonce) 0%, var(--vert-nuit) 100%);
color: var(--papier);
}
.form-contact__aide::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 70% 55% at 30% 20%, rgba(46, 146, 95, 0.35) 0%, rgba(46, 146, 95, 0) 70%);
}
.form-contact__aide-k {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-sombre);
}
.form-contact__tel {
display: block;
font-family: var(--titre);
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
color: var(--or);
line-height: 1.2;
}
.form-contact__tel:hover { color: #FFFFFF; }
.form-contact__aide p { font-size: 0.88rem; color: rgba(237,231,218,0.72); line-height: 1.6; margin: 0; }
.form-contact__auj {
display: inline-flex;
align-items: flex-start;
gap: 8px;
width: fit-content;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(237,231,218,0.18);
font-family: var(--mono);
font-size: 0.7rem;
line-height: 1.6;
letter-spacing: 0.04em;
}
.form-contact__auj-pt {
width: 7px; height: 7px;
margin-top: 5px;
border-radius: 50%;
background: var(--or);
box-shadow: 0 0 0 3px rgba(251,242,168,0.22);
flex: 0 0 auto;
}
.form-contact__auj[data-ferme] .form-contact__auj-pt { background: #E36A4A; box-shadow: 0 0 0 3px rgba(227,106,74,0.22); }
@media (max-width: 860px) {
.form-contact { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.form-grille { grid-template-columns: 1fr; }
}
.acc__h {
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
padding-bottom: 14px;
border-bottom: 1px solid rgba(19,42,30,0.16);
}
.steps { list-style: none; counter-reset: e; margin: 0; }
.steps li {
counter-increment: e;
display: flex;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid rgba(19,42,30,0.09);
font-size: 0.96rem;
line-height: 1.6;
color: var(--encre);
}
.steps li::before {
content: counter(e, decimal-leading-zero);
flex: none;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
color: var(--brique);
padding-top: 5px;
}
.steps b { font-weight: 600; }
.tags--clair span { border-color: rgba(19,42,30,0.2); color: var(--encre-douce); }
.acc__tel {
font-family: 'Cinzel', serif;
font-size: 1.35rem;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(19,42,30,0.25);
padding-bottom: 3px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.acc__tel:hover { color: var(--brique); border-bottom-color: var(--brique); }
.acc__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.acc__go .btn-ghost { margin-top: 0; padding: 12px 18px; font-size: 0.62rem; }
/* --- FAQ ------------------------------------------------------
details/summary natif : ouvrable au clavier, indexable par Google
même replié, et zéro JavaScript. */
.faq { margin-top: clamp(38px, 4.5vw, 60px); border-top: 1px solid rgba(19,42,30,0.16); }
.faq details {
border-bottom: 1px solid rgba(19,42,30,0.14);
}
.faq summary {
display: flex;
align-items: baseline;
gap: clamp(14px, 2vw, 26px);
padding: 26px 44px 26px 0;
position: relative;
cursor: pointer;
list-style: none;
font-family: 'Cinzel', serif;
font-size: clamp(1rem, 1.65vw, 1.32rem);
line-height: 1.3;
color: var(--vert-fonce);
transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brique); }
.faq__n {
flex: none;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.16em;
color: var(--brique);
}
/* la croix qui bascule en trait */
.faq summary::after,
.faq summary::before {
content: '';
position: absolute;
right: 6px;
top: 50%;
width: 15px;
height: 1.5px;
background: var(--vert-fonce);
transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}
.faq summary::before { transform: translateY(-50%) rotate(90deg); }
.faq summary::after { transform: translateY(-50%); }
.faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a {
padding: 0 48px 30px 0;
margin-left: calc(0.6rem + clamp(14px, 2vw, 26px) + 1.4em);
max-width: 68ch;
font-size: 0.97rem;
line-height: 1.85;
color: var(--encre-douce);
}
.faq__a a { color: var(--brique); border-bottom: 1px solid rgba(158,75,22,0.35); }
.faq__a a:hover { border-bottom-color: var(--brique); }
.faq details[open] .faq__a { animation: faqOuvre 0.4s var(--ease-out); }
@keyframes faqOuvre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 700px) { .faq__a { margin-left: 0; padding-right: 0; } }
/* --- Carte, pleine largeur avant le footer ------------------
Chargement au clic : un iframe Google pose un cookie avant
tout consentement, et coûte ~1 Mo au chargement de la page. */
.map {
position: relative;
height: clamp(320px, 42vw, 520px);
background: linear-gradient(168deg, #12291D 0%, #0A140E 78%);
overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__ph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
padding: 24px;
}
.map__ph p {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(237,231,218,0.62);
line-height: 2;
}
.map__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 26px;
border-radius: 999px;
background: var(--or);
color: #0A140E;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}
.map__btn:hover { background: #FFFFFF; }
.map__btn:active { transform: scale(0.985); }
.map__note { font-size: 0.58rem !important; letter-spacing: 0.1em !important; opacity: 0.6; }
.map__pin {
position: absolute;
right: clamp(16px, 4vw, 44px);
bottom: clamp(16px, 4vw, 44px);
z-index: 2;
display: inline-flex;
align-items: center;
padding: 14px 24px;
border-radius: 999px;
background: var(--or);
color: #0A140E;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}
.map__pin:hover { background: #FFFFFF; }
.map__pin:active { transform: scale(0.985); }
/* --- Footer ---------------------------------------------------
Trois etages : signature + invitation, navigation, semaine.
Volontairement SANS telephone ni adresse (l'adresse est juste
au-dessus sur la carte, et le numero generait des appels inutiles). */
.footer {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(166deg, #11301F 0%, #0A2214 46%, #061710 100%);
padding: clamp(38px, 4vw, 54px) 0 0;
color: rgba(237, 231, 218, 0.6);
}
/* deux halos tres doux : donne de la profondeur a l'aplat */
.footer::before,
.footer::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.footer::before {
top: -220px; left: -160px; width: 720px; height: 720px;
background: radial-gradient(circle, rgba(251,242,168,0.085), transparent 66%);
}
.footer::after {
bottom: -200px; right: -160px; width: 520px; height: 520px;
background: radial-gradient(circle, rgba(219,189,124,0.075), transparent 68%);
}
/* filet dore degrade : ouvre le footer sur une note chaude */
.footer > .f-rule {
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(251,242,168,0.45) 22%, rgba(219,189,124,0.55) 50%, rgba(251,242,168,0.45) 78%, transparent);
}
.footer .wrap { position: relative; }
/* --- etage 1 : logo + 3 colonnes de liens sur une seule rangee --- */
.f-top {
display: grid;
/* Cinq blocs : la marque, trois colonnes de liens, les coordonnees.
Les colonnes de liens sont courtes, on leur donne moins de place
qu'aux deux qui portent du contenu. L'ecart passe de 60 a 40 px :
au-dela, les colonnes de droite flottaient loin du logo. */
grid-template-columns: minmax(185px, 0.9fr) repeat(3, minmax(0, 0.76fr)) minmax(165px, 0.86fr);
gap: clamp(24px, 2.4vw, 40px);
align-items: start;
padding-bottom: clamp(24px, 2.6vw, 32px);
border-bottom: 1px solid rgba(237, 231, 218, 0.1);
}
.f-logo {
display: block;
width: auto;
/* le logo occupait a lui seul la hauteur de trois colonnes de liens */
height: clamp(70px, 6vw, 92px);
filter: drop-shadow(0 0 34px rgba(251, 242, 168, 0.13));
}
/* pastille vivante : point dore qui respire */
.f-open {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 18px;
padding: 7px 15px;
border: 1px solid rgba(251, 242, 168, 0.24);
border-radius: 999px;
background: rgba(251, 242, 168, 0.05);
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(251, 242, 168, 0.85);
white-space: nowrap;
}
.f-open i {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--or);
box-shadow: 0 0 0 0 rgba(251, 242, 168, 0.6);
animation: fPouls 2.6s ease-out infinite;
}
@keyframes fPouls {
0% { box-shadow: 0 0 0 0 rgba(251,242,168,0.55); }
70% { box-shadow: 0 0 0 9px rgba(251,242,168,0); }
100% { box-shadow: 0 0 0 0 rgba(251,242,168,0); }
}
@media (prefers-reduced-motion: reduce) { .f-open i { animation: none; } }
/* --- Coordonnees du pied de page ---------------------------------
Le numero est l'action de conversion du site : il passe devant
l'adresse, en or, a la taille d'un vrai element cliquable et non
d'une ligne de texte. L'adresse suit en gris, l'itineraire ferme
le bloc en lien discret. */
/* Petites icones devant le numero et l'itineraire. Dessinees en CSS
plutot qu'en SVG : deux formes simples, aucune requete, et elles
suivent la couleur du lien. Elles sont decoratives, le libelle
porte deja le sens. */
.f-contact__tel::before,
.f-contact__go::before {
content: "";
display: inline-block;
vertical-align: -1px;
margin-right: 9px;
width: 11px; height: 11px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: center; mask-position: center;
}
/* combine */
.f-contact__tel::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
/* epingle de carte */
.f-contact__go::before {
width: 10px; height: 10px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
/* l'adresse s'aligne sur le texte des deux liens, pas sur leur icone */
.f-contact__adr { padding-left: 20px; }
.f-contact {
display: block;
margin-top: 0; /* elle a sa propre colonne, avec son titre */
font-style: normal; /* est en italique par defaut */
}
.f-contact__tel {
display: inline-block;
font-family: var(--mono);
font-size: 1.05rem;
letter-spacing: 0.04em;
color: var(--or);
padding: 2px 0;
border-bottom: 1px solid rgba(251, 242, 168, 0.28);
transition: color 0.2s ease, border-color 0.2s ease;
}
.f-contact__tel:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.f-contact__adr {
display: block;
margin-top: 12px;
font-size: 0.85rem;
line-height: 1.65;
color: rgba(237, 231, 218, 0.62);
}
.f-contact__go {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-sombre);
transition: color 0.2s ease, gap 0.28s var(--ease-out);
}
.f-contact__go:hover { color: var(--or); gap: 12px; }
.f-col h3 {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--or);
margin-bottom: 18px;
}
.f-col ul { list-style: none; }
.f-col li { margin-bottom: 12px; }
/* le lien glisse legerement et gagne un tiret dore */
.f-col a {
display: inline-block;
position: relative;
font-size: 0.9rem;
line-height: 1.5;
transition: color 0.22s ease, transform 0.32s var(--ease-out);
}
.f-col a::before {
content: "";
position: absolute;
left: -16px; top: 50%;
width: 8px; height: 1px;
background: var(--or);
opacity: 0;
transition: opacity 0.24s ease;
}
.f-col a:hover { color: var(--papier); transform: translateX(6px); }
.f-col a:hover::before { opacity: 1; }
/* --- etage 3 : la semaine en bandeau --- */
.f-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
margin: clamp(18px, 2.2vw, 26px) 0 0;
background: rgba(251, 242, 168, 0.09);
border: 1px solid rgba(251, 242, 168, 0.12);
border-radius: 16px;
overflow: hidden;
}
.f-day {
background: rgba(255, 255, 255, 0.012);
padding: 12px 10px 13px;
text-align: center;
transition: background-color 0.25s ease;
}
.f-day:hover { background: rgba(251, 242, 168, 0.075); }
.f-day dt {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(237, 231, 218, 0.4);
margin-bottom: 9px;
}
.f-day dd {
font-family: var(--mono);
font-size: 0.72rem;
color: rgba(237, 231, 218, 0.82);
font-variant-numeric: tabular-nums;
}
.f-day small {
display: block;
margin-top: 7px;
font-size: 0.56rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(219, 189, 124, 0.62);
}
.f-day--off dd { color: rgba(237, 231, 218, 0.28); }
.f-day--off small { color: rgba(237, 231, 218, 0.22); }
/* jour courant : marque discretement, pas de bloc criard */
.f-day--now {
background: linear-gradient(180deg, rgba(251,242,168,0.16), rgba(251,242,168,0.04));
box-shadow: inset 0 2px 0 var(--or), 0 0 26px rgba(251,242,168,0.1);
}
.f-day--now dt { color: var(--or); }
.f-day--now dd { color: var(--papier); }
@media (max-width: 820px) {
.f-week { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
.f-day { text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.f-day dt { margin-bottom: 0; min-width: 78px; }
.f-day small { margin-top: 0; width: 100%; }
}
.f-legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px 28px;
padding: 18px 0 clamp(80px, 8vw, 92px);
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
/* 0.32 donnait 2,9:1 : sous le minimum AA de 4,5:1 pour ce corps.
0.55 passe la barre sans sortir du registre discret voulu. */
color: rgba(237, 231, 218, 0.55);
}
.f-legal nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.f-legal a:hover { color: rgba(237, 231, 218, 0.75); }
@media (max-width: 1060px) {
/* Cinq colonnes cassaient « Journée 100 % Masculin » en trois lignes.
On passe en colonnes CSS : trois piles qui se remplissent en
continu, sans les rangees vides d'une grille dont les blocs
n'ont pas la meme hauteur. */
.f-top {
display: block;
column-count: 3;
column-gap: 30px;
}
.f-top > * { break-inside: avoid; margin: 0 0 26px; }
.f-top > *:last-child { margin-bottom: 0; }
}
@media (max-width: 860px) {
.f-top { column-count: 2; }
}
@media (max-width: 620px) {
.f-top { grid-template-columns: 1fr 1fr; }
.f-legal { padding-bottom: clamp(104px, 24vw, 140px); }
}
/* --- Révélation au défilement --- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
@media (max-width: 900px) {
.stats { grid-template-columns: repeat(2, 1fr); }
.days, .equip, .access { grid-template-columns: 1fr; gap: 26px; }
.equip { gap: 40px; }
}
/* Accessibilité : respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
}
/* ==================================================================
PASSE MOBILE : 29/07/2026
Bloc additif placé en dernier : il ne modifie aucune règle
existante, il les surcharge uniquement sous 768px. Rien ici ne
s'applique au-delà de cette largeur, le desktop est inchangé.
Trois chantiers : (1) rendre le 2e plan du hero perceptible,
(2) remonter le plancher typographique, (3) élargir les zones
tactiles au seuil des 44px.
================================================================== */
@media (max-width: 768px) {
/* ---- 1. HERO : LES DEUX JOURNÉES EMPILÉES ------------------
Le défilement horizontal cachait la Journée 100% Masculin hors
écran : la moitié de l'offre n'existait pas pour un visiteur
mobile. On passe à deux demi-écrans superposés : les deux
entrées sont lues d'un coup, sans geste à découvrir.
Verrouillé sur (pointer: coarse), doigt ou stylet uniquement.
Sans ce garde-fou la bascule s'appliquerait aussi à un
navigateur de bureau dont la fenêtre CSS descend sous 768px,
ce qui arrive dès qu'on zoome à 150-200% ou qu'on réduit la
fenêtre. Une souris atteint le second plan sans difficulté :
le desktop garde donc son rendu d'origine à toute largeur. */
@media (pointer: coarse) {
.split-hero {
flex-direction: column;
/* svh et pas dvh : c'est la hauteur la plus petite que puisse
prendre la fenêtre, barres du navigateur déployées. Les deux
moitiés restent donc entières même quand Safari affiche sa
barre d'adresse. */
height: 100svh;
/* plus rien à faire défiler latéralement */
overflow: hidden;
scroll-snap-type: none;
}
.side {
flex: 1 1 50% !important;
width: 100%;
height: 50%;
min-height: 0;
scroll-snap-align: none;
padding: 14px 22px 18px;
}
/* Chaque bloc de texte se cale en bas de SA moitié. Le
rembourrage haut de 110px du desktop servait à éloigner le
texte du haut d'un panneau pleine hauteur : dans une demi-
hauteur il ne fait que pousser le texte hors cadre. */
.side__content { padding-top: 0; gap: 5px; }
/* Le texte est resserré pour laisser voir les personnages. Le
du titre est conservé : le HTML écrit « Journée
Mixte »
sans espace autour, le neutraliser collait les deux mots en
« JOURNÉEMIXTE ». */
.side__title { font-size: 1.3rem; line-height: 1.12; }
.side__sub { letter-spacing: 0.05em; margin-top: 2px; }
.side__cta { margin-top: 12px; padding: 11px 18px; }
/* Les visuels sont détourés : on les réduit pour que la
silhouette respire au-dessus du texte au lieu d'être coupée
par lui. */
.side__photo { background-size: auto 74%; }
/* La couture redevient horizontale, sur toute la largeur.
Le trait était déjà prévu ainsi dans la feuille (masque
tourné de 90°) mais neutralisé par un display:none hérité de
la version à défilement. On retire le masque : il ménageait
une trouée pour le monogramme, qui n'a plus sa place ici : il tomberait pile sur le bouton de la première journée. */
.divider {
display: block;
-webkit-mask-image: none;
mask-image: none;
}
.divider::after { display: none; } /* reflet calibré pour un trait vertical */
/* plus de plans à parcourir : les repères n'ont plus d'objet */
.hero-dots { display: none; }
}
/* Repères de défilement : ne subsistent que là où le hero reste
en plans horizontaux (fenêtre de bureau étroite ou zoomée).
Épaissis et rendus cliquables : un trait de 2px inerte ne
servait à rien. */
.hero-dots {
bottom: 26px;
gap: 10px;
pointer-events: auto;
}
.hero-dots i {
width: 30px;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.42);
cursor: pointer;
/* la cible réelle fait 44x44, le trait n'en est que la partie
visible : on tape sans viser. */
padding: 14px 0;
background-clip: content-box;
}
.hero-dots i.on { background: var(--or); background-clip: content-box; }
/* ---- 2. PLANCHER TYPOGRAPHIQUE -----------------------------
Repère tenu : 12px minimum pour le décoratif, 12,5-13px dès
que le texte porte une information (jour, horaire, action). */
/* accroche du hero : 8px, c'était le pire cas du site */
.kicker {
font-size: 0.72rem;
letter-spacing: 0.09em;
line-height: 1.55;
padding: 0 22px;
}
/* hero */
.side__badge { font-size: 0.72rem; padding: 5px 12px; }
.side__sub { font-size: 0.75rem; letter-spacing: 0.13em; }
.side__cta { font-size: 0.78rem; padding: 13px 22px; }
/* Dock flottant : seul endroit du site où le plancher des 12px
n'est pas tenable : la pastille doit loger « 100% Masculin ·
13h, 20h » ET le numéro sur 390px de large. Grossir le texte
le faisait tronquer en « 13… », ce qui coûte l'horaire de
fermeture. On garde donc le corps d'origine pour l'état, et
on ne grossit que le numéro, la seule partie cliquable. */
.dock__tel { font-size: 0.74rem; padding: 12px 15px; }
/* menu plein écran */
.menu-side__eyebrow { font-size: 0.75rem; }
.menu-today__d { font-size: 0.75rem; }
/* corps de page */
.sec-head__i { font-size: 0.8rem; }
.stat__l { font-size: 0.75rem; }
.day__sub { font-size: 0.78rem; }
.day__cta { font-size: 0.8rem; }
.gal__t { font-size: 0.82rem; }
.btn-ghost { font-size: 0.8rem; }
.acc__h { font-size: 0.8rem; }
.map__pin { font-size: 0.78rem; }
/* pied de page */
.f-open { font-size: 0.75rem; }
.f-col h3 { font-size: 0.75rem; }
.f-day dt { font-size: 0.72rem; }
.f-day dd { font-size: 0.82rem; }
.f-day small { font-size: 0.68rem; }
.f-legal { font-size: 0.75rem; }
/* ---- 3. ZONES TACTILES -------------------------------------
Cible de 44px, obtenue par le rembourrage plutôt qu'en
grossissant les éléments : l'aspect ne bouge pas. */
.header__burger { width: 44px; height: 44px; }
.header__logo { padding: 14px 0; }
.promo__dot { min-height: 44px; }
.f-col li { margin-bottom: 2px; }
.f-col a { padding: 10px 0; }
.f-legal nav { gap: 2px 22px; }
.f-legal a { padding: 11px 0; }
/* le téléphone est l'action de conversion du site : elle ne peut
pas rester la plus petite cible de la page */
.acc__tel { padding: 9px 0; }
.btn-ghost { padding-top: 14px; padding-bottom: 14px; }
/* ---- LA ZONE 701-768px -------------------------------------
L'empilement .stick est désactivé sous 700px, mais le hero
bascule en mode mobile sous 768px : entre les deux seuils on
cumulait une mise en page mobile et un empilement calibré pour
le desktop. Conséquence mesurée sur iPad Mini portrait : les
flèches du carrousel des soirées sont recouvertes par la
section suivante figée par-dessus, donc inatteignables au
doigt. On aligne le seuil de l'empilement sur celui du hero. */
.stick { position: relative; top: auto; border-radius: 20px 20px 0 0; }
/* ---- 2e passe : ce que la première n'avait pas attrapé -----
Le « DÉFILER ↓ » : l'auteur le masque bien en mobile (règle
plus haut dans la feuille), mais la déclaration de base
.scroll-hint { display: flex } est écrite APRÈS ce média et
reprend la main. Il restait donc affiché, chevron vers le bas,
en concurrence avec le geste horizontal qu'on veut suggérer. */
.scroll-hint { display: none; }
/* typo : sélecteurs plus spécifiques que ceux visés au 1er tour */
.kicker { font-size: 0.75rem; }
.side__badge { font-size: 0.75rem; }
.promo__eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; }
.tags span { font-size: 0.78rem; }
.card-contact dt { font-size: 0.75rem; }
.section--dark a.btn-ghost--fort { font-size: 0.8rem; }
.acc__go .btn-ghost { font-size: 0.78rem; padding: 15px 18px; }
.menu-side__legal { font-size: 0.75rem; }
.f-day dt { font-size: 0.75rem; }
.f-day small { font-size: 0.75rem; }
/* cibles tactiles : les deux séries de repères sont en
content-box : c'est le rembourrage qui fait la cible, la
barrette visible ne bouge pas d'un pixel. */
.hero-dots i { box-sizing: content-box; padding: 21px 7px; }
.promo__dot { min-height: 0; padding: 21px 9px; }
.promo__nav { width: 44px; height: 44px; }
.menu-side__tel { display: inline-block; padding: 11px 0 9px; }
.menu-side__legal a { display: inline-block; padding: 15px 0; }
.f-col a { padding: 11px 0; }
.f-legal a { padding: 14px 0; }
.header__logo { padding: 16px 0; }
.dock__tel { padding: 14px 18px; }
/* ---- 4. RESPIRATION VERTICALE ------------------------------
Le texte ayant grossi, la page s'allongeait encore. On reprend
la hauteur sur les blancs plutôt que sur la lisibilité : les
écarts desktop sont calibrés pour une fenêtre large, ils sont
surdimensionnés dans une colonne de 390px. */
.section { padding: 52px 0; }
.section--band { padding: 40px 0; }
.stats { margin-top: 36px; }
.stat { padding: 20px 14px; }
.tags { margin-top: 24px; }
.sec-head { gap: 16px; }
.intro-grid { gap: 30px; }
.days { gap: 20px; }
.equip { gap: 30px; }
.footer { padding-top: 34px; }
.f-top { gap: 26px 22px; padding-bottom: 22px; }
}
/* Très petits écrans : on récupère de la place pour l'état du jour
en resserrant la pastille, pas en réduisant le texte. */
@media (max-width: 620px) {
.dock { padding-left: 12px; }
/* interlettrage resserré : c'est ce qui permet à « 13h, 20h »
de tenir entier jusqu'à 360px au lieu d'être coupé */
.dock__t { margin: 0 6px 0 5px; letter-spacing: 0.03em; }
.dock__tel { padding-left: 13px; padding-right: 13px; }
}
/* ── HERO MOBILE : ZONE HEADER + DEUX PANNEAUX ÉGAUX ──────────
Structure : [logo + kicker 1 ligne] / [Mixte 50%] / [Masculin 50%]
Desktop inchangé. */
@media (max-width: 768px) {
/* Logo agrandi */
.header__logo img { height: 18px !important; }
/* Kicker sur une seule ligne */
.kicker {
font-size: 0.58rem !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
}
/* Le hero réserve 95px en haut pour le header + kicker,
le reste (100svh - 95px) est divisé en deux panneaux égaux */
.split-hero {
flex-direction: column !important;
height: 100svh !important;
padding-top: 95px !important;
overflow: hidden !important;
scroll-snap-type: none !important;
}
.side {
flex: 1 1 0 !important;
width: 100% !important;
min-height: 0 !important;
scroll-snap-align: none !important;
padding: 10px 22px 12px !important;
align-items: flex-end !important;
}
.side__content { padding-top: 0 !important; gap: 3px !important; }
.side__title { font-size: 1.2rem !important; line-height: 1.1 !important; }
.side__sub { margin-top: 2px !important; letter-spacing: 0.05em !important; font-size: 0.62rem !important; }
.side__cta { opacity: 1 !important; transform: none !important; margin-top: 8px !important; padding: 9px 16px !important; font-size: 0.62rem !important; }
/* Image ancrée en bas : taille spécifique par panneau */
.side__photo {
background-position: center bottom !important;
}
/* Le couple mixte est légèrement agrandi pour équilibrer visuellement */
.side--mixte .side__photo { background-size: auto 96% !important; }
.side--masculin .side__photo { background-size: auto 90% !important; }
/* Divider masqué, gap nul entre les deux panneaux */
.split-hero { gap: 0 !important; }
.divider { display: none !important; }
.divider__lp { display: none !important; }
.hero-dots { display: none !important; }
.scroll-hint { display: none !important; }
/* ---- Header toujours opaque sur mobile ---------------------- */
.header__bar {
background: rgba(13, 61, 38, 0.94) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
/* ---- Menu burger centré ------------------------------------- */
.menu-nav { align-items: center; }
.menu-nav a { justify-content: center; padding: 16px 24px; }
.menu-nav__num { display: none; }
.menu-nav a::after { left: 50%; transform: translateX(-50%); }
.menu-side {
align-items: center !important;
display: flex !important;
flex-direction: column !important;
text-align: center !important;
}
/* ---- Footer mobile ------------------------------------------ */
/* f-top : cinq blocs de hauteurs tres inegales (le logo fait 111 px,
les coordonnees 190). Une grille alignerait les rangees et
creerait du vide sous les blocs courts ; les colonnes CSS, elles,
remplissent en continu et equilibrent d'elles-memes les deux
piles. C'est 200 px de moins sur un telephone. */
.f-top {
display: block !important;
column-count: 2;
column-gap: 20px;
}
.f-top > * {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 22px;
}
.f-top > *:last-child { margin-bottom: 0; }
/* Les coordonnees passent en pleine largeur sous les deux piles :
c'est le bloc le plus haut, il desequilibrait les colonnes et
laissait 250 px de vide a droite. En pleine largeur, le numero
et l'adresse se posent cote a cote et se lisent mieux. */
.f-col--ou {
column-span: all;
margin-top: 0 !important;
border-top: 1px solid rgba(237, 231, 218, 0.1);
padding-top: 12px;
}
.f-col--ou .f-contact {
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 22px;
margin-top: 10px !important;
}
.f-col--ou .f-contact__adr { margin-top: 0 !important; flex: 1 1 150px; }
.f-col--ou .f-contact__go { margin-top: 0 !important; }
/* le logo prenait a lui seul pres de 120 px de haut : il est
reduit, il identifie, il n'a pas a occuper un tiers de l'ecran */
.f-logo { height: auto !important; width: 68% !important; max-width: 132px !important; }
.f-open { font-size: 0.55rem !important; padding: 5px 10px !important; gap: 6px !important; margin-top: 10px !important; }
/* coordonnees resserrees, le numero garde sa taille : c'est lui
qu'on vient chercher dans un pied de page */
.f-contact { margin-top: 14px !important; }
.f-contact__tel { font-size: 1rem !important; }
.f-contact__adr { margin-top: 7px !important; font-size: 0.8rem !important; line-height: 1.45 !important; }
.f-contact__go { margin-top: 8px !important; }
/* colonnes de liens : moins d'ecart entre les entrees, la cible
tactile restant assuree par le padding du lien lui-meme */
.f-col h3 { margin-bottom: 8px !important; }
.f-col li { margin-bottom: 0 !important; }
/* 13 px de padding, pas 10 : avec une ligne de 19 px, c'est ce qui
amene la cible tactile a 45 px. La charte impose 44 px minimum,
et c'est le seul endroit du pied de page ou l'on ne rogne pas. */
.f-col a { padding: 13px 0 !important; line-height: 1.3 !important; }
/* f-week : sept lignes, pas quatre rangees de cartes. Le jour a
gauche, l'horaire a droite, la clientele entre les deux en petit.
On lit une colonne d'un coup d'oeil, la hauteur est divisee par
deux, et le dimanche n'a plus besoin d'un cas particulier. */
.f-week {
grid-template-columns: 1fr !important;
gap: 0 !important;
border-radius: 12px !important;
margin-top: 18px !important;
}
.f-day {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: baseline !important;
text-align: left !important;
gap: 0 12px !important;
padding: 9px 14px !important;
border-bottom: 1px solid rgba(251, 242, 168, 0.07) !important;
}
.f-day:last-child { border-bottom: 0 !important; }
.f-day dt { margin-bottom: 0 !important; min-width: 72px !important; }
.f-day dd { justify-self: end !important; margin: 0 !important; order: 3; }
.f-day small { margin-top: 0 !important; width: auto !important; order: 2; text-align: left !important; }
.f-day[data-jour="0"] { grid-column: auto !important; }
/* f-legal : centré */
.f-legal {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 10px !important;
}
}
/* ==================================================================
COMPOSANTS DES PAGES INTERIEURES
Ecrits ici et non dans une page : le brief prevoit sept pages
interieures baties sur le meme vocabulaire. Une page qui recopierait
ces regles chez elle recreerait exactement la derive qu'on vient de
corriger.
================================================================== */
/* --- Texte reserve aux lecteurs d'ecran et aux robots -------------
Le nom et la date d'une soiree sont deja peints dans l'affiche : les
repeter par-dessus la recouvrirait. Mais une image ne se lit ni par un
lecteur d'ecran, ni par un robot d'indexation. Cette classe met le
texte hors de vue sans le retirer du document, contrairement a
`display: none` qui l'effacerait pour tout le monde. */
.visuellement-cache {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Ancres : ne pas passer sous la barre flottante -------------- */
[id] { scroll-margin-top: calc(var(--header-top) + var(--header-h) + 18px); }
/* --- HERO DE PAGE INTERIEURE ------------------------------------
Prolonge chromatiquement le hero de l'accueil : meme vert, meme
halo. Pas de monogramme LP (reserve a l'accueil), pas d'indicateur
de defilement (le geste est acquis une fois passe l'accueil). */
.page-hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: 420px;
height: 55svh;
padding: calc(var(--header-top) + var(--header-h) + clamp(38px, 5vw, 64px)) 0 clamp(38px, 5vw, 62px);
background: var(--vert-fonce);
color: var(--papier);
overflow: hidden;
}
/* halo repris du hero d'accueil */
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: radial-gradient(ellipse 60% 52% at 50% 44%,
rgba(46, 146, 95, 0.42) 0%,
rgba(46, 146, 95, 0) 70%);
}
/* Voile pose sur la photo de fond quand il y en a une. On garde le
voile meme sans photo : il assombrit legerement le bas et assied le
texte. */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(4,18,10,0.35), rgba(4,18,10,0.78));
}
/* Photo de fond optionnelle :
Le voile est diagonal : opaque du cote du texte, presque transparent de
l'autre. C'est ce qui permet de garder le vert de la charte tout en
laissant la photo exister : un voile uniforme donnerait soit un texte
illisible, soit une photo eteinte. */
.page-hero--photo {
background-image:
linear-gradient(105deg,
rgba(4, 18, 10, 0.94) 0%,
rgba(4, 18, 10, 0.72) 42%,
rgba(4, 18, 10, 0.30) 100%),
var(--bg);
background-size: cover;
background-position: 62% center;
min-height: 520px;
height: 62svh;
}
.page-hero--photo::before { opacity: 0.5; } /* le halo s'efface devant la photo */
.page-hero--photo::after {
background: linear-gradient(180deg, rgba(4, 18, 10, 0.20), rgba(4, 18, 10, 0.55));
}
/* Le texte tient dans la partie sombre, la photo reste lisible a droite.
72 % et non 58 % : a 58 % la colonne etait trop etroite pour « L'etablissement »
(15 signes insecables), et l'ajusteur rabaissait le H1 sous la taille des H2. */
.page-hero--photo .wrap > * { max-width: 72%; }
@media (max-width: 860px) {
.page-hero--photo {
/* image legere : sur telephone la version 1448 px ne sert a rien */
background-image:
linear-gradient(105deg,
rgba(4, 18, 10, 0.94) 0%,
rgba(4, 18, 10, 0.72) 42%,
rgba(4, 18, 10, 0.30) 100%),
var(--bg-s, var(--bg));
background-position: 70% center;
min-height: 440px;
}
/* en colonne etroite le texte passe devant la photo : on rassombrit */
.page-hero--photo::after {
background: linear-gradient(180deg, rgba(4, 18, 10, 0.42), rgba(4, 18, 10, 0.86));
}
.page-hero--photo .wrap > * { max-width: none; }
}
.page-hero .t { --t-color: var(--or); --t-accent: var(--or-sombre); --t-flash: #FFFFFF; color: var(--or); }
.page-hero .t__rule { background: var(--or-sombre); }
/* Le chapo du hero n'a plus de plafond propre : il court sur toute la
laize du `.wrap`, comme demande. Il etait plafonne a 46ch, soit une
colonne etroite au milieu d'un hero large, puis a 88ch : dans les deux
cas les phrases se cassaient tot, ce qui se lisait comme un texte
tronque plutot que comme un chapo.
A retenir si la question revient : la laize utile plafonne autour de
108 caracteres sur grand ecran (`.wrap` est limite a 1140 px). Un chapo
plus long que cela fera deux lignes quoi qu'on fasse, et c'est alors le
texte qu'il faut raccourcir, pas le CSS qu'il faut changer. */
.page-hero .lede { color: rgba(237,231,218,0.78); max-width: none; }
/* Fil d'Ariane */
.fil {
display: flex;
align-items: center;
gap: 9px;
margin: -15px 0 clamp(4px, 1vw, 12px); /* compense le rembourrage des liens */
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(219, 189, 124, 0.7);
}
.fil a {
color: inherit;
/* cible tactile : le rembourrage vertical, pas la taille du texte */
padding: 15px 0;
transition: color 0.2s ease;
}
.fil a:hover { color: var(--or); }
.fil span[aria-current] { color: rgba(237, 231, 218, 0.55); }
/* --- PLAN : mosaique d'espaces ----------------------------------
Le gap d'1px sur un fond colore donne des filets nets plutot que des
cartes detachees : la grille se lit comme un plan de batiment.
Aucune icone : le site n'en emploie nulle part. */
.plan {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1px;
margin-top: clamp(32px, 4vw, 52px);
background: rgba(19, 42, 30, 0.16);
border: 1px solid rgba(19, 42, 30, 0.16);
border-radius: 12px;
overflow: hidden;
}
.plan__it {
background: var(--ivoire-chaud);
padding: 22px 22px 24px;
transition: background-color 0.3s var(--ease-out);
}
.plan__it:hover { background: #F1EADC; }
.plan__h {
font-family: 'Cinzel', serif;
font-size: 1.02rem;
font-weight: 600;
color: var(--encre);
line-height: 1.25;
}
.plan__p {
margin-top: 7px;
font-size: 0.86rem;
line-height: 1.6;
color: var(--encre-douce);
}
/* Sur fond sombre le filet clair devient un or discret */
.section--dark .plan { background: rgba(219,189,124,0.14); border-color: rgba(219,189,124,0.14); }
.section--dark .plan__it { background: #10241A; }
.section--dark .plan__it:hover { background: #14301F; }
.section--dark .plan__h { color: var(--or-sombre); }
.section--dark .plan__p { color: rgba(237, 231, 218, 0.58); }
/* --- CARTE DU BAR ------------------------------------------------
Reprend le markup de .faq (details/summary) sous une classe propre.
La ligne de conduite pointillee est portee par un pseudo-element
intermediaire : c'est ce qui permet au libelle et au prix de garder
leur largeur naturelle pendant que le pointille absorbe le reste. */
.carte { margin-top: clamp(30px, 4vw, 46px); }
.carte details {
border-top: 1px solid rgba(19, 42, 30, 0.14);
}
.carte details:last-of-type { border-bottom: 1px solid rgba(19, 42, 30, 0.14); }
.carte summary {
display: flex;
align-items: center;
gap: 14px;
/* 44px de cible : le rembourrage, pas la taille du texte */
padding: 18px 34px 18px 0;
position: relative;
cursor: pointer;
list-style: none;
font-family: 'Cinzel', serif;
font-size: 1.05rem;
color: var(--encre);
}
.carte summary::-webkit-details-marker { display: none; }
.carte summary:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }
.carte__n {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
color: var(--brique);
}
/* le signe + bascule en − a l'ouverture */
.carte summary::after {
content: "";
position: absolute;
right: 4px; top: 50%;
width: 13px; height: 13px;
margin-top: -6px;
background:
linear-gradient(var(--encre-douce), var(--encre-douce)) center/13px 1px no-repeat,
linear-gradient(var(--encre-douce), var(--encre-douce)) center/1px 13px no-repeat;
transition: transform 0.3s var(--ease-out);
}
/* Ouvert, le « + » doit devenir un « - ». Le quart de tour fait pivoter les
deux barres : c'est donc la barre VERTICALE qu'il faut garder, elle finit
horizontale. En gardant l'horizontale on obtenait un trait vertical, donc
le meme signe qu'a l'etat ferme. */
.carte details[open] summary::after { transform: rotate(90deg); background-size: 0 0, 1px 13px; }
.carte__l { padding: 2px 0 24px; }
.carte__r {
display: flex;
align-items: baseline;
gap: 8px;
padding: 9px 0;
}
.carte__r + .carte__r { border-top: 1px solid rgba(19, 42, 30, 0.07); }
.carte__d { font-size: 0.95rem; color: var(--encre); }
.carte__d i { font-style: normal; color: var(--encre-douce); font-size: 0.86rem; }
/* la conduite pointillee : elle mange tout l'espace restant */
.carte__r::before {
content: "";
order: 1;
flex: 1 1 auto;
min-width: 18px;
align-self: flex-end;
margin-bottom: 5px;
border-bottom: 1px dotted rgba(19, 42, 30, 0.28);
}
.carte__p {
order: 2;
font-family: var(--mono);
font-size: 0.92rem;
font-variant-numeric: tabular-nums; /* sans ca les colonnes de prix ondulent */
color: var(--encre);
white-space: nowrap;
}
.carte__note {
margin-top: 12px;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--encre-douce);
}
.carte__legal {
margin-top: clamp(24px, 3vw, 34px);
padding-top: 18px;
border-top: 1px solid rgba(19, 42, 30, 0.14);
font-family: var(--mono);
font-size: 0.7rem;
line-height: 1.9;
letter-spacing: 0.03em;
color: var(--encre-douce);
}
/* --- GALERIE EN GRILLE ------------------------------------------
Meme vocabulaire que le rail .gal de l'accueil (coutume --img,
numero, legende) mais en grille : sur une page dediee, on veut voir
l'ensemble d'un coup plutot que faire defiler. */
.gal-filtres {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: clamp(26px, 3vw, 38px);
}
.gal-filtre {
min-height: 44px;
padding: 11px 20px;
border: 1px solid rgba(19, 42, 30, 0.22);
border-radius: 999px;
background: transparent;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--encre);
cursor: pointer;
transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.gal-filtre:hover { border-color: var(--encre); }
.gal-filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
.gal-filtre:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }
/* Meme charte que le reste du site : l'or distingue la Journee Mixte, le
creme le 100% Masculin (voir .day--mixte / .day--masculin). Le fond
vert fonce plutot que l'encre neutre fait ressortir cette couleur de
texte, exactement comme sur les autres pages ou elle se lit sur un
fond sombre. */
.gal-filtre[data-f="mixte"][aria-pressed="true"] {
background: var(--vert-fonce);
border-color: var(--vert-fonce);
color: var(--or);
}
.gal-filtre[data-f="masculin"][aria-pressed="true"] {
background: var(--vert-fonce);
border-color: var(--vert-fonce);
color: var(--creme);
}
.grid-gal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
margin-top: 18px;
}
/* Galerie du lieu. Les photos sont majoritairement en paysage : un cadre
4/3 en montre bien plus qu'un 3/4, qui en rognait un bon tiers. Quatre
colonnes sur grand ecran plutot que trois : trente-quatre vignettes en
trois colonnes font douze rangees, on ne voit jamais l'ensemble. */
.grid-gal--lieu { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-gal--lieu .grid-gal__it { aspect-ratio: 4 / 3; }
@media (pointer: coarse) and (max-width: 700px) {
/* Deux colonnes sur telephone, et un cadre plus carre : a 170 px de
large, un 4/3 devient une bande trop basse pour qu'on distingue la
piece. Le carre rend chaque vignette lisible d'un coup d'oeil. */
.grid-gal--lieu { grid-template-columns: repeat(2, 1fr); gap: 7px; }
.grid-gal--lieu .grid-gal__it { aspect-ratio: 1 / 1; }
.grid-gal--lieu .grid-gal__t { font-size: 0.68rem; }
}
.grid-gal__it {
position: relative;
aspect-ratio: 3 / 4;
margin: 0;
border-radius: 10px;
overflow: hidden;
background: var(--vert-encre) var(--img) center / cover no-repeat;
cursor: pointer;
transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
/* Vignette qui porte un vrai ![]()
plutot qu'un fond CSS : c'est ce qui
permet le srcset, donc une image de 640 px sur telephone la ou le fond
aurait impose la meme pour tout le monde. L'image remplit la vignette
comme le faisait `cover`. */
.grid-gal__it--img > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.grid-gal__it::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(4,18,10,0.82) 0%, rgba(4,18,10,0.1) 48%, transparent 100%);
}
.grid-gal__it:hover { transform: translateY(-3px); }
.grid-gal__it:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }
.grid-gal__it[hidden] { display: none; }
.grid-gal__t { position: absolute; z-index: 2; }
.grid-gal__t {
left: 15px; bottom: 14px; right: 15px;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--papier);
}
/* Galerie des soirees a theme (voir "Les soirees a theme" dans CLAUDE.md) :
le nom est deja incruste dans le visuel, une legende par-dessus ferait
doublon. Le fond assombri qui la rendait lisible disparait donc aussi,
mais seulement ici : la galerie photo de /le-prado/ (sans `data-anim`)
garde son ombrage et sa legende. Le numero de vignette disparait aussi :
les affiches portent deja leur date, un numero par-dessus la recouvrait. */
.grid-gal[data-anim] .grid-gal__it::after { content: none; }
.grid-gal[data-anim] .grid-gal__it {
/* 1000 x 1400 : le format reel des affiches deposees par le client.
Le ratio partage (3/4) etait legerement different et rognait le haut
et le bas de chaque visuel. Ici, le cadre epouse exactement la photo,
sans aucune couleur de fond derriere : l'affiche la recouvre en
entier, seul l'arrondi doit se voir, contre le fond de la section. */
aspect-ratio: 1000 / 1400;
/* Les affiches sont deposees en webp avec les quatre coins transparents
(coins arrondis deja decoupes dans le visuel). Le fond de secours
`--vert-encre`, pose par la regle partagee pour eviter un flash blanc
pendant le chargement d'une photo de /le-prado/, ressortait justement
a travers ces coins transparents : un losange fonce par-dessus le fond
clair de la section, la ou l'arrondi devait laisser voir ce fond. */
background-color: transparent;
}
/* Ni zoom ni soulevement au survol ici : l'effet de zoom du composant
partage grossit l'image dans son cadre et pousse la date, incrustee
pres du bord, hors du cadre visible. La galerie photo de /le-prado/
(sans `data-anim`) garde l'effet, elle n'a pas ce texte a preserver. */
.grid-gal[data-anim] .grid-gal__it:hover {
transform: none;
background-size: 100%;
}
/* --- LIGHTBOX ---------------------------------------------------- */
.lb {
position: fixed;
inset: 0;
/* au-dessus de tout : la barre du header est a 200 et le dock a 210.
A 200, ils restaient par-dessus la photo agrandie et la legende
passait derriere le dock. */
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 54px);
background: rgba(4, 18, 10, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lb[open], .lb.on { display: flex; }
.lb__img {
max-width: min(1100px, 100%);
/* Pas d'aspect-ratio impose. Un cadre bloque en 4/3 reduisait une
affiche verticale (1000x1400) a 192 px de large sur un telephone :
l'image s'inscrivait en `contain` dans la hauteur du CADRE, pas dans
celle de l'ecran. Le cadre prend maintenant la place disponible et
`contain` fait le reste, quelle que soit l'orientation. */
height: 100%;
max-height: 82vh;
width: 100%;
border-radius: 10px;
/* Fond transparent, pas `--vert-encre` : les affiches d'animations ont
leurs coins deja decoupes en alpha, et ce fond de secours y ressortait
comme un carre fonce derriere une photo censee etre detouree. Le voile
de la boite de dialogue (`.lb`, presque noir) est deja assez sombre
derriere pour qu'une photo de /le-prado/ (sans transparence) n'y voie
aucune difference. */
background: transparent var(--img) center / contain no-repeat;
}
.lb__t {
position: absolute;
left: 50%; bottom: clamp(18px, 4vw, 42px);
transform: translateX(-50%);
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.06em;
color: var(--papier);
text-align: center;
}
.lb__b {
position: absolute;
width: 52px; height: 52px;
display: grid;
place-items: center;
border: 1px solid rgba(237, 231, 218, 0.28);
border-radius: 999px;
background: rgba(4, 18, 10, 0.55);
color: var(--papier);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lb__b:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
.lb__b:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.lb__x { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); }
.lb__prev { left: clamp(10px, 2vw, 26px); top: 50%; margin-top: -26px; }
.lb__next { right: clamp(10px, 2vw, 26px); top: 50%; margin-top: -26px; }
/* --- CARTE JOURNEE RESSERREE ------------------------------------
Variante du composant .day : badge, titre, jours, lien. Les horaires
detaillés vivent sur l'accueil et sur les deux pages de journee : les
repeter ici ferait un troisieme endroit a tenir a jour. */
.day--slim { padding: clamp(24px, 3vw, 32px); }
.day--slim .day__title { margin-bottom: 4px; }
.day--slim .day__foot { margin-top: 20px; border-top: none; padding-top: 0; }
/* --- Bloc « venir » : coordonnees -------------------------------- */
.venir__co {
margin-top: clamp(26px, 3vw, 36px);
font-family: var(--mono);
font-size: 0.86rem;
line-height: 2;
letter-spacing: 0.03em;
color: rgba(237, 231, 218, 0.72);
}
.venir__tel {
display: inline-flex;
align-items: center;
min-height: 44px; /* cible tactile, obtenue par la hauteur de ligne */
font-size: 1.05rem;
color: var(--or);
border-bottom: 1px solid rgba(251, 242, 168, 0.35);
}
.venir__tel:hover { border-bottom-color: var(--or); }
/* La section « venir » est passee du vert au clair : les coordonnees
etaient restees en creme sur creme, et le telephone en or sur creme.
Elles suivent maintenant le fond qui les porte. */
.section--light .venir__co,
.section--tint .venir__co { color: var(--encre-douce); }
.section--light .venir__tel,
.section--tint .venir__tel {
color: var(--brique-lue);
border-bottom-color: rgba(162, 72, 26, 0.45);
}
.section--light .venir__tel:hover,
.section--tint .venir__tel:hover { border-bottom-color: var(--brique-lue); }
/* ---------------- Mobile des pages interieures -------------------
Lisibilite et cibles tactiles : jamais gate sur le pointeur, une
fenetre etroite de bureau gagne a en beneficier.
Bascules de structure : gatees sur (pointer: coarse). */
@media (max-width: 768px) {
.page-hero { height: auto; min-height: 0; padding-bottom: clamp(34px, 6vw, 48px); }
.fil { font-size: 0.75rem; letter-spacing: 0.1em; }
.plan { grid-template-columns: 1fr; }
.plan__it { padding: 18px 18px 20px; }
.carte summary { font-size: 1rem; padding-right: 30px; }
.carte__d { font-size: 0.92rem; }
.carte__p { font-size: 0.9rem; }
.carte__note, .carte__legal { font-size: 0.75rem; }
.gal-filtre { font-size: 0.75rem; }
.grid-gal { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grid-gal__t { font-size: 0.75rem; }
.lb__b { width: 46px; height: 46px; }
/* Sur un telephone, les fleches posees a gauche et a droite mangeaient
130 px de largeur, soit un tiers de l'ecran, au detriment de la photo.
Elles descendent dans une barre sous l'image, avec la legende entre
elles : l'affiche passe de 192 a 362 px de large. */
.lb { padding: 14px 14px 104px; }
.lb__img { max-height: none; }
.lb__prev, .lb__next { top: auto; bottom: 28px; margin-top: 0; }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }
.lb__t {
bottom: 44px;
max-width: calc(100% - 150px);
font-size: 0.78rem;
line-height: 1.4;
}
.venir__co { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
.grid-gal__it, .lb, .lb__img { transition: none !important; }
}
/* --- Photo d'accompagnement verticale ---------------------------- */
.intro-ph {
margin: 0;
aspect-ratio: 3 / 4; /* portrait par defaut */
border-radius: 12px;
background: var(--vert-encre) var(--img) center / cover no-repeat;
}
/* --- Titre du bandeau de fin de page ----------------------------- */
.cta-j__h {
font-family: 'Cinzel', serif;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--or);
margin-bottom: clamp(26px, 3vw, 38px);
}
.section--band .days { margin-top: 0; }
/* Corps de texte des colonnes de page interieure */
.intro-txt p + p { margin-top: 1.05em; }
/* Le chapo termine la tete de section : 18 px derriere lui, le premier
paragraphe du corps se collait a lui et les deux se lisaient comme un
seul bloc. */
.sec-head + .intro-txt { margin-top: clamp(24px, 3vw, 38px); }
@media (pointer: coarse) and (max-width: 768px) {
/* La photo passe AU-DESSUS du texte : posee dessous elle ne serait
jamais vue, alors que c'est elle qui donne envie de lire la suite.
Gate sur le pointeur par discipline : un reordonnancement reste une
bascule de structure. */
.intro-ph { order: -1; }
.intro-grid { display: flex; flex-direction: column; }
}
/* ==================================================================
TEXTE COURANT
.lede porte le chapo. Le corps de texte n'avait aucun style : un
paragraphe sans classe retombait sur 16px / line-height normal,
d'ou l'ecart visible entre le chapo et les paragraphes qui suivent.
================================================================== */
.corps { font-family: var(--lecture); }
.corps p,
p.corps {
font-size: var(--txt-corps);
line-height: var(--lh-corps);
color: inherit;
}
.corps p + p { margin-top: 1.05em; }
.corps strong { font-weight: 600; }
.section--dark .corps { color: rgba(237, 231, 218, 0.78); }
/* Interlignages qui manquaient sur les composants de page interieure */
.carte__d { line-height: var(--lh-corps); }
.carte__note{ line-height: var(--lh-petit); }
.plan__p { line-height: var(--lh-petit); }
@media (max-width: 768px) {
.corps p, p.corps { font-size: 1.05rem; line-height: 1.75; }
}
/* ==================================================================
MOUVEMENT : 2026
Regle unique : rien ne bouge sans raison, et tout s'arrete si le
visiteur a demande moins d'animations.
================================================================== */
/* --- 1. Apparition en cascade --------------------------------------
Les cartes arrivaient toutes ensemble : un bloc qui apparait d'un
coup ne se lit pas comme une apparition, il se lit comme un saut.
Le decalage se calcule sur --i, pose par le JS du socle. */
.stagger > * {
opacity: 0;
transform: translateY(20px);
}
.stagger.in > * {
opacity: 1;
transform: none;
transition:
opacity 0.65s var(--ease-out) calc(var(--i, 0) * 55ms),
transform 0.65s var(--ease-out) calc(var(--i, 0) * 55ms);
}
/* --- 2. Le filet des titres se trace -------------------------------- */
.t__rule {
display: block;
width: 0;
height: 1px;
margin-top: clamp(18px, 2vw, 26px);
background: var(--brique);
transition: width 0.9s var(--ease-out) 0.25s;
}
.t.in .t__rule { width: clamp(66px, 8vw, 118px); }
.section--dark .t__rule, .page-hero .t__rule { background: var(--or-sombre); }
/* --- 3. Fil conducteur ----------------------------------------------
Un trait vertical qui se remplit au fil du defilement, cale sur la
marge gauche. C'est le seul element qui bouge en continu : il donne
au reste de la page une raison d'etre lue jusqu'en bas. */
.fil-conducteur {
position: fixed;
left: max(18px, 2.4vw);
top: 22vh;
bottom: 22vh;
width: 1px;
z-index: 40;
background: rgba(19, 42, 30, 0.10);
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.fil-conducteur.on { opacity: 1; }
.fil-conducteur__b {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 0;
background: linear-gradient(180deg, var(--brique), var(--or-sombre));
transform-origin: top;
}
/* la perle qui descend avec */
.fil-conducteur__p {
position: absolute;
left: 50%;
width: 7px; height: 7px;
margin-left: -3.5px;
margin-top: -3.5px;
border-radius: 50%;
background: var(--brique);
box-shadow: 0 0 0 4px rgba(192, 90, 37, 0.16);
transition: box-shadow 0.3s ease;
}
/* sur fond sombre le fil passe a l'or */
.fil-conducteur.sombre { background: rgba(251, 242, 168, 0.12); }
.fil-conducteur.sombre .fil-conducteur__b { background: linear-gradient(180deg, var(--or-sombre), var(--or)); }
.fil-conducteur.sombre .fil-conducteur__p { background: var(--or); box-shadow: 0 0 0 4px rgba(251, 242, 168, 0.18); }
@media (max-width: 1100px) { .fil-conducteur { display: none; } }
/* --- 4. Parallaxe du hero -------------------------------------------
Tres legere : 12 % de course. Au-dela, l'effet se voit et fait daté. */
/* Le cadrage est pilotable par la page : une photo de batiment se cale au
centre, un portrait doit remonter sur les visages. Valeurs par defaut
inchangees, donc aucune page existante ne bouge. */
.page-hero--photo { background-position: var(--bg-x, 62%) calc(var(--bg-y, 50%) + var(--par, 0px)); }
/* Hero plus haut, pour une photo en portrait : au format paysage habituel
il ne resterait qu'une bande etroite au milieu de l'image. */
.page-hero--haut { min-height: 620px; height: 76svh; }
/* --- 5. Boutons : remplissage depuis la gauche ----------------------- */
.btn-ghost { position: relative; overflow: hidden; z-index: 0; }
.btn-ghost::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--brique);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease-out);
}
.btn-ghost:hover::before { transform: scaleX(1); }
.btn-ghost:hover { color: #FFFFFF; border-color: var(--brique); }
.section--dark .btn-ghost::before { background: var(--or); }
.section--dark .btn-ghost:hover { color: var(--nuit); border-color: var(--or); }
/* --- 6. Accordeons de la carte : ouverture glissee ------------------- */
.carte details[open] .carte__l { animation: deplie 0.42s var(--ease-out); }
@keyframes deplie {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
.carte summary { transition: color 0.25s ease, padding-left 0.3s var(--ease-out); }
.carte summary:hover { color: var(--brique); padding-left: 6px; }
/* --- 7. Vignettes de galerie : zoom contenu -------------------------- */
.grid-gal__it { background-size: 100%; transition: background-size 0.8s var(--ease-out), transform 0.4s var(--ease-out); }
.grid-gal__it:hover { background-size: 112%; }
/* --- 8. Touches de vert d'eau, en detail seulement ------------------- */
.sec-head__i::before {
content: "";
display: inline-block;
width: 16px; height: 1px;
margin-right: 10px;
vertical-align: middle;
background: var(--sauge);
}
@media (prefers-reduced-motion: reduce) {
.stagger > *, .stagger.in > * { opacity: 1; transform: none; transition: none; }
.t__rule { transition: none; }
.fil-conducteur { display: none; }
.page-hero--photo { background-position: 62% center; }
.btn-ghost::before { transition: none; }
.carte details[open] .carte__l { animation: none; }
.grid-gal__it { transition: none; }
}
/* ==================================================================
COMPOSANTS DE COMPOSITION : pages interieures
Le bento des chiffres, les cartes d'espace et la colonne collante.
Ecrits ici : ce sont eux qui donnent son rythme a une page interieure,
les six pages suivantes s'en serviront.
================================================================== */
/* P1 : CHIFFRES EN BENTO
5 chiffres dans une grille auto se cassaient en 4 + 1 orphelin.
Composition asymetrique : le 420 m² tient la vedette, les autres
s'organisent autour. */
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-top: clamp(28px, 3vw, 40px);
background: rgba(251, 242, 168, 0.14);
border: 1px solid rgba(251, 242, 168, 0.14);
border-radius: 16px;
overflow: hidden;
}
.bento__c {
position: relative;
background: linear-gradient(168deg, #123020 0%, #0B1C12 100%);
padding: clamp(22px, 2.6vw, 34px);
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 128px;
transition: background 0.4s var(--ease-out);
}
.bento__c:hover { background: linear-gradient(168deg, #163B27 0%, #0D2216 100%); }
.bento__c--x2 { grid-column: span 2; grid-row: span 2; }
.bento__c--x2 .bento__n { font-size: clamp(3.2rem, 6vw, 5rem); }
/* halo discret dans la grande case */
.bento__c--x2::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(46,146,95,0.34), transparent 70%);
pointer-events: none;
}
.bento__n {
position: relative;
font-family: 'Cinzel', serif;
font-size: clamp(1.7rem, 2.8vw, 2.5rem);
font-weight: 600;
line-height: 1;
color: var(--or);
font-variant-numeric: tabular-nums;
}
/* Une case qui porte une amorce se cale en HAUT et non en bas. Sans ca,
la case a trois lignes et sa voisine a deux lignes alignent leur bas, et
les deux chiffres se retrouvent decales d'une ligne. Calees en haut,
les amorces s'alignent, et les chiffres juste dessous aussi. */
.bento__c:has(.bento__h) { justify-content: flex-start; }
/* Les deux etiquettes d'une case, celle du dessus et celle du dessous,
partagent UNE SEULE declaration. Elles se lisent comme une phrase
continue autour du chiffre : la moindre difference de corps ou
d'interlettrage se voit immediatement, et c'est ce qui etait arrive en
reglant l'amorce seule pour la faire tenir sur une ligne. Toute retouche
de l'une doit rester dans ce bloc, donc valoir pour l'autre. */
.bento__h,
.bento__l {
position: relative;
font-family: var(--mono);
font-size: 0.72rem;
line-height: 1.5;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(237, 231, 218, 0.55);
}
/* L'amorce est au-dessus du chiffre, l'etiquette en dessous. */
.bento__h { margin-bottom: 9px; }
.bento__l { margin-top: 8px; }
@media (max-width: 760px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento__c--x2 { grid-column: span 2; grid-row: span 1; min-height: 150px; }
}
/* P2 : LES ESPACES EN CARTES NUMEROTEES
La mosaique .plan produisait un tableau : des cellules a filets,
tous les espaces au meme poids visuel. On passe a des cartes avec
un numero en filigrane, c'est le vocabulaire des cartes journee
de l'accueil, transpose. */
.esp {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
gap: 12px;
margin-top: clamp(32px, 4vw, 52px);
}
/* Variante deux colonnes. La grille automatique cale trois cartes par
rangee : avec dix regles, la dixieme se retrouvait seule sur sa ligne,
ce qui se lit comme un oubli. Deux colonnes donnent cinq rangees
pleines, et une colonne plus large pour des textes de reglement qui
sont plus longs que des libelles d'equipement. */
.esp--duo { grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .esp--duo { grid-template-columns: 1fr; } }
.esp__c {
position: relative;
overflow: hidden;
padding: 26px 24px 24px;
border-radius: 12px;
border: 1px solid rgba(19, 42, 30, 0.14);
background: linear-gradient(158deg, #FBF7EF 0%, #EFE7D8 100%);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease;
}
.esp__c:hover {
transform: translateY(-4px);
border-color: rgba(158, 75, 22, 0.4);
box-shadow: 0 18px 40px rgba(19, 42, 30, 0.13);
}
/* le numero en filigrane : c'est lui qui donne le rythme */
.esp__n {
position: absolute;
top: -14px; right: 4px;
font-family: 'Cinzel', serif;
font-size: 5.2rem;
font-weight: 600;
line-height: 1;
color: rgba(158, 75, 22, 0.10);
pointer-events: none;
transition: color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.esp__c:hover .esp__n { color: rgba(158, 75, 22, 0.20); transform: translateY(3px); }
.esp__h {
position: relative;
font-family: 'Cinzel', serif;
font-size: 1.06rem;
font-weight: 600;
color: var(--encre);
line-height: 1.25;
}
.esp__p {
position: relative;
margin-top: 8px;
font-size: 0.86rem;
line-height: 1.6;
color: var(--encre-douce);
}
/* un filet brique qui se deploie au survol */
.esp__c::after {
content: "";
position: absolute;
left: 24px; bottom: 18px;
width: 0; height: 1px;
background: var(--brique);
transition: width 0.45s var(--ease-out);
}
.esp__c:hover::after { width: 34px; }
/* variante sombre pour l'etage */
.section--dark .esp__c {
border-color: rgba(219, 189, 124, 0.16);
background: linear-gradient(158deg, #12291D 0%, #0A1A11 100%);
}
.section--dark .esp__c:hover { border-color: rgba(251, 242, 168, 0.42); box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
.section--dark .esp__n { color: rgba(251, 242, 168, 0.09); }
.section--dark .esp__c:hover .esp__n { color: rgba(251, 242, 168, 0.18); }
.section--dark .esp__h { color: var(--or-sombre); }
.section--dark .esp__p { color: rgba(237, 231, 218, 0.58); }
.section--dark .esp__c::after { background: var(--or); }
/* P3 : BANDEAU CINETIQUE entre deux sections
Le composant existe deja sur l'accueil : on le reemploie pour
casser la suite de blocs de texte. */
.ticker--m { background: var(--vert-fonce); }
/* ═══ B : TITRE COLLANT ════════════════════════════════════════
Sur les sections longues, la tete reste calee pendant que le
contenu defile. Casse la lecture en colonne unique, qui etait la
cause principale de la monotonie. */
.duo {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(30px, 4vw, 72px);
align-items: start;
}
.duo__t {
position: sticky;
top: calc(var(--header-top) + var(--header-h) + 28px);
}
.duo__t .sec-head { border-top: none; padding-top: 0; }
.duo__t .t {
/* var(--t-fit) obligatoire : sans elle cette regle, ecrite apres celle
de .t, ecrasait l'ajustement calcule par assets/js/socle.js et le
titre de la colonne collante restait tronque. */
/* meme taille que les autres H2 : c'est la coupure aux traits d'union
(assets/js/socle.js) qui permet au titre de tenir dans la colonne. */
font-size: var(--t-fit, clamp(1.9rem, 3.9vw, 3.5rem));
}
.duo__c > .esp,
.duo__c > .carte { margin-top: 0; }
/* sous 900px, ou sur tactile, on repasse en colonne : un titre
collant sur un ecran de telephone mange la moitie de la hauteur */
@media (max-width: 980px), (pointer: coarse) {
.duo { grid-template-columns: 1fr; gap: 22px; }
.duo__t { position: static; }
.duo__c > .esp, .duo__c > .carte { margin-top: 6px; }
}
/* Plancher typographique des composants de composition sur mobile */
@media (max-width: 768px) {
/* 0.72rem tombait a 11,5 px. La regle vaut pour les DEUX etiquettes :
les separer, c'est les faire diverger. */
.bento__h,
.bento__l { font-size: 0.76rem; }
/* A cette taille « deux niveaux sur » passe a la ligne alors que
« jusqu'a » tient sur une. On reserve deux lignes a toutes les amorces :
les chiffres restent alignes d'une case a l'autre. */
.bento__h { min-height: 3em; }
.esp__p { font-size: 0.88rem; }
.esp__h { font-size: 1rem; }
.esp__n { font-size: 4.2rem; }
/* en colonne unique sur mobile, le titre collant reprend la taille commune */
}
/* Segment insecable d'un mot compose : voir assets/js/socle.js */
.t__seg { display: inline-block; white-space: nowrap; }
/* Colonne texte + photo en format paysage.
Modificateur et non reglage global : .intro-grid sert aussi sur la page
d'accueil, ou la colonne de droite porte le carrousel des soirees en
format portrait. */
.intro-grid--ph {
/* la photo prend la part la plus large : le premier paragraphe etant
passe en pleine largeur, la colonne de texte a moins a porter */
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
align-items: center;
margin-top: clamp(22px, 2.4vw, 34px);
}
.intro-ph-w .intro-ph {
/* 3/2 au lieu de 3/4 : le batiment est tout en longueur, un cadre
portrait n'en montrait qu'une travee. */
aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
.intro-grid--ph { grid-template-columns: 1fr; }
.intro-ph-w .intro-ph { aspect-ratio: 16 / 10; }
}
/* En colonne, le conteneur passe en flex (regle mobile de .intro-grid) et
son align-items: center reduisait la figure a une largeur nulle : elle
n'a aucun contenu, donc rien pour la dimensionner. */
@media (max-width: 900px), (pointer: coarse) {
.intro-grid--ph { align-items: stretch; }
.intro-ph-w,
.intro-ph-w .intro-ph { width: 100%; }
}
/* ── La photo de l'etablissement, vivante ────────────────────────────
Deux mouvements tres lents, qui ne se remarquent pas a l'oeil mais
empechent l'image d'etre un aplat mort : une lueur chaude qui respire
derriere le cadre, et un cadrage qui derive de quelques pour cent. */
.intro-ph-w .intro-ph {
position: relative;
border-radius: 14px;
box-shadow: 0 22px 50px rgba(19, 42, 30, 0.16);
background-size: 104%;
background-position: 48% 50%;
animation: photo-derive 26s ease-in-out infinite alternate;
transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* La lueur vit sur le conteneur, pas sur la figure : la figure se souleve
au survol, et un element transforme devient un contexte d'empilement : le z-index:-1 s'y recalait et la lueur repassait PAR-DESSUS la photo.
Portee par un conteneur immobile, elle reste derriere en toute
circonstance : dans un contexte d'empilement, les enfants a z-index
negatif se peignent avant les enfants normaux. */
.intro-ph-w { position: relative; display: block; }
.intro-ph-w::before {
content: "";
position: absolute;
inset: -12% -9%;
z-index: -1;
border-radius: 30px;
background: radial-gradient(ellipse at 50% 55%,
rgba(192, 90, 37, 0.34) 0%,
rgba(192, 90, 37, 0) 68%);
filter: blur(24px);
animation: photo-lueur 9s ease-in-out infinite;
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
pointer-events: none;
}
/* Au survol : la photo se souleve, la lueur derriere s'ouvre. Rien,
jamais, ne se pose sur l'image : ni voile, ni teinte, ni liseré. */
.intro-ph-w:hover .intro-ph {
transform: translateY(-5px);
box-shadow: 0 32px 68px rgba(19, 42, 30, 0.24);
}
.intro-ph-w:hover::before {
animation: none;
opacity: 1;
transform: scale(1.16);
background: radial-gradient(ellipse at 50% 55%,
rgba(192, 90, 37, 0.50) 0%,
rgba(192, 90, 37, 0) 70%);
}
@keyframes photo-derive {
from { background-size: 104%; background-position: 46% 52%; }
to { background-size: 112%; background-position: 55% 46%; }
}
@keyframes photo-lueur {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.intro-ph-w .intro-ph { animation: none; background-size: cover; transition: none; }
.intro-ph-w::before { animation: none; opacity: 0.7; transition: none; }
}
/* ── Fond des panneaux collants ──────────────────────────────────────
Les sections .stick portent un arrondi de 26 px en haut. Cet arrondi
ne se voit que s'il decoupe sur une couleur differente : pose
directement sur le body blanc casse, un panneau clair decoupait du
blanc sur du blanc. L'accueil les enveloppe dans .stack ; les pages
interieures doivent faire pareil. */
.stack { position: relative; background: var(--vert-fonce); }
/* ── L'arrondi doit se voir sur TOUS les panneaux ────────────────────
Un panneau collant decoupe son arrondi sur le panneau precedent. Entre
deux fonds clairs voisins (blanc casse #FCFBF9 et gris chaud #F2EFE9),
l'ecart est trop faible pour que l'arc se lise. Un filet d'un pixel en
haut de chaque panneau dessine l'arrondi quoi qu'il y ait derriere.
Teinte selon le fond : sombre sur les panneaux clairs, or sur les
panneaux sombres. */
.stick { border-top: 1px solid rgba(19, 42, 30, 0.10); }
.section--dark.stick { border-top-color: rgba(251, 242, 168, 0.14); }
/* ── Photo dans la colonne collante (blocs 02 et 04) ─────────────────
La colonne est collante : tout ce qui depasse la fenetre devient
inatteignable, on ne peut pas defiler dedans. Une image dimensionnee
par un rapport d'aspect grandit avec la colonne et se faisait couper
par le bas sur un portable de 760 px de haut.
La colonne devient donc une boite flex plafonnee a la hauteur utile,
et la photo est le seul element autorise a se comprimer : le titre et
son chapo gardent leur place, la photo prend ce qui reste. */
@media (min-width: 981px) {
.duo__t {
display: flex;
flex-direction: column;
max-height: calc(100vh - var(--header-top) - var(--header-h) - 56px);
}
.duo__t > .sec-head { flex: 0 0 auto; }
.duo__ph {
flex: 0 1 min(34vh, 320px);
min-height: 128px; /* en dessous, l'image ne montre plus rien : mieux
vaut une bande fine qu'un aplat illisible */
}
.duo__ph img { height: 100%; }
/* La colonne de gauche est un flex vertical : sans cette ligne, un bouton
pose sous la photo s'etire sur toute sa largeur. Il se cale sur son
texte, comme partout ailleurs sur le site. */
.duo__t > .btn-ghost { align-self: start; }
}
.duo__ph {
position: relative;
isolation: isolate; /* garantit que la lueur reste DERRIERE l'image
sans dependre du contexte d'empilement du
panneau collant, qui n'en cree pas toujours un */
margin-top: clamp(22px, 2.6vw, 32px);
}
.duo__ph img {
display: block;
width: 100%;
/* Les attributs width/height du HTML sont poses pour reserver la place
avant chargement, mais ils comptent aussi comme une hauteur CSS. Sans
ce `auto`, l'image gardait 799 px de haut en colonne unique et se
faisait rogner par le cover. */
height: auto;
max-height: min(34vh, 320px);
object-fit: cover;
border-radius: 14px;
box-shadow: 0 20px 46px rgba(19, 42, 30, 0.16);
transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* meme lueur que la photo du bloc 01, meme regle : jamais sur l'image */
.duo__ph::before {
content: "";
position: absolute;
inset: -10% -7%;
z-index: -1;
border-radius: 26px;
background: radial-gradient(ellipse at 50% 55%,
rgba(192, 90, 37, 0.30) 0%,
rgba(192, 90, 37, 0) 68%);
filter: blur(22px);
animation: photo-lueur 9s ease-in-out infinite;
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
pointer-events: none;
}
.duo__ph:hover img {
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(19, 42, 30, 0.22);
}
.duo__ph:hover::before {
animation: none;
opacity: 1;
transform: scale(1.14);
background: radial-gradient(ellipse at 50% 55%,
rgba(192, 90, 37, 0.46) 0%,
rgba(192, 90, 37, 0) 70%);
}
/* Sur fond sombre la terracotta s'eteint : la lueur passe a l'or. */
.section--dark .duo__ph::before {
background: radial-gradient(ellipse at 50% 55%,
rgba(219, 189, 124, 0.26) 0%,
rgba(219, 189, 124, 0) 68%);
}
/* En colonne unique il n'y a plus de colonne collante a menager, donc plus
aucune raison de rogner : la photo reprend son cadrage d'origine. Le
plafond de 320 px recadrait la tasse, carree, en un bandeau de 1,9:1 qui
lui coupait la creme en haut et la soucoupe en bas. */
@media (max-width: 980px), (pointer: coarse) {
.duo__ph img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
.duo__ph::before { animation: none; opacity: 0.7; transition: none; }
.duo__ph img { transition: none; }
}
/* Le meme verrou pour la photo du bloc 01. */
.intro-ph-w { isolation: isolate; }
/* Cadre photo pose seul dans une colonne de texte, hors grille dediee.
Sur l'accueil il se glisse sous les deux paragraphes d'introduction,
en face de l'affiche des soirees, et equilibre les deux colonnes. */
.intro-txt > .intro-ph-w { margin-top: clamp(26px, 3vw, 38px); }
/* ── Vignette cliquable ──────────────────────────────────────────────
Toute vignette portant data-lb ouvre la visionneuse. Le curseur et le
contour de focus sont ici, le comportement dans assets/js/socle.js. */
[data-lb] { cursor: zoom-in; }
[data-lb]:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* ── Carte sur fond sombre ───────────────────────────────────────────
La carte a ete dessinee pour une section claire : encre sur ivoire,
filets vert fonce, conduite pointillee sombre. Posee telle quelle sur
un panneau sombre, elle disparaissait entierement, seules les mentions
en italique restaient lisibles. Les filets passent a l'or tres dilue,
le texte au papier, et le point d'accent du numero a l'or sombre. */
.section--dark .carte details,
.section--dark .carte details:last-of-type,
.section--dark .carte__legal { border-color: rgba(219, 189, 124, 0.20); }
.section--dark .carte summary { color: var(--or); }
.section--dark .carte summary:hover { color: #FFFFFF; }
.section--dark .carte summary:focus-visible { outline-color: var(--or); }
.section--dark .carte__n { color: var(--or-sombre); }
.section--dark .carte summary::after {
background:
linear-gradient(rgba(237,231,218,0.62), rgba(237,231,218,0.62)) center/13px 1px no-repeat,
linear-gradient(rgba(237,231,218,0.62), rgba(237,231,218,0.62)) center/1px 13px no-repeat;
}
.section--dark .carte details[open] summary::after { background-size: 0 0, 1px 13px; }
.section--dark .carte__r + .carte__r { border-top-color: rgba(219, 189, 124, 0.12); }
.section--dark .carte__d { color: var(--papier); }
.section--dark .carte__d i { color: rgba(237, 231, 218, 0.55); }
.section--dark .carte__r::before { border-bottom-color: rgba(219, 189, 124, 0.30); }
.section--dark .carte__p { color: var(--or); }
.section--dark .carte__note,
.section--dark .carte__legal { color: rgba(237, 231, 218, 0.52); }
/* Un lien dans le bloc de mentions doit se voir : sans soulignement il se
confond avec le texte, qui est deja en monospace gris. */
.carte__legal a {
color: inherit;
border-bottom: 1px solid rgba(19, 42, 30, 0.35);
transition: color 0.25s ease, border-color 0.25s ease;
}
.carte__legal a:hover { color: var(--brique-lue); border-bottom-color: var(--brique-lue); }
.section--dark .carte__legal a { border-bottom-color: rgba(219, 189, 124, 0.45); }
.section--dark .carte__legal a:hover { color: var(--or); border-bottom-color: var(--or); }
/* ── La semaine ──────────────────────────────────────────────────────
Quatre cartes isolees ne disaient pas l'essentiel : quand le sauna est
masculin ET quand il ne l'est pas. On montre donc les sept jours, les
jours concernes en pleine lumiere, les autres en retrait. La question
« est-ce que je peux venir demain » se lit en une seconde. */
.semaine { margin-top: clamp(26px, 3vw, 36px); }
.semaine__l {
display: flex;
align-items: baseline;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid rgba(19, 42, 30, 0.10);
}
.semaine__l:first-child { border-top: 1px solid rgba(19, 42, 30, 0.10); }
/* Le ou les jours concernes par la page consultee : un fond et un cadre les
detachent du reste de la liste, pour qu'on les repere sans avoir a lire
l'etiquette de droite. Le fond deborde legerement de la colonne de texte
(padding horizontal + marge negative egale) pour se lire comme un bandeau,
pas comme un simple soulignement. `:not()` cible ce qui n'est ni en
retrait (`--autre`) ni ferme (`--off`), donc ca marche a l'identique sur
la page masculine (jours masculins en evidence) et la page mixte (jours
mixtes en evidence) sans dupliquer la regle. */
.semaine__l:not(.semaine__l--autre):not(.semaine__l--off) {
padding: 14px 16px;
margin: 0 -16px;
border: 1px solid rgba(219, 189, 124, 0.55);
border-radius: 10px;
background: rgba(251, 242, 168, 0.28);
}
.semaine__j {
flex: 0 0 auto;
min-width: 104px;
font-family: var(--titre);
font-size: 1.02rem;
color: var(--encre);
}
.semaine__l::before {
content: "";
order: 1;
flex: 1 1 auto;
min-width: 16px;
align-self: flex-end;
margin-bottom: 6px;
border-bottom: 1px dotted rgba(19, 42, 30, 0.26);
}
.semaine__h {
order: 2;
font-family: var(--mono);
font-size: 0.94rem;
font-variant-numeric: tabular-nums;
color: var(--encre);
white-space: nowrap;
}
.semaine__t {
order: 3;
flex: 0 0 auto;
min-width: 92px;
text-align: right;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brique-lue);
}
/* jours ou le sauna n'est pas masculin : presents, mais en retrait */
.semaine__l--autre .semaine__j,
.semaine__l--autre .semaine__h { color: var(--encre-douce); }
.semaine__l--autre .semaine__t { color: var(--encre-douce); }
.semaine__l--off .semaine__j,
.semaine__l--off .semaine__h,
.semaine__l--off .semaine__t { color: rgba(92, 106, 98, 0.55); }
.section--dark .semaine__l,
.section--dark .semaine__l:first-child { border-color: rgba(219, 189, 124, 0.16); }
.section--dark .semaine__j,
.section--dark .semaine__h { color: var(--papier); }
.section--dark .semaine__l::before { border-bottom-color: rgba(219, 189, 124, 0.28); }
.section--dark .semaine__t { color: var(--or-sombre); }
.section--dark .semaine__l:not(.semaine__l--autre):not(.semaine__l--off) {
border-color: rgba(251, 242, 168, 0.30);
background: rgba(251, 242, 168, 0.10);
}
/* 9,9 px sur telephone, c'est sous le plancher qu'on s'est fixe. On aligne
l'etiquette sur celle des surtitres, qui est la reference du site. */
@media (max-width: 768px) {
.semaine__t { font-size: 0.66rem; min-width: 84px; }
.semaine__j { min-width: 88px; font-size: 0.96rem; }
}
/* ── Grille tarifaire ────────────────────────────────────────────────
Cinq lignes dans un menu depliable, c'etait le composant du bar
detourne : la fleche de depliage n'a aucun sens pour cinq prix, et le
fond sombre ecrasait les chiffres. Les trois tarifs d'entree passent
en cartes, prix en gros, et les deux options restent en lignes. */
.tarifs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: clamp(12px, 1.4vw, 18px);
margin-top: clamp(30px, 3.6vw, 46px);
}
.tarif {
position: relative;
padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 28px) clamp(26px, 2.8vw, 34px);
border: 1px solid rgba(19, 42, 30, 0.14);
border-radius: 14px;
background: #FFFFFF;
transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.tarif:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(19, 42, 30, 0.12); }
.tarif__l {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.tarif__p {
margin-top: 14px;
font-family: var(--titre);
font-size: clamp(2.3rem, 4.4vw, 3.1rem);
line-height: 1;
color: var(--encre);
}
.tarif__n {
margin-top: 10px;
font-size: var(--txt-petit);
line-height: var(--lh-petit);
color: var(--encre-douce);
}
/* Crescendo : les trois cartes s'assombrissent de gauche a droite, et le
prix s'eclaircit en meme temps, de l'encre au vieil or. Le regard suit la
progression jusqu'au tarif jeune, qui est celui que la page doit mettre
en avant : c'est lui qui distingue l'etablissement, et c'est le public le
plus sensible au prix. */
.tarif--doux { background: var(--vert-pale); }
.tarif--vert {
background: var(--vert-moyen);
border-color: transparent;
}
.tarif--vert .tarif__l { color: var(--or-sombre); }
.tarif--vert .tarif__p { color: var(--creme); }
/* 72 % et non 66 % : sur ce vert plus clair, la mention passait a 4,56:1,
c'est-a-dire au ras du seuil. A 72 % elle est a 5,1:1. */
.tarif--vert .tarif__n { color: rgba(237, 231, 218, 0.72); }
.tarif--fort {
background: linear-gradient(168deg, #12291D 0%, #0A140E 100%);
border-color: transparent;
}
.tarif--fort .tarif__l { color: var(--or-sombre); }
.tarif--fort .tarif__p { color: var(--or); }
.tarif--fort .tarif__n { color: rgba(237, 231, 218, 0.62); }
.tarifs__plus {
margin-top: clamp(14px, 1.6vw, 20px);
border-top: 1px solid rgba(19, 42, 30, 0.12);
}
.tarifs__r {
display: flex;
align-items: baseline;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid rgba(19, 42, 30, 0.08);
}
.tarifs__d { font-size: 0.95rem; color: var(--encre); }
.tarifs__d i { font-style: normal; font-size: 0.86rem; color: var(--encre-douce); }
.tarifs__r::before {
content: "";
order: 1;
flex: 1 1 auto;
min-width: 18px;
align-self: flex-end;
margin-bottom: 5px;
border-bottom: 1px dotted rgba(19, 42, 30, 0.26);
}
.tarifs__p {
order: 2;
font-family: var(--mono);
font-size: 0.94rem;
font-variant-numeric: tabular-nums;
color: var(--encre);
white-space: nowrap;
}
.tarifs__note {
margin-top: clamp(20px, 2.4vw, 28px);
padding-top: 18px;
border-top: 1px solid rgba(19, 42, 30, 0.12);
font-family: var(--mono);
font-size: 0.7rem;
line-height: 1.9;
letter-spacing: 0.03em;
color: var(--encre-douce);
}
.tarifs__note a { color: inherit; border-bottom: 1px solid rgba(19, 42, 30, 0.35); }
.tarifs__note a:hover { color: var(--brique-lue); border-bottom-color: var(--brique-lue); }
/* ── Silhouette posee au bas d'une section ───────────────────────────
Les photos de journee sont detourees et coupees net a mi-cuisse. Plutot
que d'habiller cette coupe, on la fait coincider avec le bord bas de la
section : la bande de couleur suivante commence exactement la, et l'oeil
lit une limite de section, pas une image tronquee.
La silhouette est donc calee sur `bottom: 0` de la SECTION, pas de la
grille : c'est la seule position ou le raccord est exact. Elle est aussi
sortie du flux, pour ne pas allonger un panneau collant qui est deja a
la hauteur de la fenetre.
L'image doit etre exportee en WebP avec transparence ET avec sa couche
alpha nettoyee : celle du fichier d'origine est compressee en blocs, et
dessine un escalier autour de la silhouette des qu'on la pose ailleurs
que sur du noir. */
/* `:not(.stick)` est indispensable : un panneau collant est deja positionne,
et une regle `position: relative` posee plus bas dans la feuille lui
retirait sa stickiness sans un mot. La section perdait son empilement. */
.sec-silhouette:not(.stick) { position: relative; }
.sec-silhouette > .wrap { position: relative; z-index: 1; }
.silhouette {
/* Posee en FOND et non en balise ![]()
: un fond n'est pas une image aux
yeux du navigateur, il n'a donc pas de menu « Enregistrer l'image sous ».
C'est la seule mesure qui tienne meme si le CSS de protection ou le JS
ne se chargent pas. Le texte de remplacement est porte par role="img"
et aria-label, comme les autres photos de fond du site. */
background-image: url('/assets/img/couple-800.webp');
background-image: image-set(url('/assets/img/couple-560.webp') 1x,
url('/assets/img/couple-1100.webp') 2x);
background-repeat: no-repeat;
background-position: bottom right;
background-size: contain;
position: absolute;
bottom: 0;
/* Cale sur le bord droit de la grille. On passe par `right` et non par
une translation : .reveal pose deja un transform sur cet element, et
.reveal.in le remet a `none` en fin d'animation, ce qui annulerait
tout positionnement fait par transform. */
right: max(0px, calc(50% - 570px));
/* La largeur se calcule sur la LARGEUR de la fenetre, pas sur sa hauteur.
Calee sur la hauteur, la silhouette grossissait dans une fenetre haute
et etroite, et venait mordre la colonne de texte : le paragraphe se
posait sur le bras. Sur une fenetre large et basse, `max-height` prend
le relais, et `object-position: bottom right` garde la silhouette
collee a droite plutot que centree dans sa boite. */
width: clamp(240px, 35vw, 520px);
/* 1029 / 800 : le rapport de la photo. Sans balise ![]()
, plus rien ne le
donne au navigateur, il faut le poser. */
aspect-ratio: 800 / 1029;
max-height: 72vh;
z-index: 0;
pointer-events: none;
user-select: none;
}
/* Variante mixte : meme composant, autre photo. */
.silhouette--mixte {
background-image: url('/assets/img/couple-mixte-800.webp');
background-image: image-set(url('/assets/img/couple-mixte-560.webp') 1x,
url('/assets/img/couple-mixte-1100.webp') 2x);
}
/* Le texte s'arrete avant la silhouette. La seconde borne le garantit quelle
que soit la fenetre, mais elle doit etre exacte, sinon elle etrangle la
colonne : la grille cesse de grandir a 1140 px alors que `vw` continue,
et une soustraction approximative reduisait le texte a un mot par ligne
sur un grand ecran.
largeur dispo = largeur de la colonne + le rembourrage droit de la
grille (6vw, que la silhouette recouvre) - sa largeur
- la gouttiere.
`clamp()` doit etre repete a l'identique : c'est la largeur REELLE de la
silhouette qu'on reserve, plafond compris, pas la valeur en vw. */
@media (min-width: 901px) {
.sec-silhouette .intro-txt {
max-width: min(54%, calc(100% + 6vw - clamp(240px, 35vw, 520px) - 40px));
}
}
/* En colonne unique, une image posee par-dessus le texte serait illisible.
Elle revient dans le flux, en bas, et la section perd son rembourrage
bas pour que le raccord avec la bande suivante reste exact. */
@media (max-width: 900px), (pointer: coarse) {
.sec-silhouette { padding-bottom: 0; }
.silhouette {
position: static;
display: block;
margin: clamp(30px, 5vw, 46px) auto 0;
max-height: none;
width: min(86%, 390px);
}
}
/* ── Photos protegees ────────────────────────────────────────────────
Les photos de couples sont produites pour l'etablissement. On leur pose
les quelques garde-fous que le navigateur autorise : pas de selection,
pas de glisser-deposer vers le bureau, pas de menu long sur mobile. Le
blocage du clic droit est dans assets/js/socle.js.
`pointer-events: none` est la mesure la plus efficace de la liste : sans
cible sous le curseur, le navigateur ouvre le menu de la PAGE et non
celui de l'image, donc « Enregistrer l'image sous » ne s'affiche pas.
Ces photos sont decoratives, elles n'ont aucune interaction a perdre.
Rien de tout cela n'empeche une capture d'ecran ni l'ouverture directe
de l'URL du fichier. La vraie protection est la mention de droits
inscrite dans le fichier lui-meme. */
.protege > .wrap,
.protege > .wrap * { pointer-events: auto; user-select: text; }
/* Une vignette qui s'ouvre en visionneuse doit recevoir le clic : sans
cette reprise, `pointer-events: none` mangeait le clic et aucune photo
ne s'agrandissait. L'![]()
a l'interieur, elle, reste hors d'atteinte :
le menu contextuel vise la figure, pas le fichier. */
.protege[data-lb] { pointer-events: auto; }
.protege,
.protege img {
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════
LISIBILITE SUR PETIT ECRAN
Les tailles heritees de l'ordinateur etaient trop justes sur un
telephone : 14 px pour le texte des cartes, 15 px pour les
paragraphes, 20,8 px pour les titres de bas de page. On lit le site
a bout de bras, pas a 60 cm d'un ecran.
Le seuil est 16 px : en dessous, iOS zoome tout seul sur les champs
de formulaire, et la lecture prolongee fatigue. Les titres montent
dans la meme proportion pour que la hierarchie reste lisible.
Ce bloc ferme la feuille : il ne touche qu'aux tailles, jamais a la
structure, et il passe apres tout le reste sans un seul !important.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* --- corps de texte --------------------------------------------- */
.lede { font-size: 1.06rem; line-height: 1.72; }
.legal p,
.legal li,
.avis p { font-size: 1.02rem; line-height: 1.78; }
.plan__p,
.venir__co,
.note { font-size: 0.98rem; line-height: 1.7; }
.carte__d { font-size: 1rem; }
.carte__p { font-size: 0.98rem; line-height: 1.7; }
/* les dix regles et les espaces : le texte des cartes etait le plus
petit du site, a 14 px */
.esp__p { font-size: 1rem; line-height: 1.68; }
.esp__h { font-size: 1.08rem; }
.grid-gal__t { font-size: 0.8rem; }
/* --- titres ------------------------------------------------------ */
.legal h2 { font-size: 1.55rem; line-height: 1.26; }
.plan__h { font-size: 1.06rem; }
.day__title { font-size: 1.18rem; }
/* l'etiquette numerotee annonce la section : elle doit rester
dechiffrable sans plisser les yeux */
.sec-head__i { font-size: 0.8rem; letter-spacing: 0.13em; }
/* --- formulaire --------------------------------------------------
16 px exactement : en dessous, iOS zoome sur le champ des qu'on le
touche et l'utilisateur doit repincer pour revenir. */
.form-champ input,
.form-champ select,
.form-champ textarea { font-size: 1rem; }
}