/* Essentia Scent · Page d'inscription à l'accès anticipé Black Friday 2026 (v2). Chargée uniquement sur /acces-anticipe-black-friday/ (mu-plugins/essentia-bf-inscription.php). La page réutilise les composants du design-system (.eyebrow, h2.serif, .btn, .values, .pdp-section__head, .pdp-pillars, .pdp-faq, bandeau newsletter). Ce fichier ne fait que : couleurs brun #2B2119 + beige #F4EFE6 (demande de Nabila), hero, formulaire, calendrier, tuiles, barre fixe. Les !important battent l'accent Cormorant italique d'Elementor (voir BRAND_GUIDELINES §5). */ .esbf{ --bf-brown:#2B2119; --bf-cream:#F4EFE6; --bf-cream-2:#EAE2D4; --bf-sand:#C9B79C; --bf-line:#DED5C6; --bf-line-dark:rgba(244,239,230,.18); --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1); background:var(--bf-cream); } .esbf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .esbf-trap{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } .esbf-center{ text-align:center; margin-top:44px; } /* Fonds : beige et beige foncé à la place des crèmes du site */ .esbf .pdp-section{ background:var(--bf-cream) !important; } .esbf .pdp-section--alt{ background:var(--bf-cream-2) !important; } .esbf .values{ background:var(--bf-cream) !important; border-bottom:1px solid var(--bf-line); } .esbf .pdp-section__head h2.serif, .esbf .pdp-section__head h2.serif em{ color:var(--bf-brown) !important; } .esbf .pdp-section__head p.eyebrow{ color:var(--es-cacao,#7C6650) !important; font-style:normal !important; } .esbf p.esbf-tagline{ font-family:'Fraunces',Georgia,serif !important; font-style:italic !important; font-weight:400 !important; font-size:clamp(17px,1.5vw,21px) !important; line-height:1.45 !important; color:var(--es-gray,#6B6B6B) !important; max-width:540px; margin:0 auto !important; letter-spacing:-0.005em; } .esbf .pdp-pillar__title{ color:var(--bf-brown) !important; } .esbf .pdp-faq__item{ border-color:var(--bf-line) !important; } /* Boutons canoniques, recolorés : brun sur beige, beige sur brun */ .esbf a.btn.btn-primary, .esbf button.btn.btn-primary{ background:var(--bf-brown) !important; border-color:var(--bf-brown) !important; color:var(--bf-cream) !important; } .esbf .btn.btn-light{ background:var(--bf-cream) !important; border-color:var(--bf-cream) !important; color:var(--bf-brown) !important; } .esbf .btn:active{ transform:scale(.97); } .esbf .btn:disabled{ opacity:.7; cursor:default; } /* HERO brun */ .esbf-hero{ background:var(--bf-brown); padding:72px 0 80px; } .esbf-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; } .esbf-hero p.eyebrow{ color:var(--bf-sand) !important; font-style:normal !important; } .esbf .esbf-h1{ font-size:clamp(46px,7vw,96px) !important; line-height:1 !important; letter-spacing:-0.03em !important; color:var(--bf-cream) !important; font-weight:400 !important; font-style:normal !important; margin:0 0 20px !important; } .esbf .esbf-h1 em{ font-style:italic !important; color:var(--bf-cream) !important; } .esbf p.esbf-hero__tagline{ font-family:'Fraunces',Georgia,serif !important; font-style:italic !important; font-weight:400 !important; font-size:clamp(17px,1.5vw,21px) !important; line-height:1.45 !important; color:rgba(244,239,230,.78) !important; max-width:480px; margin:0 0 30px !important; } .esbf-hero__media img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; } /* Formulaire (même dessin que le bandeau newsletter du pied de page) */ .esbf-form{ display:grid; max-width:520px; } .esbf-form > *{ grid-area:1/1; } .esbf-form__fields{ margin:0; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .esbf-form__row{ display:flex; border:1px solid var(--bf-line-dark); } .esbf-form__row:focus-within{ border-color:var(--bf-sand); } .esbf .esbf-form__row input{ flex:1; min-width:0; border:0 !important; background:transparent !important; color:var(--bf-cream) !important; font-family:'Inter',sans-serif !important; font-size:16px !important; font-style:normal !important; padding:16px 18px !important; border-radius:0 !important; box-shadow:none !important; } .esbf .esbf-form__row input::placeholder{ color:rgba(244,239,230,.5); } .esbf .esbf-form__row input:focus{ outline:none; } .esbf .esbf-form__btn{ white-space:nowrap; margin:0 !important; } .esbf-form__error{ font-size:13px; color:#E8A08F; margin:8px 0 0; font-style:normal !important; } .esbf-form__ok{ align-self:center; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .esbf-form.is-done .esbf-form__fields{ opacity:0; transform:translateY(-6px); pointer-events:none; } .esbf-form.is-done .esbf-form__ok{ opacity:1; transform:none; pointer-events:auto; } .esbf p.esbf-form__ok-title{ font-family:'Fraunces',Georgia,serif !important; font-style:normal !important; font-weight:400 !important; font-size:28px !important; color:var(--bf-cream) !important; margin:0 0 6px !important; } .esbf p.esbf-form__ok-title em{ font-style:italic !important; } .esbf p.esbf-form__ok-text{ font-family:'Inter',sans-serif !important; font-style:normal !important; font-size:14px; line-height:1.6; color:rgba(244,239,230,.75) !important; margin:0 !important; } /* Trust line (pattern .section__trust : Mono 10px, ✓ couleur d'accent) */ .esbf-trust{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; } .esbf .esbf-trust span{ font-family:'JetBrains Mono',monospace !important; font-style:normal !important; font-size:10px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,230,.6); } .esbf .esbf-trust span::before{ content:"✓ "; font-size:11px; color:var(--bf-sand); } /* Compte à rebours (même dessin que le bandeau Black Friday des fiches) */ .esbf-cd{ margin-top:34px; padding-top:22px; border-top:1px solid var(--bf-line-dark); display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .esbf-cd__lab,.esbf-cd__open{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--bf-sand); font-style:normal; } .esbf-cd__grp{ display:flex; gap:18px; } .esbf-cd__u{ display:flex; flex-direction:column; align-items:center; min-width:36px; } .esbf-cd__u b{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:30px; line-height:1; color:var(--bf-cream); font-variant-numeric:tabular-nums; font-style:normal; } .esbf-cd__u i{ font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,230,.55); margin-top:6px; } /* Calendrier : cartes au dessin de « Pour qui, pour quoi » (page collection) */ .esbf-steps__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .esbf-step{ display:grid; gap:8px; align-content:start; background:var(--bf-cream); border:1px solid var(--bf-line); padding:24px 22px; } .esbf-step.is-now{ border-color:var(--bf-brown); } .esbf-step__k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--es-cacao,#7C6650); } .esbf-step__t{ font-family:'Fraunces',Georgia,serif; font-size:22px; line-height:1.15; color:var(--bf-brown); } .esbf-step__d{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.55; color:var(--es-gray,#6B6B6B); } /* Aperçus à dévoiler */ .esbf-peek__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .esbf-tile{ position:relative; display:block; width:100%; padding:0 !important; border:0 !important; background:var(--bf-brown) !important; cursor:pointer; text-align:left; aspect-ratio:3/4; overflow:hidden; border-radius:0 !important; } .esbf-tile__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(10px) saturate(.8); transform:scale(1.06); transition:filter 280ms var(--ease-out), transform 280ms var(--ease-out); } .esbf-tile__veil{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(43,33,25,.45); color:var(--bf-cream); transition:opacity 200ms var(--ease-out); } .esbf-tile__no{ font-family:'Fraunces',Georgia,serif; font-size:24px; font-style:italic; } .esbf-tile__hint{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; border:1px solid rgba(244,239,230,.5); padding:8px 12px; } .esbf-tile__info{ position:absolute; left:0; right:0; bottom:0; padding:48px 16px 16px; background:linear-gradient(to top, rgba(43,33,25,.92), rgba(43,33,25,0)); color:var(--bf-cream); display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateY(8px); transition:opacity 220ms var(--ease-out) 60ms, transform 220ms var(--ease-out) 60ms; } .esbf-tile__format{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--bf-sand); } .esbf-tile__name{ font-family:'Fraunces',Georgia,serif; font-size:21px; line-height:1.15; } .esbf-tile__price{ font-family:'Inter',sans-serif; font-size:12px; color:rgba(244,239,230,.8); } .esbf-tile__price b{ font-weight:500; color:var(--bf-cream); } .esbf-tile__price s{ opacity:.6; } .esbf-tile.is-open{ cursor:default; } .esbf-tile.is-open .esbf-tile__img{ filter:none; transform:none; } .esbf-tile.is-open .esbf-tile__veil{ opacity:0; pointer-events:none; } .esbf-tile.is-open .esbf-tile__info{ opacity:1; transform:none; } .esbf-tile:focus-visible{ outline:2px solid var(--bf-brown); outline-offset:3px; } @media (hover:hover) and (pointer:fine){ .esbf-tile:not(.is-open):hover .esbf-tile__img{ transform:scale(1.03); } } /* Invitation : pattern du bandeau newsletter (BRAND_GUIDELINES §5.13), fond brun */ .esbf-invite{ background:var(--bf-brown); padding:88px 24px; } .esbf-invite__inner{ max-width:640px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .esbf-invite p.eyebrow{ color:var(--bf-sand) !important; font-style:normal !important; } .esbf-invite h2.serif{ font-size:clamp(36px,4vw,52px) !important; line-height:1.05 !important; letter-spacing:-0.015em !important; color:var(--bf-cream) !important; font-weight:400 !important; font-style:normal !important; margin:0 0 12px !important; } .esbf-invite h2.serif em{ font-style:italic !important; color:var(--bf-cream) !important; } .esbf p.esbf-invite__tagline{ font-family:'Fraunces',Georgia,serif !important; font-style:italic !important; font-size:clamp(17px,1.5vw,21px) !important; color:rgba(244,239,230,.75) !important; margin:0 0 28px !important; } .esbf-invite .esbf-form{ width:100%; } .esbf-invite .esbf-trust{ justify-content:center; } /* Barre fixe */ .esbf-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--bf-brown); border-top:1px solid var(--bf-line-dark); transform:translateY(100%); transition:transform 240ms var(--ease-drawer); } .esbf-bar.is-on{ transform:none; } .esbf-bar__inner{ max-width:1200px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .esbf-bar__text{ font-family:'Inter',sans-serif; color:var(--bf-cream); font-size:14px; } .esbf-bar__text b{ font-weight:500; } .esbf-bar__text span{ color:var(--bf-sand); } .esbf-bar .btn{ padding:12px 22px !important; } /* Mouvement réduit : on garde les fondus, on retire les déplacements */ @media (prefers-reduced-motion: reduce){ .esbf-form__fields,.esbf-form__ok,.esbf-tile__info{ transform:none !important; } .esbf-tile__img{ transform:none !important; transition:filter 200ms ease; } .esbf-bar{ transform:none; opacity:0; visibility:hidden; transition:opacity 200ms ease, visibility 0s linear 200ms; } .esbf-bar.is-on{ opacity:1; visibility:visible; transition:opacity 200ms ease, visibility 0s; } .esbf .btn:active{ transform:none; opacity:.75; } } /* Mobile */ @media (max-width:900px){ .esbf-hero{ padding:32px 0 56px; } .esbf-hero__grid{ grid-template-columns:1fr; gap:32px; } .esbf-hero__media{ order:-1; } .esbf-hero__media img{ aspect-ratio:4/3; } .esbf-steps__grid{ grid-template-columns:1fr 1fr; } .esbf-peek__grid{ grid-template-columns:1fr 1fr; gap:10px; } .esbf-invite{ padding:56px 16px; } } @media (max-width:560px){ .esbf-form__row{ flex-direction:column; border:0; gap:8px; } .esbf .esbf-form__row input{ border:1px solid var(--bf-line-dark) !important; } .esbf .esbf-form__btn{ width:100%; justify-content:center; } .esbf-steps__grid{ grid-template-columns:1fr; } .esbf-cd__grp{ gap:12px; } .esbf-tile__name{ font-size:17px; } .esbf-tile__info{ padding:36px 10px 10px; } .esbf-trust{ gap:6px 12px; } .esbf .esbf-trust span{ font-size:8px; letter-spacing:.1em; } .esbf-bar__text span{ display:none; } .esbf-bar__inner{ padding:10px 16px; } } /* ===== Corrections mobile (audit iPhone 390 px, 10/11/2026) ===== */ /* Le bouton unifié du thème (body a.btn.btn-primary) l'emportait : on monte la spécificité */ body .esbf a.btn.btn-primary,body .esbf button.btn.btn-primary{ background:var(--bf-brown) !important; border-color:var(--bf-brown) !important; color:var(--bf-cream) !important; } body .esbf .btn.btn-light{ background:var(--bf-cream) !important; border-color:var(--bf-cream) !important; color:var(--bf-brown) !important; } .esbf .btn{ touch-action:manipulation; -webkit-user-select:none; user-select:none; } /* FAQ : la question longue poussait le « + » hors de l'écran */ .esbf .pdp-faq__q{ gap:16px; } .esbf .pdp-faq__q > span:first-child{ flex:1; min-width:0; } @media (max-width:900px){ /* Mobile d'abord : le message et le formulaire avant la photo */ .esbf-hero{ padding:28px 0 0; } .esbf-hero__grid{ gap:28px; } .esbf-hero__media{ order:0; margin:0 -16px; } .esbf-hero__media img{ aspect-ratio:3/2; } .esbf .esbf-h1{ font-size:clamp(40px,11vw,56px) !important; margin-bottom:14px !important; } .esbf p.esbf-hero__tagline{ margin-bottom:22px !important; } .esbf-cd{ margin-top:24px; padding-top:18px; } .esbf .pdp-section__head{ margin-bottom:32px; } .esbf .pdp-section__head h2.serif{ font-size:clamp(34px,9vw,44px) !important; } .esbf-center{ margin-top:28px; } .esbf-center .btn{ width:100%; justify-content:center; } .esbf-steps__grid{ gap:10px; } .esbf-step{ padding:18px 18px; } .esbf-invite h2.serif{ font-size:clamp(32px,8.5vw,40px) !important; } } @media (max-width:560px){ .esbf-cd{ flex-direction:column; align-items:flex-start; gap:10px; } .esbf-tile__hint{ padding:6px 10px; font-size:9px; } .esbf-tile__no{ font-size:19px; } .esbf-bar .btn{ padding:11px 16px !important; font-size:13px !important; } .esbf-bar{ padding-bottom:env(safe-area-inset-bottom,0px); } } /* FAQ : le thème parent colore tout