/*

Theme Name: Bokitani Child

Template: Divi

Description: Theme enfant Divi pour Bokitani (landing coming-soon). Charte : couleurs drapeau RDC + polices identitaires.

Author: Aymeric Filliot

Author URI: https://www.aymeric-filliot.fr

Version: 1.2.0

*/



/* ===== Couleurs (drapeau RDC) ===== */

:root {

  --bok-bleu:  #29ABE2; /* bleu ciel */

  --bok-jaune: #F7D417; /* or */

  --bok-rouge: #D81E22; /* rouge */

  --bok-sombre:#0d0d0d; /* overlay fonds photo */

}



/* ===== Polices identitaires (fichiers dans /fonts ; cf. fonts/README.txt) ===== */

@font-face { font-family:"Sacamus";            src:url("fonts/sacamus.woff2") format("woff2"); font-display:swap; }

@font-face { font-family:"Reservoir Grunge";   src:url("fonts/reservoir-grunge.woff2") format("woff2"); font-display:swap; }

@font-face { font-family:"American Typewriter"; src:url("fonts/american-typewriter.woff2") format("woff2"); font-display:swap; }



/* Application des polices */

.bok-logo      { font-family:"Sacamus", cursive; }

.bok-countdown { font-family:"Reservoir Grunge", Impact, sans-serif; }

body, .bok-manifesto { font-family:"American Typewriter", "Courier New", monospace; }



/* ===== Squelette landing (P7) � styling de marque provisoire (recette ; affinage au Visual Builder) ===== */

.bok-logo, .bok-logo a { color: var(--bok-jaune); text-decoration: none; font-size: 2rem; line-height: 1; }

.bok-star { text-align: right; }

.bok-star a { color: var(--bok-jaune); font-size: 2.4rem; line-height: 1; text-decoration: none; }



.bok-countdown { text-align: center; }

.bok-countdown, .bok-countdown .value, .bok-countdown .et_pb_countdown_timer_amount {

  color: var(--bok-jaune) !important;

  font-family: "Reservoir Grunge", Impact, sans-serif !important;

}

.bok-countdown .value, .bok-countdown .et_pb_countdown_timer_amount { font-size: clamp(3rem, 12vw, 9rem); line-height: 1; }



.bok-scroll { text-align: center !important; }

.bok-scroll a { color: var(--bok-jaune); font-size: 2.5rem; text-decoration: none; }



.bok-optin-placeholder { text-align: center; margin: 0 0 1.2rem; }

.bok-optin-placeholder input {

  width: min(90%, 460px); padding: .9rem 1.4rem; border-radius: 999px;

  border: 2px solid var(--bok-jaune); background: transparent; color: var(--bok-jaune);

  text-align: center; font-family: "American Typewriter", "Courier New", monospace;

}

.bok-optin-placeholder input::placeholder { color: var(--bok-accent); opacity: .85; transition: color 1.2s ease; }



.bok-manifesto { color: var(--bok-jaune); text-align: center !important; max-width: 640px; margin: 1.2rem auto 0; }



/* Countdown : chiffres seuls (labels masques) ; jours reaffiches (2 lignes en mobile) */

.bok-countdown .label { display: none; }

.bok-countdown .section { display: inline-block; vertical-align: top; margin: 0 .2rem; }

.bok-countdown .sep p {

  color: var(--bok-jaune) !important; margin: 0; line-height: 1;

  font-size: 5rem; font-family: "Reservoir Grunge", Impact, sans-serif !important;

}

@media (max-width: 767px) { .bok-countdown .sep p { font-size: 2.5rem; } }





/* ===== Header : etoile-menu (module divi/menu force en mode mobile a tous les breakpoints) ===== */

.bok-star-menu { text-align: right; }

.bok-star-menu .et_pb_menu__menu   { display: none  !important; }   /* masque les liens inline desktop */

.bok-star-menu .et_mobile_nav_menu { display: block !important; }  /* etoile toujours visible ; alignement = justify-content flex-end du module */

.bok-star-menu .mobile_menu_bar:before {

  content: "" !important;                                    /* etoile SVG arrondie (coins doux) a la place du hamburger */

  display: inline-block; width: 34px; height: 34px; vertical-align: middle;

  background-color: var(--bok-accent); background-image: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 Z' fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 Z' fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; transition: background-color 1.2s ease;

}

/* Barre header (logo + etoile) AU-DESSUS de l'overlay quand le menu est ouvert */

.bok-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; }                       /* contexte d'empilement du header */

