/* ============================================
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: 42px; height: 42px; flex: 0 0 42px; /* v141 — réduit */
display: flex; align-items: center; justify-content: center;
perspective: 500px;
}
#nav-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;
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%);
}
#nav-logo-still {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 62%; height: auto; transform-style: preserve-3d;
opacity: 1; transition: opacity 0.55s ease;
filter: drop-shadow(0 0 14px rgba(212,175,96,0.45));
}
#nav-logo-still.nav-spinning { animation: logoSpin5 13s linear; }
.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) */
.bf-logo-scene {
display: block; width: 50px; height: 50px; margin: 0 auto 0.75rem; /* v135 — remonté, ne touche plus « Voir le film » */
perspective: 500px;
}
.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 » — manuscrit gold, discret */
.btn-skip {
background: none; border: none; cursor: pointer;
text-align: center; padding: 0.4rem 1rem; /* v73 — centré comme le bouton principal */
max-width: clamp(220px, 16vw, 280px); position: relative;
opacity: 0.78; transition: opacity 0.3s ease;
}
.btn-skip::before {
content: ''; position: absolute; inset: -8% -14%; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(4,6,4,0.55), transparent 76%);
}
.btn-skip:hover { opacity: 1; }
.bs-main {
display: block;
font-family: 'Great Vibes', var(--font-brand), cursive;
font-size: 1.44rem; line-height: 1.15;
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));
}
.bs-note {
display: block; margin-top: 0.15rem;
font-family: 'Great Vibes', cursive; font-style: normal;
font-size: 0.98rem; color: #c9a24a; opacity: 0.92; 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);
}
/* v142 (Loris : « vire les doypacks ») — il ne reste que le Mini Sac à Dos, centré au sol */
#mini-sac { left: 22vw; height: 11vh; transform: rotate(-1deg); z-index: 9; }
@media (max-width: 900px) {
/* v135/v136 — posés au sol au CENTRE (entre les deux bandes latérales), groupés */
.floor-prod { bottom: 5.5dvh; }
#mini-sac { left: 37vw; height: 7.5vh; }
}
/* 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), blend lighten = noir transparent === */
.canvas-wrap {
position: fixed; inset: 0; z-index: 6;
opacity: 1;
mix-blend-mode: lighten;
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 === */
#scroll-container { position: relative; width: 100%; height: 3250vh; 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; }
/* 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: 2560vh; }
.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: 44px; height: 44px; flex-basis: 44px; }
.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 (Loris : « sur téléphone c'est ingérable, on saute des sections entières ») — la piste de
scroll est RALLONGÉE de 45% en portrait : chaque frame réclame plus de doigt, donc le film se
déroule posément (et on a enfin le temps de voir la forêt). Le desktop garde ses 3250vh — il
n'entre JAMAIS dans ce media query. C'est ça, « désynchroniser mobile et laptop ». */
#scroll-container { height: 4700vh; }
/* 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; }
.btn-skip { text-align: center; max-width: 74vw; }
.bs-main { font-size: 1.32rem; }
.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; }
#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; }
.bf-logo-scene { width: 46px; height: 46px; margin-bottom: 0.6rem; }
.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; }
}