/*
Theme Name: Vizela
Theme URI: https://vizela.fr
Author: Trait Graphique
Author URI: https://trait-graphique.com
Description: Thème WordPress sur-mesure et léger pour Vizela — l'outil de suivi vidéo pour équipes commerciales (medtech / pharma). Une seule page, sans page builder.
Version: 3.2.0
Requires PHP: 7.4
Text Domain: vizela
*/

/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  --paper:        #FBF9F5;
  --surface:      #FFFFFF;
  --ink:          #16232E;
  --ink-muted:    #4E5D67;
  --ink-faint:    #8B959B;
  --line:         #E7E1D6;

  /* Bleu marine et rose de la charte Vizela (extraits du logo) */
  --signal:       #1C4A6E;
  --signal-deep:  #123249;
  --signal-tint:  #E3EAF0;

  /* Vert doux de la charte — réservé au statut "terminé / succès",
     pour le distinguer du bleu de marque utilisé pour les CTA */
  --success:      #4B6350;
  --success-tint: #7d8f35;

  --alert:        #C97A2B;
  --alert-tint:   #F7EADB;

  /* Rose et beige de la charte — réservés aux ruptures de section
     pleine largeur (voir .section-tint-*) */
  --rose:         #F3D3CF;
  --beige:        #E8D9C9;
  --sauge:        #DEE0D6;

  /* Accent chaud — CTA, liens d'action, repères numérotés, eyebrows */
  --accent:       #F05252;
  --accent-deep:  #CC4646;

  --font-display: 'Plus Jakarta Sans', var(--font-body);
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --wrap: 1160px;
  --radius: 18px;
  --radius-pill: 999px;
  --dur: 0.5s;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: 0s; }
}

/* ============================================================
   1. RESET / BASE
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--signal);
}

h1{ font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; }

p{ margin: 0 0 1em; color: var(--ink-muted); }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.9em;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
}
.skip-link:focus{ left: 12px; top: 12px; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover{ background: var(--accent-deep); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  font-size: 0.9rem;
  padding: 0.7em 1.2em;
}
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal-deep); }

.text-link{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,249,245,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.wordmark{
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark.small{ font-size: 1.1rem; display: block; margin-bottom: 10px; }

/* Logo choisi dans Personnaliser → Identité du site (remplace le mot
   "VIZELA" en texte) — même gabarit pour header et footer, la classe
   "small" ajuste juste la hauteur. */
.wordmark-logo{ display: inline-block; }
.wordmark-logo.small{ display: block; margin-bottom: 10px; }
.wordmark-logo img{ display: block; height: 50px; width: auto; margin-top: -20px; }
.wordmark-logo.small img{ height: 35px; margin-top: 0; }

