/* BIZLEEN ET DAN NUTU (2026-11-05). Hors de la racine fantôme, chargé par les seules cartes de Bizleen : la police du site
   (Figtree, licence OFL, copiée de public/marketing-v3/figtree.woff2), le fond clair de la marque, le recto blanc, le voile
   d'ouverture et le héros d'ordinateur. Couleurs relevées dans src/styles/marqueMarketingV3.css et marketing2030.css :
   encre #000820, violet #5700d6, fuchsia #f80080, orange #ff9600, bouton linear-gradient(112deg, #4b0bc4, #7809c4, #c00088). */
@font-face{font-family:PsmFigtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(polices/4ba7d3d096695818fe0686be4f1e82c6b05134e18a22260336130335027462dd.woff2) format('woff2')}

/* LE FOND (v2, 2026-11-06) : la vidéo des perles blanches réglée au Studio, que cette expérience garde (EXPERIENCES_AVEC_FOND_STUDIO,
   src/lib/prestige/surMesure.ts). Dessous, le papier blanc et son lavis (violet, rose, orange dans les coins). Le vignettage sombre du
   mode verre est retiré, et la vidéo est posée à 72 % d'opacité sur ce papier : ce voile clair relève les gris les plus sombres des
   perles. Le texte, lui, est toujours posé sur un panneau de verre (experience.css), contraste mesuré dans captures.md.
   Le voile du Studio (.cp-page-dim, background_dim) reste branché : il vaut 0 sur ces cartes. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --psm-r { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
html { background: #ffffff !important; }
html body.cp-body .cp-page-video { opacity: .72; }
html body.cp-body { background: transparent; color: #000820; }
/* Le mode verre peint le corps en quasi-noir (#030305) ou en gris (#F2F3F5) derrière la vidéo : ici, le papier blanc et son lavis
   doivent rester dessous, sinon la vidéo à 72 % laisse passer le noir (mesuré : fond gris foncé autour des panneaux). */
html body.cp-body:has(.cp-page-video) { background: transparent !important; }
.cp-backdrop, .cp-screen .cp-bg, .cp-screen .cp-ambient { display: none; }
html body.cp-body .cp-screen.cp-screen-prestige { background: none; }
html body.cp-body .cp-screen.cp-screen-prestige::before { content: none !important; }
html body.cp-body::after { content: none !important; }
html body.cp-body::before {
  content: "" !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none; opacity: 1 !important;
  background:
    radial-gradient(60vmax 46vmax at 104% -8%, rgba(248, 0, 128, .07), transparent 70%),
    radial-gradient(56vmax 44vmax at -8% 106%, rgba(87, 0, 214, .07), transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 110%, rgba(255, 150, 0, .06), transparent 70%),
    #ffffff !important;
}