.bok-header .et_pb_row, .bok-header .et_pb_column { z-index: auto; }   /* ne pas pi�ger le contexte */

.bok-header .bok-logo { position: relative; z-index: 10; }            /* logo au-dessus de l'overlay */

.bok-star-menu .et_mobile_nav_menu, .bok-star-menu .mobile_nav { position: relative; }

/* FERME : rien de force. OUVERT (.mobile_nav.opened) : overlay plein ecran DANS le contexte du header (z bas) */

.bok-star-menu .mobile_nav.opened .et_mobile_menu {

  display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem;

  position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh; height: 100svh;

  margin: 0 !important; padding: 0 !important; border: none !important;

  z-index: 1; overflow-y: auto; background: var(--bok-sombre) !important;

}

.bok-star-menu .mobile_nav.opened .et_mobile_menu, .bok-star-menu .mobile_nav.opened .et_mobile_menu li { list-style: none !important; }

.bok-star-menu .mobile_nav.opened .et_mobile_menu li { width: auto; text-align: center; border: none !important; padding: 0; }

.bok-star-menu .mobile_nav.opened .et_mobile_menu a {

  color: var(--bok-accent) !important; font-family: "Sacamus", cursive;

  font-size: clamp(2rem, 9vw, 4rem); line-height: 1.1; padding: .2em 0; transition: color 1.2s ease;

}

/* Etoile au-dessus de l'overlay, reste en place = bouton fermer (re-clic) */

.bok-star-menu .mobile_nav.opened .mobile_menu_bar { position: relative; z-index: 10; }



/* ===== Footer (discret) ===== */

.bok-footer-text, .bok-footer-text p { text-align: center; font-size: .9rem; color: rgba(255,255,255,.55); margin: 0; }

.bok-footer-text a { color: var(--bok-accent); text-decoration: none; transition: color 1.2s ease; }

.bok-footer-text a:hover { text-decoration: underline; }



/* ===== Contenu page Accueil : sections plein ecran centrees ===== */

.bok-s1, .bok-s2 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; }



/* Sections hero transparentes + au-dessus du carrousel */

.bok-s1, .bok-s2 { background: transparent !important; position: relative; z-index: 1; }



/* ===== P7 � Carrousel de fond FIXE du hero (accueil) � BOK_HERO_CAROUSEL_V1 ===== */