.site-nav{
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav li{ list-style: none; }
.site-nav a:not(.btn){
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.site-nav a:not(.btn):hover{ color: var(--ink); }

/* Nav du header dédié à l'espace commercial (header-dashboard.php) —
   volontairement distincte de .site-nav : pas de sens à la cacher
   derrière un bouton hamburger sur mobile pour seulement 2 liens,
   elle passe simplement à la ligne. */
.dashboard-nav{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard-nav li{ list-style: none; }
.dashboard-nav a:not(.btn){
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.dashboard-nav a:not(.btn):hover{ color: var(--ink); }

.nav-account{ position: relative; }
button.nav-login{
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
button.nav-login:hover{ color: var(--ink); }

.nav-login-panel{
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(18,24,31,0.3);
  padding: 20px;
  z-index: 60;
}
.nav-login-panel form{
  display: grid;
  gap: 12px;
}
.nav-login-panel label{
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.nav-login-panel input{
  padding: 0.55em 0.7em;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-body);
}
.nav-login-panel .btn{ font-size: 0.9rem; padding: 0.6em 1em; margin-top: 4px; }

.nav-login-panel .account-links{
  display: grid;
  gap: 12px;
}
.nav-login-panel .account-links a{
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.nav-login-panel .account-links a:hover{ color: var(--ink); }

@media (max-width: 800px){
  .nav-login-panel{
    position: static;
    width: auto;
    box-shadow: none;
    margin-top: 8px;
  }
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span{
  display: block; height: 2px; width: 100%;
  background: var(--ink);
}

@media (max-width: 800px){
  .nav-toggle{ display: flex; }
  .site-nav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 22px;
    display: none;
  }
  .site-nav.is-open{ display: flex; }
  .site-nav a:not(.btn){ padding: 10px 0; width: 100%; }
  .site-nav .btn{ margin-top: 10px; }
}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{
  position: relative;
  padding: 84px 0 96px;
  background-image: url('assets/img/bg-hero.svg');
  background-repeat: no-repeat;
  background-position: -30px 10px;
  background-size: cover;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
}

.hero-copy p.lede{
  font-size: 1.1rem;
  max-width: 46ch;
}
.hero-cta{
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* --- signature element: the threshold gauge --- */
.gauge-card{
  background: var(--surface);
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 18px 40px -22px rgba(18,24,31,0.25);
}
.gauge-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.gauge-pct{
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--signal-deep);
}
.gauge-track{
  position: relative;
  height: 10px;
  background: var(--signal-tint);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.gauge-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--signal);
  border-radius: 6px;
  transition: width var(--dur) cubic-bezier(.4,0,.2,1), background-color var(--dur) ease;
}
.gauge-fill.is-alert{ background: var(--alert); }

.gauge-ticks{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 20px;
}
.gauge-ticks span{ position: relative; padding-top: 8px; }
.gauge-ticks span.is-current{ color: var(--signal-deep); font-weight: 600; }
.gauge-ticks span.is-current.is-alert{ color: var(--alert); }

.gauge-log{
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  min-height: 78px;
}
.gauge-log li{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-muted);
  display: flex;
  gap: 10px;
  padding: 3px 0;
}
.gauge-log li .t{ color: var(--ink-faint); flex-shrink: 0; }
.gauge-log li.is-alert .t, .gauge-log li.is-alert .m{ color: var(--alert); font-weight: 600; }

.gauge-caption{
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ============================================================
   5. SECTIONS (generic)
   ============================================================ */
section{ padding: 88px 0; }
section + section{ border-top: 1px solid var(--line); }

/* ---- ruptures de section pleine largeur, palette de marque ----
   Posées directement sur la balise <section> dans front-page.php.
   La bordure de séparation générique (ci-dessus) s'efface au contact
   d'un bloc teinté : la couleur fait déjà office de rupture. */
.section-tint-rose{ background-color: var(--rose); }
.section-tint-beige{ background-color: var(--beige); }
.section-tint-sauge{ background-color: var(--sauge); }
.section-tint-navy{ background-color: var(--signal-deep); color: rgba(255,255,255,0.92); }
.section-tint-rose,
.section-tint-beige,
.section-tint-sauge,
.section-tint-navy,
.section-tint-rose + section,
.section-tint-beige + section,
.section-tint-sauge + section,
.section-tint-navy + section{
  border-top: none;
}

/* Fond marine : les titres et le texte courant héritent du sombre
   (voir la règle h1/h2/h3 plus haut, en bleu signal par défaut), il
   faut donc les repasser en clair ici. Les blocs blancs posés dessus
   (ex. le formulaire de contact) gardent leurs propres couleurs de
   texte déjà déclarées explicitement, donc ne sont pas affectés. */
.section-tint-navy h1,
.section-tint-navy h2,
.section-tint-navy h3{ color: var(--rose); }
.section-tint-navy p{ color: rgba(255,255,255,0.78); }
.section-tint-navy .sub{ color: rgba(255,255,255,0.55); }
/* Sur fond marine (le hero), un contour marine serait invisible —
   contour clair et discret à la place. */
.section-tint-navy .gauge-card{ border-color: rgba(255,255,255,0.22); }

.section-head{ max-width: 60ch; margin-bottom: 48px; }
.section-head p{ font-size: 1.05rem; }

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}
section#rapport {
    border-top: 2px solid var(--signal);
    margin-top: -2px;
}
/* ---- triptyque VISION / VISUEL / VISIBILITÉ ---- */
.triptych{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.triptych-card{
  background: var(--surface);
  padding: 34px 30px;
}
.triptych-card .eyebrow{ margin-bottom: 1.1em; }
@media (max-width: 800px){
  .triptych{ grid-template-columns: 1fr; }
}

/* ---- comment ça marche : steps ---- */
#comment-ca-marche{
  background-image: url('assets/img/bg-rose.svg');
  background-repeat: no-repeat;
    background-position: -50px 30px;
    background-size: 100% auto;
    background-blend-mode: luminosity;
}
.steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}
@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr; }
}
/* En attendant un passage dédié au responsive de ces illustrations :
   pas de recadrage hasardeux sur petit écran, la couleur de fond
   (section-tint-*) suffit toute seule. */
@media (max-width: 700px){
  #comment-ca-marche,
  .cta-final{ background-image: none; }
}
@media (max-width: 700px){
	.hero{background-position:-800px 0px;}
}
.step-num{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.8em;
}
.step h3{ margin-bottom: 0.4em; }
.step p{ font-size: 0.95rem; margin-bottom: 0; }

