/* === VideosKTous — thème enrichi (ResourceSpace 10.x) ===
   Palette Brésil  : #009B3A (vert), #FFDF00 (jaune), #002776 (bleu)
   Objectif        : bandeau + tuiles featured + pastilles + cartes + petits pictos instruments/styles
*/

:root{
  --kt-green:#009B3A;
  --kt-yellow:#FFDF00;
  --kt-blue:#002776;
  --kt-ink:#0b0b0b;
  --kt-muted:#667085;
  --card-border:#eef2f4;
  --pill-bg:#f4f8f5;
  --pill-bd:#e6efe7;
}

/* ===== Bandeau ===== */
#Header, .Header, .BasicHeader, .UICHeader{
  background: linear-gradient(90deg,var(--kt-green),var(--kt-blue)) !important;
  border-bottom: 4px solid var(--kt-yellow) !important;
}
#Header .Logo img{ max-height:56px; padding:8px 0 }
#Header .HeaderTitle, .Header .ApplicationName{ font-weight:800; letter-spacing:.3px }

/* ===== Boutons ===== */
.Button, .ui-button.ui-state-default, input[type=submit].btn, .BasicButton{
  background: var(--kt-green)!important; border-color:var(--kt-green)!important; color:#fff!important;
  border-radius:12px!important; padding:.55rem .9rem!important; font-weight:600!important;
}
.Button:hover, .ui-button:hover, input[type=submit].btn:hover{ filter:brightness(1.06) }
.Button:focus-visible{ outline:3px solid rgba(0,155,58,.35) }

/* ===== Liens ===== */
a, .LinkNormal{ color:var(--kt-blue)!important }
a:hover{ color:#0646c0!important }

/* ===== Pastilles (tags/keywords/filters) ===== */
.tag, .keyword, .SelectedFilter, .ResourceTypeIcon, .rs-tag{
  background:var(--pill-bg)!important; border:1px solid var(--pill-bd)!important; color:#172026!important;
  border-radius:999px!important; padding:.25rem .5rem!important; display:inline-flex; align-items:center; gap:.25rem;
}
.tag .fa, .keyword .fa{ opacity:.8 }

/* Coloration douce par mots-clés fréquents (si présents dans l’attribut title/texte) */
.tag[title*="Instrument"], .keyword[title*="Instrument"]{ background:#e9f7ef!important; border-color:#cfeedd!important }
.tag[title*="Style"], .keyword[title*="Style"]{ background:#fff8db!important; border-color:#f5e7a8!important }

/* ===== Cartes / vignettes / panels ===== */
.ResourcePanel, .ResourcePanelSmall, .ResourcePanelShell, .RecordBox, .CollectionPanelShell, .ListItem{
  border-radius:16px!important; border:1px solid var(--card-border)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
}
.ResourcePanel .ResourceTitle, .RecordPanel .ResourceTitle{ font-weight:700 }

/* ===== Widgets d'accueil ===== */
.HomePanel{ border-radius:18px!important; overflow:hidden; }
.HomePanel .Title{ color:var(--kt-ink)!important; font-weight:800; }
.HomePanel .HomePanelIcon img{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.15)) }

/* ===== Tuiles Featured collections (par titres) ===== */
.HomePanelCollections .RecordBox a,
.FeaturedSimpleList a{
  display:block; position:relative; border-radius:16px;
  background:linear-gradient(120deg, rgba(0,155,58,.92), rgba(0,39,118,.92)); color:#fff!important;
  padding:18px; min-height:120px; text-decoration:none!important; transition:transform .08s ease;
}
.HomePanelCollections .RecordBox a:hover,
.FeaturedSimpleList a:hover{ transform:translateY(-1px) }
.HomePanelCollections .RecordBox a .CollectionPanelTitle,
.FeaturedSimpleList a .Title{ color:#fff!important; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.35) }

/* ===== Pictos instruments/styles (selon titre de la collection) ===== */
:root{ --tile-emoji-opacity:.18; --tile-emoji-size:96px }
@supports (background: paint(something)) { :root{ --tile-emoji-size:104px } }

.tile-emoji{ background-repeat:no-repeat; background-position: 95% 24%; background-size: var(--tile-emoji-size) }

/* Instruments */
.HomePanelCollections a[title*="Caixa"], .FeaturedSimpleList a[title*="Caixa"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🥁</text></svg>") }
.HomePanelCollections a[title*="Surdo"], .FeaturedSimpleList a[title*="Surdo"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🪘</text></svg>") }
.HomePanelCollections a[title*="Tamborim"], .FeaturedSimpleList a[title*="Tamborim"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🎶</text></svg>") }
.HomePanelCollections a[title*="Repinique"], .FeaturedSimpleList a[title*="Repinique"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🥁</text></svg>") }
.HomePanelCollections a[title*="Chocalho"], .FeaturedSimpleList a[title*="Chocalho"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>✨</text></svg>") }
.HomePanelCollections a[title*="Ganza"], .FeaturedSimpleList a[title*="Ganza"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🎵</text></svg>") }
.HomePanelCollections a[title*="Agogô"], .FeaturedSimpleList a[title*="Agogô"], .FeaturedSimpleList a[title*="Agogo"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🔔</text></svg>") }
.HomePanelCollections a[title*="Contra"], .FeaturedSimpleList a[title*="Contra"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>⛓️</text></svg>") }
.HomePanelCollections a[title*="Cortador"], .FeaturedSimpleList a[title*="Cortador"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>✂️</text></svg>") }

/* Styles/chansons */
.HomePanelCollections a[title*="Samba"], .FeaturedSimpleList a[title*="Samba"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🎺</text></svg>") }
.HomePanelCollections a[title*="Samba-reggae"], .FeaturedSimpleList a[title*="Samba-reggae"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🎷</text></svg>") }
.HomePanelCollections a[title*="Funk"], .FeaturedSimpleList a[title*="Funk"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🎚️</text></svg>") }
.HomePanelCollections a[title*="Maracatu"], .FeaturedSimpleList a[title*="Maracatu"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🪘</text></svg>") }
.HomePanelCollections a[title*="Afoxé"], .FeaturedSimpleList a[title*="Afoxé"], .FeaturedSimpleList a[title*="Afoxe"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🌀</text></svg>") }
.HomePanelCollections a[title*="Partido"], .FeaturedSimpleList a[title*="Partido"]{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='10' y='84' font-size='90' opacity='.18'>🥁</text></svg>") }

/* ===== Formulaires / filtres (légers) ===== */
input[type="text"], input[type="search"], select, textarea{
  border-radius:10px; border:1px solid #dfe3e6; padding:.5rem .6rem;
}
input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus{
  outline:3px solid rgba(0,39,118,.18)
}

/* ===== Footer ===== */
#Footer{ color:var(--kt-muted) }

/* ===== Petits écrans ===== */
@media (max-width: 768px){
  #Header .Logo img{ max-height:48px }
  .HomePanelCollections .RecordBox a, .FeaturedSimpleList a{ min-height:100px; padding:14px }
}

/* === OVERRIDE: Header blanc lisible === */
#Header, .Header, .BasicHeader, .UICHeader{
  background:#fff !important;
  border-bottom:1px solid #e5e7eb !important; /* léger trait gris */
}
#Header .HeaderTitle, .Header .ApplicationName,
#Header a, .Header a{
  color:#0b0b0b !important;           /* texte foncé */
  text-shadow:none !important;
}
#Header .Logo img{ max-height:56px; padding:8px 0; filter:none !important }