.bok-hero-carousel { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bok-hero-carousel .swiper,

.bok-hero-carousel .swiper-wrapper,

.bok-hero-carousel .swiper-slide { width: 100%; height: 100%; }

.bok-hero-carousel .swiper-slide { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* Bi-orientation (BOK_HERO_CAROUSEL_V2) : paysage par defaut (desktop/ecran large),

   portrait quand l'ecran est en orientation portrait (mobile). Fallback assure cote PHP. */

.bok-hero-carousel .swiper-slide { background-image: var(--bok-bg-land); }

@media (orientation: portrait) {

	.bok-hero-carousel .swiper-slide { background-image: var(--bok-bg-port); }

}

.bok-hero-veil { position: absolute; inset: 0; background: rgba(0,0,0,.45); }



/* Le contenu (Divi) passe au-dessus du carrousel fixe. */

#page-container { position: relative; z-index: 1; }



/* Fonds transparents pour laisser voir le carrousel derri�re le hero (accueil). */

.home #page-container,

.home #main-content,

.home #et-main-area,

.home .et_pb_section_2,

.home .et_pb_section_3 { background-color: transparent !important; }



/* Header : module menu sans fond (retrait du #fff par defaut Divi) */

.bok-header .et_pb_menu { background-color: transparent !important; }



/* Bouton de soumission newsletter (placeholder) */

.bok-optin-placeholder button.bok-optin-btn { display: block; margin: .9rem auto 0; padding: .8rem 2.2rem; border-radius: 999px; border: 2px solid var(--bok-jaune); background: var(--bok-jaune); color: var(--bok-sombre); font-family: "American Typewriter","Courier New",monospace; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }



/* Countdown : retirer le fond bleu (couleur primaire globale Divi) */

.bok-countdown { background-color: transparent !important; }



/* ===== Accent RDC synchronise au slide de fond (jaune -> turquoise -> rouge, pilote par le JS Swiper) ===== */

:root { --bok-accent: #F7D417; }

.bok-logo, .bok-logo a, .bok-scroll a, .bok-manifesto,

.bok-countdown, .bok-countdown p, .bok-countdown .value, .bok-countdown .et_pb_countdown_timer_amount, .bok-countdown .sep p,

.bok-optin-placeholder input { color: var(--bok-accent) !important; transition: color 1.2s ease; }

.bok-optin-placeholder input { border-color: var(--bok-accent) !important; transition: color 1.2s ease, border-color 1.2s ease; }

.bok-optin-btn { background: var(--bok-accent) !important; border-color: var(--bok-accent) !important; color: var(--bok-sombre) !important; transition: background 1.2s ease, border-color 1.2s ease; }



/* ===== Page Mentions legales (texte clair sur fond noir) ===== */

.bok-mentions-text, .bok-mentions-text p, .bok-mentions-text li { color: #e6e6e6; }

.bok-mentions-text h1 { color: #ffffff; }

.bok-mentions-text h2 { color: #ffffff; margin-top: 1.6em; }

.bok-mentions-text a { color: var(--bok-jaune); }



/* ===== Bandeau cookies (Complianz) � style du site (fond sombre + jaune RDC, pilules) ===== */

.cmplz-cookiebanner {

  background: var(--bok-sombre) !important; color: #e6e6e6 !important;

  border: 2px solid var(--bok-jaune) !important; border-radius: 14px !important;

  font-family: "American Typewriter", "Courier New", monospace !important;

  box-shadow: 0 10px 40px rgba(0,0,0,.55) !important;

}

.cmplz-cookiebanner .cmplz-title { color: var(--bok-jaune) !important; font-family: "American Typewriter","Courier New",monospace !important; }

.cmplz-cookiebanner .cmplz-body, .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-category, .cmplz-cookiebanner p, .cmplz-cookiebanner label { color: #e6e6e6 !important; }

.cmplz-cookiebanner a, .cmplz-cookiebanner .cmplz-links a { color: var(--bok-jaune) !important; }

.cmplz-cookiebanner .cmplz-divider { border-color: rgba(247,212,23,.25) !important; }

.cmplz-cookiebanner .cmplz-close { color: var(--bok-jaune) !important; }

/* Boutons : pilules */

.cmplz-cookiebanner .cmplz-btn {

  border-radius: 999px !important; border: 2px solid var(--bok-jaune) !important;

  font-family: "American Typewriter","Courier New",monospace !important;

  text-transform: uppercase !important; letter-spacing: .04em !important; transition: opacity .2s ease !important;

}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--bok-jaune) !important; color: var(--bok-sombre) !important; }

.cmplz-cookiebanner .cmplz-btn.cmplz-deny,

.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,

.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,

.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { background: transparent !important; color: var(--bok-jaune) !important; }

.cmplz-cookiebanner .cmplz-btn:hover { opacity: .82 !important; }

/* Toggles categories : accent jaune */

.cmplz-cookiebanner input:checked + .cmplz-slider, .cmplz-cookiebanner .cmplz-slider { }



/* ===== Page Politique de cookies (fond noir, texte clair, sans sidebar) ===== */

body.page-id-46, body.page-id-46 #page-container, body.page-id-46 #main-content { background-color: #000 !important; }

body.page-id-46 #main-content { padding-top: 110px; }

body.page-id-46, body.page-id-46 p, body.page-id-46 li, body.page-id-46 td, body.page-id-46 th, body.page-id-46 .entry-content, body.page-id-46 .cmplz-document { color: #e6e6e6 !important; }

body.page-id-46 h1, body.page-id-46 h2, body.page-id-46 h3, body.page-id-46 .entry-title { color: #ffffff !important; }

body.page-id-46 a { color: var(--bok-jaune) !important; }

body.page-id-46 table, body.page-id-46 td, body.page-id-46 th { border-color: rgba(255,255,255,.15) !important; }



/* Document Complianz (page cookies) : pleine largeur + marge basse (decoller du footer) */

#cmplz-document { max-width: none !important; margin-bottom: 80px !important; }



/* ===== Corrections mobile (header 1 ligne + etoile a droite + countdown 1 ligne) ===== */

@media (max-width: 767px) {

  .bok-header .et_pb_row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; }

  .bok-header .et_pb_column { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin: 0 !important; }

  /* Etoile completement a droite */

  .bok-header .et_pb_column:last-child { display: flex !important; justify-content: flex-end !important; }

  .bok-star-menu, .bok-star-menu .et_pb_menu_inner_container, .bok-star-menu .et_pb_menu__wrap { display: flex !important; justify-content: flex-end !important; width: 100% !important; }

  .bok-star-menu .et_mobile_nav_menu { margin-left: auto !important; }

  /* Countdown sur une seule ligne, plus petit */

  .bok-countdown .et_pb_countdown_timer_container { white-space: nowrap !important; }

  .bok-countdown .section { margin: 0 .04rem !important; }

}



/* Header : logo + etoile alignes verticalement */

.bok-header .et_pb_row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; }

.bok-header .et_pb_column { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin: 0 !important; }

.bok-header .et_pb_column:last-child { display: flex !important; justify-content: flex-end !important; }

.bok-star-menu, .bok-star-menu .et_pb_menu_inner_container, .bok-star-menu .et_pb_menu__wrap { display: flex !important; justify-content: flex-end !important; width: 100% !important; }

.bok-star-menu .et_mobile_nav_menu { margin-left: auto !important; }



/* Fond de base noir (anti-flash blanc au scroll rapide mobile / overscroll sous le carrousel fixe) */

html, body { background-color: #000 !important; }





/* D�grad� de lisibilit� du manifesto (section S2 = capture email + manifesto) : noir vertical .5 -> .9 */

.home .et_pb_section:has(.bok-optin-btn) { position: relative; }

.home .et_pb_section:has(.bok-optin-btn)::before {

  content: ""; position: absolute; inset: 0;

  pointer-events: none; z-index: 0;

}

.home .et_pb_section:has(.bok-optin-btn) > .et_pb_row,

.home .et_pb_section:has(.bok-optin-btn) > * { position: relative; z-index: 1; }



/* ===== Countdown : fentes fixes en vw (fit garanti 4 groupes + zero a-coup) 2026-07-02 ===== */

.home .bok-countdown .et_pb_countdown_timer_container { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; justify-content: center !important; align-items: baseline !important; gap: 0 !important; margin: 0 auto !important; width: 100% !important; }

.home .bok-countdown .section.values { flex: 0 0 auto !important; width: 20vw !important; min-width: 20vw !important; max-width: 20vw !important; overflow: visible !important; }

.home .bok-countdown .section.values .value { width: 100% !important; min-width: 0 !important; max-width: none !important; text-align: center !important; white-space: nowrap !important; font-size: clamp(30px, 7.5vw, 170px) !important; line-height: 1 !important; }

.home .bok-countdown .sep.section { flex: 0 0 auto !important; width: 4vw !important; min-width: 4vw !important; max-width: 4vw !important; text-align: center !important; }

.home .bok-countdown .sep.section p { font-size: clamp(24px, 6vw, 130px) !important; line-height: 1 !important; margin: 0 !important; }



/* ===== Retours #2 (02/07) : centrage desktop + tailles mobile ===== */

@media (max-width: 767px){

  .home .bok-countdown .et_pb_countdown_timer_container > .section.values .value { font-size: clamp(48px, 20vw, 120px) !important; line-height: 1 !important; }

  .home .bok-countdown .label { font-size: clamp(14px, 4vw, 22px) !important; }

}

@media (min-width: 768px){

  .home .bok-countdown { text-align: center !important; }

  .home .bok-countdown .et_pb_countdown_timer_container { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }

  /* descendre le countdown pour un meilleur centrage vertical optique (tablette + desktop) */

  .home .bok-s1 .bok-countdown { margin-top: 15vh !important; }

}



/* ===== Countdown mobile : 2 lignes (jours:heures / minutes:secondes) =====

   On ne masque QUE le separateur heures<->minutes (4e enfant du conteneur) ;

   les deux-points jours:heures et minutes:secondes restent visibles. ===== */

@media (max-width: 767px){

  .home .bok-countdown .et_pb_countdown_timer_container { flex-wrap: wrap !important; white-space: normal !important; row-gap: 2vw !important; align-items: baseline !important; }

  .home .bok-countdown .et_pb_countdown_timer_container > .section.values { flex: 0 0 42% !important; width: 42% !important; min-width: 0 !important; max-width: 42% !important; }

  .home .bok-countdown .et_pb_countdown_timer_container > .sep.section { flex: 0 0 14% !important; width: 14% !important; min-width: 0 !important; max-width: 14% !important; display: block !important; }

  .home .bok-countdown .et_pb_countdown_timer_container > .sep.section p { font-size: clamp(44px, 15vw, 100px) !important; line-height: 1 !important; }

  /* le separateur heures:minutes force le retour a la ligne et disparait */

  .home .bok-countdown .et_pb_countdown_timer_container > .sep.section:nth-child(4) { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; }

}



/* ===== Countdown mobile : libelles en toutes lettres (Divi affiche l'abrege J/H/Min/Sec) =====

   On masque le texte natif (font-size:0) et on injecte le mot complet en ::after,

   insensible au basculement short/full de Divi. ===== */

@media (max-width: 767px){

  .home .bok-countdown .et_pb_countdown_timer_container .section p.label { display: block !important; font-size: 0 !important; margin-top: .35rem !important; }

  .home .bok-countdown .et_pb_countdown_timer_container .section p.label::after { font-size: clamp(13px, 3.6vw, 18px) !important; line-height: 1.1 !important; font-family: "Reservoir Grunge", Impact, sans-serif !important; letter-spacing: .02em; }

  .home .bok-countdown .et_pb_countdown_timer_container .days    p.label::after { content: "Jour(s)"; }

  .home .bok-countdown .et_pb_countdown_timer_container .hours   p.label::after { content: "Heure(s)"; }

  .home .bok-countdown .et_pb_countdown_timer_container .minutes p.label::after { content: "Minute(s)"; }

  .home .bok-countdown .et_pb_countdown_timer_container .seconds p.label::after { content: "Seconde(s)"; }

}



/* ===== Fondu du voile : transparent en haut -> fonce en bas ===== */

.home .et_pb_section:has(.bok-optin-btn) { position: relative; }

.home .et_pb_section:has(.bok-optin-btn)::before {

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.70) 45%, rgba(0, 0, 0, 0.9) 100%) !important;

}



/* ===== Message de retour du formulaire newsletter (succes / erreur) ===== */

.bok-optin-msg {

  color: var(--bok-accent, var(--bok-jaune)); /* suit la couleur dynamique du slide */

  transition: color 1.2s ease;

  font-weight: 700;

  font-size: 18px;

  line-height: 1.3;

  margin: .7rem 0 0;

  min-height: 1.3em;

  font-family: "American Typewriter", "Courier New", monospace;

}



/* ===== P7 - Retours Erick : CTA apres le manifesto + fondu de lecture du manifesto (BOK_ERICK_RETOURS_V5) 2026-07-02 ===== */

/* 1) Repositionnement S2 : manifesto AVANT, capture email + CTA .bok-optin-btn APRES (fin de section). */

.home .bok-s2 .et_pb_column { display: flex !important; flex-direction: column !important; }

.home .bok-s2 .et_pb_column > .et_pb_module { width: 100% !important; }

.home .bok-s2 .bok-manifesto { order: 1; }

.home .bok-s2 .et_pb_code { order: 2; margin-top: 1.6rem; }

/* 2) Fondu de lecture : opacite du manifesto pilotee par le JS scroll-listener (BOK_ERICK_RETOURS_V5). */

.home .bok-manifesto { will-change: opacity; }

@media (prefers-reduced-motion: reduce) { .home .bok-manifesto { opacity: 1 !important; } }



/* ===== Retours Erick V6 (02/07) : manifesto - fondu sous le header fixe, MOBILE only (BOK_ERICK_RETOURS_V6) =====

   Masque le HAUT du texte a mesure qu'il glisse sous le header (logo+etoile) : mask-image ancre a la hauteur

   du header en coordonnees viewport, pilote au scroll par le JS V6 (functions.php). Le voile S2 (::before) reste

   inchange. Desktop non concerne (fondu de lecture V5 conserve ; V6 prime sur V5 en <=767px via opacity:1). ===== */

@media (max-width: 767px){

  .home .bok-manifesto { will-change: -webkit-mask-image, mask-image, opacity; }

}

@media (prefers-reduced-motion: reduce){

  .home .bok-manifesto { -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; }

}



/* ===== Révisions post-feedback Erick — 2026-07-06 (photos JD + Courier Prime menu + crédit) ===== */

@font-face { font-family:"Courier Prime"; src:url("fonts/courier-prime-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

@font-face { font-family:"Courier Prime"; src:url("fonts/courier-prime-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{ --bok-menu-weight:700; } /* Erick 2026-07-06 : menu en gras (validé) */

/* Menu (overlay ouvert) harmonisé en Courier Prime — corrige le « é » de « Mentions Légales » qui sortait de la police */

.bok-star-menu .mobile_nav.opened .et_mobile_menu a { font-family:"Courier Prime","Courier New",monospace !important; font-weight:var(--bok-menu-weight, 400) !important; }

/* Crédit photo discret, bas du hero */

.bok-hero-credit { position:fixed; left:0; right:0; bottom:.6rem; z-index:5; text-align:center; font-family:"Courier Prime","Courier New",monospace; font-size:.72rem; letter-spacing:.03em; color:rgba(255,255,255,.72); text-shadow:0 1px 3px rgba(0,0,0,.55); pointer-events:none; }