/* LE RECTO : papier blanc, encre de la marque, Figtree. */
.cp-screen .pr { font-family: PsmFigtree, system-ui, sans-serif; background: #fff !important; color: #000820; box-shadow: inset 0 0 0 1px rgba(0, 8, 32, .08); }
.cp-screen .pr .pr-ombre { display: none; }
.cp-screen .pr .pr-logo { filter: none !important; width: 50cqw; max-height: 46cqw; }
.cp-screen .pr .pr-logo-coin { filter: none !important; width: 13cqw; height: 15cqw; top: 5cqw; left: 5cqw; }
/* La photo de Dan : sous le coin du logo, fondue dans le blanc avant son nom, jamais de texte sur le visage. */
.cp-screen .pr .pr-portrait { -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 70%); mask-image: linear-gradient(180deg, #000 46%, transparent 70%); }
.cp-screen .pr .pr-logotype { max-width: 70cqw; max-height: 23cqw; }
.cp-screen .pr .pr-nom { font-family: PsmFigtree, system-ui, sans-serif !important; font-weight: 800 !important; color: #000820 !important; text-shadow: none !important; letter-spacing: -.03em; overflow-wrap: normal !important; }
.cp-screen .pr .pr-nom .pr-nom-famille { letter-spacing: -.035em; }
.cp-screen .pr-distinction { font-family: PsmFigtree, system-ui, sans-serif !important; font-style: normal !important; font-weight: 700; font-size: 4.6cqw; letter-spacing: .01em; color: #5700d6 !important; }
.cp-screen .pr:not(.pr-avec-photo) .pr-nom, .cp-screen .pr:not(.pr-avec-photo) .pr-distinction, .cp-screen .pr:not(.pr-avec-photo) .pr-titres, .cp-screen .pr:not(.pr-avec-photo) .pr-citation { text-align: center; }
.cp-screen .pr-titres { color: #4a5068 !important; }
.cp-screen .pr-citation { font-family: Georgia, 'Times New Roman', serif !important; font-style: italic !important; font-weight: 400; color: #000820 !important; }
.cp-screen .pr-contact { border-radius: 999px; border: 0 !important; background: linear-gradient(112deg, #4b0bc4, #7809c4, #c00088) !important; color: #fff !important; font-family: PsmFigtree, system-ui, sans-serif; font-weight: 700; box-shadow: 0 10px 26px rgba(101, 15, 196, .24); }
.cp-screen .pr-corps .pr-geste { color: #000820 !important; }
.cp-screen .pr-corps .pr-geste .cf-geste-icone { border-color: rgba(87, 0, 214, .32) !important; color: #5700d6 !important; }
.cp-screen .pr-corps .pr-geste:hover .cf-geste-icone { background: #f5f1ff !important; }
.cp-screen .pr-corps .pr-signature { color: #6b7086 !important; }
.cp-screen .pr-haut .pr-porte { border-color: rgba(0, 8, 32, .16) !important; background: rgba(255, 255, 255, .9) !important; color: #000820 !important; }

/* L'OUVERTURE : le papier blanc dès la première image (le voile), puis le B qui se trace, se retourne, et montre son QR. */
html[data-psm-voile]::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: #fff; }
.psm-ouv { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; align-content: center; gap: 28px; background: #fff; pointer-events: none; transition: opacity .5s cubic-bezier(.4, 0, .2, 1), visibility .5s; font-family: PsmFigtree, system-ui, sans-serif; color: #000820; }
/* La fin : le papier s'ouvre en cercle depuis la carte (masque radial animé). Sans @property, un simple fondu. */
.psm-ouv.psm-fin { --psm-r: 0%; -webkit-mask: radial-gradient(circle at 50% 44%, transparent var(--psm-r), #000 calc(var(--psm-r) + 1.5%)); mask: radial-gradient(circle at 50% 44%, transparent var(--psm-r), #000 calc(var(--psm-r) + 1.5%)); animation: psmOuvre .85s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes psmOuvre { from { --psm-r: 0%; } 92% { opacity: 1; } to { --psm-r: 120%; opacity: 0; visibility: hidden; } }
.psm-halo { position: absolute; left: 50%; top: 44%; width: min(120vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: conic-gradient(from var(--a), rgba(79, 0, 237, .35), rgba(133, 0, 207, .3), rgba(248, 0, 128, .32), rgba(255, 150, 0, .3), rgba(79, 0, 237, .35)); filter: blur(60px); opacity: 0; animation: psmHalo 3s cubic-bezier(.2, .8, .2, 1) forwards, psmTourne 3s linear infinite; }
@keyframes psmHalo { 30% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: .55; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes psmTourne { to { --a: 360deg; } }
.psm-scene, .psm-mots, .psm-adresse { position: relative; }
.psm-scene { width: min(52vw, 230px); aspect-ratio: 250 / 289; perspective: 900px; }
.psm-tourne { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.psm-retourne .psm-tourne { transform: rotateY(180deg); }
.psm-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.psm-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.psm-dos { transform: rotateY(180deg); display: grid; place-items: center; }
.psm-qr { width: 100%; aspect-ratio: 1; box-sizing: border-box; padding: 9%; border-radius: 9%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 8, 32, .08), 0 24px 60px rgba(87, 0, 214, .16); position: relative; }
.psm-qr svg { display: block; width: 100%; height: 100%; }
.psm-qr img { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; padding: 2.5%; border-radius: 12%; background: #fff; transform: translate(-50%, -50%); }
.psm-mots { display: flex; gap: .55em; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0 16px; font-size: clamp(17px, 4.6vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.psm-mots span { opacity: .14; transition: opacity .35s, color .35s; }
.psm-mots span.psm-on { opacity: 1; }
.psm-mots span.psm-on:last-child { background: linear-gradient(115deg, #4f00ed 0%, #8500cf 34%, #f80080 68%, #ff9600 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.psm-adresse { margin: -14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #6b7086; opacity: 0; transition: opacity .4s; }
.psm-retourne .psm-adresse { opacity: 1; }

/* LE HÉROS D'ORDINATEUR : le vrai logo en tête, Figtree, le bouton au dégradé du site. */
.pb-heros .psm-sym { display: block; width: min(300px, 100%); height: auto; margin: 4px 0 28px; }
.pb-heros, .pb-heros * { color: #000820; }
.pb-heros .pb-heros-surtitre { font-family: PsmFigtree, system-ui, sans-serif !important; font-weight: 700; letter-spacing: .14em !important; color: #5700d6 !important; }
.pb-heros .pb-heros-titre { font-family: PsmFigtree, system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -.035em !important; line-height: 1 !important; color: #000820 !important; font-size: clamp(42px, 4.4vw, 68px) !important; text-shadow: none !important; }
.pb-heros .pb-heros-texte, .pb-heros .pb-heros-accroche { font-family: PsmFigtree, system-ui, sans-serif !important; color: #3d4258 !important; }
.pb-heros .pb-heros-bouton { border-radius: 999px !important; font-family: PsmFigtree, system-ui, sans-serif !important; font-weight: 700 !important; border: 1.5px solid rgba(0, 8, 32, .18) !important; background: #fff !important; color: #000820 !important; transition: transform .2s !important; }
.pb-heros .pb-heros-bouton:first-child { border: 0 !important; background: linear-gradient(112deg, #4b0bc4, #7809c4, #c00088) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(101, 15, 196, .24); }
.pb-heros .pb-heros-bouton:hover { transform: translateY(-2px); }
.pb-heros .pb-sommaire-titre { font-family: PsmFigtree, system-ui, sans-serif !important; color: #000820 !important; }
.pb-heros .pb-sommaire-numero, .pb-heros .pb-sommaire svg { color: #5700d6 !important; }

/* LE VERSO : l'encre de la marque. */
html body .cp-screen .cp-face-back { background-color: rgba(0, 8, 32, .97); }

/* LE MOT « DÉCOUVRIR » SOUS LA CARTE, ET LE TEXTE DU HÉROS D'ORDINATEUR : posés à même les perles, donc plus sombres qu'en v1
   (#3d4258 : 5,6:1 sur le pixel le plus sombre du poster, vidéo à 72 % ; l'ancien #6b7086 tombait à 2,8:1). */
.bz-defiler, .bz-defiler-texte { color: #3d4258 !important; }

/* LE PIED « Propulsé par Bizleen Prestige » : papier blanc, encre de la marque. */
.px-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 22px max(16px, calc((100% - 1080px) / 2)) calc(var(--psm-barre, 84px) + 34px + env(safe-area-inset-bottom)); background: #fff; color: #6b7086; font: 400 12px/1.4 PsmFigtree, system-ui, sans-serif; border-top: 1px solid rgba(0, 8, 32, .09); }
.px-footer > span { display: flex; gap: 8px; align-items: center; }
.px-footer a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #000820; text-decoration: none; font-weight: 700; }
.px-footer img { object-fit: contain; }



/* LE RECTO VIVANT (2026-11-07, experience.js, animerLeRecto) : l'aurore derrière le B, les perles, les plans.
   L'aurore est sous le logo (z-index -1 dans un ciel isolé) : rien ne passe dessus. Elle n'anime que transform et opacity. */
.cp-screen .pr-ciel.psm-ciel { isolation: isolate; }
.psm-aurore { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; translate: calc(var(--psm-px, 0) * -5px) calc(var(--psm-py, 0) * -5px); }
.psm-aurore i { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; will-change: transform, opacity; animation: psmAurore 19s ease-in-out infinite alternate; }
.psm-aurore i:nth-child(1) { left: 2%; top: 8%; background: radial-gradient(circle, rgba(87, 0, 214, .2), transparent 66%); }
.psm-aurore i:nth-child(2) { right: -4%; top: 22%; background: radial-gradient(circle, rgba(248, 0, 128, .17), transparent 66%); animation-duration: 24s; animation-delay: -7s; }
.psm-aurore i:nth-child(3) { left: 24%; bottom: -2%; background: radial-gradient(circle, rgba(255, 150, 0, .15), transparent 66%); animation-duration: 29s; animation-delay: -13s; }
@keyframes psmAurore { 0% { transform: translate(-7%, 5%) scale(.9); opacity: .55; } 50% { opacity: 1; } 100% { transform: translate(9%, -6%) scale(1.14); opacity: .7; } }
.psm-perles { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
/* L'onde du grand B passe SOUS le logo : le logo est au-dessus, et le canevas retire de toute façon la silhouette du B. */
.cp-screen .pr-ciel .psm-onde { z-index: 0; }
.cp-screen .pr-ciel.psm-ciel .pr-logo { z-index: 1; }
.cp-screen .pr .psm-logo-attend { opacity: 0; }
.cp-screen .pr .psm-logo-pose { opacity: 1; transition: opacity .6s ease; }
.psm-plans .pr-logo, .psm-plans .pr-logo-coin, .psm-plans .psm-perles { translate: calc(var(--psm-px, 0) * 6px) calc(var(--psm-py, 0) * 6px); }
.psm-plans .pr-nom { translate: calc(var(--psm-px, 0) * 3px) calc(var(--psm-py, 0) * 3px); }
/* Chaque plan sur sa propre couche : la carte graphique les déplace sans repeindre (mesuré : sans cela, 12 à 18 ms par image sous la
   souris, contre 6 ms sans profondeur). */
.psm-plans .pr-logo, .psm-plans .pr-logo-coin, .psm-plans .pr-nom, .psm-aurore { will-change: translate; }
@media (prefers-reduced-motion: reduce) {
  .psm-aurore i { animation: none; }
  .psm-perles { display: none; }
  .cp-screen .pr .psm-logo-attend { opacity: 1; }
}

/* RETOURS DE DAN DU 2026-11-06 : À L'ORDINATEUR, LE HÉROS TIENT DANS L'ÉCRAN.
   Mesuré à 1366 x 768 : le héros faisait 900 px de haut dans un écran de 768 ; son sommaire (six lignes) débordait sous la barre
   flottante et sous le premier panneau de l'expérience, qui commence à 768 px. Le sommaire répète exactement les six ancres de la
   barre du bas : on le retire sur cette page, et le héros se resserre sur les écrans bas (1280 x 720, Galaxy Book 4 Edge). */
@media (min-width: 1100px) {
  html body.cp-body .pb-heros .pb-sommaire { display: none; }
  .pb-heros .psm-sym { width: min(260px, 100%); margin-bottom: 18px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .pb-heros .psm-sym { width: 200px; margin: 0 0 12px; }
  .pb-heros .pb-heros-titre { font-size: clamp(38px, 3.6vw, 54px) !important; }
}