.video-frame{
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.video-frame .placeholder{
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 24px;
}
.video-frame iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---- rapport / back-office ---- */
.report-table-wrap{
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
table.report-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.report-table th, .report-table td{
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.report-table th{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 500;
  background: var(--paper);
}
.report-table tr:last-child td{ border-bottom: none; }
.report-table td.num{ font-family: var(--font-mono); }

.status-pill{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.status-pill.done{ background: var(--success-tint); color: var(--success); }
.status-pill.alert{ background: var(--alert-tint); color: var(--alert); }
.status-pill.progress{ background: #EDEFEC; color: var(--ink-muted); }
.status-pill.new{ background: #EDEFEC; color: var(--ink-faint); }

/* ============================================================
   6b. Démonstration à deux volets (prospect / commercial)
   ============================================================ */
.dual-demo{ margin-top: 56px; }
.dual-demo-head{ max-width: 60ch; margin-bottom: 24px; }
.dual-demo-head h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0;
}

.dual-demo-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px){
  .dual-demo-grid{ grid-template-columns: 1fr; }
}

/* Illustrations posées derrière les panneaux, qui débordent par le
   bas — masquées sur mobile en attendant un passage dédié au
   responsive (comme les fonds de section, voir plus bas). */
.dual-demo-illustration{
  position: absolute;
  bottom: -134px;
  z-index: 2;
  width: 400px;
  height: auto;
  pointer-events: none;
}
.dual-demo-illustration.is-left{ left: -20px; }
.dual-demo-illustration.is-right{ right: -20px; }
@media (max-width: 900px){
  .dual-demo-illustration{ display: none; }
}

.dual-demo-panel{
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  padding: 22px;
}
.dual-demo-label{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.mini-player-frame{
	/* ADDON */
	position: relative;
	overflow: hidden;
	/* END ADDON */
  aspect-ratio: 16 / 9;
  background: var(--signal);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
/* ADDON */
.mini-player-wireframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* padding: 14%;*/
}
.mini-play{ position: relative; }/* END ADDON */

.mini-play{ color: #fff; font-size: 1.3rem; opacity: 0.85; }

.mini-player-bar{
  height: 6px;
  background: var(--signal-tint);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.mini-player-fill{
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width var(--dur) ease;
}
.mini-player-pct{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.mini-report-table{ width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mini-report-table td{ padding: 6px 0; }
.mini-report-table td:first-child{ color: var(--ink-muted); }

.dual-demo-caption{
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ---- FAQ ---- */
.faq-list{ max-width: 74ch; }
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-q{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.faq-q .icon{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--signal);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item[data-open="true"] .faq-q .icon{ transform: rotate(45deg); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a p{ padding-bottom: 20px; margin: 0; max-width: 66ch; }

/* ---- CTA final ---- */
.cta-final{
  text-align: center;
  background-image: url('assets/img/bg-prefooter.svg');
  background-repeat: no-repeat;
  background-position: center 50px;
  background-size: cover;
}
.cta-final .section-head{ margin: 0 auto 30px; text-align: center; }
.cta-final .btn{ font-size: 1rem; padding: 1em 2em; }
.cta-final .sub{ margin-top: 18px; font-size: 0.9rem; color: var(--ink-faint); }

.contact-form{
  max-width: 440px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.contact-form label{
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.contact-form input,
.contact-form textarea{
  padding: 0.6em 0.8em;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-body);
  color: var(--ink);
  resize: vertical;
}
.contact-form .btn{ justify-self: start; }

.contact-feedback{
  max-width: 440px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.contact-feedback-ok{ background: var(--success-tint); color: var(--success); border: 1px solid var(--success); }
.contact-feedback-error{ background: var(--alert-tint); color: var(--alert); border: 1px solid var(--alert); }

/* Champ piège anti-spam : hors écran plutôt que display:none, plus
   robuste face aux robots qui évitent les champs manifestement
   cachés. Invisible aussi pour les lecteurs d'écran (aria-hidden sur
   le conteneur + tabindex=-1 sur le champ dans le formulaire). */
.vizela-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   6. FOOTER
   ============================================================ */
.site-footer{
  padding: 44px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-inner p{ margin: 0; font-size: 0.85rem; color: var(--ink-faint); }
.footer-links{ display: flex; gap: 18px; }
.footer-links li{ list-style: none; }
.footer-links a{ font-size: 0.85rem; color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover{ color: var(--ink); }

/* ============================================================
   7. 404
   ============================================================ */
.not-found{
  text-align: center;
  padding: 140px 0 160px;
}
.not-found h1{ margin-bottom: 0.5em; }
.not-found p{
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.not-found .btn{ margin-top: 8px; }

/* ============================================================
   8. Pages génériques (page.php)
   ============================================================ */
.page-content h1{ margin-bottom: 0.8em; }

/* ============================================================
   9. Youtube
   ============================================================ */
#player-control-overlay .player-controls-background-container {
    /* display: none; */
	opacity: 0.2 !important;
}
.ytmVideoInfoHost {
    display: none !important;
}