/* ============================================
KALIKANA — Premium CBD Landing V4
Apple-like, zero containers, cinematic
============================================ */
@charset "UTF-8";
/* === FONTS === */
/* v131 — CAUSE TROUVÉE de « forgé manque l'accent » (demande Loris) : la police KaliKana ne
dessine AUCUN diacritique (é→e, à→a, ç→c, î→i, œ→oe aplati). Le HTML a toujours été correct.
Fix : unicode-range restreint KaliKana aux caractères qu'elle sait dessiner → les lettres
accentuées basculent sur Cormorant Garamond (serif élégante proche), qui les dessine. */
@font-face { font-family: 'KaliKana'; src: url('../assets/fonts/KaliKana.woff2') format('woff2'), url('../assets/fonts/KaliKana.otf') format('opentype'); font-weight: 500; font-display: swap; unicode-range: U+0020-00BF, U+2000-206F, U+20AC; }
@font-face { font-family: 'IntegralCF'; src: url('../assets/fonts/IntegralCF_Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IntegralCF'; src: url('../assets/fonts/IntegralCF_DemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IntegralCF'; src: url('../assets/fonts/IntegralCF_Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IntegralCF'; src: url('../assets/fonts/IntegralCF_ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
/* === VARIABLES === */
:root {
--bg: #070707;
--bg-deep: #020202;
/* v69 — GOLD CANONIQUE Kali Kana (fini le #c9a84c olive terne « jaune dégueu ») */
--gold: #d4af60;
--gold-bright: #f0d488;
--gold-dim: #a8842f;
/* dégradé or signature — à réutiliser partout (titres, séparateurs) */
--gold-grad: linear-gradient(180deg, #f8ebb6 0%, #f0d488 40%, #d4af60 68%, #b8860b 100%);
--gold-line: linear-gradient(90deg, transparent, rgba(212,175,96,0.35) 22%, #f6e27a 50%, rgba(212,175,96,0.35) 78%, transparent);
/* v131 — DOCTRINE COULEUR (arbitrage Loris 16/07) : VERT JUNGLE = texte principal,
OR = texte secondaire, sur TOUTE la landing. Le vert charte (#4e723c, celui du logo)
est décliné en versions lumineuses pour rester lisible sur fond sombre.
Blanc / crème : éradiqués — les alias --cream pointent désormais sur le vert. */
--green: #4e723c;
/* v136 (Loris : « assombris le vert secondaire, MÊME vert que la feuille du logo Kalikana ») —
recalé sur le vert olive/forêt de la feuille du logo (échantillonné : #3c540c → #486018),
éclairci juste ce qu'il faut pour rester lisible sur fond noir. Fini le vert lime clair. */
--green-bright: #86a23c; /* texte courant — vert feuille logo, assombri */
--green-soft: #6f8a34; /* texte discret / légendes */
--green-grad: linear-gradient(180deg, #a6bf5a 0%, #86a23c 40%, #62802c 70%, #46601a 100%);
--cream: var(--green-bright);
--cream-soft: var(--green-soft);
--font-brand: 'KaliKana', 'Cormorant Garamond', serif;
--font-heading: 'IntegralCF', 'KaliKana', 'Cormorant Garamond', sans-serif;
--font-body: 'KaliKana', 'Cormorant Garamond', Georgia, serif;
}
/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bg); color: var(--cream); font-family: var(--font-body); font-weight: 500; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
/* Fond NUIT PREMIUM (v66) — plus AUCUNE bande noire plate à l'arrivée :
colonne de lumière dorée au centre (zone du logo) + nappe végétale + halos haut/bas. */
body::before {
content: '';
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 90% 55% at 50% -8%, rgba(34,52,28,0.55), transparent 60%),
radial-gradient(ellipse 100% 55% at 50% 108%, rgba(48,38,16,0.5), transparent 60%),
radial-gradient(ellipse 34% 78% at 50% 46%, rgba(212,175,96,0.13), transparent 70%),
radial-gradient(ellipse 62% 60% at 50% 52%, rgba(26,38,20,0.6), transparent 78%),
linear-gradient(180deg, #070a06 0%, #090b07 45%, #0b0a06 100%);
}
/* v68 — VOILE DE LIAISON central (z-4, sous le canvas z-6) : une colonne de pénombre
dorée qui unifie les 3 zones de la bannière (buds · centre · cigares) → tue la scission. */
#banner-layer::after {
content: '';
position: absolute; inset: 0; z-index: 4;
pointer-events: none;
background:
radial-gradient(ellipse 40% 92% at 50% 50%, rgba(10,13,8,0.66) 0%, rgba(10,13,8,0.30) 45%, transparent 72%),
radial-gradient(ellipse 30% 70% at 50% 46%, rgba(212,175,96,0.09), transparent 70%);
}
/* SCINTILLEMENT OUTRO — glow doré pulsé pendant le hold du logo constellation */
#star-shimmer {
position: fixed; inset: 0; z-index: 7;
pointer-events: none; opacity: 0;
background: radial-gradient(circle at 50% 43%, rgba(212,175,96,0.22), rgba(212,175,96,0.06) 30%, transparent 52%);
transition: opacity 0.5s ease;
}
body.outro-hold #star-shimmer {
opacity: 1;
animation: starShimmer 2.6s ease-in-out infinite;
}
@keyframes starShimmer {
0%, 100% { opacity: 0.45; transform: scale(0.98); }
50% { opacity: 1; transform: scale(1.04); }
}
/* v131 — PHRASE FINALE manuscrite (après le fondu du logo constellation) :
« …et le meilleur reste à venir » — or, écriture à la main, seule sur le noir. */
#outro-phrase {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 6; pointer-events: none; opacity: 0;
font-family: 'Great Vibes', var(--font-brand), cursive;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.25; text-align: center;
white-space: nowrap;
background: linear-gradient(160deg, #f8ebb6 0%, #f0d488 38%, #d4af60 66%, #b8860b 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 2px 14px rgba(0,0,0,0.85)) drop-shadow(0 0 30px rgba(212,175,96,0.35));
}
@media (max-width: 900px) {
#outro-phrase { white-space: normal; width: 88vw; font-size: clamp(1.7rem, 9vw, 2.4rem); }
}
/* Film grain overlay — disabled for perf, re-enable for prod
body::after {
content: '';
position: fixed; inset: 0; z-index: 9000;
pointer-events: none; opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat; background-size: 256px;
} */
/* === LOADER === */
#loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--bg-deep);
display: flex; align-items: center; justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loader {
background:
radial-gradient(ellipse 70% 60% at 50% 42%, rgba(38,56,30,0.6), transparent 62%),
radial-gradient(ellipse 90% 50% at 50% 108%, rgba(48,38,16,0.5), transparent 60%),
#050705;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
/* Halo doré pulsé derrière le logo */
.loader-logo-halo {
position: relative;
width: 150px; height: 150px;
margin: 0 auto 1.6rem;
display: flex; align-items: center; justify-content: center;
}
.loader-logo-halo::before {
content: ''; position: absolute; inset: -30%;
background: radial-gradient(circle, rgba(212,175,96,0.32), transparent 62%);
animation: loaderHalo 2.6s ease-in-out infinite;
}
@keyframes loaderHalo {
0%, 100% { opacity: 0.4; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.08); }
}
.loader-logo {
position: relative; z-index: 1;
width: 132px; height: auto;
filter: drop-shadow(0 6px 24px rgba(212,175,96,0.35));
animation: loaderLogo 3s ease-in-out infinite;
}
@keyframes loaderLogo {
0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 6px 20px rgba(212,175,96,0.3)) brightness(0.95); }
50% { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 10px 30px rgba(212,175,96,0.55)) brightness(1.12); }
}
.loader-title {
font-family: var(--font-brand);
font-size: 1.7rem; font-weight: 400;
letter-spacing: 0.42em; text-indent: 0.42em;
color: transparent;
background: linear-gradient(180deg, #f4e4b8 0%, #d4af60 48%, #a9822e 100%);
-webkit-background-clip: text; background-clip: text;
margin-bottom: 0.5rem;
}
.loader-tag {
font-family: var(--font-body);
font-size: 0.72rem; letter-spacing: 0.06em;
color: var(--cream-soft); opacity: 0.8;
margin-bottom: 2rem;
}
.loader-tag em { color: var(--gold); font-style: italic; }
.loader-bar-wrap {
width: 220px; height: 2px;
background: rgba(201,168,76,0.12);
border-radius: 2px; overflow: hidden;
margin: 0 auto 0.9rem;
}
#loader-bar {
width: 0%; height: 100%;
background: linear-gradient(90deg, #a9822e, #f4e4b8, #d4af60);
box-shadow: 0 0 12px rgba(212,175,96,0.7);
transition: width 0.1s linear;
}
#loader-percent {
font-family: var(--font-brand); font-size: 0.68rem; font-weight: 400;
color: var(--gold); letter-spacing: 0.34em;
}
/* === HEADER — v132 : logo animé + wordmark + tagline + liens utiles === */
/* v141 — HEADER RÉDUIT (Loris : « un header réduit pour laisser la place au spectacle »).
Il ne garde QUE la marque : la navigation est partie dans la carte verticale #film-nav. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 58px;
background: linear-gradient(180deg, rgba(7,7,7,0.86) 0%, rgba(7,7,7,0.3) 62%, transparent 100%);
pointer-events: none; opacity: 0;
transition: opacity 0.5s ease;
}
.site-header.visible { opacity: 1; }
.site-header nav { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 3vw; pointer-events: auto; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
/* la scène logo : réplique miniature du logo final (vidéo poussière + logo net qui toupille) */
.nav-logo-scene {
position: relative; width: 50px; height: 50px; flex: 0 0 50px; /* v147 — un peu plus gros (Loris) */
display: flex; align-items: center; justify-content: center;
perspective: 620px;
}
/* v147 (Loris) — la vidéo reveal du header est SUPPRIMÉE : elle donnait par intermittence un FOND
NOIR (le blend screen ne neutralise pas le noir de la vidéo sur tous les fonds), un cadrage ROND
(masque radial), du FLOU (vidéo affichée à 240%) et un logo FIGÉ (l'anim toupie ne tournait que
par à-coups entre deux révélations). → uniquement le PNG net transparent, rotation CSS INFINIE
et régulière (même principe que la toupie d'intro .bf-logo). */
#nav-logo-still {
position: absolute; top: 50%; left: 50%;
width: 94%; height: auto; transform-style: preserve-3d;
transform: translate(-50%, -50%);
opacity: 1;
filter: drop-shadow(0 0 12px rgba(212,175,96,0.5));
animation: navLogoSpin 9s linear infinite;
will-change: transform;
}
@keyframes navLogoSpin {
from { transform: translate(-50%, -50%) rotateY(0deg); }
to { transform: translate(-50%, -50%) rotateY(360deg); }
}
.nav-brand-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.nav-brand-name {
font-family: var(--font-brand); font-size: 0.8rem; font-weight: 500; /* v141 — réduit */
letter-spacing: 0.34em; text-indent: 0.04em; line-height: 1;
background: var(--gold-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 1px 6px rgba(0,0,0,0.8));
}
.nav-brand-line {
display: block; width: 100%; height: 1px; border-radius: 1px;
background: var(--gold-line);
box-shadow: 0 0 6px rgba(212,175,96,0.4);
margin-bottom: 3px; /* v134 (Loris) — décoller la ligne du texte du dessous */
}
.nav-brand-tag {
/* v134 (Loris) — « La Racine de l'écosystème » en police KaliKana (accents en fallback) */
font-family: var(--font-brand), serif;
font-size: 0.6rem; letter-spacing: 0.04em; line-height: 1.1; /* v141 — réduit */
color: var(--gold-bright); opacity: 0.92;
text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
/* ============================================================
v141 — « LE DÉROULÉ » : LE HEADER VERTICAL CHAPITRABLE
Demande Loris (verbatim) : « un header vertical au-dessus de reprendre le film », « on
travaille à fond les finitions de ces deux cartes, on les INTÈGRE ENSEMBLE », « on trace ça
sous forme de timeline chronologique avec une jolie petite ligne de timeline entre chaque
élément pour bien illustrer la fonction de la section ».
→ UNE seule carte : label + timeline des 9 chapitres + « Reprendre le film » soudé dessous.
Doctrine couleurs respectée : VERT JUNGLE = les titres (texte principal), OR = l'accent,
le chapitre en cours et la progression (secondaire).
Les points sont espacés RÉGULIÈREMENT (lisibilité) mais la barre de progression dorée est
INTERPOLÉE sur les vraies positions du film : elle atteint le point N pile quand le film y est.
============================================================ */
#film-nav {
position: fixed; top: 50%; right: 0; z-index: 210; /* au-dessus du chat, comme l'ex-pastille */
transform: translate(112%, -50%);
width: 206px;
display: flex; flex-direction: column;
padding-top: 0.75rem;
border: 1px solid rgba(212,175,96,0.34);
border-right: none;
border-radius: 16px 0 0 16px;
background: linear-gradient(135deg, rgba(12,14,9,0.84), rgba(8,10,6,0.93));
backdrop-filter: blur(11px) saturate(1.08); -webkit-backdrop-filter: blur(11px) saturate(1.08);
box-shadow: -7px 0 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,175,96,0.13);
opacity: 0; pointer-events: none;
transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, border-color 0.3s ease;
font-family: var(--font-body);
}
#film-nav.show { transform: translate(0, -50%); opacity: 0.88; pointer-events: auto; }
#film-nav.show:hover { opacity: 1; border-color: rgba(240,212,136,0.6); }
/* Le label « ◆ Le Déroulé » — sert de bouton de dépliage sur mobile uniquement */
#fn-toggle {
display: flex; align-items: center; gap: 0.45rem;
width: 100%; padding: 0 0.9rem 0.62rem;
background: none; border: none; cursor: default; pointer-events: none;
font-family: var(--font-brand);
font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold-bright); opacity: 0.82;
}
#fn-toggle .fn-di { font-size: 0.48rem; filter: drop-shadow(0 0 6px rgba(212,175,96,0.55)); }
#fn-list { list-style: none; margin: 0; padding: 0 0.85rem 0.7rem 0; position: relative; }
/* LA LIGNE DE TIMELINE — rail vert continu (::before) + progression dorée (::after).
Les bornes exactes (centre du 1er point → centre du dernier) sont mesurées en JS. */
#fn-list::before, #fn-list::after {
content: ''; position: absolute; left: calc(0.9rem + 3px); width: 1px;
top: var(--fn-rail-top, 0px); border-radius: 1px;
}
#fn-list::before {
height: var(--fn-rail-h, 0px);
background: linear-gradient(180deg, rgba(134,162,60,0.34), rgba(134,162,60,0.14));
}
#fn-list::after {
height: var(--fn-fill, 0px);
background: linear-gradient(180deg, rgba(246,226,122,0.95), var(--gold-bright));
box-shadow: 0 0 9px rgba(212,175,96,0.6);
transition: height 0.28s linear;
}
.fn-item {
display: flex; align-items: center; gap: 0.6rem;
width: 100%; padding: 0.31rem 0 0.31rem 0.9rem;
background: none; border: none; cursor: pointer; text-align: left;
font-family: var(--font-brand);
font-size: 0.8rem; letter-spacing: 0.045em; line-height: 1.25;
color: var(--green-bright); opacity: 0.68;
transition: opacity 0.28s ease, color 0.28s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.fn-item:hover { opacity: 1; color: var(--gold-bright); transform: translateX(2px); }
.fn-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-dot {
position: relative; z-index: 1;
width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
background: rgba(8,10,6,0.95);
border: 1px solid rgba(134,162,60,0.55);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.fn-item:hover .fn-dot { border-color: var(--gold-bright); }
/* chapitre déjà passé : l'or PERSISTE (doctrine headers v132) */
.fn-item.is-past { opacity: 0.8; color: rgba(212,175,96,0.7); }
.fn-item.is-past .fn-dot { background: rgba(212,175,96,0.6); border-color: rgba(212,175,96,0.7); }
/* chapitre EN COURS : plein or + halo */
.fn-item.is-active { opacity: 1; color: var(--gold-bright); }
.fn-item.is-active .fn-dot {
background: var(--gold-bright); border-color: var(--gold-bright);
box-shadow: 0 0 0 3px rgba(212,175,96,0.15), 0 0 11px rgba(212,175,96,0.75);
transform: scale(1.2);
}
/* « Reprendre le film » SOUDÉ à la carte (plus une pastille séparée) */
#film-nav #film-resume,
#film-nav #film-resume.show {
position: static; transform: none; opacity: 1; pointer-events: auto;
width: 100%; padding: 0.6rem 0.9rem;
border: none; border-top: 1px solid rgba(212,175,96,0.22);
border-radius: 0 0 0 15px;
background: linear-gradient(180deg, rgba(212,175,96,0.045), rgba(212,175,96,0.1));
box-shadow: none;
transition: background 0.3s ease;
}
#film-nav #film-resume:hover {
background: linear-gradient(180deg, rgba(212,175,96,0.12), rgba(212,175,96,0.2));
}
#film-nav #film-resume .fr-sub { white-space: normal; font-size: 0.56rem; line-height: 1.3; }
/* === SCROLL CUE (flottant sur le canvas) === */
.scroll-cue {
position: fixed; bottom: 2.5rem; left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
opacity: 0; transition: opacity 0.5s ease;
}
.scroll-cue.visible { opacity: 0.6; }
.scroll-cue span { font-family: var(--font-brand); font-size: 0.5rem; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-dim); }
.scroll-cue .line { width: 1px; height: 36px; background: var(--gold-dim); animation: scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* === BOUTONS D'INTRO (v66) — écran noir d'arrivée, bas-droite de la zone centrale === */
/* === v71 — FOND JUNGLE VIVANT (intro, sous la bannière) === */
#intro-jungle-wrap {
position: fixed; inset: 0; z-index: 1; /* sous la bannière (z-5) et le canvas (z-6) */
overflow: hidden; pointer-events: none;
opacity: 1; transition: opacity 0.8s ease;
}
#intro-jungle {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.05) contrast(1.05);
}
/* voile : garde le centre lisible (boutons) + fond la jungle dans la charte sombre */
#intro-jungle-veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 42% 70% at 50% 52%, rgba(5,7,5,0.62), rgba(5,7,5,0.30) 55%, transparent 78%),
linear-gradient(180deg, rgba(4,6,4,0.55) 0%, rgba(4,6,4,0.18) 40%, rgba(4,6,4,0.65) 100%);
}
/* v73 — CENTRAGE RÉEL : `50vw` compte la barre de défilement → le bouton était décalé à droite.
On centre avec left/right + margin auto (aucun décalage possible). */
/* v74 — AU CENTRE DE L'ÉCRAN, point. (horizontalement ET verticalement) */
#intro-actions {
position: fixed;
top: 50%; left: 0; right: 0; bottom: auto;
margin: 0 auto;
width: fit-content;
transform: translateY(-50%);
z-index: 7;
display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
text-align: center;
opacity: 1; transition: opacity 0.6s ease, visibility 0.6s ease;
perspective: 900px;
}
#intro-actions.gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* v131 — centrage sur le viewport DYNAMIQUE (vrai téléphone : la barre du navigateur fait
varier la hauteur → 50 % du viewport figé paraissait décalé vers le haut). */
@supports (top: 50dvh) { #intro-actions { top: 50dvh; } }
/* LA carte « Voir le film » — charte maximale : contour conic gold/vert rotatif,
verre sombre nature, or dégradé KaliKana, shine, halo pulsé, tilt 3D (JS). */
.btn-film {
position: relative; overflow: hidden; display: block;
width: clamp(232px, 16.5vw, 306px); /* v135 (Loris) — carte un peu plus grande, police lisible */
padding: 1.5rem 1.45rem 1.3rem;
border-radius: 18px;
border: 2px solid transparent;
background:
radial-gradient(120% 85% at 50% 0%, rgba(60,90,40,0.5), transparent 70%) padding-box,
linear-gradient(158deg, rgba(14,22,10,0.97), rgba(28,24,9,0.95)) padding-box,
conic-gradient(from var(--cm-angle), #d4af60, #9ac35e, #f4e4b8, #4a7c2e, #d4af60, #7bb04a, #d4af60) border-box;
box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 30px rgba(212,175,96,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
text-align: center; text-decoration: none; cursor: pointer;
transform-style: preserve-3d;
transition: transform 0.2s ease, box-shadow 0.35s ease;
animation: magnetGlow 3.4s ease-in-out infinite, cmRotate 5s linear infinite;
}
.btn-film:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 64px rgba(212,175,96,0.5), 0 0 28px rgba(120,180,70,0.28); }
/* v134 (Loris) — REFLET GOLD retravaillé : plus LARGE, dégradé or riche multi-stops
(bord doux → cœur clair lumineux → bord doux), plus LENT (7s), balayage ultra fluide. */
.bf-shine {
position: absolute; top: -10%; left: -85%; width: 62%; height: 120%;
background: linear-gradient(100deg,
transparent 0%,
rgba(212,175,96,0.10) 30%,
rgba(246,226,122,0.32) 46%,
rgba(255,248,220,0.55) 50%,
rgba(246,226,122,0.32) 54%,
rgba(212,175,96,0.10) 70%,
transparent 100%);
transform: skewX(-16deg); pointer-events: none;
filter: blur(0.5px);
animation: bfShine 7s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes bfShine { 0%, 42% { left: -85%; } 88%, 100% { left: 150%; } }
/* v134 — HOVER SEXY : halo doré qui pulse + suit le curseur (piloté en JS via --gx/--gy) */
.bf-glow {
position: absolute; inset: -2px; border-radius: 18px; pointer-events: none;
opacity: 0; transition: opacity 0.4s ease;
background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 40%),
rgba(246,226,122,0.28), rgba(154,195,94,0.14) 40%, transparent 70%);
}
.btn-film:hover .bf-glow { opacity: 1; }
/* v134 — le LOGO Kalikana qui tourne en toupie dans la carte (remplace le losange) */
/* v145 (Loris — POINT 4) : logo AGRANDI — il prend la place au-dessus de « Voir le film » (avant :
50px, minuscule). Portrait (ratio du PNG 909×1219) → il remplit le haut de la carte tout en
restant DANS sa largeur. La toupie (rotateY, .bf-logo) est conservée. */
.bf-logo-scene {
display: block; width: clamp(132px, 10.5vw, 172px); height: auto;
aspect-ratio: 909 / 1219; margin: 0.1rem auto 0.7rem;
perspective: 680px;
}
.bf-logo {
width: 100%; height: auto; transform-style: preserve-3d;
filter: drop-shadow(0 0 14px rgba(212,175,96,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
animation: bfLogoSpin 7s linear infinite;
}
@keyframes bfLogoSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
/* le hover accélère et grossit légèrement la toupie (effet dynamique) */
.btn-film:hover .bf-logo { animation-duration: 2.4s; }
.bf-top {
display: block; font-family: var(--font-brand); font-size: clamp(1.5rem, 2vw, 1.85rem); font-weight: 500;
letter-spacing: 0.05em; line-height: 1.1;
background: linear-gradient(180deg, #f6e27a 0%, #e3cc7a 30%, #d4af60 55%, #b8860b 80%, #e9d98b 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(212,175,96,0.35));
}
.bf-line {
display: block; width: 58px; height: 1.5px; margin: 0.55rem auto;
background: linear-gradient(90deg, transparent, #f6e27a, #d4af60, #f6e27a, transparent);
box-shadow: 0 0 10px rgba(212,175,96,0.55);
}
.bf-sub { display: block; font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-soft); opacity: 0.78; margin-bottom: 0.9rem; }
.bf-go { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-brand); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: #b9e08a; }
.bf-arrow { transition: transform 0.3s ease; font-size: 0.95rem; }
.btn-film:hover .bf-arrow { transform: translateX(6px); }
/* v132 — la 2e façon de vivre le film, dite dans la carte (manuscrit doré discret) */
.bf-scroll-note {
display: block; margin-top: 0.8rem; padding-top: 0.65rem;
border-top: 1px solid rgba(212,175,96,0.18);
font-family: 'Great Vibes', var(--font-brand), cursive;
font-size: 1.12rem; line-height: 1.32;
color: var(--gold-bright); opacity: 0.88;
text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.bf-wink { display: block; margin-top: 0.3rem; font-style: normal; font-size: 0.94rem; color: #c9a24a; opacity: 0.92; }
/* « passer l'intro » — v151 (Loris 06/08/2026 : « pas assez visible, plus gros, plus
visible, pourquoi pas dynamique »). Avant : manuscrit doré sans contour ni fond, à 78 %
d'opacité → invisible pour beaucoup de clients, qui restaient bloqués sur l'intro.
Devient un VRAI bouton pilule à la largeur de la carte « Voir le film », contour or qui
RESPIRE (halo pulsé toutes les 3,4 s), rempli d'or au survol avec la flèche qui avance.
La note manuscrite passe SOUS la pilule (elle n'élargit plus le bouton). */
.btn-skip {
background: none; border: none; cursor: pointer; padding: 0;
display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
width: clamp(232px, 16.5vw, 306px); max-width: 100%; /* = largeur de .btn-film */
position: relative; opacity: 1;
}
.btn-skip::before {
content: ''; position: absolute; inset: -10% -14%; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(4,6,4,0.55), transparent 76%);
}
.bs-main {
display: flex; align-items: center; justify-content: center; gap: 0.55rem;
width: 100%; padding: 0.92rem 1.1rem; border-radius: 99px;
border: 1.5px solid rgba(212,175,96,0.75);
background: linear-gradient(180deg, rgba(18,24,12,0.92), rgba(8,10,5,0.94));
font-family: var(--font-brand), serif;
font-size: 1.06rem; font-weight: 600; line-height: 1.1;
letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
color: var(--gold-bright); -webkit-text-fill-color: currentColor;
box-shadow: 0 6px 22px rgba(0,0,0,0.6);
transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease,
border-color 0.3s ease, color 0.3s ease;
animation: bs-breathe 3.4s ease-in-out 1.2s infinite;
}
.bs-main::after {
content: '\2192'; font-size: 1.15rem; line-height: 1;
transition: transform 0.28s ease;
}
.btn-skip:hover .bs-main, .btn-skip:focus-visible .bs-main {
background: var(--gold-grad); border-color: #f8ebb6; color: #0a0d06;
transform: translateY(-2px); animation: none;
box-shadow: 0 0 26px rgba(240,212,136,0.45), 0 8px 26px rgba(0,0,0,0.6);
}
.btn-skip:hover .bs-main::after, .btn-skip:focus-visible .bs-main::after { transform: translateX(5px); }
.btn-skip:active .bs-main { transform: translateY(0); }
@keyframes bs-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(240,212,136,0.38), 0 6px 22px rgba(0,0,0,0.6); }
50% { box-shadow: 0 0 0 7px rgba(240,212,136,0), 0 6px 22px rgba(0,0,0,0.6);
border-color: #f8ebb6; }
}
/* accessibilité — si l'appareil demande moins d'animations, le bouton reste visible sans pulser */
@media (prefers-reduced-motion: reduce) {
.bs-main { animation: none; }
}
.bs-note {
display: block; margin-top: 0;
font-family: 'Great Vibes', cursive; font-style: normal;
font-size: 0.98rem; color: #c9a24a; opacity: 0.8; text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
/* v131 (Loris 16/07) — « regardez-moi sur un écran d'ordi svp 🙏 » : manuscrit doré discret,
MOBILE UNIQUEMENT (sur ordi le message n'a pas d'objet). Vit dans #intro-actions →
disparaît automatiquement avec l'intro dès que le scroll démarre. Zéro interférence. */
/* v143 (Loris : « regarde moi sur un ecran d'ordi stp AU DESSUS de modale voir le film, avec
contour double ligne gold leger fin ») — la note est passée AU-DESSUS de la carte et porte
un DOUBLE LISERÉ or : le cadre extérieur (l'élément) + un liseré intérieur (le span), séparés
de 3px. Fin, léger, discret — il souligne la note sans concurrencer la carte. */
#intro-ordi-note {
display: none;
margin: 0 auto 0.85rem;
padding: 3px; /* l'écart entre les deux liserés */
border: 1px solid rgba(212,175,96,0.30); /* liseré EXTÉRIEUR */
border-radius: 12px;
background: linear-gradient(180deg, rgba(10,12,8,0.42), rgba(6,8,5,0.55));
backdrop-filter: blur(2px);
pointer-events: none;
}
#intro-ordi-note .ion-in {
display: block;
padding: 0.3rem 0.9rem;
border: 1px solid rgba(212,175,96,0.22); /* liseré INTÉRIEUR */
border-radius: 9px;
font-family: 'Great Vibes', var(--font-brand), cursive;
font-size: 1.12rem; line-height: 1.25; text-align: center;
background: linear-gradient(160deg, #f4e3a6 0%, #e0bd6e 55%, #c39a44 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 1px 8px rgba(0,0,0,0.85));
opacity: 0.92;
}
/* l'emoji ne doit PAS être découpé par le dégradé (sinon il devient invisible) */
#intro-ordi-note .ion-emoji { -webkit-text-fill-color: initial; color: initial; }
@media (max-width: 900px) {
#intro-ordi-note { display: block; }
}
/* l'emoji garde ses couleurs natives (le fill transparent du dégradé l'effacerait) */
#intro-ordi-note .ion-emoji { -webkit-text-fill-color: initial; color: initial; filter: none; }
/* === BANDES AZTÈQUES — images découpées, AU-DESSUS de tout === */
.banner-band {
position: fixed; left: 0; right: 0;
z-index: 8;
width: 100%;
height: auto;
pointer-events: none;
display: block;
}
.band-top { top: 0; }
.band-bottom { bottom: 0; }
/* v132 — le Mini Sac à Dos Classique, posé sur les feuilles du bas (dédicace).
z-8 = niveau des bandes ; l'opacité suit les bandes (pilotée dans setupBannerSlide). */
.floor-prod {
position: fixed; bottom: 0.6vh;
z-index: 8; pointer-events: none; width: auto;
filter: drop-shadow(0 10px 16px rgba(0,0,0,0.65)) drop-shadow(0 2px 6px rgba(0,0,0,0.5)) brightness(0.94);
}
/* v145 (Loris — POINT 5) : produits posés le long de la ligne de feuilles.
v147 (Loris : « mauvaises images pour les cigares ») — les deux displays cigares en tube sur socle
doré (Royal Kanagar + Blunt Dynasty) sont RETIRÉS : au sol ils rendaient mal (à moitié cachés
derrière la pastille son à gauche, tubes minuscules perdus dans le feuillage à droite). Reste le
Mini Sac à Dos + le doypack kraft (non-cigare), le CENTRE laissé libre pour le film. */
#mini-sac { left: 20vw; height: 11vh; transform: rotate(-1deg); z-index: 9; }
#kk-doypack { left: 84vw; height: 9vh; transform: rotate(4deg); z-index: 9; }
@media (max-width: 900px) {
/* v145/v147 : produits POSÉS sur la ligne de feuilles. Mini Sac à gauche ; doypack = desktop
uniquement (opti mobile : `display:none` + `loading=lazy` → non téléchargé en portrait). */
/* v148 (Loris : « sac à dos tout seul qui flotte sur une bande noire ») — sur mobile la
bande de feuilles (2598px de large affichée sur ~390px) devient minuscule : le sac n'a
plus rien où se poser et flotte sur le cache noir. → AUCUN produit posé au sol en mobile. */
#mini-sac { display: none; }
#kk-doypack { display: none; }
}
/* v132 — le launcher du chatbot Kalia s'ancre à DROITE (même règle que les landings
Kalikorp/AllInMyApp : la boîte fixe du widget = .kk-widget, c'est elle qu'on déplace) */
.kk-widget { left: auto !important; right: 1.2rem !important; }
/* v141 — BULLE D'ACCROCHE COUPÉE À DROITE (le « chatbot cassé », enfin diagnostiqué).
Le bundle pose la bulle en `left:0; right:-188px` DANS la boîte du widget : il la fait donc
déborder VERS LA DROITE, ce qui suppose un launcher ancré à GAUCHE. Comme on ancre le
launcher à DROITE, 169 px de la bulle partaient HORS ÉCRAN (mesuré : bord droit à 1609 px
pour un écran de 1440). On la ré-ancre sur le bord droit du launcher.
⚠️ C'est un pansement côté landing : la vraie correction est dans le bundle du widget
(Supabase Storage), qui devrait suivre le côté d'ancrage. */
#kk-chat-widget .kk-teaser { left: auto !important; right: 0 !important; }
/* v70 — CACHE OPAQUE derrière chaque bande aztèque (div dédié : une ![]()
ne peut pas
porter de ::after). Ombre noire dense au bord → fondue vers le centre (n'empiète pas). */
.band-mask {
position: fixed; left: 0; right: 0; z-index: 7; /* sous les bandes (z-8), au-dessus du film */
height: 14vh; pointer-events: none;
}
.band-mask-top { top: 0; background: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,0.8) 68%, transparent 100%); }
.band-mask-bottom { bottom: 0; background: linear-gradient(0deg, #000 0%, #000 44%, rgba(0,0,0,0.8) 68%, transparent 100%); }
/* === BANNER — split gauche/droite, slide-out tiroir === */
.banner-layer {
position: fixed; inset: 0; z-index: 5;
overflow: hidden; background: transparent; /* plus de bande #000 plate : on laisse voir le fond premium continu */
pointer-events: none;
}
.banner-half {
position: absolute; inset: 0;
overflow: hidden;
}
/* v68 — ÉRADICATION DE LA SCISSION : plus de clip-path à bord net. Les deux moitiés se
FONDENT vers le centre via un masque dégradé → transition douce dans le fond premium,
plus aucune ligne verticale franche. */
.banner-half-left {
clip-path: inset(0 44% 0 0);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 96%);
mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 96%);
}
.banner-half-right {
clip-path: inset(0 0 0 52%);
-webkit-mask-image: linear-gradient(to left, #000 0%, #000 46%, transparent 96%);
mask-image: linear-gradient(to left, #000 0%, #000 46%, transparent 96%);
}
.banner-img {
width: 100%; height: 100%;
object-fit: cover; object-position: 66% center;
}
/* Mur de fleurs — crop BRUT de l'originale (vrais bords des buds, fond noir natif).
Le feuillage original haut/bas est recouvert par les bandes aztèques de la page (z-8)
→ une seule bande visible. Aucun fondu artificiel. */
.banner-img-left {
position: absolute;
left: -11%; top: 50%;
transform: translateY(-50%);
height: 104%;
width: auto;
object-fit: contain;
}
/* v134 — la bande fleurs MOBILE : masquée sur desktop, elle prend le relais du mur en portrait
(bord droit des buds sur noir = découpe naturelle, pleine hauteur d'écran). */
.m-banner-img-left { display: none; }
/* === BANNIÈRE DROITE — la dynastie de cigares, REMPLIT toute la hauteur (plus de vide) === */
/* Dynastie : cigares détourés redressés + pack Trio, alignés en bas entre les bandes aztèques */
/* Image produits (composition finale Loris) — à droite, débordant sous les bandes aztèques */
.banner-produits {
position: absolute;
right: -2.5%; bottom: -6%;
height: 114%;
width: auto;
object-fit: contain;
object-position: bottom right;
z-index: 2; /* SOUS les bandes aztèques (z-8) → produits partiellement cachés aux extrémités */
filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5));
}
.dynasty-glow {
position: absolute;
right: 0; top: 50%;
width: 52%; height: 82%;
transform: translateY(-50%);
background: radial-gradient(ellipse at 60% center,
rgba(212,175,96,0.30) 0%, rgba(120,150,70,0.14) 42%, transparent 72%);
filter: blur(14px);
pointer-events: none;
z-index: 1;
}
/* v131 — VOILE DU LOGO D'INTRO : assombrit le centre (buds/cigares clairs) pendant la phase
logo, sinon le blend lighten les laisse percer à travers le logo (opacité perçue réduite).
Opacité pilotée par le scroll dans setupLogo (monte avec le zoom du logo, s'efface avec lui). */
/* v135 (Loris ×2 : « le logo est en transparence, il doit passer DEVANT les fleurs ») — voile
quasi opaque au centre → le logo (blend lighten) se dessine sur du noir plein = il ressort
NET, au premier plan, plus aucun bud clair ne perce à travers. */
/* v136 (Loris : « Logo 1 tout premier plan ! ») — centre 100 % NOIR OPAQUE → le logo d'intro
se dessine sur du noir plein, il est au tout premier plan, plus rien ne perce derrière. */
/* v144 (Loris : « une ÉNORME ombre sous le logo… t'as complètement craqué, vire-moi ça de suite,
ça n'a aucun intérêt » + « qu'on vire cette ombre pour laisser s'afficher la vidéo un moment »).
🔴 MEA CULPA : ce voile était MON remède v131 au « logo en transparence » (le blend `lighten`
laissait les buds clairs percer à travers le logo). Mais le remède noircissait TOUT L'ÉCRAN
(ellipse 58%×74% de noir OPAQUE, montée à ~0.55-1 d'opacité pendant toute l'intro) — sur ordi
ET sur mobile. Il tuait la forêt que Loris veut justement voir.
→ SUPPRIMÉ. Le halo doux du logo (bf-glow) suffit à le détacher ; la jungle reste visible. */
#logo-veil { display: none !important; }
/* === CANVAS — par dessus la bannière (5). v145 (Loris — POINT 2) : le blend `lighten` est RETIRÉ.
Il servait à rendre transparent le fond NOIR de l'anim amaranthe, mais il DÉLAVAIT le logo (les
buds clairs perçaient au travers → « logo en second plan / flou »). Le logo est désormais un PNG
TRANSPARENT dessiné en blend NORMAL sur canvas effacé (clearRect) → net, au premier plan, fond
transparent. Ce canvas ne sert QU'au logo d'intro (le film est sur #inception-canvas) → aucun
impact sur le film. === */
.canvas-wrap {
position: fixed; inset: 0; z-index: 6;
opacity: 1;
pointer-events: none; /* le canvas ne doit JAMAIS capter les clics → footer cliquable */
}
#canvas { width: 100%; height: 100%; display: block; }
/* === INCEPTION CANVAS — LE HERO : cigare → zoom macro → champ === */
/* z-index 2 = SOUS la bannière (5) et les bandes (8) */
.inception-wrap {
position: fixed; inset: 0; z-index: 2;
opacity: 0; pointer-events: none;
background: #000;
}
#inception-canvas { width: 100%; height: 100%; display: block; }
/* === NOMS PRODUITS — or KaliKana, au-dessus des displays === */
#product-name-overlay {
position: fixed; left: 50%; top: 16vh;
transform: translateX(-50%);
z-index: 4; text-align: center;
opacity: 0; pointer-events: none;
}
#product-name-overlay .pn-main {
display: block;
font-family: var(--font-brand);
font-size: clamp(2.6rem, 6.5vw, 5.2rem);
font-weight: 500; line-height: 1;
background: linear-gradient(160deg, #f6e27a 0%, #e3cc7a 22%, #b8860b 48%, #ffd700 62%, #8a6d1f 85%, #e9d98b 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 3px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 26px rgba(212,175,96,0.35));
letter-spacing: 0.04em;
}
#product-name-overlay .pn-sub {
display: block; margin-top: 0.7rem;
font-family: var(--font-brand);
font-size: clamp(0.8rem, 1.3vw, 1.05rem); font-weight: 500;
letter-spacing: 0.36em; text-transform: uppercase;
color: var(--gold);
text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
/* jolie ligne dorée qui sépare le nom de sa collection */
#product-name-overlay .pn-sub::before {
content: ''; display: block; width: 74px; height: 1.5px; margin: 0 auto 0.8rem;
background: linear-gradient(90deg, transparent, #f6e27a, #d4af60, #f6e27a, transparent);
box-shadow: 0 0 10px rgba(212,175,96,0.5);
}
/* === v70 — COLLECTION CHANVRE (overlay au moment du sac à dos) === */
#hemp-overlay {
position: fixed; left: 50%; top: 13vh; transform: translateX(-50%); width: min(64vw, 760px);
z-index: 6; text-align: center; opacity: 0; pointer-events: none;
transition: opacity 0.5s ease;
padding: 1.1rem 2.2rem 1.3rem;
border-radius: 18px;
}
/* v137 (Loris : « le façonné à la main n'est pas joli, dans une carte bizarre qu'on n'a jamais
faite ailleurs — enlève la carte et perfectionne ») — PLUS DE CARTE. Comme tous les autres
textes du film : un simple voile radial dégradé derrière le texte (lisible partout, aucun
cadre franc). + les titres passent en OR dégradé signature. */
#hemp-overlay::before {
content: ''; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 76% 82% at 50% 50%, rgba(4,6,4,0.82), rgba(4,6,4,0.5) 55%, transparent 82%);
}
.hemp-title {
filter: drop-shadow(0 3px 16px rgba(0,0,0,0.85)) drop-shadow(0 0 26px rgba(212,175,96,0.28));
}
.hemp-label { display: block; font-family: var(--font-brand); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.hemp-title {
display: block; margin-top: 0.5rem; font-family: var(--font-brand); font-weight: 500;
font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 3px 16px rgba(0,0,0,0.8));
}
.hemp-line { display: block; width: 200px; height: 2px; margin: 0.8rem auto; border-radius: 2px; background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.5); }
.hemp-body { font-family: var(--font-body); font-size: clamp(0.82rem, 1.15vw, 1rem); color: var(--green-bright); text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.7); max-width: 34ch; margin: 0 auto; }
/* === v70 — BOUTON SECRET DE L'ALCHIMISTE (à peine visible, sur sa robe) === */
#alchimiste-secret {
position: fixed; left: 50%; top: 62%;
transform: translateX(-50%);
z-index: 6; opacity: 0; pointer-events: none;
display: inline-flex; align-items: center; justify-content: center;
padding: 0.85rem 1.5rem; border-radius: 999px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(212,175,96,0.22);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
text-decoration: none;
transition: opacity 0.7s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
#alchimiste-secret.visible { opacity: 0.30; pointer-events: auto; } /* à peine visible… */
#alchimiste-secret.visible:hover { /* …mais il se révèle si on s'arrête dessus */
opacity: 1; background: rgba(0,0,0,0.8);
border-color: rgba(212,175,96,0.9);
box-shadow: 0 0 34px rgba(212,175,96,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.as-txt {
font-family: var(--font-brand); font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-bright); white-space: nowrap;
}
.as-glow {
position: absolute; inset: -40%;
background: radial-gradient(circle, rgba(212,175,96,0.22), transparent 65%);
opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
#alchimiste-secret.visible:hover .as-glow { opacity: 1; }
/* === DARK OVERLAY === */
#dark-overlay { position: fixed; inset: 0; z-index: 2; background: var(--bg-deep); opacity: 0; pointer-events: none; }
/* === MARQUEE === */
.marquee-wrap { position: fixed; top: 50%; left: 0; z-index: 3; width: 100%; overflow: visible; opacity: 0; pointer-events: none; transform: translateY(-50%); }
.marquee-text {
display: inline-block; white-space: nowrap;
font-family: var(--font-brand); font-size: 13vw; font-weight: 800;
color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,0.06);
letter-spacing: 0.03em; text-transform: uppercase; user-select: none;
}
/* === SCROLL CONTAINER === */
/* v146 (Loris pt1) : piste allongée 3250→3351vh (×1.031). Les moments ralentis (fleur→cigare,
pose du Baron, fumées) reçoivent plus de scroll SANS voler le budget du DÉBUT (qui reste PARFAIT) :
la hauteur est mise à l'échelle du même facteur que la somme des poids du film → le rythme
scroll-par-frame des séquences NON touchées (dont toute l'intro) est rigoureusement identique. */
#scroll-container { position: relative; width: 100%; height: 3351vh; z-index: 5; }
/* === SCROLL SECTIONS === */
.scroll-section {
position: absolute; width: 100%; height: 100vh;
display: flex; align-items: center;
pointer-events: none; opacity: 0; visibility: hidden;
transition: opacity 0.15s ease;
}
.scroll-section { transition: opacity 0.4s ease; } /* v69 — fondu plus doux (moins brutal) */
.scroll-section.visible { opacity: 1; visibility: visible; pointer-events: auto; }
/* v145 (Loris — POINT 1) : LE TEXTE SE FIGE CENTRÉ pendant que le film continue de défiler derrière.
Avant, les blocs narratifs étaient en position:absolute DANS la piste de scroll (3250vh) → ils
défilaient AVEC la page → le texte DÉRIVAIT (montait) au lieu de rester centré le temps de lire.
Désormais chaque bloc narratif est VRAIMENT fixé au centre du viewport ; l'apparition/disparition
reste gouvernée par la classe .visible (fenêtre data-enter→data-leave inchangée) → le texte
apparaît, RESTE IMMOBILE quelques secondes, puis s'efface, pendant que l'image de fond bouge.
Ne concerne QUE .section-content : les stats (sortie glissée) et le bloc final CTA (long, doit
défiler) gardent leur comportement absolu. */
.scroll-section.section-content {
position: fixed;
top: 50%;
height: 100dvh; /* dvh : suit la barre du navigateur mobile (POINT 6 : anti-dérive) */
pointer-events: none; /* texte pur, aucun clic → ne recouvre jamais la timeline / le chat */
}
/* Text zones — outer 40% only, NO containers */
.align-left { padding-left: 6vw; padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: 6vw; }
.section-inner { max-width: 36vw; }
.align-right .section-inner { text-align: right; }
.section-label {
display: block;
font-family: var(--font-brand); font-size: 0.7rem; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--gold); margin-bottom: 1rem;
}
/* petite ligne dorée sous le label (séparateur premium) */
.section-label::after {
content: ''; display: block; width: 56px; height: 1.5px; margin-top: 0.7rem;
background: linear-gradient(90deg, #d4af60, transparent);
box-shadow: 0 0 8px rgba(212,175,96,0.5);
}
.align-right .section-label::after { margin-left: auto; background: linear-gradient(90deg, transparent, #d4af60); }
.section-heading {
font-family: var(--font-brand);
font-size: clamp(2.2rem, 4.4vw, 3.8rem);
font-weight: 500; line-height: 1.12;
/* v132 — titres BICOLORES mot à mot (retour Loris : « le gold pour les mots qui
correspondent le plus ») : chaque ligne porte .h-gold ou .h-green */
text-shadow: none;
filter: drop-shadow(0 2px 16px rgba(0,0,0,0.85)) drop-shadow(0 0 28px rgba(0,0,0,0.5));
margin-bottom: 1.2rem;
}
.h-gold {
background: var(--gold-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.h-green {
background: var(--green-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* v132 (Loris) — petite ligne dorée SOUS chaque titre de section */
.section-heading::after {
content: ''; display: block; width: 74px; height: 1.5px; margin-top: 0.85rem;
background: linear-gradient(90deg, #d4af60, rgba(212,175,96,0.35), transparent);
box-shadow: 0 0 10px rgba(212,175,96,0.5);
}
.align-right .section-heading::after { margin-left: auto; background: linear-gradient(90deg, transparent, rgba(212,175,96,0.35), #d4af60); }
/* v78 — LISIBILITÉ UNIVERSELLE : un voile sombre DERRIÈRE chaque bloc de texte, quel que soit
le fond (champ clair, fleur, ciel…). Le texte ressort TOUJOURS. */
.section-inner {
position: relative;
padding: 1.4rem 1.6rem;
border-radius: 16px;
}
.section-inner::before {
content: ''; position: absolute; inset: -6% -4%;
z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 78% 78% at 50% 50%, rgba(4,6,4,0.82), rgba(4,6,4,0.55) 55%, transparent 82%);
border-radius: 24px;
}
/* v78 — FINISHING GOLD sur le texte sous les titres (crème doré chaud, plus le gris terne) */
.section-body {
font-family: var(--font-body);
font-size: clamp(0.85rem, 1.2vw, 1.05rem);
line-height: 1.8;
color: var(--green-bright); /* v131 — vert jungle texte principal (fini le crème/blanc) */
text-shadow: 0 1px 14px rgba(0,0,0,0.95), 0 0 26px rgba(0,0,0,0.7);
}
.section-label { text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
/* v69 — mot en OR dans un paragraphe (l'exigence Kalikana, orfèvrerie végétale) */
.gold-txt { color: var(--gold-bright); font-weight: 600; text-shadow: 0 0 14px rgba(212,175,96,0.35); }
/* === TITRE GOLD (v66) — or dégradé, police KaliKana (partout où le texte est gold) === */
.gold-heading {
background: linear-gradient(180deg, #f8ebb6 0%, var(--gold-bright) 42%, var(--gold) 68%, #9a7c2e 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: none;
filter: drop-shadow(0 3px 16px rgba(0,0,0,0.8)) drop-shadow(0 0 26px rgba(212,175,96,0.28));
}
/* === SECTIONS AUTOUR DE LA FLEUR (v66) — le texte entoure et sublime la fleur ===
Légère asymétrie : gauche un peu plus haut, droite un peu plus bas.
Fines lignes dorées orientées VERS la fleur (centre). */
.flower-left .section-inner { margin-top: -7vh; }
.flower-right .section-inner { margin-top: 7vh; }
/* v69 — LIGNE DORÉE signature Kali Kana : 2px, fine aux pointes, CONSOLIDÉE au centre
(dégradé dense au milieu) + losange doré central + glow. Plus visible sur grand écran. */
.flower-frame .section-inner::after {
content: ''; display: block; margin: 1.7rem auto 0; max-width: 300px;
height: 2px; border-radius: 2px;
/* ligne signature : fine aux pointes, CONSOLIDÉE au centre (dense) + glow */
background: var(--gold-line);
box-shadow: 0 0 14px rgba(212,175,96,0.55);
}
/* === MONARQUE TEXT OVERLAY — flotte par-dessus l'inception canvas === */
#monarque-text-overlay {
position: fixed; bottom: 8vh; left: 50%;
transform: translateX(-50%); text-align: center;
z-index: 6; /* au-dessus de tout */
opacity: 0; pointer-events: none;
}
.product-name {
display: block;
font-family: var(--font-brand);
font-size: clamp(2.2rem, 5.2vw, 4.2rem);
font-weight: 500; color: var(--cream);
letter-spacing: 0.06em;
text-shadow: 0 4px 40px rgba(0,0,0,0.95), 0 0 80px rgba(0,0,0,0.7);
}
.product-sub {
display: block;
font-family: var(--font-brand); font-size: 0.8rem; font-weight: 500;
color: var(--gold); letter-spacing: 0.42em; text-transform: uppercase;
margin-top: 0.55rem;
text-shadow: 0 2px 15px rgba(0,0,0,0.9);
}
/* ligne dorée entre le nom et la collection */
.product-sub::before {
content: ''; display: block; width: 74px; height: 1.5px; margin: 0 auto 0.7rem;
background: linear-gradient(90deg, transparent, #f6e27a, #d4af60, #f6e27a, transparent);
box-shadow: 0 0 10px rgba(212,175,96,0.5);
}
/* === STATS (v69 — refonte : gold riche, ligne fine sous chaque chiffre, plus aérée) === */
.section-stats { justify-content: center; padding: 0 8vw; }
.stats-grid { display: flex; gap: 6vw; align-items: flex-start; justify-content: center; width: 100%; }
.stat { text-align: center; position: relative; padding-bottom: 1.5rem; }
/* ligne dorée fine, consolidée au centre, sous CHAQUE stat */
.stat::after {
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 74%; height: 2px; border-radius: 2px;
background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.5);
}
.stat-number {
font-family: var(--font-brand); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; line-height: 1;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 3px 18px rgba(212,175,96,0.3));
}
.stat-suffix { font-family: var(--font-brand); font-size: clamp(1rem, 2vw, 1.8rem); font-weight: 600; color: var(--gold-bright); margin-left: 0.1em; }
.stat-label { font-family: var(--font-body); font-size: 0.72rem; color: var(--cream-soft); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.7rem; max-width: 180px; margin-left: auto; margin-right: auto; line-height: 1.5; }
/* === SCROLL IMAGES — fixed product images that appear/disappear === */
.scroll-image {
position: fixed; inset: 0; z-index: 2;
display: flex; align-items: center; justify-content: center;
background: #000; opacity: 0; pointer-events: none;
transition: opacity 0.15s ease;
}
.scroll-image.visible { opacity: 1; }
.scroll-image-img {
width: auto; height: 80vh; max-width: 60vw;
object-fit: contain;
filter: contrast(1.1) saturate(1.1);
}
/* Vignette radiale — fond le blanc vers le noir */
.scroll-image-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse 45% 45% at center, transparent 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.9) 55%, #000 70%);
pointer-events: none;
}
/* Cigar parade — produit centré + label en bas */
.cigar-parade { flex-direction: column; }
.cigar-img { height: 65vh; max-width: 50vw; }
.cigar-label {
position: absolute; bottom: 10vh; left: 50%;
transform: translateX(-50%); text-align: center;
z-index: 3;
}
.cigar-name {
display: block;
font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800; color: var(--cream);
letter-spacing: 0.08em;
text-shadow: 0 4px 40px rgba(0,0,0,0.95), 0 0 80px rgba(0,0,0,0.7);
}
.cigar-line {
display: block;
font-family: var(--font-heading); font-size: 0.6rem; font-weight: 400;
color: var(--gold-dim); letter-spacing: 0.5em; text-transform: uppercase;
margin-top: 0.3rem;
text-shadow: 0 2px 15px rgba(0,0,0,0.9);
}
/* === CTA === */
.section-cta { justify-content: center; align-items: flex-start; padding-top: 60px; }
.cta-content { text-align: center; max-width: 680px; margin: 0 auto; padding: 0 2rem; }
.cta-logo { width: 90px; height: auto; margin: 0 auto 2rem; filter: drop-shadow(0 0 40px rgba(201,168,76,0.15)); }
.cta-heading { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 800; color: var(--cream); line-height: 1.1; text-shadow: 0 4px 40px rgba(0,0,0,0.8); margin-bottom: 0.8rem; }
.cta-body { font-family: var(--font-body); font-size: 1rem; color: var(--cream-soft); margin-bottom: 2.5rem; text-shadow: 0 2px 15px rgba(0,0,0,0.8); }
.cta-button {
display: inline-block;
font-family: var(--font-heading); font-size: 0.65rem; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 1rem 2.5rem; margin: 0 0.4rem 0.6rem;
transition: all 0.4s ease;
}
.cta-button-primary { color: var(--bg); background: var(--gold); }
.cta-button-primary:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,0.25); color: var(--bg); }
.cta-button-secondary { color: var(--gold); background: transparent; border: 1px solid rgba(201,168,76,0.25); }
.cta-button-secondary:hover { border-color: var(--gold); background: rgba(201,168,76,0.05); color: var(--gold-bright); }
/* === FINISHING PREMIUM (v63) === */
.cta-logo { width: 132px; margin-bottom: 1.6rem; filter: drop-shadow(0 0 60px rgba(201,168,76,0.35)) drop-shadow(0 0 12px rgba(201,168,76,0.5)); animation: ctaGlow 4.5s ease-in-out infinite; }
@keyframes ctaGlow {
0%,100% { filter: drop-shadow(0 0 50px rgba(201,168,76,0.28)) drop-shadow(0 0 10px rgba(201,168,76,0.45)); }
50% { filter: drop-shadow(0 0 78px rgba(201,168,76,0.5)) drop-shadow(0 0 16px rgba(201,168,76,0.7)); }
}
.cta-heading {
font-family: var(--font-brand); font-size: clamp(1.8rem, 4.2vw, 2.8rem); font-weight: 800;
white-space: nowrap; letter-spacing: 0.14em; margin: 0 0 0.5rem; text-indent: 0.14em;
background: var(--gold-grad); /* v69 — gold canonique riche (KALIKANA final) */
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 4px 24px rgba(212,175,96,0.28));
}
.cta-underline {
display: block; width: 0; height: 2px; margin: 0.2rem auto 0.9rem;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
box-shadow: 0 0 18px rgba(201,168,76,0.6);
transition: width 1.4s cubic-bezier(.19,1,.22,1) 0.3s;
}
.section-cta.visible .cta-underline { width: 210px; }
.cta-tagline { font-family: var(--font-body); font-size: clamp(0.9rem,2vw,1.15rem); color: var(--cream-soft); margin: 0 0 0.9rem; letter-spacing: 0.02em; }
.cta-tagline em { font-style: italic; color: var(--gold-bright); }
.cta-lines {
display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.1rem;
font-family: var(--font-brand); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
}
.cta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold-bright); }
.cta-features {
list-style: none; padding: 0; margin: 0 auto 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
align-items: center; justify-content: center; max-width: 620px;
}
.cta-features li {
position: relative; font-family: var(--font-body); font-size: 0.82rem; color: var(--cream-soft);
letter-spacing: 0.04em; padding-left: 1rem;
}
.cta-features li::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(45deg);
width: 6px; height: 6px; transform-origin: center;
background: linear-gradient(135deg, #f8ebb6, #d4af60); /* v69 — losange doré PLEIN (fini le contour bleuté) */
box-shadow: 0 0 6px rgba(212,175,96,0.6);
}
.cta-actions { margin-bottom: 2rem; }
/* === BOUTON MAGNET FINAL — cartes green & gold lumineuses (Pro / Particulier) === */
.cta-magnet-wrap {
display: flex; gap: 1.8rem; justify-content: center; align-items: stretch; flex-wrap: wrap;
margin: 0.2rem auto 0.7rem; perspective: 1000px;
}
/* v72 — les deux cartes ont la même hauteur et le bouton « ACCÉDER » est aligné au MÊME niveau */
.cta-magnet { display: flex; flex-direction: column; }
.cta-magnet .cm-sub { flex: 1 1 auto; } /* pousse le « Accéder » en bas, aligné */
.cta-magnet .cm-go { margin-top: auto; align-self: center; }
@property --cm-angle { syntax: ''; initial-value: 0deg; inherits: false; }
/* v70 — cartes magnétiques : FINI le vert caca d'oie. Verre NOIR premium + contour OR rotatif. */
.cta-magnet {
position: relative; overflow: hidden;
width: 250px; padding: 0.85rem 1.1rem 0.75rem;
border-radius: 20px;
border: 2px solid transparent;
background:
radial-gradient(120% 80% at 50% 0%, rgba(212,175,96,0.10), transparent 70%) padding-box,
linear-gradient(155deg, rgba(12,11,8,0.97), rgba(24,20,10,0.96)) padding-box,
conic-gradient(from var(--cm-angle), #b8860b, #f8ebb6, #d4af60, #a8842f, #f0d488, #d4af60, #b8860b) border-box;
box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 28px rgba(212,175,96,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
text-align: center; text-decoration: none;
transform-style: preserve-3d;
transition: transform 0.2s ease, box-shadow 0.35s ease;
animation: magnetGlow 3.4s ease-in-out infinite, cmRotate 5s linear infinite;
}
@keyframes cmRotate { to { --cm-angle: 360deg; } }
@keyframes magnetGlow {
0%,100% { box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 26px rgba(212,175,96,0.16), inset 0 1px 0 rgba(255,255,255,0.06); }
50% { box-shadow: 0 12px 50px rgba(0,0,0,0.6), 0 0 46px rgba(212,175,96,0.36), inset 0 1px 0 rgba(255,255,255,0.10); }
}
.cta-magnet:hover {
border-color: rgba(212,175,96,0.95);
box-shadow: 0 22px 64px rgba(0,0,0,0.65), 0 0 66px rgba(212,175,96,0.55);
}
.cm-icon { display: block; color: var(--gold); font-size: 0.85rem; margin-bottom: 0.55rem; }
.cm-top {
display: block; font-family: var(--font-brand); font-size: 1.08rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
background: linear-gradient(180deg,#f6e8bf,#d4af60 55%,#b5872f);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 0.4rem;
}
.cm-sub { display: block; font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.07em; color: var(--cream-soft); opacity: 0.72; margin-bottom: 1.1rem; }
.cm-go { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-brand); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); } /* v70 — or, plus de vert */
.cm-arrow { transition: transform 0.3s ease; font-size: 1rem; }
.cta-magnet:hover .cm-arrow { transform: translateX(6px); }
.cm-shine {
position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,242,205,0.28), transparent);
transform: skewX(-18deg); pointer-events: none;
transition: left 0.75s ease;
}
.cta-magnet:hover .cm-shine { left: 140%; }
.cta-collections a { color: inherit; text-decoration: none; display: block; transition: color 0.25s; }
.cta-collections a:hover { color: var(--gold-bright); }
/* v70 — FOOTER : lignes fines dorées (séparateurs premium) au-dessus des liens et de la signature */
.cta-footer-links::before {
content: ''; display: block; width: min(300px, 58%); height: 2px; margin: 0.5rem auto;
background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.45); border-radius: 2px;
}
/* v135 (Loris) — on AÈRE : la ligne du dessus est plus détachée des cartes espace pro/particulier */
.cta-footer-links { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem; margin: 1.6rem auto 0.9rem; }
/* dans un flex, le séparateur doit prendre toute la ligne */
.cta-footer-links::before { flex: 0 0 100%; max-width: 420px; margin: 0.2rem auto 1rem; }
.cta-footer-links a { font-family: var(--font-brand); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); text-decoration: none; transition: color 0.25s; }
.cta-footer-links a:hover { color: var(--gold-bright); }
/* v135 (Loris) — une belle ligne dorée EN DESSOUS de « Boutique Particuliers · Espace Pro » */
.cta-footer-links::after {
content: ''; flex: 0 0 100%; max-width: 420px; height: 2px; margin: 1rem auto 0.2rem;
background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.45); border-radius: 2px;
}
.cfl-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-dim); opacity: 0.5; }
/* v72 — le texte de fin REMONTE : il ne croise plus le « SCROLL » et sort de la zone d'ombre */
.cta-seo {
max-width: 760px; margin: 0.2rem auto 0.4rem;
font-family: var(--font-body); font-size: 0.5rem; line-height: 1.4;
color: var(--cream-soft); opacity: 0.72; text-align: center;
}
.cta-seo strong { color: var(--gold-dim); font-weight: 600; }
.cta-signature {
font-family: var(--font-brand); font-size: 0.6rem; font-weight: 400;
letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-dim);
margin-bottom: 0.2rem; /* dégage le bas sans exploser la hauteur du bloc */
}
/* le cue « Scroll » disparaît dès qu'on quitte le haut de page (il n'a rien à faire en bas) */
.scroll-cue { transition: opacity 0.5s ease; }
.scroll-cue:not(.visible) { opacity: 0 !important; }
/* v75 — LOGO FINAL : LIAISON PARFAITE.
Le logo qui tourne EST la DERNIÈRE FRAME de la vidéo (extraite + détourée) → quand la
poussière d'étoiles se termine, l'image affichée est EXACTEMENT la même → aucune rupture.
La vidéo et l'image sont calées à la même échelle : le logo occupe 34 % de la largeur de la
vidéo → vidéo à 240 % de la scène, image à 82 % → ils se superposent au pixel. */
.cta-logo3d-scene {
position: relative; perspective: 1200px;
width: clamp(150px, 12vw, 185px); aspect-ratio: 1;
margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center;
}
.cta-logo-video {
position: absolute; top: 49%; left: 50%;
transform: translate(-50%, -50%);
width: 240%; height: auto;
opacity: 0; transition: opacity 0.55s ease;
pointer-events: none;
mix-blend-mode: screen; /* le noir devient transparent */
filter: contrast(1.3) brightness(1.03) saturate(1.06);
-webkit-mask-image: radial-gradient(circle at 50% 49%, #000 24%, rgba(0,0,0,0.6) 31%, transparent 40%);
mask-image: radial-gradient(circle at 50% 49%, #000 24%, rgba(0,0,0,0.6) 31%, transparent 40%);
}
.cta-logo3d {
position: absolute; top: 45%; left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 63%; height: auto; transform-style: preserve-3d; /* v76 — CALÉ sur la taille du logo à la fin de la poussière (il sautait : 100% vs 63%) */
opacity: 1; transition: opacity 0.55s ease;
filter: drop-shadow(0 0 46px rgba(212,175,96,0.45)) drop-shadow(0 0 14px rgba(212,175,96,0.55));
}
/* 2 rotations complètes (le translate DOIT être conservé dans les keyframes, sinon le logo saute) */
.cta-logo3d.spinning { animation: logoSpin5 13s linear; } /* v76 — 5 TOUPIES */
@keyframes logoSpin5 {
from { transform: translate(-50%, -50%) rotateY(0deg); }
to { transform: translate(-50%, -50%) rotateY(1800deg); } /* 5 tours complets */
}
/* univers produit */
.cta-catalog { position: relative; font-family: var(--font-body); font-size: clamp(0.85rem,1.8vw,1rem); color: var(--cream-soft); margin: 0 0 1.2rem; letter-spacing: 0.02em; }
.cta-catalog strong { color: var(--gold-bright); font-weight: 700; }
/* v135 (Loris) — ligne dorée sous « +150 références réparties sur 5 catalogues » */
.cta-catalog::after {
content: ''; display: block; width: min(280px, 54%); height: 2px; margin: 0.9rem auto 0;
background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.4); border-radius: 2px;
}
.cta-collections { list-style: none; padding: 0; margin: 0 auto 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; justify-content: center; max-width: 560px; }
/* v72 — pastilles : MÊME LANGAGE que les cartes magnétiques (contour or conic rotatif,
verre noir, reflet qui balaie). Harmonie totale du bas de page. */
.cta-collections li {
position: relative; overflow: hidden;
font-family: var(--font-brand); font-size: 0.64rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold-bright);
border: 1.5px solid transparent; border-radius: 22px;
padding: 0.46rem 1.05rem;
background:
linear-gradient(160deg, rgba(14,12,8,0.95), rgba(26,21,10,0.92)) padding-box,
conic-gradient(from var(--cm-angle), #b8860b, #f8ebb6, #d4af60, #a8842f, #f0d488, #d4af60, #b8860b) border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(0,0,0,0.35);
animation: cmRotate 5s linear infinite;
transition: color 0.3s ease, box-shadow 0.35s ease, transform 0.2s ease;
}
/* le REFLET doré qui balaie (même effet que les cartes) */
.cta-collections li::after {
content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,242,205,0.22), transparent);
transform: skewX(-18deg); pointer-events: none;
animation: bfShine 5.5s ease-in-out infinite;
}
.cta-collections li:nth-child(2n)::after { animation-delay: 0.7s; }
.cta-collections li:nth-child(3n)::after { animation-delay: 1.4s; }
.cta-collections li:hover {
color: var(--gold-bright); transform: translateY(-2px); /* v131 — plus de blanc, même au hover */
box-shadow: 0 0 20px rgba(212,175,96,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* === CRYSTAL CANDY — variété phare (découpée avec la fleur) === */
#crystal-candy-overlay {
position: fixed; top: 40%; left: 50%; transform: translateX(-50%);
z-index: 7; text-align: center; opacity: 0; pointer-events: none;
}
.cc-slice { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.cc-slice.cc-top { position: relative; clip-path: inset(0 0 50% 0); }
.cc-slice.cc-bottom { position: absolute; top: 0; left: 0; width: 100%; clip-path: inset(50% 0 0 0); }
.cc-tag { font-family: var(--font-brand); font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.cc-main {
font-family: var(--font-brand); font-size: clamp(2.4rem, 5.8vw, 4.2rem); font-weight: 500; letter-spacing: 0.02em; line-height: 1;
background: linear-gradient(180deg,#f8ebb6 0%,var(--gold-bright) 50%,var(--gold) 74%,#9a7c2e 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
text-shadow: 0 6px 40px rgba(0,0,0,0.7);
}
.cc-underline { display: block; width: 0; height: 2px; margin: 0.45rem auto 0.55rem; background: linear-gradient(90deg,transparent,var(--gold-bright),transparent); box-shadow: 0 0 16px rgba(201,168,76,0.65); transition: width 1s cubic-bezier(.19,1,.22,1); }
#crystal-candy-overlay.visible .cc-underline { width: 220px; }
.cc-sub { font-family: var(--font-body); font-size: clamp(0.8rem,1.6vw,0.95rem); color: var(--cream-soft); letter-spacing: 0.14em; text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
/* === SOUND TOGGLE === */
/* v132 — remonté : le launcher du chatbot Kalia occupe désormais le coin bas-droite */
#sound-toggle {
position: fixed;
bottom: 7rem;
right: 2rem;
z-index: 200;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--gold-dim);
background: rgba(7, 7, 7, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, border-color 0.3s ease, transform 0.2s ease;
}
#sound-toggle.visible {
opacity: 1;
pointer-events: auto;
}
#sound-toggle:hover {
border-color: var(--gold-bright);
transform: scale(1.08);
}
#sound-toggle svg { width: 20px; height: 20px; }
#sound-toggle.muted .sound-wave-1,
#sound-toggle.muted .sound-wave-2 { display: none; }
#sound-toggle.muted::after {
content: '';
position: absolute;
width: 2px;
height: 24px;
background: var(--gold);
transform: rotate(45deg);
border-radius: 1px;
}
/* === v132 — LE SON KALIKANA UNIFIÉ (façon Kalikorp) : pastille bas-gauche + modale === */
#kk-sound-pill {
position: fixed; left: 1.4rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
z-index: 200;
display: flex; align-items: stretch; overflow: hidden;
border: 1px solid rgba(212,175,96,0.4); border-radius: 999px;
background: linear-gradient(135deg, rgba(12,14,9,0.88), rgba(8,10,6,0.94));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,175,96,0.12);
opacity: 0.9; transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
#kk-sound-pill:hover { opacity: 1; border-color: rgba(240,212,136,0.75); }
#kk-sound-pill.playing {
border-color: rgba(240,212,136,0.7);
animation: musicPulse 2.6s ease-in-out infinite;
}
@keyframes musicPulse {
0%, 100% { box-shadow: 0 0 14px rgba(212,175,96,0.25); }
50% { box-shadow: 0 0 30px rgba(212,175,96,0.55); }
}
#kk-sound-pill button { background: none; border: none; cursor: pointer; color: var(--gold-bright); }
#kk-sound-pill .ksp-play {
display: flex; align-items: center; justify-content: center;
padding: 0.62rem 0.65rem 0.62rem 0.85rem;
border-right: 1px solid rgba(212,175,96,0.25);
}
#kk-sound-pill .ksp-open {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.62rem 0.95rem 0.62rem 0.7rem;
}
#kk-sound-pill .ksp-label {
font-family: var(--font-brand); font-size: 0.74rem; font-weight: 500;
letter-spacing: 0.06em; color: var(--gold-bright); white-space: nowrap;
max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
}
/* — v133 : le PETIT LECTEUR flottant à l'onde dorée (s'ouvre dès qu'une track se lance) — */
#kk-player {
position: fixed; left: 1.4rem;
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4rem + 52px);
z-index: 210; width: min(330px, calc(100vw - 2rem));
padding: 0.65rem 0.75rem 0.6rem;
border: 1px solid rgba(212,175,96,0.45); border-radius: 16px;
background: linear-gradient(150deg, rgba(12,14,9,0.93), rgba(8,10,6,0.96));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,175,96,0.14);
opacity: 0; transform: translateY(14px); pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease;
}
#kk-player.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#kk-player .kp-wave { display: block; margin: 0 auto 0.35rem; }
#kk-player .kp-row { display: flex; align-items: center; gap: 0.55rem; }
#kk-player .kp-row button { background: none; border: none; cursor: pointer; color: var(--gold-bright); display: flex; align-items: center; }
#kk-player .kp-title {
flex: 1 1 auto; min-width: 0;
font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.04em;
color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kk-player .kp-time { font-family: var(--font-body); font-size: 0.6rem; color: var(--green-soft); flex: 0 0 auto; }
#kk-player .kp-stop { font-size: 1.15rem; line-height: 1; color: var(--gold-dim); }
#kk-player .kp-stop:hover { color: var(--gold-bright); }
#kk-player .kp-seek {
margin-top: 0.45rem; height: 4px; border-radius: 4px; cursor: pointer;
background: rgba(212,175,96,0.16);
}
#kk-player .kp-seek-fill {
width: 0; height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #a8842f, #f0d488, #d4af60);
box-shadow: 0 0 8px rgba(212,175,96,0.55);
}
/* — la modale — */
#kk-sound-modal { position: fixed; inset: 0; z-index: 400; display: none; }
#kk-sound-modal.open { display: block; }
#kk-sound-modal .ksm-backdrop { position: absolute; inset: 0; background: rgba(3,4,2,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#kk-sound-modal .ksm-card {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(430px, 92vw); max-height: 86dvh; overflow-y: auto;
padding: 1.5rem 1.6rem 1.4rem; border-radius: 20px;
border: 1.5px solid rgba(212,175,96,0.55);
background: linear-gradient(160deg, rgba(13,15,9,0.98), rgba(22,19,9,0.97));
box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 40px rgba(212,175,96,0.18);
text-align: center;
}
.ksm-close {
position: absolute; top: 0.6rem; right: 0.85rem;
background: none; border: none; cursor: pointer;
font-size: 1.6rem; line-height: 1; color: var(--gold-dim);
transition: color 0.25s;
}
.ksm-close:hover { color: var(--gold-bright); }
.ksm-label { display: block; font-family: var(--font-brand); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.ksm-title {
margin-top: 0.4rem; font-family: var(--font-brand); font-weight: 500;
font-size: 1.5rem; line-height: 1.15;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.ksm-line { display: block; width: 150px; height: 2px; margin: 0.7rem auto; border-radius: 2px; background: var(--gold-line); box-shadow: 0 0 10px rgba(212,175,96,0.45); }
.ksm-intro { font-family: var(--font-body); font-size: 0.8rem; color: var(--green-bright); margin-bottom: 0.9rem; }
.ksm-tracks { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
.ksm-tracks li button {
display: flex; align-items: center; gap: 0.7rem; width: 100%;
padding: 0.55rem 0.7rem; border: none; border-radius: 10px;
background: none; cursor: pointer;
color: var(--green-bright); transition: background 0.25s, color 0.25s;
}
.ksm-tracks li button:hover { background: rgba(212,175,96,0.08); color: var(--gold-bright); }
.ksm-tracks li.current button { background: rgba(212,175,96,0.12); color: var(--gold-bright); }
.ksm-tracks .kst-ico { display: flex; color: var(--gold); flex: 0 0 auto; }
.ksm-tracks .kst-name { font-family: var(--font-brand); font-size: 0.82rem; letter-spacing: 0.04em; }
.ksm-embed { margin-bottom: 0.9rem; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.4); }
.ksm-embed iframe { display: block; border-radius: 14px; }
.ksm-spotify-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.6rem 1.2rem; border-radius: 999px;
border: 1px solid rgba(29,185,84,0.55);
background: rgba(29,185,84,0.1);
font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
color: #6fd398; text-decoration: none;
transition: background 0.3s, box-shadow 0.3s;
}
.ksm-spotify-btn:hover { background: rgba(29,185,84,0.2); box-shadow: 0 0 22px rgba(29,185,84,0.3); }
/* === MOBILE === */
/* ============================================================
v77 — RESPONSIVE MOBILE BÉTONNÉ (portrait ≤ 900px)
============================================================ */
@media (max-width: 900px) {
/* v141 — .nav-links retiré (les liens sont absorbés par la timeline du Déroulé) */
.site-header { height: 46px; }
.nav-logo img { width: 28px; }
#scroll-container { height: 1030vh; } /* v148 (Loris : « diminuer de 2/3 MINIMUM le nombre de scrolls ») — 3093vh ÷ 3. Voir la note complète plus bas. */
.marquee-text { font-size: 20vw; }
#sound-toggle { bottom: calc(1rem + 76px); right: 1rem; width: 40px; height: 40px; }
/* pill son mobile : compacte (icônes seules), coin bas-gauche */
#kk-sound-pill { left: 0.9rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem); }
#kk-sound-pill .ksp-label { display: none; }
#kk-sound-pill .ksp-open { padding: 0.62rem 0.8rem 0.62rem 0.65rem; }
/* le header mobile : brand animé conservé, tagline masquée si trop étroit */
.site-header { height: 62px; }
.nav-logo-scene { width: 48px; height: 48px; flex-basis: 48px; } /* v147 — un peu plus gros (Loris) */
.nav-brand-name { font-size: 0.78rem; }
.nav-brand-tag { font-size: 0.7rem; }
.section-heading::after, .align-right .section-heading::after { margin-left: auto; margin-right: auto; background: var(--gold-line); }
.canvas-wrap { background: transparent; }
.banner-img { object-position: center center; }
/* --- v131 — TIROIRS (bannière split) : ENFIN des règles mobile. Avant : les images
dimensionnées en hauteur d'écran (104 % / 114 %) devenaient ÉNORMES en portrait et
cachaient tout le centre (« on ne voit même pas le film derrière »). Désormais :
deux bandes latérales discrètes, le centre reste dégagé (jungle + boutons visibles). --- */
/* v134 — REFONTE MOBILE des tiroirs (Loris : « la manière desktop ne peut pas marcher sur
téléphone »). On ABANDONNE le mur pleine largeur + clip. À la place, deux fines bandes
latérales DÉDIÉES qui tiennent toute la hauteur d'écran :
· GAUCHE = image mobile purpose-built (bord droit des buds sur noir = découpe naturelle) ;
· DROITE = l'image produits, calée à droite, largeur réduite.
Le fond noir natif des deux images se fond dans la page → aucune ligne droite, découpe propre.
Le centre reste TOTALEMENT dégagé pour le film + la carte. */
.banner-half-left, .banner-half-right {
clip-path: none !important;
-webkit-mask-image: none !important; mask-image: none !important;
}
.banner-img-left { display: none; } /* le mur desktop disparaît en portrait */
/* v135 (Loris) — fleurs déplacées vers la GAUCHE (bande plus fine, collée au bord) → un vrai
ESPACE NOIR reste derrière le logo au centre. Le bord droit = la découpe naturelle des buds. */
.banner-half-left { width: 27vw; right: auto; left: 0; overflow: hidden; }
.m-banner-img-left {
/* v144 (Loris : « déplace un tout petit peu vers la droite les fleurs du côté gauche.
Vraiment un tout petit peu ») — 2vw, pas plus : la découpe naturelle des buds reste face
au centre, on gagne juste un souffle. */
display: block; position: absolute;
right: -2vw; left: auto; top: 50%; transform: translateY(-50%);
height: 100dvh; width: auto; max-width: none;
object-fit: cover; object-position: right center; /* on voit le bord droit = la découpe, face au centre */
}
/* v136 (Loris : « on ne voit que le Kali Blunt, coupure nette sur le Trio — montre le reste
avec Baron puis Monarque ») — la bande cadre désormais sur les DEUX CIGARES (Baron vert +
Monarque brun, qui vivent dans la moitié gauche de l'image), plus sur la boîte Trio.
Bande un peu plus large + object-position calé sur les cigares. (Laptop INCHANGÉ.) */
.banner-half-right { width: 50vw; left: auto; right: 0; overflow: hidden; }
/* v143 (Loris, photo de SON téléphone : « on voit pas les cigares ! que le trio coupé »).
🔴 CAUSE RACINE : avec `width: auto`, la boîte de l'image PREND le ratio de l'image →
`object-fit`/`object-position` ne s'appliquent à RIEN (aucun recadrage à faire). Le
« object-position: 24% = centre les deux cigares » de v136 était donc un VŒU PIEUX : il
n'a jamais rien fait. Ce qui cadrait réellement, c'est `right: -2vw` → l'image (516px de
large pour 195px de fenêtre) était collée À DROITE → on ne voyait que sa FIN = le pack Trio.
Les 2 cigares (moitié GAUCHE de l'image) étaient hors cadre depuis le début.
✅ FIX : on ancre à GAUCHE (`left`), et on dimensionne pour que les DEUX cigares tiennent
dans la bande (image 80dvh → 480px de large ; les cigares = 0→43% = 0→207px ; fenêtre 195px). */
/* v144 (Loris : « on voit enfin les cigares, mais ils sont TRÈS MAL PLACÉS. Place-les au bord
droit, PLUS GRANDS. On laisse tomber le Trio sur mobile, on n'a pas assez de place »).
L'image = [2 cigares | pack Trio]. Sur 195px de bande on ne peut afficher QUE l'un des deux :
Loris tranche → LES CIGARES, et le Trio sort du cadre (assumé).
Comment on colle les cigares au BORD DROIT : les cigares occupent la moitié GAUCHE de
l'image ; on pousse donc l'image VERS LA DROITE (`left` positif) jusqu'à ce que leur bord
droit touche celui de la bande. height 96dvh (au lieu de 80) = « plus grands ». */
.banner-produits {
height: 96dvh; width: auto; max-width: none;
left: 3vw; right: auto; top: 2dvh; bottom: auto;
object-fit: contain;
}
.dynasty-glow { display: none; }
/* --- v131 — ZONE UTILE : caches des bandes aztèques réduits (en dvh → suit la barre du
navigateur) → le film respire au milieu de l'écran. --- */
.band-mask { height: 6dvh; }
/* v144 avait RALLONGÉ la piste mobile à 4700vh pour arrêter le « saut de sections ». Mais v144 a
AUSSI dompté l'inertie tactile de Lenis (touchInertiaMultiplier 18→5, touchMultiplier 0.6) — du
coup 4700vh est devenu le problème INVERSE : « il faut scroller sans fin pour avancer un petit
peu » (Loris, POINT 6). v145 : retour à ~3000vh (nettement moins interminable ; l'inertie
tempérée empêche toujours le saut de sections). Le desktop garde ses 3250vh — il n'entre JAMAIS
dans ce media query. Valeur à affiner sur vrai mobile si besoin (c'est ce seul chiffre).
v146 : 3000→3093vh (×1.031) en cohérence avec le desktop (rythme du début préservé).
v148 (Loris : « diminuer de 2/3 MINIMUM le nombre de scroll nécessaire pour faire tout le
circuit ») : 3093 → 1030vh (÷3 pile). Les ancres des textes et sections sont en % de la
piste → le rythme RELATIF est intact, seule la longueur totale change. L'inertie tactile
reste celle de v144 (tempérée) : un flick avance 3× plus dans le film, c'est le but. */
#scroll-container { height: 1030vh; }
/* v143 (Loris : « grosse tache sombre au centre, c'est n'importe quoi »).
CAUSE : le voile de la jungle assombrit le centre à 62% (une ellipse 42%×70% posée en
plein milieu) — pensé pour la lisibilité des boutons sur un large écran d'ordi, il devient
une TACHE opaque sur 390px de large. La carte « Voir le film » a déjà son propre fond :
le voile n'a pas à noircir l'écran en plus. → très adouci en portrait. */
#intro-jungle-veil {
background:
radial-gradient(ellipse 62% 46% at 50% 46%, rgba(5,7,5,0.30), rgba(5,7,5,0.12) 62%, transparent 84%),
linear-gradient(180deg, rgba(4,6,4,0.42) 0%, rgba(4,6,4,0.06) 38%, rgba(4,6,4,0.58) 100%);
}
/* --- BOUTON D'INTRO : compact et VRAIMENT centré (le translateX résiduel le décentrait) --- */
#intro-actions {
top: 50%; left: 0; right: 0; bottom: auto;
margin: 0 auto; width: fit-content;
transform: translateY(-50%);
align-items: center; gap: 0.7rem;
}
.btn-film { width: min(58vw, 220px); padding: 1.1rem 1rem 0.95rem; }
.bf-top { font-size: 1.25rem; }
.bf-sub { font-size: 0.55rem; letter-spacing: 0.22em; }
/* v151 — la pilule suit la largeur de la carte du film sur mobile */
.btn-skip { text-align: center; width: min(58vw, 220px); max-width: 74vw; }
.bs-main { font-size: 0.94rem; letter-spacing: 0.12em; padding: 0.82rem 0.8rem; }
.bs-main::after { font-size: 1.02rem; }
.bs-note { font-size: 0.86rem; }
/* --- SECTIONS TEXTE : pleine largeur, centrées --- */
.align-left, .align-right { padding: 0 6vw; justify-content: center; }
.section-inner { max-width: 88vw; text-align: center !important; }
.align-right .section-inner { text-align: center; }
.section-heading { font-size: clamp(1.8rem, 8vw, 2.4rem); }
.section-label::after, .align-right .section-label::after { margin-left: auto; margin-right: auto; }
/* v134 (Loris : « ça fait un bloc sur mobile, sépare les deux ») — on les ÉLOIGNE nettement :
Crystal Candy tout en HAUT, L'Art de Sublimer tout en BAS, blocs compacts, vrai vide entre. */
.flower-left .section-inner { margin-top: -40vh !important; max-width: 82vw; }
.flower-right .section-inner { margin-top: 38vh !important; max-width: 82vw; }
.flower-frame .section-heading { font-size: clamp(1.7rem, 8vw, 2.2rem); }
.flower-frame .section-body { font-size: 0.82rem; line-height: 1.55; }
.flower-frame .section-inner::after { max-width: 160px; margin-top: 1rem; }
/* --- STATS : empilées --- */
.stats-grid { flex-direction: column; gap: 2.4rem; }
.stat::after { width: 50%; }
/* --- OVERLAYS (noms produits, collection chanvre, bouton secret) --- */
#product-name-overlay { top: 12vh; }
/* v149b (Loris : « overlay de texte bizarre » au début) — le titre « Le Monarque » de
l'ouverture vivait en BAS 8vh : sur mobile c'est PILE la carte « Le Déroulé » → textes
superposés illisibles. Remonté en haut, comme les noms de produits. Desktop inchangé. */
#monarque-text-overlay { bottom: auto; top: 13vh; }
#product-name-overlay .pn-main { font-size: clamp(2.2rem, 11vw, 3.4rem); }
#hemp-overlay { top: 13vh; width: 88vw; }
.hemp-title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
#alchimiste-secret { top: 66%; }
.as-txt { font-size: 0.6rem; }
/* --- FOND JUNGLE : cover, bien cadré sur écran étroit --- */
#intro-jungle { object-position: 60% center; }
/* --- v134 — BLOC FINAL : Loris « en bas mobile je n'ai QUE l'espace pro, le particulier est
coupé, le scroll s'arrête avant ». Cause : la section était CENTRÉE (translateY -50%) et son
bas débordait SOUS la fin du scroll-container = inatteignable. Fix : on ancre la section en
HAUT (flex-start), hauteur auto, et un grand padding-bottom dégage les 2 cartes + le footer
au-dessus des pastilles fixes. Les !important battent le style inline posé par setupSection. */
.section-cta {
top: auto !important; bottom: 0 !important; transform: none !important;
height: auto !important; min-height: 100dvh;
align-items: flex-start !important;
padding-top: 8dvh; padding-bottom: 22dvh;
}
.cta-content { padding-bottom: 0; }
.cta-logo3d-scene { width: clamp(110px, 30vw, 140px); }
.cta-heading { font-size: clamp(1.7rem, 9vw, 2.3rem); }
.cta-magnet-wrap { flex-direction: column; align-items: center; gap: 0.9rem; }
.cta-magnet { width: min(80vw, 300px); }
.cta-collections { max-width: 92vw; }
.cta-footer-links { gap: 0.6rem; }
.cta-seo { display: none; } /* trop long en portrait, on dégage pour voir les 2 cartes */
/* --- v134 — ÉLÉMENTS FIXES DU BAS : plus rien de coupé. Étagés proprement au-dessus de la
safe-area, sans se chevaucher : son (bas-gauche) · chat Kalia (bas-droite) · lecteur
onde (au-dessus du son) · reprendre-le-film (pastille centrée, encore au-dessus). --- */
#kk-sound-pill { left: 0.8rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
#kk-player { left: 0.8rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem + 58px); width: min(300px, calc(100vw - 1.6rem)); }
.kk-widget { right: 0.6rem !important; left: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important; max-width: calc(100vw - 1.2rem) !important; }
/* v135 (Loris : « le chatbot apparaît coupé à droite ») — le panneau Kalia ne déborde plus :
tout ce qui est ouvert par le widget est contraint dans le viewport. */
#kk-chat-widget [class*="panel"], #kk-chat-widget [class*="Panel"],
#kk-chat-widget [class*="modal"], #kk-chat-widget [class*="sheet"],
#kk-chat-widget [class*="teaser"], #kk-chat-widget [class*="Teaser"],
#kk-chat-widget [class*="bubble"], #kk-chat-widget [class*="Bubble"],
#kk-chat-widget [class*="tooltip"],
#kk-chat-widget > div { max-width: calc(100vw - 1.4rem) !important; right: 0.6rem !important; left: auto !important; box-sizing: border-box !important; }
/* v141 — la bulle d'accroche « Bienvenue dans le film » (.kk-teaser, vraie classe vérifiée
dans le DOM du bundle) est MASQUÉE sur mobile : 260×85 px posés au milieu du bas d'écran,
elle recouvrait le texte du film ET la barre « ◆ Le Déroulé » (impossible d'ouvrir les
chapitres). L'orbe Kalia reste là et cliquable — on ne perd que le nag. */
#kk-chat-widget .kk-teaser { display: none !important; }
#sound-toggle { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem + 58px); right: 0.6rem; }
/* --- CARTE D'INTRO plus PETITE sur mobile (Loris : « elle doit être plus petite ») + le
logo toupie + la note tiennent, la carte laisse respirer les bandes latérales. --- */
/* v135 — carte un peu plus grande + police lisible (« les vieux pourront pas lire ») */
.btn-film { width: min(76vw, 280px); padding: 1.15rem 1rem 1rem; }
/* v145 (Loris — POINT 4) : logo de la carte agrandi aussi sur mobile (dans la largeur de la carte) */
.bf-logo-scene { width: clamp(104px, 36vw, 150px); height: auto; aspect-ratio: 909 / 1219; margin-bottom: 0.5rem; }
.bf-top { font-size: 1.4rem; }
.bf-sub { font-size: 0.62rem; }
.bf-scroll-note { font-size: 1rem; }
.bf-wink { font-size: 0.86rem; }
}
/* très petits écrans (iPhone SE, etc.) */
@media (max-width: 400px) {
.btn-film { width: 64vw; }
.section-heading { font-size: 2rem; }
}
/* ============================================================
v74 — ÉCRANS PEU HAUTS (< 900px) : le bloc final doit TENIR,
sinon le logo (en tête) sort du cadre et l'animation ne se voit jamais.
============================================================ */
@media (max-height: 899px) {
.section-cta { padding-top: 30px; }
.cta-logo3d-scene { width: clamp(130px, 10vw, 155px); margin-bottom: 0.5rem; }
.cta-heading { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.cta-tagline { font-size: 0.92rem; margin-bottom: 0.6rem; }
.cta-lines { margin-bottom: 0.7rem; font-size: 0.66rem; }
.cta-catalog { font-size: 0.85rem; margin-bottom: 0.6rem; }
.cta-collections { margin-bottom: 0.6rem; }
.cta-collections li { font-size: 0.58rem; padding: 0.34rem 0.85rem; }
.cta-features { margin-bottom: 0.6rem; }
.cta-features li { font-size: 0.74rem; }
.cta-magnet-wrap { margin: 0.2rem auto 0.5rem; gap: 1.2rem; }
.cta-magnet { width: 228px; padding: 0.7rem 0.9rem 0.6rem; }
.cm-sub { margin-bottom: 0.7rem; }
.cta-seo { display: none; } /* le texte SEO reste dans le DOM sur les grands écrans */
.cta-footer-links::before { margin: 0.4rem auto; }
.cta-signature { margin-bottom: 0; }
}
/* ============================================
v79 — BOUTON FLOTTANT « reprendre / revisionner le film »
Discret, collé à droite, centré vertical. Apparaît si l'utilisateur coupe la lecture auto,
devient « revisionner » au bout du film. Gold uniquement, jamais de blanc.
============================================ */
#film-resume {
position: fixed; top: 50%; right: 0; z-index: 210; /* v136 — au-dessus du chat, toujours visible */
transform: translate(110%, -50%);
display: flex; align-items: center; gap: 0.6rem;
padding: 0.7rem 1rem 0.7rem 0.9rem;
border: 1px solid rgba(212,175,96,0.38);
border-right: none;
border-radius: 14px 0 0 14px;
background: linear-gradient(135deg, rgba(12,14,9,0.86), rgba(8,10,6,0.92));
backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
box-shadow: -6px 0 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,175,96,0.12);
cursor: pointer; opacity: 0; pointer-events: none;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, border-color 0.3s ease;
font-family: var(--font-body);
}
#film-resume.show { transform: translate(0, -50%); opacity: 0.82; pointer-events: auto; }
#film-resume.show:hover { opacity: 1; border-color: rgba(240,212,136,0.75); box-shadow: -8px 0 32px rgba(212,175,96,0.22), inset 0 1px 0 rgba(212,175,96,0.2); }
#film-resume .fr-ico {
font-size: 0.9rem; line-height: 1;
color: var(--gold-bright);
filter: drop-shadow(0 0 8px rgba(212,175,96,0.5));
}
#film-resume .fr-txt { display: flex; flex-direction: column; text-align: left; }
#film-resume .fr-main {
font-family: var(--font-brand); font-weight: 500;
font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1.2;
color: var(--gold-bright);
}
#film-resume .fr-sub {
font-style: normal; font-size: 0.6rem; letter-spacing: 0.02em;
color: var(--cream-soft); opacity: 0.72; margin-top: 1px;
}
/* v131 (Loris) — sur mobile le bouton n'était PAS centré et chevauchait la carte
« Espace Professionnels » : il devient une PASTILLE CENTRÉE en bas d'écran,
au-dessus de la zone sûre (encoche), sans rien recouvrir d'important. */
@media (max-width: 900px) {
#film-resume {
top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
right: auto; left: 50%;
transform: translate(-50%, 220%);
border: 1px solid rgba(212,175,96,0.38);
border-radius: 999px;
padding: 0.55rem 1rem;
}
#film-resume.show { transform: translate(-50%, 0); }
#film-resume .fr-main { font-size: 0.72rem; }
#film-resume .fr-sub { font-size: 0.54rem; max-width: 40vw; }
/* le bas du bloc final garde un dégagement pour la pastille */
.cta-content { padding-bottom: 3.4rem; }
/* v141 — LE DÉROULÉ en mobile : la carte se colle en bas d'écran et devient un TIROIR.
Repliée, elle ne montre que la barre « ◆ Le Déroulé » + « Reprendre le film » (elle ne
mange donc pas plus de place que l'ancienne pastille). On tape la barre → les chapitres
se déplient VERS LE HAUT, au-dessus du bouton. Ordre visuel : chapitres / barre / bouton. */
#film-nav {
/* Calée AU-DESSUS de la rangée du bas (pastille son à gauche ≈ 0.9rem + 44px, orbe Kalia
à droite) : sans ça la carte, plus large que l'ancienne pastille, les recouvrait. */
/* v143 (Loris : « bouton continuer film invisible ») — MESURÉ : la carte (35→355, bas 780)
et le bouton flottant Kalia (320→380, haut 763) se CHEVAUCHAIENT, et Kalia a un z-index
maximal → il passait par-dessus le coin de « Reprendre le film ». On remonte la carte
au-dessus de la rangée du bas (orbe Kalia à droite + pastilles son à gauche). */
top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 6.2rem); right: 50%;
transform: translate(50%, 200%);
width: min(320px, 86vw);
padding-top: 0;
border: 1px solid rgba(212,175,96,0.34);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,175,96,0.13);
}
#film-nav.show { transform: translate(50%, 0); }
#fn-body { order: 0; max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1); }
#film-nav.open #fn-body { max-height: 46vh; overflow-y: auto; }
#fn-toggle {
order: 1; pointer-events: auto; cursor: pointer;
justify-content: center; padding: 0.5rem 0.9rem;
border-top: 1px solid rgba(212,175,96,0.16);
}
#film-nav.open #fn-toggle { border-top-color: rgba(212,175,96,0.28); }
#fn-toggle .fn-di { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
#film-nav.open #fn-toggle .fn-di { transform: rotate(45deg) scale(1.2); }
#fn-list { padding: 0.65rem 0.9rem 0.45rem 0; }
#film-nav #film-resume { order: 2; border-radius: 0 0 15px 15px; justify-content: center; }
#film-nav #film-resume .fr-sub { display: block; font-size: 0.54rem; max-width: none; }
}
/* 3) bouton flottant : sous-texte masqué en mobile (évite le débordement) */
@media (max-width: 640px) {
#film-resume .fr-sub { display: none; }
#film-resume { padding: 0.5rem 0.6rem; }
}
/* ============================================================
v137 — LE TOURNIQUET DES UNIVERS (tout en bas de la landing)
Anneau 3D de cartes, auto-rotation, glissable, clic → univers.
============================================================ */
#universe-turnstile {
position: relative; z-index: 20;
padding: 7vh 4vw 9vh;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(38,56,30,0.5), transparent 62%),
radial-gradient(ellipse 90% 60% at 50% 110%, rgba(48,38,16,0.45), transparent 62%),
linear-gradient(180deg, #070a06 0%, #0a0b07 50%, #060805 100%);
overflow: hidden;
text-align: center;
}
.ut-intro { max-width: 680px; margin: 0 auto 1.5rem; }
.ut-label { display: block; font-family: var(--font-brand); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; }
.ut-heading {
font-family: var(--font-brand); font-weight: 500; line-height: 1.08;
font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: 0;
}
.ut-heading .h-green, .ut-heading .h-gold { display: inline-block; }
.ut-rule { display: block; width: 120px; height: 2px; margin: 1rem auto; border-radius: 2px; background: var(--gold-line); box-shadow: 0 0 12px rgba(212,175,96,0.5); }
.ut-sub { font-family: var(--font-body); font-size: clamp(0.85rem, 1.4vw, 1.02rem); line-height: 1.7; color: var(--green-bright); margin: 0 auto; max-width: 40ch; }
.ut-sub em { font-style: italic; color: var(--gold-bright); }
/* v138b — LE VRAI tourniquet Kalikorp en iframe (identique par construction) */
.ut-frame-wrap { position: relative; width: 100%; max-width: 1280px; margin: 0.5rem auto 0; }
#ut-frame {
display: block; width: 100%; height: 560px; border: 0;
background: transparent; color-scheme: dark;
}
@media (max-width: 900px) { #ut-frame { height: 480px; } }
/* v138 (legacy vanilla, conservé au cas où) — halo ambré, socle, cartes emblème */
.ut-stage {
position: relative;
height: clamp(320px, 50vh, 460px);
margin: 1rem auto 0;
perspective: 1600px; perspective-origin: 50% 44%;
touch-action: pan-y;
}
.ut-halo {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(820px, 94vw); height: min(820px, 94vw); pointer-events: none;
background: radial-gradient(circle at center, rgba(212,175,96,0.14), rgba(120,150,70,0.07) 38%, transparent 68%);
}
.ut-base {
position: absolute; left: 50%; top: 62%; transform: translate(-50%, 0) rotateX(74deg);
width: min(720px, 86vw); height: 160px; border-radius: 50%; pointer-events: none;
transform-style: preserve-3d; filter: blur(2px);
background: radial-gradient(ellipse at center, rgba(212,175,96,0.17), rgba(212,175,96,0.05) 45%, transparent 70%);
box-shadow: 0 0 90px rgba(212,175,96,0.12);
}
.ut-floor {
position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
width: min(560px, 78vw); height: 18px; border-radius: 50%; pointer-events: none; filter: blur(8px);
background: radial-gradient(ellipse at center, rgba(212,175,96,0.3), transparent 72%);
}
.ut-ring {
position: absolute; top: 50%; left: 50%;
width: 0; height: 0;
transform-style: preserve-3d;
will-change: transform;
}
.ut-card {
position: absolute; top: 0; left: 0;
width: 300px; height: 122px;
margin: -61px 0 0 -150px; /* centre la carte sur l'axe */
border-radius: 18px;
border: 1.5px solid transparent;
background:
linear-gradient(158deg, rgba(14,16,10,0.97), rgba(26,22,11,0.96)) padding-box,
linear-gradient(135deg, rgba(246,226,122,0.85), rgba(120,150,70,0.35), rgba(212,175,96,0.85)) border-box;
box-shadow: 0 14px 44px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.07);
cursor: pointer; overflow: hidden;
display: flex; align-items: center; gap: 0.9rem;
padding: 0 1.1rem;
backface-visibility: hidden;
transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}
.ut-card::before { /* halo de la couleur d'accent de la marque */
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(130% 100% at 22% 0%, var(--ut-accent, rgba(212,175,96,0.25)), transparent 62%);
opacity: 0.55;
}
.ut-card:hover { box-shadow: 0 22px 64px rgba(0,0,0,0.62), 0 0 48px var(--ut-accent, rgba(212,175,96,0.5)); border-color: rgba(246,226,122,0.95); }
/* l'EMBLÈME (logo doré facetté de la marque) */
.ut-emblem {
position: relative; flex: 0 0 auto;
width: 66px; height: 66px; display: flex; align-items: center; justify-content: center;
filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 14px var(--ut-accent, rgba(212,175,96,0.4)));
}
.ut-emblem img { width: 100%; height: 100%; object-fit: contain; }
.ut-emblem-fallback { font-size: 2rem; color: var(--gold-bright); }
.ut-txt { position: relative; display: flex; flex-direction: column; text-align: left; min-width: 0; flex: 1 1 auto; }
.ut-card .ut-name {
font-family: var(--font-brand); font-size: 1.18rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.ut-card .ut-tag { margin-top: 0.4rem; font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.01em; color: var(--green-bright); opacity: 0.92; line-height: 1.35; }
.ut-card .ut-soon { margin-top: 0.35rem; font-family: var(--font-brand); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dim); }
.ut-card .ut-go { position: absolute; bottom: 0.5rem; right: 0.9rem; font-family: var(--font-brand); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); opacity: 0; transition: opacity 0.3s ease; }
.ut-card:hover .ut-go { opacity: 0.9; }
/* le bouton « Faites tourner la roue » — même esprit que « CLIQUE ICI » de Kalikorp */
#ut-launch { display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 1.8rem auto 0; background: none; border: none; cursor: pointer; }
.utl-txt { font-family: var(--font-brand); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.utl-ico { display: inline-block; margin-right: 0.4rem; animation: utPirouette 3.5s linear infinite; }
@keyframes utPirouette { to { transform: rotate(360deg); } }
.utl-rule { display: block; width: 100%; height: 1.5px; background: var(--gold-line); box-shadow: 0 0 10px rgba(212,175,96,0.5); }
@media (max-width: 900px) {
#universe-turnstile { padding: 6vh 3vw 8vh; }
.ut-stage { height: clamp(280px, 44vh, 380px); perspective: 1200px; }
.ut-card { width: 250px; height: 108px; margin: -54px 0 0 -125px; gap: 0.7rem; padding: 0 0.9rem; }
.ut-emblem { width: 54px; height: 54px; }
.ut-card .ut-name { font-size: 1.02rem; }
.ut-card .ut-tag { font-size: 0.66rem; }
}